MVC jQuery submit form (without page refresh) from JavaScript function

Question

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> 

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>      <% } %> 

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.

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.

Any ideas?

Answer 1

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  } 

I assumed that btnClicked is inside of the form:

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

if link:

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

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

Answer 2

Is that Ajax.BeginForm that you need to use, not Html.BeginForm ?