ASP MVC3 – Editing records with jQueryUI Dialogs and AjaxForms – Razor Version

This post is in response to the several requests I’ve gotten to provide a Razor version of a sample solution I provided a few months ago on Editing records with jQueryUI Dialogs and AjaxForms, which was originally posted using aspx views. If you haven’t read it or seen the video, please take a look at it first; as most of the concepts will remain the same. .

So this solution is practically unchanged compared to the original, however I did I introduced 2 improvements (which could also apply to the aspx version).

1. I realized after I did my original post that I was able to get data on the handler function from the ajax form; so I am no longer looking into the response div for my data (which was kind of a hack). Instead I am now using it properly by receiving the data directly.
2. I use a JsonStandardResponse, which I have been using in my projects succesfully and make things a bit easier. (See my previous post: Json Standard Responses for your Ajax Calls). So the controller action was changed to return JsonResult instead of a regular ActionResult with Content.

Here are the details of the change in the controller:

[HttpPost]
public JsonResult Edit(CarModel model) {
if (ModelState.IsValid)
{
CarModel car = CarRepository.GetCars().Where(c => c.Id == model.Id).FirstOrDefault();
car.Name = model.Name;
car.Description = model.Description;
return Json(JsonResponseFactory.SuccessResponse(car),JsonRequestBehavior.DenyGet);
}
else {
return Json(JsonResponseFactory.ErrorResponse("Please review your form"), 
            JsonRequestBehavior.DenyGet);
}
}

Notice that if the ModelState is valid I proceed with the change , and regurn a SuccessResponse, which includes the object car (this will get added to the standard json response).

return Json(JsonResponseFactory.SuccessResponse(car),JsonRequestBehavior.DenyGet);

If the state is not valid, we will return a ErrorResponse:

return Json(JsonResponseFactory.ErrorResponse("Please review your form"),
            JsonRequestBehavior.DenyGet);

With the Controller ready,  the UpdateSucces function (which is specified as the OnSuccess handler for the Ajax Form) is now as follow:

function updateSuccess(data) {
 if (data.Success == true) {
 //we update the table's info
 var parent = linkObj.closest("tr");
 parent.find(".carName").html(data.Object.Name);
 parent.find(".carDescription").html(data.Object.Description);
 //now we can close the dialog
 $('#updateDialog').dialog('close');
 //twitter type notification
 $('#commonMessage').html("Update Complete");
 $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
 }
 else {
 $("#update-message").html(data.ErrorMessage);
 $("#update-message").show();
 }
}

This, compared to the original implementation is much cleaner, because we get the data in json form directly in the function, and thanks to the JsonStandardResponse, I also get a copy of the updated object.

That is it. Those are the only two updates.

Download the Source Code.

Hope this helps!