Search code examples
jqueryasp.net-mvcasp.net-mvc-3jquery-uiblockui

Display ASP MVC View modally - best practice


I have a controller with Action methods and each method return some view that should be presented modally. For now I am using "blockUI" with "IFrame" in it. But I have some feel that this is not the best way to do this.
What is the best practice to display views modally in asp mvc?
This is my current solution:

function showViewModally() {
                $.blockUI({ message: $('<div id="divAI">
    <div><div><span>Modal View</span></div></div>
<iframe id="ifAI" scrolling="no" height="100%" width="100%" src="../Area/Controller/ActionMethod" frameborder="0">
</iframe></div>'),
                    css: { border: "3px solid #3697b3",
                    width: '500px',
                    height: '400px',
                    left: ($(window).width() - 500) / 2 + 'px',
                    top: '10px'
                }
                });
            }

Solution

  • What is the best practice to display views modally in asp mvc?

    The notion of best is very subjective and I don't like it. An alternative approach to display modal partial views in a web application is to use the jQuery UI dialog. So instead of using an iframe you could use AJAX request and show the result into a modal dialog.

    For example:

    $('<div/>').dialog({
        modal: true,
        open: function () {
            var url = '@Url.Action("ActionMethod", "Controller", new { area = "Area" })';
            $(this).load(url);
        }
    });
    

    And here's a live demo.