load partial view in to a modal popup

Question

I am working with MVC3 c# 4.0.

I have created a partial view.

I have a button on my page, when I click this button I want to be able to load the partial view in to a modal popup. I presume the best way to do this is via javascript - I am using jQuery already in the application.

Any pointers as to how I could do this?

Answer 1

You could use jQuery UI dialog.

So you start by writing a controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Modal()
    {
        return PartialView();
    }
}

then a Modal.cshtml partial that will contain the partial markup that you want to display in the modal:

<div>This is the partial view</div>

and an Index.cshtml view containing the button which will show the partial into a modal when clicked:

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('.modal').click(function () {
            $('<div/>').appendTo('body').dialog({
                close: function (event, ui) {
                    dialog.remove();
                },
                modal: true
            }).load(this.href, {});

            return false;            
        });
    });
</script>

@Html.ActionLink("show modal", "modal", null, new { @class = "modal" })

Obviously in this example I have put the directly scripts into the Index view but in a real application those scripts will go into separate javascript file.