MVC3 Razor and Modal popup

Question

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?

Answer 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,

Answer 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.