jquery - 使用模型渲染部分视图时如何关闭 JQuery UI 对话框

Question

我在 JQuery UI 对话框中呈现部分视图。示例取自Loading a partial view in jquery.dialog。当您将局部视图传递给模型时，关闭按钮不起作用......有没有人有解决方案让它关闭对话框？（当没有模型传递给局部视图时，它工作正常）。另外，任何人都可以解释为什么在传递视图模型时它不起作用？

看法：

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

行动：

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

视图模型：

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

局部视图：

@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

首先加载内容然后创建对话框

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

    });