MVC jQuery 从 JavaScript 函数提交表单（无页面刷新）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1720020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC jQuery submit form (without page refresh) from JavaScript function
提问by johnnycakes
I'm pretty new to all this. I'm using ASP.NET MVC C# LINQ to SQL.
我对这一切都很陌生。我正在使用 ASP.NET MVC C# LINQ to SQL。
I have an edit page that loads Authors and all their Books. The Books are loaded via an Ajaxcall.
我有一个加载作者及其所有书籍的编辑页面。书籍是通过Ajax调用加载的。
<script type="text/javascript">
$(document).ready(function() {
LoadBooks();
});
function LoadBooks() {
$(".Books").hide();
$(".Books").load("/Books/Edit/<%= Model.AuthorID %>");
$(".Books").show('slow');
}
</script>
This part is working fine. The page loads with the Author info, then the Books load (a partial view in a DIV id="Books", just with the Book Category and Book Title):
这部分工作正常。该页面加载了作者信息，然后加载了图书（DIV id="Books" 中的部分视图，只有图书类别和书名）：
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Solution.Controllers.BooksController+BooksViewModel>" %>
<% using (Html.BeginForm(null,null, FormMethod.Post,new { id = "bookform" }))
{%>
<fieldset>
<legend>Books</legend>
<%int i = 0;
foreach (var book in Model.Books)
{%>
<%= book.BookID%>
<%= Html.Hidden("book[" + i + "].BookID", book.BookID) %>
<%= Html.DropDownList("book[" + i + "].CatID", new SelectList(Model.Categories, "CatID", "CatTitle", book.CatID))%>
<%= Html.ValidationMessage("CatID", "*")%>
<%= Html.TextBox("book[" + i + "].BookTitle", book.BookTitle)%>
<%= Html.ValidationMessage("BookTitle", "*")%>
<br />
<%i++;
} %>
</fieldset>
<% } %>
Now, on the main view page I want to have a link. When the link is clicked I want to do a few things via JavaScript/jQuery/Ajax/whatever. The first thing that I want to happen is to submit the Books form (id = booksform) from the partial view, then continue on to the next jQueryfunction. So, I click a link that calls a JavaScript function. This function should call/do/execute the submission of the Books form.
现在，在主视图页面上，我想要一个链接。当链接被点击时，我想通过 JavaScript/jQuery/Ajax/whatever 做一些事情。我想要做的第一件事是从局部视图提交 Books 表单 (id = booksform)，然后继续执行下一个jQuery函数。因此，我单击了一个调用 JavaScript 函数的链接。这个函数应该调用/执行/执行 Books 表单的提交。
I feel like I've tried everything, but I can't get my Books form to submit and process without a full page submit/refresh taking place. (Note, when the full submit does take place, the actions I'd expect in the controller do successfully process). I want the controller process/action to return nothing other than some kind of success/failure indication. (I can then call "LoadBooks();" again to refresh the DIV on the page.
我觉得我已经尝试了所有方法，但是如果不进行整页提交/刷新，我就无法提交和处理我的图书表单。（注意，当完全提交确实发生时，我期望控制器中的操作会成功处理）。我希望控制器进程/操作只返回某种成功/失败指示。（然后我可以再次调用“LoadBooks();”来刷新页面上的 DIV。
Any ideas?
有任何想法吗？
回答by Misha N.
This is how I do that with jquery:
这就是我如何用 jquery 做到这一点：
function DoAjaxPostAndMore(btnClicked)
{
var $form = $(btnClicked).parents('form');
$.ajax({
type: "POST",
url: $form.attr('action'),
data: $form.serialize(),
error: function(xhr, status, error) {
//do something about the error
},
success: function(response) {
//do something with response
LoadBooks();
}
});
return false;// if it's a link to prevent post
}
I assumed that btnClicked is inside of the form:
我假设 btnClicked 在表单内：
<input type="button" value="Submit" onclick="DoAjaxPostAndMore(this)"/>
if link:
如果链接：
<a href="/url/something" onclick="return DoAjaxPostAndMore(this)">linktext</a>
If link is not inside for the form you just have to use jquery selectors to find it. You may set id to the form and then find form like this:
如果表单中没有链接，您只需要使用 jquery 选择器来找到它。您可以将 id 设置为表单，然后像这样找到表单：
var $form = $("#theformid");
回答by tuanvt
Is that Ajax.BeginFormthat you need to use, not Html.BeginForm?
那Ajax.BeginForm是你需要使用的，不是Html.BeginForm吗？
回答by Felix
<a href = "javascript: SaveProperties();">Save properties</a>
SaveProperties() { $('#bevpropform').submit(); }
As I said before, should be
正如我之前所说，应该是
SaveProperties() { $('#bevpropform').submit(); return false; }
回答by AlexB
This is a "if it can help someone" answer, because I'm very late to the game, but you can also use :
这是一个“如果它可以帮助某人”的答案，因为我玩游戏已经很晚了，但您也可以使用：
@using (Ajax.BeginForm("Method", "Controller", new AjaxOptions { HttpMethod = "POST" }))
{
}
When the date will be posted, the page won't be refreshed.
发布日期时，页面不会刷新。
PLEASE NOTE
请注意
You MUSTadd jquery.unobtrusive-ajax.jsin order this to work. Be careful, in ASP.NET MVC5 template project, this script is notincluded by default, you must add it manually or add it via Nuget packet manager.
It is not related to jquery.validate.unobtrusive.js, which is included by default.
您必须添加jquery.unobtrusive-ajax.js才能使其正常工作。注意，在 ASP.NET MVC5 模板项目中，默认情况下不包含此脚本，您必须手动添加它或通过 Nuget 包管理器添加它。
它与 无关jquery.validate.unobtrusive.js，默认包含。
回答by Felix
Does your "onclick" JavaScript function execute and the problem is that full page submit/refresh happens as well? In this case the problem is that you don't end your JavaScript function with return false.
您的“onclick”JavaScript 函数是否执行并且问题是整页提交/刷新也会发生？在这种情况下，问题在于您的 JavaScript 函数没有以return false.
Or is the problem that your "onclick" JavaScript function isn't called at all? Then it's hard to say without looking at the code... If you use JQuery selector - then probably the link isn't picked by the selector
还是根本没有调用“onclick”JavaScript 函数的问题？那么不看代码就很难说......如果你使用JQuery选择器 - 那么可能是选择器没有选择链接
