MVC jQuery提交表单(不刷新页面)

I'm pretty new to all this. I'm using ASP.NET MVC C# LINQ to SQL.

我对这一切都很陌生。我用ASP。NET MVC c# LINQ到SQL。

I have an edit page that loads Authors and all their Books. The Books are loaded via an Ajax call.

我有一个编辑页面，可以载入作者和他们所有的书。通过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 jQuery function. 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/其他方式做一些事情。我希望发生的第一件事是从局部视图提交Books表单(id = booksform)，然后继续到下一个jQuery函数。因此，我点击一个调用JavaScript函数的链接。该函数应该调用/执行/执行图书表单的提交。

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?

什么好主意吗?

5 个解决方案

#1

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:

我假设btnclick在表单内部:

<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");

#2

Is that Ajax.BeginForm that you need to use, not Html.BeginForm.

是Ajax。BeginForm表示您需要使用，而不是Html.BeginForm。

#3

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函数执行了吗?问题是整个页面提交/刷新也发生了吗?在这种情况下，问题是您不会以返回false结束JavaScript函数。

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选择器——那么可能选择器没有选择链接

#4

<a href = "javascript: SaveProperties();">Save properties</a>
SaveProperties() { $('#bevpropform').submit(); }

As I said before, should be

就像我之前说的，应该是

SaveProperties() { $('#bevpropform').submit(); return false; }

#5

This is a "if it can help someone" answer, because I'm very late to the game, but you can also use :

这是一个“if it can help someone”的回答，因为我玩得太晚了，但是你也可以用:

@using (Ajax.BeginForm("Method", "Controller", new AjaxOptions { HttpMethod = "POST" }))
{
}

When the date will be posted, the page won't be refreshed.

当日期被发布时，页面将不会刷新。

PLEASE NOTE

请注意

You MUST add jquery.unobtrusive-ajax.js in order this to work. Be careful, in ASP.NET MVC5 template project, this script is not included 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。为了让它工作。小心,在ASP。NET MVC5模板项目，默认情况下不包括这个脚本，您必须手动添加它或通过Nuget包管理器添加它。它与jquery.validate.unobtrusive无关。默认包含js。

#1