Geek asks and answers

Load a partial view into a modal popup

I am working with MVC3 C # 4.0.

I created a partial view.

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

Any directions on how I can do this?

+5
source share
1 answer

You can use the 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.cshtmlpartial, which will contain the partial markup that you want to display in modal mode:

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

Index.cshtml, , :

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

, Index, javascript.

+9

More articles:


All Articles