MVC3剃刀和模态弹出窗口 [英] MVC3 Razor and Modal popup

问题描述

我需要获得一个Modal弹出窗口，该弹出窗口显示一个表单，该表单会将数据保存回db. 有没有很好的例子呢?是Ajax更灵活还是使用jquery对话框?

i need to get a Modal popup that displays a form which will save data back to the db. is there is good example of doing it? is Ajax more flexible or using jquery dialog?

推荐答案

我使用了 JQuery UI Dialog插件，并使用JQuery通过ajax加载模式对话框，对此感到非常满意.

I've used the JQuery UI Dialog plugin and use JQuery to load the modal dialog via ajax, and am quite happy with it.

我不得不修改我的代码才能为您提供有用的信息，因此对任何语法错误表示歉意，但是我使用了这个jQuery

I've had to hack up my code to give you something useful, so apologies for any syntax errors, but I use this 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项目中的相应操作返回局部视图，然后显示在模式对话框中.

which binds a call to an ajax 'get' to the 'click' event of a link. The ajax get request returns a partial view from the corresponding action in my MVC projec, which then shows up in the modal dialog.

这是控制器外观的一个粗略示例

Here is a rough example of what the controller could look like

    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();
    }

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

The view for the dialog would just be a normal partial view.

我使用以下.css，它使模式对话框后面的页面灰显"

I use the following .css, which 'greys out' the page behind the modal dialog

.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进行修改，以使其看起来正确，

You might need to muck around with the css for #ModalDialog to get it looking right,

这篇关于MVC3剃刀和模态弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！