Each time I click submit order, I get the error "An unhandled exception has occurred. See browser dev tools for details. Reload"

Another error I see is "blazor.server.js:1 Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State."

I am not sure what that means. It was working fine last week. Not much cosw has changed.

The end goal is to submit the order and then expect a live update of the order status. Like the bottom of the image in this Microsoft learn doc https://zcusa.951200.xyz/en-us/training/modules/blazor-build-rich-interactive-components/3-exercise-use-javascript-libraries-blazor-apps

Hi @Kevin Ear,

It's a System.Text.Json.JsonException . Please share Checkout.razor code and I need to check line 130.

And you also can set a breakpoint and check the json data format.

Best Regards

Jason

@page "/checkout"
@using BlazingPizza.Services
@inject OrderState OrderState
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager
@implements IDisposable

@* <div class="top-bar">
<a class="logo" href="">
<img src="img/logo.svg" />
</a>

<a href="" class="nav-tab active">
<img src="img/pizza-slice.svg" />
<div>Get Pizza</div>
</a>

<a href="myorders" class="nav-tab">
<img src="img/bike.svg" />
<div>My orders</div>
</a>

</div> *@

@* <div class="top-bar">
<a class="logo" href="">
<img src="img/logo.svg" />
</a>

<NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
<img src="img/pizza-slice.svg" />
<div>Get Pizza</div>
</NavLink>

<NavLink href="myorders" class="nav-tab">
<img src="img/bike.svg" />
<div>My Orders</div>
</NavLink>
</div> *@

@*
<div class="main">
<div class="checkout-cols">
<div class="checkout-order-details">
<h4>Review order</h4>
@foreach (var pizza in Order.Pizzas)
{
<p>
<strong>
@(pizza.Size)"
@pizza.Special.Name
(£@pizza.GetFormattedTotalPrice())
</strong>
</p>
}

<p>
<strong>
Total price:
£@Order.GetFormattedTotalPrice()
</strong>
</p>
</div>
</div>

<button class="checkout-button btn btn-warning" @onclick="PlaceOrder" disabled=@isSubmitting>
Place order
</button>
</div> *@

<div class="main">
    
    <EditForm EditContext=editContext OnValidSubmit=PlaceOrder>
        <div class="checkout-cols">
            <div class="checkout-order-details">
                <h4>Review order</h4>
                <OrderReview Order="Order" />
            </div>

            <div class="checkout-delivery-address">
                <h4>Deliver to...</h4>
                @if (isError)
                {
                    <div class="alert alert-danger">Please enter a name and phone number.</div>
                }
                <AddressEditor Address="Order.DeliveryAddress" />
            </div>
        </div>

        <button class="checkout-button btn btn-warning" type="Submit" disabled=@isError>
            Place order
        </button>
    @* <ValidationSummary /> *@
    <DataAnnotationsValidator />
    </EditForm>
</div>

@code {


    private EditContext editContext;

    bool isError = false;
    Order Order => OrderState.Order;

    protected void ShowError()
    {
        isError = true;
    }

    protected override void OnInitialized()
    {
        editContext = new(Order.DeliveryAddress);
        editContext.OnFieldChanged += HandleFieldChanged;
    }

    private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
    {
        isError = !editContext.Validate();
        StateHasChanged();
    }

    public void Dispose()
    {
        editContext.OnFieldChanged -= HandleFieldChanged;
    }
    async Task PlaceOrder()
    {
        var response = await HttpClient.PostAsJsonAsync(NavigationManager.BaseUri + "orders", OrderState.Order);
        var newOrderId = await response.Content.ReadFromJsonAsync<int>();
        OrderState.ResetOrder();
        NavigationManager.NavigateTo($"myorders/{newOrderId}");
    }

}