对话框中的 MVC 3 部分视图不起作用

Question

我有一个数据表网页，其中显示了数据表中的用户列表。在用户页面上有一个按钮创建新用户。单击此按钮会启动一个模态 jQuery 对话框，供用户输入新用户的详细信息。有一个取消按钮，它只是关闭对话框，还有一个保存用户按钮，单击它会调用我的控制器中的 DoSaveUser 方法。我可以从调试中看到我进入了 DoSaveUser 方法，如果创建用户成功说用户已保存，该方法最后应该返回到 PartialView。但是，如果您输入详细信息，我的对话框不会被成功消息替换 - 即使用户正在创建 - 即 - 在我点击保存按钮之后 - 如果我随后取消对话框并刷新原始用户页面，我可以看到数据表用我的新用户更新。

UserList 页面上的代码（对话框中的字段不仅仅是名字，但已删除它们以使问题的代码更少）。所以当点击 CreateUser 按钮时，我的 newUserDialog 就会启动。

<div id="newUserDialog">

@using (Html.BeginForm("DoSaveUser", "MyController", FormMethod.Post, new { id = "saveForm" }))
{

     <div id="resultContainer">
        <table class="ui-widget-content" style="width: 565px; margin-top: 10px;">
            <tr>
                <td style="width: 100px;">
                </td>
                <td class="label">
                    Forename :
                </td>
                <td class="value">
                    @Html.TextBoxFor(model => model.Forename, new { style = "width:150px" })
                </td>
            </tr>
        </table>
        <div class="ui-widget-content Rounded" style="width: 565px; margin-top: 10px; text-align: center;">
            <input id="Cancel" type="button" class="dialog-button" value="Cancel" style="margin: 5px" />
            <input id="DoSaveUser" type="submit" class="dialog-button" value="Save User" style="margin: 5px" />
        </div>
    </div>
}

在被点击的对话框上保存用户的 Javascript 代码 - 提交表单。

$(function () {
    $('#saveForm').submit(function () {

        var formData = $("#saveForm").serializeArray();

        $.ajax({
            url: this.action,
            type: this.method,
            data: formData,
            dataType: "json",
            success: function (result) {
                $('#resultContainer').html(result);
            }
        });
        return false;
    });
});

现在在我的控制器中的我的 DoSaveUser 方法中，我可以设置一个断点并点击并查看所有正确发送的相应字段的值 - 一旦我保存到数据库，这就是返回。

return PartialView("UserSuccess", model);

这就是 cshtml 中包含的所有视图。请注意，我想要的是结果容器 Div，它包含我的所有文本框字段和标签，这些字段和标签将被成功替换为用户创建。然后我需要在此页面上单击确定，单击该按钮将关闭对话框并刷新 UserList 页面并显示使用新用户更新的数据表。但是，当我单击保存时，文本框只停留在 Div 上，并且 Div 不会更改 - 但是如果我随后取消对话框并刷新页面，我可以看到数据表已使用我的新用户更新。有什么我想念的吗？ （注意 - 我已将 jquery.unobtrusive-ajax.js 添加到我的 _Layout 页面）

@model MyProject.Models.UserModel
@{
    ViewBag.Title = "UserSuccess";
}
 <div id="resultContainer">
User Created Successfully
</div>

Answer 1

您确定您的初始 html 确实有一个 #resultContainer div 吗？如果你不这样做

$('#resultContainer').html(result);

line 不会匹配任何内容。另一方面，如果你这样做，你会得到重复的嵌套 #resultContainer divs，这也是一个错误（id 必须是唯一的）。

正确的做法是在你的原始html中添加一个空的div：

<div id="resultContainer"></div>

并且在您的视图中输出只是 content 进入 div。

@model MyProject.Models.UserModel
@{
    ViewBag.Title = "UserSuccess";
}
User Created Successfully

Answer 2

我不得不说你在做的不是在 ASP.NET MVC 应用程序中使用对话框和局部视图的好方法。我可以给你一些简单的代码来展示一个想法：

如果 list.cshtml 是用户列表页面，而 edit.cshtml 是包含编辑表单的局部视图。

在列表页面上：

$(".grid-row .edit").click(function(){
    editUser($(this).attr("data-id"));
});
function editUser(id){
  var $dialog=$("#dialogEditUser");
  if($dialog.length == 0){
    $dialog=$("<div id='dialogEditUser'>").appendTo("body");
  }
  $dialog.dialog({
    ...
    open:function(){
        $dialog.load("/user/edit/"+id, function(){
            //todo: handle form events
        });
      }
  });
  $dialog.dialog("open");
}

您也可以在静态方法中制作打开对话框功能，例如：

MvcSolution.Dialog = function (id, title, options) {
  var $dialog = $("#" + id);
  if ($dialog.length == 0) {
    $dialog = $("<div id='" + id + "' class='dialog' title='" + title + "'></div>").appendTo("body");
  }
  $dialog.dialog(options);
  $dialog.dialog("open");
};

你可以找到一个很好的MVC的c#和js框架here