打开一个内部有脚本的 Abp Modal 时出现问题，它会清除下面的页面答案

【问题标题】：Issue opening an Abp Modal that has scripts inside, it clear the below page打开一个内部有脚本的 Abp Modal 时出现问题，它会清除下面的页面
【发布时间】：2023-01-04 22:53:22
【问题描述】：

我有一个关于 Abp.Io 的奇怪问题，打开一个内部有脚本文件（加载数据）的模态。问题是清除了下面的网格。我知道问题出在模式的 Layout = null 上。

这是正在发生的事情。

布局不为空的模态：（因此它需要脚本部分）：

然后我点击镜头

您看到弹出窗口打开并正确加载数据（现在它们被模拟），但在网格下方消失了。

相反，如果我将模态的布局设置为空：

在这种情况下，您会看到它保留了下面的网格，但它不加载任何数据（因为我认为它不知道如何处理 @script 部分。

这是我的模态：

@page
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@model IlDiamante.Web.Pages.Shared.MetalliUtilizzatiInSemilavoratiModel

@{
    Layout = null;
    string headerName = $"Semilavorati che utilizzano il metallo '{Model.NomeMetallo}'";
}

@section scripts
    {
    <abp-script src="/Pages/Shared/MetalliUtilizzatiInSemilavorati.js" />
}


<input id="metalloGuid" hidden="true" value="@this.Model.Id"/>
<abp-modal>
    <abp-modal-header title="@headerName"></abp-modal-header>
    <abp-modal-body>
        <abp-table striped-rows="true" id="SemilavoratiTable"></abp-table>
    </abp-modal-body>
    <abp-modal-footer buttons="@(AbpModalButtons.Close)"></abp-modal-footer>
</abp-modal>

有什么建议吗？谢谢

【问题讨论】：

标签： abp

【解决方案1】：

Layout 应该是 null for modals，那里没有问题。但是，如果要加载脚本，则必须在打开模式的位置声明它。

例如：

打开模态时，需要指定一个模态类，如下所示：

var productInfoModal = new abp.ModalManager({
    viewUrl: '/Products/ProductInfoModal',
    modalClass: 'ProductInfo' //Matches to the abp.modals.ProductInfo
});

然后您指定的模态类应该在模态脚本中匹配，如下面的代码所示：

abp.modals.ProductInfo = function () {

    function initModal(modalManager, args) {
        // your logic
    };

    return {
        initModal: initModal
    };
};

然后将模态添加到您打开的页面的脚本中，如下所示：

@section scripts{
    <abp-script-bundle>
       <abp-script src="/Pages/Products/ProductInfoModal.js"/> // modal script
       <abp-script src="/Pages/Products/Index.js"/> // page script
    </abp-script-bundle>
}

有关更多信息，请参见此处：https://docs.abp.io/en/abp/latest/UI/AspNetCore/Modals#modals-with-script-files

由于脚本文件是在打开页面时加载的，所以即使您在modal.cshtml(ProductInfo.cshtml) 文件中声明脚本，它也不起作用是正常的。但是，如果需要，您仍然可以使用延迟加载。为此，我建议您查看here。

【讨论】：