如何使用JavaScript而不是提交button发布ASP.NET MVC Ajax表单
我有一个使用Ajax.BeginForm创build的简单表单：
<% 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的部分视图。 这一切工作整齐。
现在我希望能够提交这个表单，而不必提交提交button（通过链接或图像上的clik或其他）。 不幸的是，这个小小的jQuery代码片段并没有完成这项工作：
$('form#AjaxForm').submit();
它确实提交了表单，但是（我想不出意外）常规的post-back而不是Ajax的。
为了简单起见，上面的jQuery是这样连接起来的：
<a href="#" onclick="$('form#AjaxForm').submit(); return false;">submit</a>
表单的onsubmit使用Sys.Mvc.AsyncForm.handleSubmit（），但jQuery提交似乎绕过了这一点。
PS。 我正在寻找这种特定方法的解决scheme。 我知道如何使用正常的forms来实现，并使用AJAX + jQuery发布。 我对这个特殊的解决scheme感兴趣。
我会假设你在select器周围缺乏引号只是一个转录错误，但你应该检查它。 另外，我没有看到你实际上给了表单一个id。 通常你用htmlAttributes参数来做到这一点。 我没有看到你使用的签名。 不过，如果表单完全提交，这可能是一个抄写错误。
如果select器和id不是问题，我很怀疑这可能是因为当您使用Ajax BeginForm扩展时，点击处理程序是通过标记添加的。 您可以尝试使用$（'form'）。trigger（'submit'），或者在最糟糕的情况下，让锚点上的click处理程序在表单中创build一个隐藏的提交button并单击它。 甚至创build自己的Ajax提交使用纯jQuery（这可能是我会做的）。
最后，你应该认识到，通过replace提交button，你会完全打破这个没有启用JavaScript的人。 解决这个问题的方法是使用noscript标签隐藏一个button，并处理服务器上的AJAX和非AJAXpost。
顺便说一句，这是考虑标准的做法，微软不能承受，通过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> <% } %>
一个简单的例子，在一个下拉列表的变化触发一个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控制器返回一个PartialView，它使用提供的Model来呈现一个表
<div id="pnlSearchResults"> <% Html.RenderPartial("UserSearchResults", Model); %> </div>
不幸的是，触发onsubmit或提交事件不会在所有浏览器中工作。
- 在IE和Chrome中工作：＃（'form＃ajaxForm'）trigger（'onsubmit'）;
- 在Firefox和Safari中工作：＃（'form＃ajaxForm'）trigger（'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> <% } %>
此外，该链接不必包含在表单中，以使其工作。
我已经尝试了几次，以获得Ajax表单提交工作很好，但总是遇到无论是完全失败或太多的妥协。 以下是使用MVC页面内的jQuery Form插件的页面示例，用于在用户input框中键入时更新项目列表（使用部分呈现的控件）：
<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); }
尝试以下方法：
<input type="submit" value="Search" class="search-btn" /> <a href="javascript:;" onclick="$('.search-btn').click();">Go</a>
Ajax.BeginForm看起来是一个失败。
使用一个常规的Html.Begin，这个技巧很好：
$('#detailsform').submit(function(e) { e.preventDefault(); $.post($(this).attr("action"), $(this).serialize(), function(r) { $("#edit").html(r); }); });
而不是使用JavaScript也许尝试类似的东西
<a href="#"> <input type="submit" value="save" style="background: transparent none; border: 0px none; text-decoration: inherit; color: inherit; cursor: inherit" /> </a>
只需将常规button放在Ajax.BeginForm中，然后单击查找父窗体并正常提交。 Razor中的Ajax表单：
@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(); }
