Loading MVC4 PartialView inside jQuery ui Dialog window

asp.net-mvc, asp.net-mvc-4, jquery, jquery-ui

Solution

I'm not sure about MVC 2 or 3 but in MVC 4 this is how I got it to work.

$(document).ready(function () {
    $('#dialog-modal').dialog({
        autoOpen: false,
        modal: true,
        open: function (event, ui) {
            //alert("test");
            $(this).load("/Controller/Action");
        }
    });
});

function OpenDialog() {
    $('#dialog-modal').dialog('open');
}

Problem

I'm trying to display a partial view inside jQuery ui dialog window but I'm not having much luck with the load function. Dialog window does open but I dont see the content of the partial view. JS code is in a external js file. alert does display. ``` $(document).ready(function () { $('#dialog-modal').dialog({ autoOpen: false, //width: 200, height: 400, modal: true, open: function (event, ui) { //alert("test"); $(this).load("@Url.Action(\"OpenDialogWindow\", \"Home\" )"); } }); }); ``` ================================================================== My div is on the master page like this. ``` <div id="dialog-modal" title="Select a city to see the listings"> </div> ``` ======================== My ActionResult looks like this. I do have the view set as a partial view. ``` public ActionResult OpenDialogWindow() { return PartialView("DialogView"); } ``` ======================== My view looks like this. ``` @using TheSGroup_Web.ViewModels @model CitiesViewModel <p>this is the content. </p> ```

Original source

Related problems