MVC的jQuery的JavaScript函数提交表单（没有刷新页面） [英] MVC jQuery submit form (without page refresh) from JavaScript function

问题描述

我是pretty的新的这一切。 我使用ASP.NET MVC C＃的LINQ to SQL 。

I'm pretty new to all this. I'm using ASP.NET MVC C# LINQ to SQL.

我有一个编辑页面加载作者和他们的所有图书。 这些书都是通过阿贾克斯的呼叫加载。

I have an edit page that loads Authors and all their Books. The Books are loaded via an Ajax call.

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

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

这部分工作正常。该页面加载与作者信息，然后将图书负载（一个DIV ID =书籍的局部图，只需用书目录和书名）：

This part is working fine. The page loads with the Author info, then the Books load (a partial view in a DIV id="Books", just with the Book Category and 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的/阿贾克斯/无论做一些事情。 我希望发生的第一件事情就是从局部视图提交图书的形式（ID = booksform），然后继续到下一个 jQuery的的功能。所以，我点击调用JavaScript函数的链接。这个函数应该调用/办/执行提交的图书形式。

Now, on the main view page I want to have a link. When the link is clicked I want to do a few things via JavaScript/jQuery/Ajax/whatever. The first thing that I want to happen is to submit the Books form (id = booksform) from the partial view, then continue on to the next jQuery function. So, I click a link that calls a JavaScript function. This function should call/do/execute the submission of the Books form.

我觉得我已经尝试了一切，但我不能让我的书表单提交和处理不完整的网页提交/刷新发生。 （请注意，在完整的提交没有发生，我期望在控制器的行动成功地做到程序）。我想控制器进程/行动回报莫过于某种成功/失败指示等。 （我可以调用LoadBooks（）;再次刷新页面上的DIV

I feel like I've tried everything, but I can't get my Books form to submit and process without a full page submit/refresh taking place. (Note, when the full submit does take place, the actions I'd expect in the controller do successfully process). I want the controller process/action to return nothing other than some kind of success/failure indication. (I can then call "LoadBooks();" again to refresh the DIV on the page.

任何想法？

推荐答案

这是我如何做，与jQuery的：

This is how I do that with 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的形式里面：

I assumed that btnClicked is inside of the form:

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

如果链接：

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

如果链接是不是里面，你只需要使用jQuery选择器找到它的形式。您可以设置ID的表格，然后找形成是这样的：

If link is not inside for the form you just have to use jquery selectors to find it. You may set id to the form and then find form like this:

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

这篇关于MVC的jQuery的JavaScript函数提交表单（没有刷新页面）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！