如何使用JavaScript而不是提交按钮发布ASP.NET MVC Ajax表单

Question

我有一个简单的表单创建使用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扩展时,通过标记添加了单击处理程序.您可以尝试使用$('form').trigger('submit')或者在最坏的情况下,让锚点上的click处理程序在表单中创建一个隐藏的提交按钮并单击它.甚至使用纯jQuery创建自己的ajax提交(这可能就是我要做的).

最后,你应该意识到,通过替换提交按钮,你将完全打破这个没有启用javascript的人.解决这个问题的方法是使用noscript标签隐藏一个按钮,并处理服务器上的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表单提交以重新加载数据网格:

<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控制器返回使用提供的Model呈现表的PartialView

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

Answer 3

不幸的是,触发onsubmit或提交事件并不适用于所有浏览器.

• 适用于IE和Chrome:#('form#ajaxForm')触发器('onsubmit');
• 适用于Firefox和Safari:#('form#ajaxForm')触发器('submit');

此外,如果您在Chrome或IE中触发("提交"),则会导致整个页面被发布而不是执行AJAX行为.

适用于所有浏览器的是删除onsubmit事件行为并只在表单上调用submit().

<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> 
<% } %>

此外,链接不必包含在表单中,以使其工作.