Question

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

UserList页面上的代码（对话框中的字段多于仅仅是forename但已删除它们以使问题的代码更少）。因此，当单击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;
    });
});

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

return PartialView("UserSuccess", model);

这就是cshtml..note中包含的所有视图我想要的是结果容器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);

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

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

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

在您的视图中输出内容进入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 here

找到一个好的c＃和js框架

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

2 个答案: