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

小编典典

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

ajax

我对这一切都很陌生。我正在使用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>

这部分工作正常。该页面加载有Author信息，然后是Books加载（DIV id =“ Books”中的局部视图，仅包含Book Category和Book
Title）：

<%@ 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函数的链接。此函数应调用/执行/执行“书籍”表单的提交。

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

有任何想法吗？

阅读 257

2020-07-26

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

2020-07-26