Products.cshtml :

@{ ViewData["Title"] = "Products page"; } <h1>Products Page</h1> <label for="avatar">Choose a file:</label> <input class="form-control form-control-lg" id="formFileLg" type="file" accept=".xlsx" /> <div class="container" id="cancelContainer"> </div> <div class="d-grid gap-3" id="productsContainer"></div> <dialog id="dialog"> <p>Products were imported into the database.</p> <button type="button" id="close">Close</button> </dialog>

app.ts :

let dialog: HTMLDialogElement; document.addEventListener("DOMContentLoaded", () => { const formFileLg = document.getElementById("formFileLg"); formFileLg!.addEventListener("change", importFile); dialog = <HTMLDialogElement>document.getElementById("dialog"); const closeButton = document.getElementById("close"); closeButton!.addEventListener("click", async () => { dialog!.close(); await ShowSpecificPageProducts(1); }); }); async function importFile(this: HTMLInputElement) { console.log("importFil executed") const controller = new AbortController(); let…