asp.net mvc 3 - Loading a partial view in jquery.dialog

Question

I am a completely new to mvc and trying to create a dummy application to learn mvc 3. I have worked my way through the music store example and now I am trying to extend it slightly into a more real world application. With the example whenever you want to any new item you are redirected to the Create view which is fine however I want instead of doing a full page post back I want to use the jquery.dialog to open a modal popup which will allow the user to insert a new item.

so far I have

  <script type="text/javascript">

    $(function () {

        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: "hi there",
            modal: true,
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
        $('#my-button').click(function () {
        $('#dialog').dialog('open');
        });}); </script>

     <div id="dialog" title="Create Album" style="overflow: hidden;">
    @Html.Partial("_CreateAlbumPartial")</div>

Problems with this is the partial view is loaded everytime not through ajax and I dont really know where I should be placing the partial view. Shoukld it be in the shared location or in the folder with the other views? How do I update the controller class to cater for the partial view?

Sorry if these are easy to do, im 3 days into mvc :)

Answer 1

Try something like this:

<script type="text/javascript">
    $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'hi there',
            modal: true,
            open: function(event, ui) {
                //Load the CreateAlbumPartial action which will return 
                // the partial view _CreateAlbumPartial
                $(this).load("@Url.Action("CreateAlbumPartial")");
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#my-button').click(function () {
            $('#dialog').dialog('open');
        });
    });
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">

We used the open function which is triggered when the dialog is opened and inside we send an AJAX request to a controller action which would return the partial:

public ActionResult CreateAlbumPartial()
{
    return View("_CreateAlbumPartial");
}