ASP.NET MVC4 AJAX.BeginForm AjaxOptions OnSuccess not called

Question

I'm trying to use Jquery Model Dialog in MVC4 using Razor dialog box showing fine but AjaxOptions.OnSuccess javascript function is not calling after i click the update button but it's redirected to http://<>:3738/Cars/Edit/1?Length=4 i don;t know why it was happened.

Here is my Code

CarController.cs

public class CarsController : Controller
{
    private ExpDb db = new ExpDb();

    //
    // GET: /Cars/

    public ActionResult Index()
    {
        return View(db.Cars.ToList());
    }



    //
    // GET: /Cars/Edit/5

    public ActionResult Edit(int id = 0)
    {
        CarModel carmodel = db.Cars.Find(id);
        if (carmodel == null)
        {
            return HttpNotFound();
        }
        return PartialView(carmodel);
    }

    //
    // POST: /Cars/Edit/5

    [HttpPost]
    public JsonResult  Edit(CarModel carmodel)
    {
        if (ModelState.IsValid)
        {

            db.Entry(carmodel).State = EntityState.Modified;
            db.SaveChanges();
            //return RedirectToAction("Index");
             return Json(JsonResponseFactory.SuccessResponse(carmodel),JsonRequestBehavior.DenyGet);
        }
      else {
            return Json(JsonResponseFactory.ErrorResponse("Please review your form"), JsonRequestBehavior.DenyGet);
        }
    }

Index.cshtml

@model IEnumerable<AjaxSamples.Models.CarModel>

@{
ViewBag.Title = "Index";
}
<div id="commonMessage"></div>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
    <th>
        @Html.DisplayNameFor(model => model.ImageFileName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Name)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Description)
    </th>
    <th></th>
</tr>

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.ImageFileName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Name)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Description)
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "editLink" }) |
        @Html.ActionLink("Details", "Details", new { id=item.Id }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.Id })

        <button id="opener">Open Dialog</button>
    </td>
  </tr>



 }

</table>

 <div id="updateDialog" title="Update Car"></div>
 <script type="text/javascript">
 var linkObj;
 $(function () {
    $(".editLink").button();

    $('#updateDialog').dialog({
        autoOpen: false,
        width: 400,
        resizable: false,
        modal: true,
        buttons: {
            "Update": function () {
                $("#update-message").html(''); //make sure there is nothing on the message before we continue                         
                $("#updateCarForm").submit();
            },
            "Cancel": function () {
                alert('sd');
                $(this).dialog("close");
            }
        }
    });

    $(".editLink").click(function () {
        //change the title of the dialog
        linkObj = $(this);
        var dialogDiv = $('#updateDialog');
        var viewUrl = linkObj.attr('href');
        $.get(viewUrl, function (data) {
            alert(data);
            dialogDiv.html(data);
            //validation
            var $form = $("#updateCarForm");
            // Unbind existing validation
            $form.unbind();
            $form.data("validator", null);
            // Check document for changes
            $.validator.unobtrusive.parse(document);
            // Re add validation with changes
            $form.validate($form.data("unobtrusiveValidation").options);
            //open dialog
            dialogDiv.dialog('open');
        });
        return false;
    });

});
function err(data) {
    alert(data);
}


 function updateSuccess(data) {
    alert(data);
}

Edit.cshtml

@model AjaxSamples.Models.CarModel

@{
ViewBag.Title = "Edit";
}

@using (Ajax.BeginForm("Edit", "Cars", new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace, 
        HttpMethod = "POST",
        OnSuccess = "updateSuccess"
    }, new { @id = "updateCarForm" }))
 {
 @Html.ValidationSummary(true)
<div id="update-message" class="error invisible"></div>
<fieldset>
    <legend>CarModel</legend>

    @Html.HiddenFor(model => model.Id)

    <div class="editor-label">
        @Html.LabelFor(model => model.ImageFileName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.ImageFileName)
        @Html.ValidationMessageFor(model => model.ImageFileName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Description)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Description)
        @Html.ValidationMessageFor(model => model.Description)
    </div>

    <p>
        <input type="submit" value="Save" />
    </p>
</fieldset>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

Answer 1

The below Jquery File is required

jquery.unobtrusive-ajax.js