title: MVC jQuery submit form (without page refresh) from JavaScript function
body: <p>I'm pretty new to all this.
  I'm using ASP.NET MVC C# <a href="http://en.wikipedia.org/wiki/Language_Integrated_Query#LINQ_to_SQL" rel="noreferrer">LINQ to SQL</a>.</p>
  
  <p>I have an edit page that loads Authors and all their Books.
  The Books are loaded via an <a href="http://en.wikipedia.org/wiki/Ajax_%28programming%29" rel="noreferrer">Ajax</a> call.</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              LoadBooks();
          });
  
          function LoadBooks() {
            $(".Books").hide();
            $(".Books").load("/Books/Edit/&lt;%= Model.AuthorID %&gt;");
            $(".Books").show('slow');
          }
       &lt;/script&gt;
  </code></pre>
  
  <p>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):</p>
  
  <pre><code>&lt;%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl&lt;Solution.Controllers.BooksController+BooksViewModel&gt;" %&gt;
       &lt;% using (Html.BeginForm(null,null, FormMethod.Post,new { id = "bookform" }))
          {%&gt;
              &lt;fieldset&gt;
                  &lt;legend&gt;Books&lt;/legend&gt;
                  &lt;%int i = 0;
                      foreach (var book in Model.Books)
                      {%&gt;
                        &lt;%= book.BookID%&gt;
                        &lt;%= Html.Hidden("book[" + i + "].BookID", book.BookID) %&gt;
  
                        &lt;%= Html.DropDownList("book[" + i + "].CatID", new SelectList(Model.Categories, "CatID", "CatTitle", book.CatID))%&gt;
                        &lt;%= Html.ValidationMessage("CatID", "*")%&gt;
  
                        &lt;%= Html.TextBox("book[" + i + "].BookTitle", book.BookTitle)%&gt;
                        &lt;%= Html.ValidationMessage("BookTitle", "*")%&gt;
                        &lt;br /&gt;
                        &lt;%i++;
                      } %&gt;
              &lt;/fieldset&gt;
       &lt;% } %&gt;
  </code></pre>
  
  <p>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 <a href="http://en.wikipedia.org/wiki/JQuery" rel="noreferrer">jQuery</a> function.  So, I click a link that calls a JavaScript function.  This function should call/do/execute the submission of the Books form.</p>
  
  <p>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.</p>
  
  <p>Any ideas?</p>