Question

我正在开发我的第一个ASP.NET MVC 3应用程序，我想要完成的是用户可以从我的网格中选择一个配方，然后将其显示在div调用的详细信息中。在那里，用户可以单击“编辑”按钮，视图将切换到同一div内的编辑视图，然后当用户进行更改时，可以单击“保存”按钮，这将保留更改并重新显示详细信息。

我正在使用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看起来像这样：

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

至少在最初，看起来我的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;
});

仍然会对其他人的想法感兴趣 - 特别是如果有更好的方法可以做到这一点。

Answer 1

而不是：

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

我会用：

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

除了这个小注释之外，使用jquery.form插件的解决方案非常好。

通过jQuery POST传递的ViewModel包含null / empty属性

1 个答案: