javascript - jquery 对话框不显示 View no 404 只是空白屏幕 mvc 4

Question

为什么我的对话框没有弹出？

jQuery

    $('.ITA').dialog({
    autoOpen: false,
    draggable: true,
    width: 400,
    resizable: false,
    dialogClass: "ui-dialog",
    modal: true,
   // show: { effect: 'fade', duration: 300 }
  });

 $(".AllItemsBtn").on("click", function (e) {
    e.preventDefault();
   // $(this).css('cursor', 'pointer');
    var url = $(this).attr('href');
    alert(url);
    $('.ITA').load(url, function () {
        $('.ITA').dialog("open");

    });
   });

Controller

  public ActionResult GetItemsToAdd()
    {
        var Uid = WebSecurity.GetUserId(User.Identity.Name);

        var UserItems = from i in db.Items
                        where i.user_id == Uid 
                        select i;

        var results = UserItems;

        return PartialView("_AllItemsPartial", UserItems );
    }

VIEW _AllItemPartial:要加载到对话框中的 View

@model IEnumerable<Item>

<style>
.ui-dialog,.ui-dialog,.ui-widget, 
.ui-widget-content, .ui-corner-all, 
.ui-draggable, 
.ui-resizable {background-color:#ffd800 !important;

}


</style>

@foreach (var item in Model)
{ 
<ul>
    <li>
        @Html.DisplayFor(modelItem => item.ID)
    </li>
     <li>
        @Html.DisplayFor(modelItem => item.item_name)
    </li>
    <li>
        @Html.DisplayFor(modelItem => item.item_description)
    </li>
</ul>
 }

查看_ItemPartial:在此 View 中添加ItemsBtn

  <div id="tradeItem">

 @foreach (var item in Model)
{ 
<ul>
    <li>
        @Html.DisplayFor(modelItem => item.ID)
    </li>
     <li>
        @Html.DisplayFor(modelItem => item.item_name)
    </li>
    <li>
        @Html.DisplayFor(modelItem => item.item_description)
    </li>
</ul>


}
</div>

  <a class="AllItemsBtn" id="AllItemsBtn" href='@Url.Action("GetItemsToAdd")' >Add 
 File...</a>

 <div class = "ITA">/*load to this div*/</div>

Answer 1

编辑:我的以下回答是在发布者更新其原始帖子之前做出的，因此可能看起来无关紧要。如果有人遇到同样的问题，请尝试阅读评论:)

原帖:

你有“return false;”在调用此代码之前:

$('#ITA').dialog({
autoOpen: false,
draggable: true,
width: 'auto',
resizable: false,
dialogClass: "ui-dialog",
modal: true,
show: { effect: 'fade', duration: 300 } });

它永远不会被调用。

编辑:您需要将选择器更改为(“.ITA”)

编辑 2:Nicolae 是对的，将此代码作为加载调用的回调。我不明白为什么对话框库不支持 url 作为选项。

编辑 3:您还需要在事件中调用 PreventDefault()，以便 anchor 标记不会重定向您的浏览器

编辑4:顺便说一下，这一行很奇怪:$(this).css('光标', '指针');将 css 样式放在单击按钮之前而不是之后