[英]MVC3 Razor and Modal popup
我需要一个模态弹出窗口,它显示一个将数据保存回数据库的表单。 有没有这样做的好例子? Ajax 更灵活还是使用 jquery 对话框?
我使用了JQuery UI Dialog 插件并使用 JQuery 通过 ajax 加载模态对话框,我对此非常满意。
我不得不破解我的代码给你一些有用的东西,所以对任何语法错误表示歉意,但我使用这个 jquery,
$('#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 获取请求从我的 MVC 项目中的相应操作返回部分视图,然后显示在模式对话框中。
这是 controller 的粗略示例
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();
}
对话框的视图只是一个普通的局部视图。
我使用以下内容。css,它使模态对话框后面的页面“变灰”
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #AAA url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
opacity: .8;
filter: Alpha(Opacity=30);
}
您可能需要使用 css 来处理#ModalDialog 以使其看起来正确,
这很简单,但这不是插件: http://deseloper.org/read/2009/10/jquery-simple-modal-window/
Jquery 基于插件的模态: http://www.ericmmartin.com/projects/simplemodal/
希望这可以帮助。
您可以使用 jquery 对话框。 您还可以使用 Jquery 工具。
http://flowplayer.org/tools/demos/overlay/modal-dialog.html
它的占地面积也非常小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.