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>

Answer 1

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

    });