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

Question

我正在 JQuery UI 对话框中渲染部分 View 。示例取自Loading a partial view in jquery.dialog 。当您将部分 View 传递给模型时，关闭按钮不起作用...有人有解决方案让它关闭对话框吗？ (当没有模型传递到局部 View 时它工作正常)。另外，谁能解释为什么它在传递 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>

行动:

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

View 模型:

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

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

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

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

    });