如何使用JavaScript来发布ASP.NET MVC Ajax的形式，而不是提交按钮(How t

我用一个简单的表单创建Ajax.BeginForm ：

<% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
     new AjaxOptions
     {
       UpdateTargetId = "DescriptionDiv",
       HttpMethod = "post"
     },new {id ='AjaxForm' })) {%>
Description:
<%= Html.TextBox("Description", Model.Description) %><br />
<input type="submit" value="save" />
<% }%>

所述控制器被连接好，并返回更新的局部视图DescriptionDiv 。 而这一切能够整齐。

现在，我想能够提交这份表格，而不必（上一个链接或图片或任何上通过CLIK）提交按钮。 不幸的是这个小jQuery的片段不会做的工作：

$('form#AjaxForm').submit();

它提交表单，但不会（我想这并不奇怪）常规后回，而不是一个Ajax之一。

为简单起见以上jQuery是有线了这样的：

<a href="#" onclick="$('form#AjaxForm').submit(); return false;">submit</a>

该表单的onsubmit使用Sys.Mvc.AsyncForm.handleSubmit（），但jQuery的提交似乎是绕过这一点。

PS。 我要寻找一个在这个特定的方法解决。 我知道如何使用正常的形态和使用AJAX + jQuery的张贴，以达到相同。 我感兴趣的，虽然这个特别的解决方案。

Answer 1:

我会假设你周围没有选择报价只是一个抄写错误，但你无论如何都应该检查一下。 另外，我不明白，你实际上是给予形式的ID。 通常你用htmlAttributes参数做到这一点。 我没有看到你使用的是有它的签名。 此外，虽然，如果表单提交可言，这可能是抄写错误。

如果选择和ID都没有问题，我怀疑这可能是因为单击处理通过添加标记，当您使用的Ajax BeginForm扩展。 您可以尝试使用$（“形式”）。触发器（“提交”），或在最坏的情况下，对锚单击处理创建的形式隐藏提交按钮，单击它。 甚至使用纯jQuery的创建自己的ajax提交（这可能是我会做什么）。

最后，你应该认识到，通过更换提交按钮，你将完全打破了这种不具有启动Javascript谁也人。 解决这个问题的办法就是也可以选择使用脚本标记中隐藏一个按钮，并同时处理AJAX和服务器上非AJAX的职位。

顺便说一句，这是考虑标准的做法，微软没有顶住，通过JavaScript不是通过标记添加的处理程序。 这样可以使你的JavaScript在一个地方组织，所以你可以更容易地看到发生了什么事情的形式。 下面是我会怎么用的触发机制的例子。

  $(function() {
      $('form#ajaxForm').find('a.submit-link').click( function() {
           $('form#ajaxForm').trigger('submit');
      }).show();
  }

<% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
     new AjaxOptions
     {
       UpdateTargetId = "DescriptionDiv",
       HttpMethod = "post"
     }, new { id = "ajaxForm" } )) {%>
   Description:
   <%= Html.TextBox("Description", Model.Description) %><br />
   <a href="#" class="submit-link" style="display: none;">Save</a>
   <noscript>
       <input type="submit" value="Save" />
   </noscript>
<% } %>

Answer 2:

一个简单的例子，在一个下拉列表中的变化触发Ajax表单提交重新加载一个DataGrid：

<div id="pnlSearch">

    <% using (Ajax.BeginForm("UserSearch", "Home", new AjaxOptions { UpdateTargetId = "pnlSearchResults" }, new { id="UserSearchForm" }))
    { %>

        UserType: <%: Html.DropDownList("FilterUserType", Model.UserTypes, "--", new { onchange = "$('#UserSearchForm').trigger('submit');" })%>

    <% } %>

</div>

触发（“的onsubmit”）是关键的东西：它调用MVC已经移植到形式的onsubmit功能。

NB。 所述UserSearchResults控制器使用所提供的模型返回呈现的表的PartialView

<div id="pnlSearchResults">
    <% Html.RenderPartial("UserSearchResults", Model); %>
</div>

Answer 3:

不幸的是触发的onsubmit或提交事件在所有浏览器不会工作。

• 在IE和铬：＃（ '形式＃给ajaxForm'）触发（ '的onsubmit'）;
• 在Firefox和Safari：＃（ '＃形式给ajaxForm'）的触发器（ '提交'）;

另外，如果你触发Chrome或IE（“提交”），它会导致被张贴整个页面，而不是做一个AJAX行为。

什么适用于所有的浏览器是去除onsubmit事件的行为，只是调用提交（）的形式本身 。

<script type="text/javascript">
$(function() {

    $('form#ajaxForm').submit(function(event) { 
        eval($(this).attr('onsubmit')); return false; 
        });

    $('form#ajaxForm').find('a.submit-link').click( function() { 
        $'form#ajaxForm').submit();
        });

  }
</script>
  <% using (Ajax.BeginForm("Update", "Description", new { id = Model.Id },
     new AjaxOptions
     {
       UpdateTargetId = "DescriptionDiv",
       HttpMethod = "post"
     }, new { id = "ajaxForm" } )) {%>
   Description:
   <%= Html.TextBox("Description", Model.Description) %><br />
   <a href="#" class="submit-link">Save</a> 
<% } %>

此外，该链接并没有为了这个工作是包含在表格内。

Answer 4:

我试过几次，以获得Ajax表单提交工作很好，但总是遭到要么完全失败或太多的妥协。 下面是一个使用该页面的一个例子jQuery的表格插件一个MVC页面内更新项目清单（使用部分呈现的控制）作为一个输入框，用户类型：

<div class="searchBar">
    <form action="<%= Url.Action ("SearchByName") %>" method="get" class="searchSubmitForm">
        <label for="projectName">Search:</label>
        <%= Html.TextBox ("projectName") %>
        <input class="submit" type="submit" value="Search" />
    </form>
</div>
<div id="projectList">
    <% Html.RenderPartial ("ProjectList", Model); %>
</div>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#projectName").keyup(function() {
            jQuery(".searchSubmitForm").submit();
        });

        jQuery(".searchSubmitForm").submit(function() {
            var options = {
                target : '#projectList'
            }

            jQuery(this).ajaxSubmit(options);

            return false;
        });

        // We remove the submit button here - good Javascript depreciation technique
        jQuery(".submit").remove();
    });
</script>

并在控制器端：

public ActionResult SearchByName (string projectName)
{
    var service = Factory.GetService<IProjectService> ();
    var result = service.GetProjects (projectName);

    if (Request.IsAjaxRequest ())
        return PartialView ("ProjectList", result);
    else
    {
        TempData["Result"] = result;
        TempData["SearchCriteria"] = projectName;

        return RedirectToAction ("Index");
    }
}

public ActionResult Index ()
{
    IQueryable<Project> projects;
    if (TempData["Result"] != null)
        projects = (IQueryable<Project>)TempData["Result"];
    else
    {
        var service = Factory.GetService<IProjectService> ();
        projects = service.GetProjects ();
    }

    ViewData["projectName"] = TempData["SearchCriteria"];

    return View (projects);
}

Answer 5:

Ajax.BeginForm看起来是一个失败。

使用普通Html.Begin来说，这做的伎俩只是很好：

$('#detailsform').submit(function(e) {
    e.preventDefault();
    $.post($(this).attr("action"), $(this).serialize(), function(r) {
        $("#edit").html(r);
    });
}); 

Answer 6:

请尝试以下方法：

<input type="submit" value="Search" class="search-btn" />
<a href="javascript:;" onclick="$('.search-btn').click();">Go</a>

Answer 7:

而不是使用JavaScript也许你可以试试

<a href="#">

  <input type="submit" value="save" style="background: transparent none; border: 0px none; text-decoration: inherit; color: inherit; cursor: inherit" />

</a>

Answer 8:

只需将普通按钮Ajax.BeginForm球铁QT500和点击查找父窗体和正常提交。 阿贾克斯形式剃刀：

@using (Ajax.BeginForm("AjaxPost", "Home", ajaxOptions))
    {        
        <div class="form-group">
            <div class="col-md-12">

                <button class="btn btn-primary" role="button" type="button" onclick="submitParentForm($(this))">Submit parent from Jquery</button>
            </div>
        </div>
    }

和Javascript：

function submitParentForm(sender) {
    var $formToSubmit = $(sender).closest('form');

    $formToSubmit.submit();
}

文章来源: How to post ASP.NET MVC Ajax form using JavaScript rather than submit button