JQuery模态框 - 隐藏的Div与部分视图（MVC3）的比较

Question

我正在使用MVC3/C#/ASP.NET创建一个网站，其中包含一个视图页面，该页面将显示一个JQuery Modal类型的弹出窗口（实现与传统的模态窗口有点不同，但功能相似）。目前，我将要放入模态窗口中的标记存储为部分视图（具有单独的关联模型）。

我对JQuery模态窗口进行了一些研究，似乎很多在线示例都使用一个隐藏的div的单个视图，并且模态窗口只是用内部隐藏div的标记填充。在这些示例中，只有一个视图（页面的主视图），隐藏div的输入字段（等等）背后的模型数据仅存储在与主视图相关联的模型中（与使用部分视图实现方案时情况不同，此时需要单独的视图和模型来显示我想要的标记）。

我想知道有人能否提供一些见解，哪种方法更受欢迎或者是否存在标准做法（如果有的话）。这只是个人偏好吗？一种方法比另一种方法更有效吗？

我应该如何做到以下哪种方式：

- 使用单独的视图/模型呈现模态窗口标记的部分视图 - 在现有的视图/模型中使用隐藏的Div

注意：我是作为开发团队的一员工作的，因此保持与标准实践一致非常重要。

对这个问题的任何想法都将不胜感激，谢谢！

编辑：我问了同一项目上的其他开发人员如何处理类似于此的事情。看起来无论我如何与他们辩论这个问题，他们似乎都同意使用单独的模型呈现部分视图是“最佳”和“最有效”的方法。我真的不明白为什么他们都认为这种方法比使用隐藏的div更有效，但由于我目前是“新手”，所以我没有太多地推动这个问题，而只是假装同意他们试图证明效率的观点。

总之，我现在正在使用部分视图，无论我是否喜欢它。尽管如此，我仍然希望听到更多关于这个问题的意见。

- user1004499

---

我认为这取决于模态窗口的内容。如果内容由“页面”本身定义，那么将其放在一起会更明智。这样，您就无法没有模态内容而使用页面。另一方面，如果内容用于动态内容，而不是特定于页面，则应将其分开，以便可以编辑它而不必担心父级中的更改。我想这归结于我的依赖关系。它们是否彼此需要，或者页面是否可以存在而没有模态，模态是否可以存在而没有页面。 - Marco Johannesen

@MarcoJohannesen 就依赖性而言，主页面无法存在而不使用模态框（它是该页面功能的关键部分）。然而，我认为模态框可以在没有页面的情况下存在。 - user1004499

他们对于使用部分视图得出了什么结论？也许我可以学到一些东西 :) 作为新来的员工，我知道你的感受！ - Marco Johannesen

我现在已经学到，通常在这种情况下最好使用部分视图，因为如果其他人需要使用完全相同的功能，他们可以更容易地将现有的部分视图实现到自己的代码中。一般来说，可重用性问题是我们团队中大多数开发人员使用部分视图的驱动力（即使我们知道它们不会被重复使用，仍然鼓励使用“以防万一”）。 - user1004499

呵呵...好吧，我想有些论点是站得住脚的——你永远不知道你的代码将来会被重用，会发生什么变化——所以我想关键是要尽可能地使它自由和独立（似乎是旧的面向对象编程目标） :) - Marco Johannesen

Answer 1

我知道这篇文章已经有一年的历史了，但我想发表一下我的看法。

你可以不以为然，但请记住你是初级开发人员，办公室里的其他人可能真的知道他们在谈论什么。

问问自己，为什么要用一堆数据填充隐藏的div，而最终用户可能永远都不会使用呢？除非他们每次访问此页面时都打开对话框（如果是这样，页面上还有其他根本性的问题），否则“更有效率”的方法是不将所有数据渲染到DOM中。最有效的方法是使用部分视图加载对话框，并在用户请求查看数据时仅拉取数据。

- Marcus Johnson

Answer 2

如果您使用部分视图来创建模态对话框，即使关闭了模态对话框，该部分视图仍将保留在页面的HTML DOM中。我建议使用单独的视图来创建模态弹出窗口，并使用ajax方法调用它。

部分视图方法：

<div id="popup_window" title="Pop up title" >

<% Html.RenderPartial("_partialviewname", Model); %>

</div>

使用Ajax的下一个方法

HTML：

<div id="popup_window" title="Pop up title" > <!-- div to render the popup -->
</div>



<a onclick="javascript:ShowPopUp();" >Click here</a> <!--pop up is given by this link-->

Ajax函数部分

function ShowPopup(

$("#popup_window").dialog({
                autoOpen: false,
                modal: true,
                resizable: false,
               // height: 'auto',

                //width: 565
            });

     $.ajax({

                    type: 'GET',
                    url: '/controller/action', //action to return view 
                    cache: false,
                    success: function (data) {
                        $("#popup_window").empty();
                        $("#popup_window").append(data);





                    }
                });

                $(""#popup_window").dialog("open");
}

- Prasanth

---

该方法非常依赖于模态窗口不是页面上所必需的，如果禁用了JavaScript等，则无法实现较好的可访问性。加载到DOM中并使用JS隐藏的整个原因是用户不应该依赖JS。 - Marco Johannesen

这大概就是我最终做的事情。谢谢，我会将其标记为答案（尽管我仍然认为这只是个人喜好问题）。 - user1004499

Answer 3

编辑：对于我的误解，我感到抱歉。如果您可以重复使用，如果最终会切换到基于AJAX的刷新或者只是想要一个干净/简单的主视图，那么请使用部分视图。

MVC 3中还有另一种方法，就是使用EditorTemplates/DisplayTemplates。它们非常强大，但需要深入挖掘才能充分使用。这两种方法都有优缺点，具体取决于您正在做什么。

到目前为止，我发现了两种在jqUI对话框中显示部分视图的方法。

前者是通过AJAX或@Html.RenderAction加载视图。 后者，当场景相当静态时，是直接在用于构建对话框的div内部使用@Html.RenderPartial。

这是我使用的Ajax方法：

function MyDlg(options,bottoni) {
    var name = options.name;
    $(name).load(options.url, function () {
        var $jQval = $.validator;
        $jQval.unobtrusive.parse($(this));
        $(name).dialog({
            autoOpen: true,
            width: options.width,
            heigth: options.height,
            resizable: false,
            draggable: true,
            title: options.title,
            modal: true,
            buttons: bottoni
        });
        $(name).dialog("open");
    });
}

正如您所看到的，它接收到类似于：

var bottoni = {
    "Cancel": function () {
        // cancel pressed
    },
    "Ok": function () {
        // Ok pressed
    }
}
MyDlg({ name: "Edit", width: "auto", height: "auto", title: 'Edit Stuff', url: mvcUrl }, bottoni);

重要部分包括：

不显眼的激活：

var $jQval = $.validator;
$jQval.unobtrusive.parse($(this));

对话框在 load 事件中打开的事实。

在控制器中，您只需返回一个 PartialView("_viewName", model)。

使用对话框时要小心清理。我更喜欢通过 document.createElement() 编程创建 div，然后在关闭时从 DOM 中删除它，但有些情况下我必须将 div 留在 dom 中。

- BigMike

---

我非常感谢您就如何显示部分视图的答案，但这并不是我想问的。基本上，我想知道哪个更好：使用部分视图还是隐藏的 div（用于模态/对话框中的实际标记）。 - user1004499

谢谢您的编辑，我会研究一下EditorTemplates/DisplayTemplates方法来完成这个任务。 - user1004499