如何渲染与模型的局部视图时关闭JQuery用户界面对话框 [英] How to close JQuery UI Dialog when rendering a partial view with a model

问题描述

我在渲染一个jQuery UI对话框的局部视图。从<一个实例拍摄href=\"http://stackoverflow.com/questions/4802378/loading-a-partial-view-in-jquery-dialog/4802423#comment12822906_4802423\">Loading在jquery.dialog 的局部视图。当您通过局部视图模型的关闭按钮不起作用......没有任何人有一个解决方案，得到它关闭对话框？ （当没有模型传递给局部视图，它工作正常）。此外，任何人都可以解释为什么通过一个浏览模式时，它不工作？

查看：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{
        $（'＃对话）。对话框（{
            宽度：400，
            可调整大小：假的，
            标题：'您好'，
            模式：真实，
            打开：函数（事件，UI）{
                //加载CreateAlbumPartial行动将返回
                //局部视图_CreateAlbumPartial
                $（本）.load（@ Url.Action（CreateAlbumPartial））;
            }，
            纽扣： {
                关闭：功能（）{
                    $（本）.dialog（亲密）;
                }
            }
        }）;
    }）;
＆LT; / SCRIPT＆GT;＆LT; D​​IV ID =对话称号=创建相册的风格=溢出：隐藏;＆GT;＆LT; / DIV＆GT;
 

动作：

 公众的ActionResult CreateAlbumPartial（）
        {
        VAR应用=新的List＆LT;串GT; {鲍勃，约翰，安德鲁};
        VAR选择列表= applications.Select（X =＆gt;新建SelectListItem的{text = X，值= X}）了ToList（）。
        VAR模型=新TestModel {应用=选择列表};
        返回视图（_ CreateAlbumPartial模型）;
        }
 

视图模型：

 公共类TestModel
    {
        公众诠释SelectedApplicationId;
        公共IEnumerable的＆LT; SelectListItem＆GT;应用;
    }
 

局部视图：

  @model MvcApplication1.Models.TestModel＆LT; D​​IV＆GT; @ Html.DropDownListFor（
        X =＆GT; x.SelectedApplicationId，
        新的SelectList（Model.Applications，值，文本），
         - 选择应用程序 - 
             新
             {
                 ID =ApplicationsDropdownList，
                 data_url = Url.Action（ViewRolesForApplication，指数）
             }
    ）
＆LT; / DIV＆GT;
 

解决方案

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

  $（函数（）{
         $阿贾克斯（{
             网址：@ Url.Action（CreateAlbumPartial），
             成功：功能（数据）{
                  $（'＃对话）。HTML（数据）.dialog（{
                      宽度：400，
                      可调整大小：假的，
                      标题：'您好'，
                      模式：真实，
                      纽扣： {
                           关闭：功能（）{
                             $（本）.dialog（亲密）;
                           }
                      }
                  }）;
             }
         }）;    }）;
 

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>

解决方案

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

    });

这篇关于如何渲染与模型的局部视图时关闭JQuery用户界面对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！