Question

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

Answer 1

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.