MVC3 Razor and Modal popup

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?

回答1:

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

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

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.

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

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

回答2:

This is simple one but this is not a plugin: http://deseloper.org/read/2009/10/jquery-simple-modal-window/

Jquery plugin based modal: http://www.ericmmartin.com/projects/simplemodal/

Hope this helps.

回答3:

you can use jquery dialog. there is also Jquery tools which you can use.

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

It has a very small footprint as well.