JQuery Modal - 隐藏 Div 与部分视图 (MVC3)

Question

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

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

我想知道是否有人可以提供一些关于首选方法或标准做法（如果有）的见解。这只是个人喜好问题吗？一种方法比另一种方法更有效吗？

我应该采用哪种方法：

• 具有单独视图/模型的模式窗口标记的部分视图
• < strong>现有视图/模型中的隐藏 Div

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

对此事的任何想法将不胜感激， 谢谢

编辑：我询问了参与同一项目的开发人员同事，他们是如何做类似的事情的。看起来无论我与他们如何争论这个问题，他们似乎都同意“最好的”和“最有效的方法”是渲染部分视图，每个视图都有一个单独的模型。我真的不明白为什么他们都认为这种方法比使用隐藏的 div 更有效，但由于我目前是“新人”，我没有过多地推动这个问题，基本上只是假装同意他们的观点试图提高效率。

TL;DR：无论我喜欢与否，我现在都在使用部分视图。不过，我仍然想听听更多对此的意见。

Answer 1

我知道这篇文章已经发布了大约一年，但我想插话一下答案。

你可以随心所欲地翻白眼，但请记住你是初级开发人员，办公室里的其他人可能真的知道他们在说什么。

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

Answer 2

如果您使用模态对话框的分部视图，即使模态关闭，分部视图也将保留在页面 HMTL 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");
}

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);

重要部分是：

Unobtrusive 激活：

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

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

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

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