I'm trying to get a modal form to display, but it shows only the header and footer, and it isn't even my footer:
The Project Manager has elected to keep Javascript out of this build, so I am trying to use what is built-in with .Net Core 7 Blazor pages.
In my file HelpModal.razor:
<div class="modal" role="dialog" tabindex="-1"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><div class="row"><div class="col-md-5">Submit a Help Ticket</div></div><div class="col-md-2 text-right required-legend"><span class="required-text">*</span> = Required Field</div></div><div class="modal-body"><EditForm Model="@DTO" OnSubmit="@Submit"><div class="row mt-3"><div class="col-md-5 col-md-offset-1"><label for="FirstName" class="pi-item-label required">First Name</label><div class="controls"><input id="FirstName" class="col-md-5 form-control" @bind-value="@DTO.FirstName" disabled /><ValidationMessage For="() => DTO.FirstName" /></div></div><div class="col-md-5"><label for="LastName" class="pi-item-label required">Last Name</label><div class="controls"><input id="LastName" class="col-md-5 form-control" @bind-value="@DTO.LastName" disabled /><ValidationMessage For="() => DTO.LastName" /></div></div></div><div class="row mt-3"><div class="col-md-10 col-md-offset-1"><label for="URI" class="pi-item-label required">Email</label><div class="controls"><input id="URI" class="col-md-10 form-control" @bind-value="@DTO.URI" /><ValidationMessage For="() => DTO.URI" /></div></div></div><div class="row mt-3"><label for="Subject" class="pi-item-label required">Subject</label><div class="col-md-10 col-md-offset-1"><div class="controls"><InputSelect id="TicketDestination" class="form-select" @bind-Value="DTO.Subject" autocomplete="on"><option value="" /> @foreach (var item in DTO.TicketDestinationOrdered) {<option value="@item.Index" selected="@(DTO.TicketDestination == item.Index)">@item.Name</option> }</InputSelect><ValidationMessage For="() => DTO.TicketDestination" /></div><ValidationMessage For="() => DTO.Subject" /></div></div><div class="row mt-3"><div><label for="Description" class="pi-item-label mt-3 required">Please enter a detailed description of the problem. Do not include any special characters or Personally Identifiable Information.</label><InputTextArea id="Description" @bind-Value="DTO.Description" spellcheck="true" class="col-md-10 col-md-offset-1" rows="4" /><ValidationMessage For="() => DTO.Description" /></div></div></EditForm></div><div class="modal-footer"><input type="submit" class="btn btn-primary" value="Save" /><div type="button" class="btn btn-secondary" value="Cancel" @onclick="Close" /></div></div></div></div>In the code behind HelpModal.razor.cs below, I have a breakpoint at OnInitializedAsync(), and I can step through that, but the actual page is still blank:
public partial class HelpModal{ [Inject] ToastService toast { get; set; } = default!; public EventCallback<EventArgs> OnSubmitCallback { get; set; } [Parameter] public string Name { get; set; } = string.Empty; [Parameter] public string Footer { get; set; } = string.Empty; private HelpDTO DTO { get; set; } = new(); private string toolTip { get; set; } = string.Empty; private string modalDisplay { get; set; } = "none"; private string modalClass { get; set; } = string.Empty; private bool showBackdrop { get; set; } = false; protected override Task OnInitializedAsync() { modalDisplay = "block"; modalClass = "show"; showBackdrop = true; var list = new List<string>(); foreach (var item in DTO.TicketDestinationOrdered) { list.Add($"<li>{item.Description}</li>"); } toolTip = $"<ul>{string.Join("", list.ToArray())}</ul>"; var words = Name.Split(''); DTO.FirstName = words[0]; DTO.LastName = words[^1]; return base.OnInitializedAsync(); } public async Task Close() { toast.Notify(new(ToastType.Info, $"Help cancelled {DateTime.Now}")); modalDisplay = "none"; modalClass = ""; showBackdrop = false; await Task.Delay(1000); } private void ValidSubmit(EditContext editContext) { } private void InvalidSubmit(EditContext editContext) { } public async Task ShowAsync(string userName = "") { Name = userName; var words = Name.Split(''); DTO.FirstName = words[0]; DTO.LastName = words[^1]; await Task.Delay(1000); } private async Task Submit(EditContext editContext) { toast.Notify(new(ToastType.Info, $"Submit called {DateTime.Now}")); var valid = editContext.Validate(); if (valid) { await Task.Delay(500); if (OnSubmitCallback.HasDelegate) { await OnSubmitCallback.InvokeAsync(); } toast.Notify(new(ToastType.Success, $"Successful submission {DateTime.Now}")); } modalDisplay = "none"; modalClass = ""; showBackdrop = false; // if error //toast.Notify(new(ToastType.Danger, $"Event: Hiding called. DateTime: {DateTime.Now}")); }}The BlazorBootstrap.Modalmodal is defined in the NavBar.razor file. Here is a snippet of it:
public Modal modal { get; set; } private async Task ShowHelpModal() { var footer = $@"<input type='submit' class='btn btn-default col-md-2 btn-primary m-3' id='Submit' value='Submit' onclick='@Submit()' /><input type='button' class='btn btn-secondary col-md-2 m-3' id='Cancel' value='Cancel' onclick='window.close();' />"; var parameters = new Dictionary<string, object>(); parameters.Add("Name", _userIdentityName); parameters.Add("Footer", footer); await modal.ShowAsync<HelpModal>(title: "Submit a Help Ticket", null, parameters); }The parameters pass in successfully.
I tried hard-coding the Save and Cancel buttons in the HelpModal.razor file, but instead all I see are the default Close and Submit buttons that do not do anything.
The examples on the Blazor Modal Component page don't seem to cover enough details.
What am I missing or doing wrong?