JQuery 模态 - 隐藏分区与部分视图 (MVC3)



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

我对JQuery模态窗口做了一点研究,似乎我在网上看到的很多例子都是使用一个隐藏div的单一视图,模态窗口只是用隐藏div内部的标记填充。在这些例子中只有一个视图(页面的主视图),隐藏的div输入字段(等)后面的模型数据只是存储在与主视图关联的模型中(而不是为我想要显示的标记提供单独的视图和模型,如果我使用部分视图实现方案,就会出现这种情况)。

我想知道是否有人可以提供一些关于哪种方法是首选或标准实践是什么(如果有的话)的见解。这只是个人喜好的问题吗?一种方法是否比另一种更有效?

我应该怎么做呢:

  • 一个带有单独视图/模型的模态窗口标记的局部视图
  • 现有视图/模型中的隐藏Div

注意:我是开发团队的一员,所以保持与标准实践一致是非常重要的。

如能对此事有任何意见,我将不胜感激。由于

Edit:我问了我在同一个项目上的同事他们是如何做类似的事情的。看起来无论我和他们争论多少次,他们似乎都同意"最好的"one_answers"最有效的方法"是渲染局部视图,每个视图都有一个单独的模型。我真的不明白为什么他们都认为这种方法比使用隐藏div更有效,但由于我目前是"新人",我没有过多地推动这个问题,基本上只是假装同意他们试图提出的关于效率的观点。

TL;DR:我现在正在使用部分视图,不管我喜欢与否。不过我还是想听听更多的意见。

我知道这篇文章已经写了一年了,但是我还是想给你一个答案。

你可以随意翻白眼,但记住你是初级开发人员,办公室里的其他人可能知道他们在说什么。

问问你自己,为什么我要用一堆最终用户可能永远不会使用的数据填充一个隐藏的div ?除非他们每次进入这个页面时都打开对话框(如果是这样,那么这个页面就存在其他根本性的问题),否则不将所有数据呈现到DOM中是"更有效"的。最有效的方法是加载带有部分视图的对话框,并仅在用户请求查看数据时提取数据。

如果你使用模态对话框的部分视图,部分视图将保持在页面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");
}

编辑:嗯,很抱歉我的误解。如果您可以重用,如果您最终将切换到基于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中。

最新更新