Question

想象一下包含用户列表的简单页面。选择用户将显示一个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）使用上面显示的部分视图结构，使用@Html.Partial("UserDetails", new User)从母版页预加载div对话框然后，当我需要填充显示的对话框时用户数据执行对ActionMethod的Ajax调用，该调用将使用所需数据重新填充部分视图的模型，并使用JQuery .html()方法重新呈现它。

部分视图/对话框加载数据后，我只需使用JQuery .dialog('open')

显示它

很好，这可行，但这个逻辑存在一些问题：

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

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

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

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

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

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

a）它打破了我的“保持一切统治”。在查看时，如果没有一些搜索，其他开发人员将不知道将在此Div中加载哪个部分视图。

b）部分视图弹出窗口的所有Javascripts现在都需要在主页面中引用，而不是部分视图本身。

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

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

我的完美场景是预先加载所有部分视图字段然后，当请求对话框显示填充数据时，某种程度上模型将预加载的部分视图绑定到新的JSon数据集，而不是加载/重新加载所有部分视图字段。有办法吗？

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

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

Answer 1

将部分代码加载到部分代码中，然后仅使用操作返回更新部分容器，没有任何错误。

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

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

使用ASP.NET MVC数据绑定View Model显示JQuery Dialog的最佳方法

1 个答案: