来自 JavaScript 函数的 MVC jQuery 提交表单（不刷新页面）

Question

我对这一切都很陌生。 我正在使用 ASP.NET MVC C# LINQ to SQL。

我有一个加载作者及其所有书籍的编辑页面。 图书通过Ajax 调用加载。

    <script type="text/javascript">
        $(document).ready(function() {
            LoadBooks();
        });

        function LoadBooks() {
          $(".Books").hide();
          $(".Books").load("/Books/Edit/<%= Model.AuthorID %>");
          $(".Books").show('slow');
        }
     </script>

这部分工作正常。页面加载作者信息，然后加载图书（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>
     <% } %>

现在，在主视图页面上，我想要一个链接。 单击链接时，我想通过 JavaScript/jQuery/Ajax/whatever 做一些事情。 我想做的第一件事是从局部视图提交 Books 表单（id = booksform），然后继续执行下一个 jQuery 函数。因此，我单击了一个调用 JavaScript 函数的链接。此函数应该调用/执行/执行 Books 表单的提交。

我觉得我已经尝试了所有方法，但是如果不进行整页提交/刷新，我就无法提交和处理我的图书表单。 （注意，当完整提交确实发生时，我期望控制器中的操作会成功处理）。我希望控制器进程/操作只返回某种成功/失败指示。 （然后我可以再次调用“LoadBooks();”来刷新页面上的 DIV。

有什么想法吗？

Answer 1

这就是我使用 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

}

我假设 btnClicked 在表单内：

<input type="button" value="Submit" onclick="DoAjaxPostAndMore(this)"/>

如果链接：

  <a href="/url/something" onclick="return DoAjaxPostAndMore(this)">linktext</a>

如果链接不在表单内部，您只需使用 jquery 选择器即可找到它。您可以将 id 设置为表单，然后像这样查找表单：

var $form = $("#theformid");

Answer 2

您需要使用的是Ajax.BeginForm，而不是Html.BeginForm？

Answer 3

您的“onclick”JavaScript 函数是否执行并且问题是整个页面提交/刷新也会发生？在这种情况下，问题在于您没有以 return false 结束您的 JavaScript 函数。

还是根本没有调用“onclick”JavaScript 函数的问题？那么如果不看代码就很难说...如果您使用JQuery选择器-那么可能选择器没有选择链接

Answer 4

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

我之前说过，应该是

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

Answer 5

这是一个“如果它可以帮助某人”的答案，因为我玩游戏很晚，但你也可以使用：

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

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

请注意

您必须添加 jquery.unobtrusive-ajax.js 以使其正常工作。请注意，在 ASP.NET MVC5 模板项目中，此脚本默认不包含，您必须手动添加或通过 Nuget 数据包管理器添加。
与jquery.validate.unobtrusive.js无关，默认包含。