我在我的应用程序中使用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: ''
});
答案 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();
}
这是你想要的吗?