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

MVC 3 Partial View within dialog not working

本文关键字：视图 工作 3部 MVC 对话框      更新时间：2023-09-26

我有一个数据表网页，在数据表中显示用户列表。在用户页面上有一个创建新用户的按钮。单击此按钮后，将启动一个模态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方法在我的控制器，我可以设置一个断点，点击并看到所有的值被正确发送到相应的字段-一旦我保存到DB这是返回。

return PartialView("UserSuccess", model);

这是所有的视图包含在cshtml..请注意，我想要的是结果容器Div，其中包含所有我的文本框字段和标签被替换为用户创建成功。然后，我需要在这个页面上点击一个ok，点击将关闭对话框并刷新UserList页面，并显示与新用户更新的数据表。然而，当我点击保存，文本框只是停留在Div和Div没有得到改变-但如果我然后取消对话框，刷新页面，我可以看到数据表更新与我的新用户。我是不是漏掉了什么?(注意-我已经添加了jquery. unobtrusiu -ajax.js到我的_Layout页面)

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

你确定你的初始html有一个#resultContainerdiv吗?如果你没有

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

行不匹配任何内容。另一方面，如果您这样做，您将得到重复嵌套的#resultContainerdiv，这也是一个错误(id必须是唯一的)。

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

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

在你的视图中只输出内容进入div。

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

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

如果列表。CSHTML是一个用户列表页面，并进行编辑。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");
};

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

相关文章：