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

Does your "onclick" JavaScript function execute and the problem is that full page submit/refresh happens as well? In this case the problem is that you don't end your JavaScript function with return false.

Or is the problem that your "onclick" JavaScript function isn't called at all? Then it's hard to say without looking at the code... If you use JQuery selector - then probably the link isn't picked by the selector

Answer 2

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 3

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

Answer 4

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

As I said before, should be

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