CODEWITHSUNDEEP
jqueryasp.net-mvcajaxform-submit
johnnycakes
johnnycakes

Reputation: 2450

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

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?

Upvotes: 36

Views: 73297

Answers (5)

tuanvt
tuanvt

Reputation: 717

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

Upvotes: 3

AlexB
AlexB

Reputation: 7416

This is a "if it can help someone" answer, because I'm very late to the game, but you can also use :

@using (Ajax.BeginForm("Method", "Controller", new AjaxOptions { HttpMethod = "POST" }))
{
}

When the date will be posted, the page won't be refreshed.


PLEASE NOTE

You MUST add jquery.unobtrusive-ajax.js in order this to work. Be careful, in ASP.NET MVC5 template project, this script is not included by default, you must add it manually or add it via Nuget packet manager.
It is not related to jquery.validate.unobtrusive.js, which is included by default.

Upvotes: 2

Felix
Felix

Reputation: 10088

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

As I said before, should be 

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

Upvotes: 1

Misha N.
Misha N.

Reputation: 3455

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

Upvotes: 67

Felix
Felix

Reputation: 10088

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

Upvotes: 1

Related Questions