Issue opening an Abp Modal that has scripts inside, it clear the below page - abp

Question

I have a strange issue with Abp.Io and opening a modal that has a script file inside (which loads data). The issue is that is clears the below grid. I've understood that the problem is with the Layout = null of the modal.
Here's what's happening.
Modal with Layout not null: (so it takes the scripts section):
Then I click the lens
You see the popup opens and load data correctly (now they're mocked), but below the Grid disappeared.
Instead if I put the layout of the modal to null:
You see in this case that it keep the grid below , but It doesn't load any data (since I think it doesn't know what to do with #script section.
Here's my modal:
#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>
Any advice?
Thanks

Answer 1

Layout should be null for modals, there is no problem there. However, if you want the script to be loaded, you must declare it where you opened the modal.
For instance:
When opening the modal, you need to specify a modal class as below:
var productInfoModal = new abp.ModalManager({
viewUrl: '/Products/ProductInfoModal',
modalClass: 'ProductInfo' //Matches to the abp.modals.ProductInfo
});
Then the modal class you specify should match inside your modal script as in the code below:
abp.modals.ProductInfo = function () {
function initModal(modalManager, args) {
// your logic
};
return {
initModal: initModal
};
};
Then add the modal to the script of the page you opened as follows:
#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>
}
For more information see here: https://docs.abp.io/en/abp/latest/UI/AspNetCore/Modals#modals-with-script-files
Since script files are loaded while opening the page, it is normal that it does not work even if you declare the script in the modal.cshtml(ProductInfo.cshtml) file. However, you can still use lazy load if you want. For that, I recommend you look here.