Question

I’m working on my first ASP.NET MVC 3 application and what I want to accomplish is that a user can select a recipe from my grid and then have it displayed in a div called details. There the user can click the Edit button and the view switches to an edit view within that same div and then when the user has made changes the Save button can be clicked which would persist the changes and redisplay the details.

I’m using jqGrid (not really germane to the discussion) and have a bit of code to populate the details div like so:

onSelectRow: function(theRow) {
   var grid = jQuery('#recipeGrid');
   var cellData = grid.jqGrid('getCell', theRow, 'RecipeID');
   $('#details').load('@Url.Action("Details", "Recipe")', { id: cellData });
}

In that details view there’s a button and some jQuery which does a similar thing to swap out this details view with a details edit:

<input type="button" value="Edit" class='editrecipe' data-recipeid="@Model.RecipeID" />

<script type="text/javascript" language="javascript">
   $(function () {
      $('.editrecipe').click(function () ){
         var recipeId = $(this).data('reciepid');
         $.ajax({
            type: "GET",
            data: "id=" + recipeId,
            url: '@Url.Action("Edit", "Recipe")',
            dataType: "html",
            success: function (result) {
               $('#details').html(result);
            }
         });
      });
   });
</script>

Then on that edit looks something like this:

@model IceCream.ViewModels.Recipe.RecipeCreateEditViewModel
@using (Html.BeginForm())
{
   ...
   <input type="button" value="Save" class='saverecipe' />
}

<script type="text/javascript" language="javascript">
   $(function () {
      $('.saverecipe').click(function () ){
         $.ajax({
            type: "POST",
            data: $('form').serialize(),
            cache: false,
            url: '@Url.Action("Edit", "Recipe")',
            dataType: "html",
            success: function (result) {
               $('#details').html(result);
            }
         });
      });
   });
</script>

Back in my controller action, I noticed that some of the properties of the viewModel are correct but most are null. I’m guessing that I’m doing something wrong here related to the ajax call where the serialization happens (or doesn’t). Any ideas?

---

Update:

So, I changed a few things and it looks better. First, I gave my form an ID like so:

@using (Html.BeginForm("Edit", "Recipe", FormMethod.Post, new { id = "editRecipeForm" }))

Then I altered my Save button to look like so:

<input type="submit" value="Save" />

Then the jQuery looks like this:

$('#editRecipeForm').submit(function () {
   var options = {success: function (html) {
      $("#details").replaceWith($('#details', $(html)));
   },
   url: '@Url.Action("Edit", "Recipe")'
   }
   $(this).ajaxSubmit(options);
   return false;
});

At least initially, it looks like my viewModel is now being populated correctly in the POST action. However it does NOT seem to execute the success callback. What I do in my controller action is call

return Details(viewModel.RecipeID);

which I expect will return the PartialView back and the success callback would replace the contents of the ‘#details’ div with that info. What actually happens is that it just returns the Details and displays that – not in the div. Ideas?

---

A Solution:

Until I went in and created a bad Action in the url: '@Url.Action("Edit", "Recipe")' line, I was fooling myself that this was actually running. Reason? Didn’t have jquery.form.js included… that’ll help things. :-p

I modified things a bit. Looks like this now:

var options = {
   target: "#details",
   url: '@Url.Action("Edit", "Recipe")',
};

and then

$('#editrecipeform').submit(function () {
   $(this).ajaxSubmit(options);
   return false;
});

Still would be interested in the thoughts of others on this – particularly if there is a better way to do this.

Answer 1

Instead of:

$('#editrecipeform').submit(function () {
   $(this).ajaxSubmit(options);
   return false;
});

I’d use:

$(function() {
    $('#editrecipeform').ajaxForm(options);
});

Other than this small remark your solution with the jquery.form plugin is really nice.