ASP.NET MVC 4 AJAX Submit Form not working

Question

I'm trying to convert a form from synchronous to asynchronous using the Ajax.BeginForm helper method in MVC 4.

In my view I have:

   @{
        ViewBag.Title = "Users > Edit";
        var options = new AjaxOptions()
                          {
                              Url = Url.Action("Edit", "User"),
                              LoadingElementId = "saving",
                              LoadingElementDuration = 2000,
                              Confirm = "Are you sure you want to save this User?"
                          };  
    }

    <div id="saving" style="display:none; color:Red; font-weight: bold"> 
         <p>Saving...</p> 
    </div> 

    @using (Ajax.BeginForm(options)) 
    {
        @Html.ValidationSummary(true)
        <fieldset>
            .... FIELDS ...
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>
    }

When the submit button is clicked a complete postback is being executed. My action method looks like this:

[HttpPost]
public ActionResult Edit(User user)
{
    if (ModelState.IsValid)
    {
        _repository.Save(user);
        TempData["message"] = String.Format("{0} has been saved.", user.Username);
    }

    return View(user);
 }

Is there something I'm missing? Has the MVC 4 current release got a few problems?

In my Web.Config I do have ClientValidationEnabled and UnobtrusiveJavaScriptEnabled set to true.

I also have these specified in my _Layout.cshtml:

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Important note; jquery-1.9.0.min.js not support Ajax.FormBegin and Ajax.ActionLink :( — Mustafa Kemal Yıldız
– Mustafa Kemal Yıldız, Commented Jan 20, 2013 at 20:48

Darin Dimitrov · Accepted Answer · 2012-01-30 15:37:54Z

28

Is there something I'm missing?

Maybe you are missing the unobtrusive ajax script:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

answered Jan 30, 2012 at 15:37

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

adamwtiko Over a year ago

Yep ha you spotted it! Had validate.unobtrusive.js etc etc. Doh! Thanks :D

Ravi Gadag · Accepted Answer · 2012-01-30 15:32:49Z

0

if i am understood correct, you are trying to post the data to controller, after successful you need to go to home page ?? if not can you clarify. so that will try to help you

if (ModelState.IsValid)
    {
        _repository.Save(user);
        TempData["message"] = String.Format("{0} has been saved.", user.Username);
        return RedirectToAction("yourActionToRedirect");  // after succesfull it will go to the index view
    }

answered Jan 30, 2012 at 15:32

Ravi Gadag

15.9k5 gold badges60 silver badges85 bronze badges

3 Comments

adamwtiko Over a year ago

In this example I'd actually like to return to the current view with the same user data e.g. return View(user);

Ravi Gadag Over a year ago

then what is the problem?? did try to debug it ?? is it hitting the action on User Controller ??

adamwtiko Over a year ago

That it's not behaving in an asynchronous manner. The page is being posted back and Request.IsAjaxRequest() returns false in the Edit action.

BenMorel · Accepted Answer · 2014-05-22 12:51:16Z

0

I had the same kind of problem... I've updated all the js files with nuget package console.

just my 2 cents, but also at the time of writing, the jquery.unobtrusive.ajax file does contain calls to the deprecated jquery function '.live' (=> it's deleted from jquery 1.9+ version) jquery live

I think there are like 4 occurrences that you'll have to change with .on, now it works fine ;-)

edited May 22, 2014 at 12:51

BenMorel

37.1k53 gold badges208 silver badges339 bronze badges

answered Jan 31, 2013 at 11:58

goqu

1

Collectives™ on Stack Overflow

ASP.NET MVC 4 AJAX Submit Form not working

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related