如何使用JavaScript发布ASP.NET MVC Ajax的形式,而不是提交按钮

问题描述:

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

I have a simple form created using 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 的局部视图。而这一切都整齐地工作。

The controller is wired up and returns a partial view that updates the DescriptionDiv. And it all works neatly.

现在我希望能够提交这份表格,而不必(上一个链接或图片或任何在通过CLIK)提交按钮。不幸的是这个小片段的jQuery没有做这项工作:

Now I would like to be able to submit this form without having the submit button (via a clik on a link or on an image or whatever). Unfortunately this little jQuery snippet does not do the job:

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

它确实提交表单,但不会(我想这并不奇怪)常规后回,而不是一个Ajax之一。

It does submit the form, but does (I suppose not surprisingly) a regular post-back and not an Ajax one.

为了简单起见上面jQuery的是有线起来是这样的:

For the sake of simplicity the above jQuery is wired up like this:

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

该表单的onsubmit使用Sys.Mvc.AsyncForm.handleSubmit(),但jQuery的提交似乎绕开这一点。

The form's onsubmit is using the Sys.Mvc.AsyncForm.handleSubmit() but the jQuery submit seems to be bypassing this.

PS。我期待在这个特殊的方法解决。我知道如何使用正常的形态和使用AJAX + jQuery的张贴,以达到相同的。我感兴趣的是,虽然这个特定的解决方案。

PS. I am looking for a solution in this particular approach. I know how to achieve the same using a normal form and posting it using AJAX+jQuery. I am interested in this particular solution though.

我要假设你的周围缺乏选择的报价仅仅是抄写错误,但你无论如何都应该检查一下。另外,我看不出你实际上是给予形式的ID。通常你用htmlAttributes参数做到这一点。我没有看到你使用有它的签名。再次,虽然,如果窗体在所有提交,这可能是一个转录错误。

I'm going to assume that your lack of quotes around the selector is just a transcription error, but you should check it anyway. Also, I don't see where you are actually giving the form an id. Usually you do this with the htmlAttributes parameter. I don't see you using the signature that has it. Again, though, if the form is submitting at all, this could be a transcription error.

如果选择和身份证都没有,我怀疑这可能是因为该单击处理程序是通过添加标记,当您使用的Ajax BeginForm扩展的问题。您可以尝试使用$('形式')。触发(提交),或在最坏的情况下,对锚单击处理程序创建的形式隐藏的提交按钮,单击它。甚至创造使用纯jQuery的(这可能是我会做什么)。

If the selector and the id aren't the problem I'm suspicious that it might be because the click handler is added via markup when you use the Ajax BeginForm extension. You might try using $('form').trigger('submit') or in the worst case, have the click handler on the anchor create a hidden submit button in the form and click it. Or even create your own ajax submission using pure jQuery (which is probably what I would do).

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

Lastly, you should realize that by replacing the submit button, you're going to totally break this for people who don't have javascript enabled. The way around this is to also have a button hidden using a noscript tag and handle both AJAX and non-AJAX posts on the server.

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

BTW, it's consider standard practice, Microsoft not withstanding, to add the handlers via javascript not via markup. This keeps your javascript organized in one place so you can more easily see what's going on on the form. Here's an example of how I would use the trigger mechanism.

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