用JavaScript函数提交MVC jQuery表单（无需页面刷新）

Question

用JavaScript函数提交MVC jQuery表单（无需页面刷新）

35

我对这些都还不太熟悉。我正在使用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/任何其他方式执行一些操作。

首先，我想要的是从部分视图提交Books表单（id = booksform），然后继续下一个jQuery函数。因此，我点击一个调用JavaScript函数的链接。该函数应该调用/执行Books表单的提交。

我感觉我已经尝试了一切，但无法在不进行完整页面提交/刷新的情况下提交和处理我的Books表单。(注意，当完整提交确实发生时，我期望在控制器中处理的操作确实得到了成功处理)。我希望控制器处理/操作仅返回某种成功/失败指示。（然后，我可以再次调用“LoadBooks();”来刷新页面上的DIV）。

有什么想法吗？

- johnnycakes

5个回答

3

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

- tuanvt

1

不是因为您没有使用 MS Ajax 脚本，而只是使用 JQuery 提交普通 Html 表单。 - Trevor de Koekkoek

2

这是一篇“如果能帮到某人”的回答，因为我来晚了，但你也可以使用以下方法：

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

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

请注意：

您必须添加jquery.unobtrusive-ajax.js才能使其工作。请注意，在ASP.NET MVC5模板项目中，默认情况下不包含此脚本，您必须手动添加或通过Nuget包管理器添加它。

这与默认情况下包括的jquery.validate.unobtrusive.js无关。

- AlexB

今天我才看到你的回答，真是我的倒霉。 - Aneeq Azam Khan

1

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

就像我之前所说的，应该是这样的

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

- Felix

1

你的 "onclick" JavaScript 函数是否执行，但全页提交/刷新也发生了？如果是这种情况，问题可能是你没有用 return false 结束你的 JavaScript 函数。

或者问题是你的 "onclick" JavaScript 函数根本没有被调用？那么不看代码很难说... 如果你使用 JQuery 选择器 - 那么可能链接没有被选择器选中。

- Felix

抱歉，这看起来有点凌乱。有没有办法在注释中添加换行？<a href = "javascript: SaveProperties(); ">保存属性</a>该函数：function SaveProperties() { $('#bevpropform').submit(); }这个函数可以工作，但当然它会提交表单并将我带离页面。我一直没有找到一种方法可以在不进行完整页面提交的情况下提交表单。谢谢。 - johnnycakes

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Misha N. · Accepted Answer

这是我使用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)"/>

如果link存在：

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

如果链接不在表单内，您只需要使用jQuery选择器来查找它。您可以给表单设置id，然后像这样查找表单：

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