微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我对这一切都很新鲜。
我使用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函数。这个函数应该调用/ do /执行Books表单的提交。

我觉得我已经尝试了一切,但我不能得到我的图书表单提交和处理没有一个完整的页面提交/刷新发生。 (注意,当完全提交发生时,我期望在控制器中的操作成功处理)。我想控制器进程/操作只返回一些成功/失败指示。 (然后我可以再次调用“LoadBooks();”来刷新页面上的DIV。

有任何想法吗?

解决方法

这是我怎么做与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");

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐