通過jQuery POST傳遞的ViewModel包含null /空屬性

我正在處理我的第一個ASP.NET MVC 3應用程序，我想完成的是用戶可以從我的網格中選擇一個配方，然後將其顯示在div稱爲細節。在那裏，用戶可以點擊編輯按鈕，視圖切換到同一個div中的編輯視圖，然後當用戶進行更改時，可以單擊保存按鈕，這將保持更改並重新顯示詳細信息。通過jQuery POST傳遞的ViewModel包含null /空屬性

我使用的jqGrid（不是真的有密切關係的討論），並有一些代碼來填充細節DIV像這樣：

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

在這種細節查看有一個按鈕和一些jQuery的哪些呢類似的事情，換出這個細節與細節編輯觀點：

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

然後在該編輯看起來是這樣的：

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

回到我的控制器操作中，我注意到viewModel的一些屬性是正確的，但大多數都是null。我在猜測，我在這裏做了一些錯誤的事情，這裏涉及到序列化發生（或不）的ajax調用。有任何想法嗎？

更新：

於是，我改變了一些東西，它看起來更好。首先，我給我的形式的ID如下：

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

然後，我改變了我的保存按鈕，看起來像這樣：

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

然後jQuery的是這樣的：

至少最初，它看起來像我的viewModel現在正在POST操作中正確填充。但是它似乎不執行成功回調。我在我的控制器動作要做的就是調用

return Details(viewModel.RecipeID);

，我希望將返回PartialView背部和成功回調將取代與信息的「#details」 div的內容。實際發生的是它只是返回細節並顯示 - 不在div中。想法？

一個解決方案：

直到我走了進去，並創造了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; 
});

仍然會關心別人對這一思想 - 特別是如果有一個更好的方式來做到這一點。

來源

2011-09-22 itsmatt

爲您的ajax請求添加'傳統：真正'也許它會幫助...不確定 – Rafay

相反的：

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

我會使用：

比這個小的話與jquery.form插件您的解決方案是非常好的

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

其他。

來源

2011-09-22 17:07:02

通過jQuery POST傳遞的ViewModel包含null /空屬性

回答

相關問題