Question

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

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

我想知道是否有人可以就此选择哪种方法或标准做法（如果有的话）给出一些见解。这仅仅是个人偏好的问题吗？一种方法比另一种更有效吗？

我应该采用哪种方式：

具有单独视图/模型的模态窗口标记的部分视图
现有视图/模型中的隐藏Div

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

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

编辑：我问过同一项目的开发人员，他们是如何做与此类似的事情。看起来无论我与他们多少讨论这个问题，他们似乎都同意“ best ”和“最有效的方式”这样做是为了渲染部分视图，每个视图都有一个单独的模型我真的不明白为什么他们都认为这种方法比使用隐藏的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的刷新，或者只是想拥有一个干净/简单的主视图，那么请使用partials。

在MVC 3中还有另一种方法，那就是使用EditorTemplates / DisplayTemplates。它们真的非常强大，但需要进行一些挖掘才能完全使用。这两种方法都有利有弊，这实际上取决于你的具体做法。

很久以来，我发现了两种在jqUI对话框中显示部分视图的方法。

前者通过AJAX或@Html.RenderAction加载视图当场景非常静态时，Latter将直接在用于构建对话框的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中。

JQuery Modal - 隐藏的Div与部分视图（MVC3）

3 个答案: