Child Component(ConfigurePizzaDialog) Buttons Click (Cancel and Order Buttons) is not calling the OrderState Methods

Question

Dear Manager,

I am learning this module and created the same BlazzzingPizza application in Visual Studio 2022. The Child Component ConfigurePizzaDialog has 2 buttons. They are Cancel and Order. I have created the EventCallbacks for these buttons and called those events in the Parent Component. But the OnClick event is not firing. Please let me know what is the issue.

Thanks in Advance,

Supraja.T

This question is related to the following Learning Module

Answer 1

Hi supraja t,

Thank you for reaching out to Microsoft Q & A forum. 

To ensure the Cancel and Order buttons in the ConfigurePizzaDialog component function correctly in your Blazor application, follow these steps:

1.Event Callback Binding in Index.razor: 

Ensure that the OnCancel and OnConfirm event callbacks are correctly bound when including the ConfigurePizzaDialog component in your Index.razor file. 

Updated Index.razor 

@if (OrderState.ShowingConfigureDialog)
{
    <ConfigurePizzaDialog
        Pizza="OrderState.ConfiguringPizza"
        OnCancel="CancelConfigurePizza"
        OnConfirm="ConfirmConfigurePizza" />
}
@code {
    // Other code...
    private async Task CancelConfigurePizza()
    {
        OrderState.CancelConfigurePizzaDialog();
    }
    private async Task ConfirmConfigurePizza()
    {
        OrderState.ConfirmConfigurePizzaDialog();
    }
}

Changes to Make: 

1.Bind OnCancel to CancelConfigurePizza and OnConfirm to ConfirmConfigurePizza in the ConfigurePizzaDialog component invocation. 

2.Define the CancelConfigurePizza**()** and ConfirmConfigurePizza**()** methods to appropriately update the OrderState. 

2.Child Component Event Handling in ConfigurePizzaDialog.razor: 

Verify that the OnCancel and OnConfirm event callbacks are correctly invoked when the respective buttons are clicked in the ConfigurePizzaDialog.razor component. 

Updated ConfigurePizzaDialog.razor 

<div class="dialog-buttons">
    <button class="btn btn-secondary mr-auto" @onclick="OnCancel">Cancel</button>
    <span class="mr-center">
        Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>
    </span>
    <button class="btn btn-success ml-auto" @onclick="OnConfirm">Order ></button>
</div>

@code {
    [Parameter] public Pizza Pizza { get; set; }
    [Parameter] public EventCallback OnCancel { get; set; }
    [Parameter] public EventCallback OnConfirm { get; set; }
}

Changes to Make: 

1.Ensure that @onclick="OnCancel" and @onclick="OnConfirm" are used correctly on the Cancel and Order buttons, respectively. 

2.Define OnCancel and OnConfirm as EventCallback properties to trigger actions in the parent component (Index.razor). 

3.State Management in OrderState.cs: 

Ensure the ShowingConfigureDialog state is correctly updated in OrderState.cs when the pizza configuration dialog is cancelled or confirmed. 

Updated OrderState.cs 

public void CancelConfigurePizzaDialog()
{
    ConfiguringPizza = null;
    ShowingConfigureDialog = false;
}
public void ConfirmConfigurePizzaDialog()
{
    Order.Pizzas.Add(ConfiguringPizza);
    ConfiguringPizza = null;
    ShowingConfigureDialog = false;
}

Changes to Make: 

1.Set ShowingConfigureDialog to false in both CancelConfigurePizzaDialog() and ConfirmConfigurePizzaDialog() methods after handling the cancel or confirm actions. 

By following these steps and making the necessary updates to the specified parts of your code, you will ensure that the Cancel and Order buttons in the ConfigurePizzaDialog component trigger their respective actions correctly in your Blazor application. Consistent method naming, event binding, and state updates are key to maintaining smooth interactions between the parent and child components. 

Please feel free to contact us if you have any additional questions. 

If you have found the answer provided to be helpful, please click on the "Accept answer/Upvote" button so that it is useful for other members in the Microsoft Q&A community.   

Thank you.