MVC jQuery从JavaScript函数提交表单(没有页面刷新)

问题描述 投票:31回答:5

我对这一切都很陌生。我正在使用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 /做任何事情。我想要发生的第一件事是从局部视图提交图书表格(id = booksform),然后继续下一个jQuery函数。所以,我点击一个调用JavaScript函数的链接。此函数应调用/执行/执行Books表单的提交。

我觉得我已经尝试了所有的东西,但是我无法在没有完整页面提交/刷新的情况下提交和处理我的图书表单。 (注意,当完整提交确实发生时,我在控制器中期望的操作会成功处理)。我希望控制器进程/操作除了某种成功/失败指示之外什么也不返回。 (然后我可以再次调用“LoadBooks();”来刷新页面上的DIV。

有任何想法吗?

jquery asp.net-mvc ajax form-submit
5个回答
60
投票

我就是这样用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");

3
投票

那是你需要使用的Ajax.BeginForm,而不是Html.BeginForm


1
投票

你的“onclick”JavaScript函数是否执行,问题是整页提交/刷新也会发生?在这种情况下,问题是您没有使用return false结束JavaScript函数。

或者是你的“onclick”JavaScript函数根本没有被调用的问题?然后很难说没有看代码...如果你使用JQuery选择器 - 那么选择器可能没有选择链接


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

正如我之前所说,应该是

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

1
投票

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

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

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

请注意

你必须添加jquery.unobtrusive-ajax.js才能使用。请注意,在ASP.NET MVC5模板项目中,默认情况下不包含此脚本,您必须手动添加它或通过Nuget数据包管理器添加它。 它与jquery.validate.unobtrusive.js无关,qazxswpoi默认包含在内。

© www.soinside.com 2019 - 2024. All rights reserved.