MVC3 Razor 和 Modal 弹出窗口

Posted

技术标签:

【中文标题】MVC3 Razor 和 Modal 弹出窗口【英文标题】:MVC3 Razor and Modal popup 【发布时间】:2011-09-27 19:42:08 【问题描述】:

我需要获得一个模态弹出窗口,该弹出窗口显示一个将数据保存回数据库的表单。 有没有这样做的好例子?是 Ajax 更灵活还是使用 jquery 对话框?

【问题讨论】:

【参考方案1】:

我已经使用JQuery UI Dialog plugin 并使用 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 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();
    

对话框的视图只是普通的局部视图。

我使用以下 .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);

您可能需要修改 #ModalDialog 的 css 以使其看起来正确,

【讨论】:

你不需要在你的视图/控制器中做任何与平常不同的事情——如果你不想包含你的 _layout.cshtml,你只需要返回一个局部视图【参考方案2】:

这很简单,但这不是插件: http://deseloper.org/read/2009/10/jquery-simple-modal-window/

基于 Jquery 插件的模态: http://www.ericmmartin.com/projects/simplemodal/

希望这会有所帮助。

【讨论】:

我在我的 MVC 3 应用程序中使用第一个。不是最好的,但很有效。 你能解释一下你所说的不是最好的吗?你不喜欢什么?我也没用过,很感兴趣。谢谢。 不是最好的:我的意思是如果你遵循#1,你会知道代码,但它缺乏应用多个主题,如果有的话有特殊效果。但是您可以根据需要添加。我喜欢它,因为我不需要那么多主题,而且我想要更小的脚本大小。希望你也会发现它很容易。如果您有任何问题,请告诉我。 如果你遵循第一个,你应该把css放在你的css文件中,把js代码放在你的js文件中,以便更好地重用。【参考方案3】:

您可以使用 jquery 对话框。 您还可以使用 Jquery 工具。

http://flowplayer.org/tools/demos/overlay/modal-dialog.html

它的占地面积也非常小。

【讨论】:

我们有 mvc 3 asp 的例子吗

以上是关于MVC3 Razor 和 Modal 弹出窗口的主要内容,如果未能解决你的问题,请参考以下文章

带有 Spring MVC 和 jQuery DataTable 的 Bootstrap Modal 弹出窗口

Jquery Modal弹出窗口中的Angularjs Scope

Rails 3-在弹出窗口中的 ajax 调用上呈现部分内容

点击按钮没有弹出modal弹窗,去刷新页面的解决方法

javascript 使用JSCookie #javascript #uikit的Uikit 3 Modal弹出窗口

bootstrap怎么弹出窗口