I am a Blazor newbie and following a course on Microsoft's site on Blazor Server. I have a Child Component named ConfigurePizzaDialog.razor that defines a Modal dialog and a couple of Event Call-Backs to be invoked and handled in the Home.razor component. The modal dialog's close button doesn't respond to clicks. Any suggestions on what's happening ? Following is the code:
Child Component
@using Demo.Models;@inject HttpClient HttpClient<div class="dialog-container"><div class="dialog"><div class="dialog-title"><h2>@Pizza!.Special!.Name</h2> @Pizza.Special.Description</div><form class="dialog-body"><div><label>Size:</label><input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" /><span class="size-label">@(Pizza.Size)" (£@(Pizza.GetFormattedTotalPrice()))</span></div></form><div class="dialog-buttons"><button type="button" class="btn btn-secondary mr-auto" @onclick="OnCancel">Cancel</button><span class="mr-center">Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span></span><button type="button" class="btn btn-success ml-auto" @onclick="OnConfirm">Order ></button></div></div></div>@code { [Parameter] public Pizza? Pizza { get; set; } [Parameter] public EventCallback OnCancel { get; set; } [Parameter] public EventCallback OnConfirm { get; set; }}Parent Component
@using System.Threading.Tasks@using Demo.Models@using Demo.Shared@rendermode InteractiveServer@inject HttpClient HttpClient@inject NavigationManager NavigationManager@page "/"<PageTitle>Pizza Shop</PageTitle><div class="container d-flex justify-content-center"><h1 class="my-3">Blazing Pizzas</h1> </div> <div class="main"><div class="container"> <div class="row"> @if (specials != null) { @foreach (var special in specials) {<div class="col-md-4 mb-4"><div class="card h-100"><img src="@special.ImageUrl" class="card-img-top" alt="@special.Name" style="width: 65%; height: auto;" @onclick="@(() => ShowConfigurePizzaDialog(special))" /><div class="card-body"><h5 class="card-title">@special.Name</h5><p class="card-text">@special.Description</p><p class="card-text"><strong>Price: </strong> @special.GetFormattedBasePrice()</p></div> </div></div> } }</div></div> @if (ShowingConfigureDialog) {<ConfigurePizzaDialog Pizza="ConfiguringPizza" OnCancel="CancelConfigurePizzaDialog" OnConfirm="ConfirmConfigurePizzaDialog" /> }</div>@code { List<PizzaSpecial> specials = new(); Pizza? ConfiguringPizza; Order? Order = new Order(); bool ShowingConfigureDialog; protected override async Task OnInitializedAsync() { specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri +"specials") ?? new List<PizzaSpecial>(); } public void ShowConfigurePizzaDialog(PizzaSpecial special) { ConfiguringPizza = new Pizza() { Special = special, SpecialId = special.Id, Size = Pizza.DefaultSize, Toppings = new List<PizzaTopping>(), }; ShowingConfigureDialog = true; } public void CancelConfigurePizzaDialog() { ConfiguringPizza = null; ShowingConfigureDialog = false; } public void ConfirmConfigurePizzaDialog() { if (ConfiguringPizza != null && Order != null) Order.Pizzas.Add(ConfiguringPizza); ConfiguringPizza = null; ShowingConfigureDialog = false; }}The original tutorial had the event handlers defined in a service and used in the Home component via Dependency Injection, but i moved them to the home component for learning purposes.
Appreciate your inputsThanks - Hara