c# - 使用 ASP.NET MVC 数据绑定(bind) View 模型显示 JQuery 对话框的最佳方式

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>
    }
}

我将在帖子中提供更具体的示例，但我正在寻找的是关于加载和显示模型绑定(bind)局部 View 的最佳方式的一般“经验”意见JQuery 对话框。

我知道如何在代码方面做到这一点，但我认为一定有更好的方法。我相信常见的已知方法效率不高。

我的规则和我想要的是，与部分 View 弹出窗口相关联的所有代码都保留在该部分 View 中。我希望我的弹出窗口是结构化的类似于以下 UserDetails 部分 View :

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

<div id="placeholder">

...The modal dialog content...

</div>

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

据我所知，有两种方法可以将部分 View 显示为对话框，我对这两种方法都有疑问:

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

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

很好，这可行，但此逻辑存在一些问题:

a) 我两次加载相同的局部 View (第一次空白，第二次加载数据)

b) 加载母版页时，Placeholder DIV 的内容在屏幕上闪烁。将 DIV 设置为 display:none在 .html() 方法触发之前不会在这里工作，它将加载带有 display:none 的局部 View 。标签，弹出窗口将显示为空白窗口。

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

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

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

同样，它可以工作，但我发现这种方式存在一些大问题:

a) 它打破了我的“将它们放在一起的规则”。查看 时，如果不四处搜索，其他开发人员将不知道将在此 Div 中加载哪个部分 View 。

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

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

最重要的问题是，您认为在保持代码井井有条的同时将模型绑定(bind)填充的局部 View 显示为模态对话框的最佳方式是什么？

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

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

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

Answer 1

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

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

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