How to close JQuery UI Dialog when rendering a partial view with a model

Question

I am rendering a partial view in a JQuery UI dialog box. Example taken from Loading a partial view in jquery.dialog. The close button doesnt work when you pass the partial view a model...does anyone have a solution to get it to close the dialog box? (it works fine when no model is passed to the partial view). Also, can anyone explain why it doesn't work when passing a view model?

View:

<script type="text/javascript">
    $(function () {      
        $('#dialog').dialog({            
            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");
                }
            }
        });                 
    });
</script>

<div id="dialog" title="Create Album" style="overflow: hidden;"></div>

Action:

   public ActionResult CreateAlbumPartial()
        {                
        var applications = new List<string>{"bob", "john", "andrew"};          
        var selectList = applications.Select(x => new SelectListItem{Text = x,Value = x}).ToList();
        var model = new TestModel{Applications = selectList};
        return View("_CreateAlbumPartial", model);
        }

ViewModel:

public class TestModel
    {      
        public int SelectedApplicationId;
        public IEnumerable<SelectListItem> Applications;  
    }

Partial View:

@model MvcApplication1.Models.TestModel

<div>

 @Html.DropDownListFor(
        x => x.SelectedApplicationId, 
        new SelectList(Model.Applications, "Value", "Text"),
        "-- Select Application --",
             new
             {
                 id = "ApplicationsDropdownList",
                 data_url = Url.Action("ViewRolesForApplication", "Index")
             }
    )   
</div>

woggles, check out this post: http://ricardocovo.com/2011/04/03/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms/, it explain exactly what you are looking for. --originally on aspx, but there is a razor version as well. — covo, Apr 12 '12 at 13:29
@covo great post...I'm going to have to make quite a lot of changes to get that working with my current code. I'll let you know how it works out. — woggles, Apr 12 '12 at 14:34
@covo Ive followed your blog post and it works well for a simple edit scenario. However in my case my dialog needs to have a dropdownlist which then renders another partial view with a checkbox list when something is selected. In this case the close button doesnt work again. Do you possibly have an elegant solution for a more complex form - one that may contain partial views? — woggles, Apr 23 '12 at 15:27

Yorgo · Accepted Answer · 2012-06-28T10:59:46.517

first load the content then create dialog

    $(function () {      
         $.ajax({
             url: "@Url.Action("CreateAlbumPartial")",
             success:function(data){
                  $('#dialog').html(data).dialog({            
                      width: 400,            
                      resizable: false,
                      title: 'hi there',
                      modal: true,
                      buttons: {
                           "Close": function () {
                             $(this).dialog("close");
                           }
                      }
                  });   
             }
         });

    });

How to close JQuery UI Dialog when rendering a partial view with a model

1 Answers1