Question

以表格的形式表示。如果单击表中的行名称，将显示模式窗口。模态窗口的形式非常复杂。

要显示模态窗口，我使用以下代码：

$('#modal-container').on('shown.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var url = button.attr("href");
    var modal = $(this);
    modal.find('.modal-content').load(url);
});    
$.ajaxSetup({ cache: false });
$('#modal-container').on('hidden.bs.modal', function () {
    $(this).removeData('modal');
});

存在以下问题：

当重复呼叫很短的时间时，显示最后一个呼叫的内容 - 它不是那么重要
有时新内容根本不显示，模态窗口包含上次通话的信息 - 非常重要

下载内容的代码：

<div id="modal-container" class="modal fade hidden-print" @*tabindex="-1" *@ role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
    <div class="modal-content">

    </div>
</div>

从动作方法调用

return PartialView("Details", projectECVM);

我怀疑js比剃刀生成页面的速度要快。

在这里，我正在形成对动作方法的调用：

@foreach (var item in Model.ProjectVM)
    {
        <tr class="clickableProject" id="@item.Id" title="View BugReports for @item.ProjectName">
            <td id="Name">
                <a id="details-link" asp-action="Details" asp-controller="Project" asp-route-id="@item.Id" title="View details project @item.ProjectName" data-toggle="modal" data-target="#modal-container">@Html.DisplayFor(it => item.ProjectName)</a>
            </td>
            <td id="Owner">
                <label class="clickableProject">@item.Owner</label>
            </td>
            <td id="TrelloBoardURL">
                <a id="trelloboard-link" href="@item.TrelloBoardURL" title="Go to TrelloBoard" target="_blank"><img src="~/images/trello-logo-blue.png" height="20" /></a>
            </td>
            <td id="Modification">
                <label class="clickableProject">@item.Modification</label>
            </td>
            <td id="By">
                <label class="clickableProject">@item.By</label>
            </td>
            <td id="DateTime">
                <label class="clickableProject">@item.EntryDateTime</label>
            </td>
        </tr>
    }

Answer 1

在加载新内容之前清除对话框的内容：

$(document).ready(function () {
   $(function () {
     $('#modal-container').on('shown.bs.modal', function (event) {
         var button = $(event.relatedTarget); // Button that triggered the modal
         var url = button.attr("href");
         var modal = $(this);
         $(this).empty(); //adding this part before reloading it.
        modal.find('.modal-content').load(url);
     });    
     $.ajaxSetup({ cache: false });
     $('#modal-container').on('hidden.bs.modal', function () {
     //$(this).empty(); //moved from shown
     $(this).removeData('modal');
 });
           if ($('#modal-container').text().trim().length > 0) {
                $('#modal-container').dialog('open');
            }
            else {
            }
        });
    });

ASP.NET引导模式显示

1 个答案: