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 :)

Posted an alternative approach here : http://stackoverflow.com/questions/10759742/load-and-edit-data-in-jquery-ui-dialog/10763559#10763559 — amarnath chatterjee, May 26 '12 at 04:26

Darin Dimitrov · Accepted Answer · 2011-01-26T08:21:43.313

78

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

edited Jan 26 '11 at 08:21

answered Jan 26 '11 at 08:09

Darin Dimitrov

1,023,142
271
3,287
2,928

1

Thanks Darin, why does the _layout.cshtml style get applied to the partial view? I thought they were meant to be like an asp.net usercontrol? IS it also ok to use @Url.Content when the view is in a different folder? cheers again for your help – Diver Dan Jan 26 '11 at 08:49
2

@user293545, you could disable this by putting: `@{ Layout = null; }` inside your partial or by returning `PartialView("_CreateAlbumPartial")` inside your controller action – Darin Dimitrov Jan 26 '11 at 08:50
Awesome its all coming togeather slowly :)does either method have any performance issues? or are they both similar – Diver Dan Jan 26 '11 at 09:02
Thanks. Could you please answer http://stackoverflow.com/questions/9413467/asp-net-mvc3-razor-redirecting-from-partial-views too? – LCJ Feb 24 '12 at 05:42
The close button doesn't work for me with this example. Does anyone else have the same problem? – woggles Apr 05 '12 at 10:04
1

Darin, can I ask about passing parameters to CreateAlbumPartial ? If I had parameters to pass to that Action, how would you do it ? Thank you – InspiredBy May 17 '12 at 18:21
@Shenaniganz, you could use a view model. – Darin Dimitrov May 17 '12 at 21:29
@Shenaniganz,This is what i did public ActionResult GetPatFormData(int id) { return PartialView("_PatDetails", vm); } and in Jquery var url = '@Url.Action("GetPatFormData", "Pat")?id=' + patId; $("#PatDetailDialog").load(url, function (response, status, xhr) { $('#PatDetailDialog').dialog('open'); }); – Sandeep Aug 27 '14 at 23:41
This JavaScript does not parse in JSFIDDLE? – JsonStatham Feb 03 '15 at 16:24

score 9 · Answer 2 · answered Jan 01 '13 at 13:53

To improve Darin answer, we can move the div loading code in the button click event. In this way all position's alghorithms of the dialog works on the new text, and so the dialog is placed correctly.

<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 () {
            //Load the CreateAlbumPartial action which will return 
            // the partial view _CreateAlbumPartial
            $('#dialog').load("@Url.Action("CreateAlbumPartial")", 
                    function (response, status, xhr) {
                        $('#dialog').dialog('open');
                    });   
        });
    });
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">

Loading a partial view in jquery.dialog

2 Answers2

Linked