2

JQuery UI ダイアログ ボックスで部分ビューをレンダリングしています。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>
4

1 に答える 1

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

    });
于 2012-04-12T11:18:28.323 に答える