jQuery POSTに渡されたViewModelにヌル/空のプロパティが含まれています

Question

私は最初のASP.NET MVC 3アプリケーションで作業しています。私が達成したいのは、ユーザーがグリッドからレシピを選択し、詳細についてはdivを参照してください。ユーザは編集ボタンをクリックすることができ、ビューは同じdivの編集ビューに切り替わり、ユーザが変更を行ったときに変更を持続し、詳細を再表示するために保存ボタンをクリックすることができる。

私は（議論に本当に密接な関係がない）jqGridを使用してい

などなどの詳細divの移入するコードのビットがありますし、ボタンといくつかのjQueryがあります表示するには、その詳細は

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

をこの詳細については、詳細編集で表示スワップアウトするために同じようなこと：

@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> 

01：

<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> 

は、その編集に次のようになります

私のコントローラのアクションに戻ると、viewModelのプロパティの一部が正しいことがわかりましたが、ほとんどがnullです。私はシリアライズが起こる（またはしない）ajaxコールに関連して、ここで何か間違っていると推測しています。何か案は？

---

更新：

だから、私はいくつかのことを変更し、それが良く見えます。

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

その後、私はそう見えるように私の保存]ボタンを変更：

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

次にjQueryのは次のようになります。

​​

まず、私はそうのようなIDは、私のフォームを与えました少なくとも最初は、viewModelがPOSTアクションで正しく設定されているようです。 成功コールバックを実行していないようです。私は私のコントローラのアクションにやっていることは、私は戻ってPartialViewを返し、成功コールバックは、その情報を持つ「#details」のdivの内容を置き換えるだろうと期待しておりコール

return Details(viewModel.RecipeID); 

です。実際に何が起きるかは、Detailsを返して表示することです.Div内には表示されません。アイデア？

---

Aソリューション：

私が行って、url: '@Url.Action("Edit", "Recipe")'ラインで悪いアクションを作成するまでは、私はこれが実際に実行されたことを自分自身をだましました。理由？ jquery.form.jsが含まれていませんでした。 :-p

少し変更されました。 - これを行うには良い方法がある場合は特に

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

、その後

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

まだ、この上の他人の考えに興味がある：次のようになります。

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

私が使用したい：代わりの

Answer 1

jquery.formプラグインを使用してソリューションが本当にいいです、この小さな発言より

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

その他。