使用 ASP.NET MVC 数据绑定视图模型显示 JQuery 对话框的最佳方式

Posted 2023-02-22

【中文标题】使用 ASP.NET MVC 数据绑定视图模型显示 JQuery 对话框的最佳方式

【英文标题】：Best way to display a JQuery Dialog with ASP.NET MVC data bound View Model

【发布时间】：2012-06-27 00:45:13

【问题描述】：

想象一个包含用户列表的简单页面。选择一个用户会显示一个 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 对话框，然后，当我需要显示对话框时填充用户data 对 ActionMethod 执行 Ajax 调用，该调用将使用所需数据重新填充局部视图的模型，并使用 JQuery .html() 方法重新呈现它。

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

很好，这行得通，但是这个逻辑有一些问题：

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

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

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

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

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

再次，它有效，但我发现这种方式存在一些大问题：

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

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

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

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

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

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

感谢任何想法。没有坏主意。 谢谢。

【参考方案1】：

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

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

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

【讨论】：

谢谢托米斯拉夫。例如，我的部分视图包含 5 个包含数百个字段的选项卡。根据所选的链接条件，它只是不适合在页面加载时呈现一次然后重新加载它。你不同意吗？

我不确定这是否是最好的方法，但这是我最终选择的路径。