2012-04-12 70 views
2

我在JQuery UI对话框中呈现局部视图。取自Loading a partial view in jquery.dialog的示例。关闭按钮不起作用,当你传递一个模型的局部视图...有没有人有解决方案让它关闭对话框? (当没有模型传递给局部视图时,它工作正常)。另外,任何人都可以解释为什么传递视图模型时不起作用?如何使用模型渲染局部视图时关闭JQuery UI对话框

查看:

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

woggles,看看这篇文章:http://ricardocovo.com/2011/04/03/asp-mvc3-editing-records-with-jqueryui-dialogs-and -ajaxforms /,它解释了你正在寻找的东西。 - 原文在aspx上,但也有剃须刀版本。 – covo 2012-04-12 13:29:18

+0

@covo伟大的职位......我将不得不作出很多更改才能使用我当前的代码。我会让你知道它是如何工作的。 – woggles 2012-04-12 14:34:21

+0

@covo Ive关注了你的博客文章,它适用于简单的编辑场景。然而,在我的情况下,我的对话框需要有一个下拉列表,当选择了某些东西时,它会用复选框列表呈现另一个局部视图。在这种情况下,关闭按钮不再工作。您是否可以为更复杂的表单提供优雅的解决方案 - 可能包含部分视图? – woggles 2012-04-23 15:27:30

回答

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

    });