ARTICLE AD BOX
I'm building a web app in ASP .NET 10 Core Web App MVC.
The problem is having the JS work for a modal popup partial view once displayed. Partial view is a file picker that receives view model data from a controller. _FileUploadPartialView:
<div id="dropArea"> <form asp-controller="ArtPieces" asp-action="UploadFiles" enctype="multipart/form-data"> <input name="file" type="file" accept="image/*"> <button type="submit" name="btnIncoming" >Upload File</button> <input type="hidden" asp-for="SourceFileName" id="sourceFile" /> <input name="existSrcName" asp-for="SourceFileName" type="hidden" /> </form> </div>Parent view:
@model UploadFileVM <form id="aspFormFileData" asp-action="Edit"> <div asp-validation-summary="ModelOnly" class="text-danger"></div> <input type="hidden" asp-for="ID" /> <div class="row" > <div class="form-group col"> <label asp-for="FileData.SourceName" class="control-label">@Model.FileData?.SourceName</label> </div> <div class="form-group col"> <button type="button" class="btn btn-secondary" id="btnFileSource">Choose File...</button> </div> </div> </form> <div class="modal" role="dialog" tabindex="-1" id="filePicker"> <div class="modal-header"> <button type="button" class="close" style="position: absolute; top: 0; right: 0;" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×></span> </button> <h5>@selectFileViewModel.SourceName </h5> <h3 id="fileGetModal" class="modal-title">Get a file to upload</h3> </div> <div class="modal-body" id="testModal"> </div> </div>JavaScript to respond to change in user selecting a file:
const submitButton = document.querySelector('button[name="btnIncoming"]'); document.addEventListener('DOMContentLoaded', () => { const fileInput = document.getElementById('input[name="file"]'); fileInput.addEventListener('change', () => { handleInputChanged() }); }); function handleInputChanged() { alert("Input changed"); try { assertFilesValid(fileInput.files); } catch (err) { updateStatusMessage(err.message); return; } submitButton.removeAttribute('disabled'); }Numerous answers that relate to this issue abound. Reason: a partial view cannot include a @section Scripts {}. So the rule is that the code is included in the parent view, or _Layout. When the script file is included in the parent view, every JS .addEventListener ends up with an error because the referenced tag is not found. They will be absent until the partial view is loaded. So conditionals are added to the references to assure they are not touched until the reference tags are available.
Even then, the JS doesn't run. So the next suggestion is using a Helper. Again, numerous suggestions.
The one HTML helper uses IHtmlContent to pick up the code. It was found on a 2019 post from "Just Simply Code." It sets up as recomended, but without results. Another from another 2019 post "CodeShare" was using deprecated IHtmlString so I re-worked it hoping to use IHttpContextAccessor. Only I have not worked out it's implementation because @Html reference doesn't support the new structure yet.
