Loading MVC4 PartialView inside jQuery ui Dialog window

Question

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>

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