Ajax.BeginForm OnSuccess not firing

Question

I'm using this partial view

@model CreateConfigEntityModel

<div class="row">
@using (Ajax.BeginForm("AddElement", "MerchantSites", new { merchantId = @Model.MerchantId }, new AjaxOptions
{
  HttpMethod = "POST",
  OnSuccess = "alert('ok')"
},
new { id = "addConfigForm" }
))
{
  @Html.LabelFor(m => m.EntityName)
  @Html.TextBoxFor(m => m.EntityName)
  @Html.ValidationMessageFor(m => m.EntityName)

  @Html.LabelFor(m => m.DefaultValue)
  @Html.TextBoxFor(m => m.DefaultValue)
  @Html.ValidationMessageFor(m => m.DefaultValue)

  <input type="submit" value="Ajouter" class="tiny button" /> 
}
</div>

Controller

public JsonResult AddElement(CreateConfigEntityModel model)
{
    if (ModelState.IsValid)
    {
        _merchantSitesManager.AddEntity(model.EntityName, model.DefaultValue);
        return Json(new { code = 1 }, JsonRequestBehavior.AllowGet);
    }
    else
        return Json(new { code = 0 }, JsonRequestBehavior.AllowGet);
}

This is what shows after submitting the form (item gets added correctly)

Not sure what I'm doing wrong.

Using jQuery JavaScript Library v2.1.1

I have in my web.config

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

I'm calling my partial view like this

@{ Html.RenderPartial("_CreateConfigEntity", new CreateConfigEntityModel(Model.MerchantId)); }

Cynar

Where the breakpoint is hitting in the controller. – Bussy

The controller is getting called with valid model state – Cynar

I had tested your code it is working for me. – Bussy

user fiddler tool to check the request and response of the ajax call. – Bussy

The problem is that the whole page is getting updated, url changes to AddElement. I just want to call my success method instead. – Cynar

Answer 1

Assuming you have a brand new project, you need to do the following things to get this working. The ASP.NET MVC template does not support unobtrusive AJAX out of the box:

1. Add the "Microsoft.jQuery.Unobtrusive.Ajax" package from Nuget into your project. You can do this by right-clicking on the project and choosing "Manage Nuget Packages."

2. Add "jquery.unobtrusive-ajax.js" to your page. If you're using the "bundling" feature in System.Web.Optimization, one easy way would be to add it to the jQuery bundle:

   bundles.Add(new ScriptBundle("~/bundles/jquery")
       .Include("~/Scripts/jquery-{version}.js")
       .Include("~/Scripts/jquery.unobtrusive-ajax.js"));
   

   You can also just add a <script> tag that points to the script.

Assuming the page is loading jQuery and jquery.unobtrusive-ajax.js, the code you posted should work.

Growler

I have already done this, and can see both files when inspecting the source of my page. – Cynar

Are there any JavaScript errors on the page when you click the button? You may have to enable persisting the browser console between requests as currently you're making a full post and any error messages will disappear – Growler

My bad, I did not have jquery.unobtrusive-ajax.js included. Sorry – Cynar

Damn. I always forget about this nuget.package. I believe that it should be added by default to the MVC template! Anyway, they should put a love button on stackoverflow... <3 – Kith

I had same problem, I forgot to add <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> – Peppard

Answer 2

Add reference to the following js libraries:

• jquery-{version}.min.js
• MicrosoftAjax.js
• MicrosoftMvcAjax.js
• jquery.validate.min.js
• jquery.validate.unobtrusive.js
• jquery.unobtrusive-ajax.js

Saturnian

Answer 3

Yes, I know why those method are not being called, you always need to reference ajax unobtrusive file : jquery.unobtrusive-ajax.min.js

Luganda

Answer 4

In addition to the other answers, it's worth checking your web.config file has validation and unobtrusive components enabled:

<appSettings>
...
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
...
</appSettings>

Gratulation