MVC3 Razor查看PopUps

时间:2012-03-15 09:57:41

标签: jquery asp.net-mvc-3 modal-dialog

我在我的应用程序中使用jquery模式弹出窗口使用MVC3 Razor视图。

问题是我需要在单击“菜单选项”后打开弹出窗口,这些“菜单”选项位于“布局”页面中(因为我需要在整个站点中显示它)。因为我必须在layeout中使用弹出式HTML代码,所以它在所有页面源中都显示为隐藏。

那么有没有更好的方法可以在运行时创建弹出式HTML?

我现在正在使用它:

$(id).dialog({
            closeOnEscape: true,
            draggable: true,
            resizable: false,
            dialogClass: clz,
            modal: true,
            title: $(id + ' .dialog-content').attr('title'),
            closeText: ''
        });

1 个答案:

答案 0 :(得分:3)

您可以使用JQuery UI Dialog plugin并使用它通过ajax加载模态对话框

实施例

$('#MyAtag').click(function () {
// Add a container for the modal dialog, or get the existing one
var dialog = ($('#ModalDialog').length > 0) ? $('#ModalDialog') : $('<div id="ModalDialog" style="display:hidden"></div>').appendTo('body');
// load the data via ajax
$.get( 'mycontroller/myaction', {},
    function (responseText, textStatus, XMLHttpRequest) {
        dialog.html(responseText);
        dialog.dialog({
            bgiframe: true,
            modal: true,
            width: 940,
            title: 'My Title'
        }); 
    }
);
});

将对ajax“get”的调用绑定到链接的“click”事件。 ajax get请求返回MVC项目中相应操作的局部视图,然后显示在模态对话框中。

以下是控制器外观的粗略示例:

public ActionResult MyAction()
{
    // Do Some stuff
    //...

    // If the request is an ajax one, return the partial view
    if (Request.IsAjaxRequest())
        return PartialView("PartialViewName");

    // Else return the normal view
    return View();
}

这是你想要的吗?