如何使用 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.
现在我希望能够在没有提交按钮的情况下提交此表单(通过点击链接或图像或其他方式).不幸的是，这个小小的 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 submit 似乎绕过了这一点.
The form's onsubmit is using the Sys.Mvc.AsyncForm.handleSubmit() but the jQuery submit seems to be bypassing this.
附注.我正在寻找这种特定方法的解决方案.我知道如何使用普通表单实现相同的功能并使用 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.
如果选择器和 id 不是问题，我怀疑这可能是因为在您使用 Ajax BeginForm 扩展时通过标记添加了点击处理程序.您可以尝试使用 $('form').trigger('submit') 或者在最坏的情况下，让锚点上的单击处理程序在表单中创建一个隐藏的提交按钮并单击它.或者甚至使用纯 jQuery 创建您自己的 ajax 提交(这可能是我会做的).
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 的人来说，您将完全打破这一点.解决这个问题的方法是还使用 noscript 标签隐藏一个按钮，并处理服务器上的 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>
<% } %>