3

想象一个带有用户列表的简单页面。选择一个用户会显示一个 JQuery 模式对话框，其中包含可以编辑的各种详细信息。就像是：

@model IEnumerable<UserRole>


@if (Model.Any())
{
    foreach (var user in Model.Users)
    {
      <a href="#" id="user-details-link" onclick="userDetailsOpen(@user.id)">Details</a>
    }
}

我将通过帖子提供更具体的示例，但我正在寻找的是关于将模型绑定的部分视图加载和显示为 JQuery 对话框的最佳方式的一般“经验”意见。

我知道如何在代码方面做到这一点，但我认为必须有更好的方法。我相信常见的方法不是很有效。

我的规则和我想要的是将与部分视图弹出窗口关联的所有代码保留在该部分视图中。我希望我的弹出窗口的结构类似于以下 UserDetails 部分视图：

@model User
<script src="@Url.Content("~/Scripts/UserScripts.js")" type="text/javascript"></script>

<div id="placeholder">

...The modal dialog content...

</div>

这样，当另一个开发人员看到它时，一个人就可以轻松地将它们拼凑在一起。

据我所知，有两种方法可以将部分视图显示为对话框，我对它们都有问题：

1)使用我上面显示的部分视图结构，通过使用从母版页预加载 div 对话框@Html.Partial("UserDetails", new User)，然后，当我需要显示填充用户数据的对话框时，对将重新填充的 ActionMethod 执行 Ajax 调用带有所需数据的局部视图模型并使用 JQuery.html()方法重新渲染它。

一旦部分视图/对话框加载了数据，我只需使用 JQuery 显示它.dialog('open')

太好了，这行得通，但是这种逻辑存在一些问题：

a）我两次加载相同的局部视图（第一个空白，第二个加载数据）

b) 加载母版页时，占位符 DIV 的内容会在屏幕上闪烁。在 .html() 方法触发之前将DIV 设置为display:none在这里不起作用，它将加载带有该display:none标记的局部视图，并且弹出窗口将显示为空白窗口。

c) 当请求页面时，如果页面很大，页面显示需要一些时间

2）我可以在母版页上放置一个空白<div id="placeholder"></div>，然后使用 ajax 或者我现在使用 JQuery 将部分视图内容加载到该 div 中，而不是在部分视图中：

var url = "/MyController/MyAction/" + Id;
$("#palceholder").load(url).dialog('open');

同样，它有效，但我看到这种方式存在一些大问题：

a）它打破了我的“保持一致规则”。在查看 时，如果没有在其他开发人员周围进行一些搜索，将不知道将在此 Div 中加载什么局部视图。

b) 现在需要在母版页中引用部分视图弹出窗口的所有 Javascript，而不是部分视图本身。

c) 当请求页面时，如果页面很大，页面显示需要一些时间

最重要的问题是，您认为将模型绑定的填充部分视图显示为模态对话框同时保持代码组织的最佳方式是什么？

我的完美方案是预加载所有部分视图字段，然后，当请求对话框显示填充了数据时，模型将预加载的部分视图绑定到新的 JSON 数据集，而无需加载/重新- 加载所有局部视图字段。有办法吗？

PS 我尝试的其中一件事是预加载我的部分视图字段，@Html.Partial("UserDetails", new User)然后使用 JQuery.replaceWith()方法替换 Div 内容，但不幸的是我无法让它工作。

任何想法表示赞赏。没有坏主意。谢谢。

4

1 回答 1

2

将部分代码加载到部分中，然后通过操作返回来更新部分容器并没有错。

<div id="ParitalContainer">
    @Html.Partial("_PartialView", Model.PartialModel)
</div>

或者，您可以考虑使用 JSON 数据的场景。即，通过调用 a$.ajax或来异步加载所有数据$.getJSON。您的操作结果将返回JsonResult，然后您可以更新所需的元素。此外，如果您想要更强大的解决方案，您可以考虑使用 Knockout.js。如果我想要“保持在一起”的方法，这就是我会做的事情。

于 2012-06-29T16:55:38.883 回答