I am trying to consume blazored Modal in my WASM project. When the page loads, the popup (modal) box does not show up - I get the below error in web console view; however when I refresh the same page (f5), the modal works with no issues.
Code for Index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>rowowasm</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="rowowasm.Client.styles.css" rel="stylesheet" />
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss"></a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
</body>
</html>
Code for the razor page:
@using rowowasm.Shared.Dtos.Clients;
@page "/clientslistpage"
<PageTitle>Edit Clients List</PageTitle>
<div>
<div class="row">
<div class="col-md-auto">
<rowowasm.UIComponents.UIBase.Clients.ClientsListForEdit OnSelectedItemIDChanged=@FunOnSelectedItemIDChanged @ref="clientslistui" />
</div>
<div class="col me-5">
@*<rowowasm.UIComponents.UIBase.Clients.ClientEditWindow @bind-ClientIDForEdit="selectedclientid" OnClientDtoSaved=@(()=>clientslistui.RefreshList())/>*@
@*<rowowasm.UIComponents.UIBase.Clients.ClientEditWindow @bind-ClientDto="ClientDto" @bind-ClientIDForEdit="selectedclientid" />*@
</div>
</div>
</div>
@code{
//public rowowasm.Shared.Dtos.Clients.ClientDto ClientDto { get; set; } = new ClientDto();
private int selectedclientid { get; set; }
protected rowowasm.UIComponents.UIBase.Clients.ClientsListForEdit clientslistui;
public void FunOnSelectedItemIDChanged(int newclientid)
{
Console.WriteLine("Selected Item" + newclientid);
selectedclientid = newclientid;
ShowEditMovie(newclientid);
}
[CascadingParameter] public IModalService Modal { get; set; }
//checked this https://github.com/Blazored/Modal/blob/main/samples/BlazorWebAssembly/Shared/MessageForm.razor
void ShowEditMovie(int _clientid)
{
var parameters = new ModalParameters();
parameters.Add(nameof(rowowasm.UIComponents.UIBase.Clients.ClientEditWindow.ClientIDForEdit), _clientid);
Modal.Show<rowowasm.UIComponents.UIBase.Clients.ClientEditWindow >("The title", parameters);
}
}
Program.cs code:
global using Microsoft.AspNetCore.Components.Authorization;
global using Blazored.LocalStorage;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using rowowasm.Client;
using Blazored.Modal;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthStateProvider>();
//builder.Services.AddSingleton<UrlsList, UrlsList>();
builder.Services.AddSingleton<rowowasm.UIComponents.Misc.UrlsList, rowowasm.UIComponents.Misc.UrlsList>();
builder.Services.AddAuthorizationCore();
builder.Services.AddBlazoredLocalStorage();
builder.Services.AddBlazoredModal();
await builder.Build().RunAsync();
Could you please help me know what error I am doing.