Search code examples
.net-coreblazor

Postback is happening on form submit, Blazor Model is reset on form submission


I am intializing the list of products and updating the quantity via UI.

On form submission , I am calling CheckOutTickets , want to get the updated context and send it over processing.

But each time I click submit, everything inside @Code is being executed , rather than , CheckOutTickets only being called.

@page "/"

@using Blazor_Try_Stripe_Api.Model
@attribute [StreamRendering]

<PageTitle>Tickets</PageTitle>

@if (!products.Any())
{
    <p>
        <em>Loading...</em>
    </p>
}
else
{
    <EditForm Model="products"  FormName="CheckoutForm"  @OnValidSubmit="CheckOutTickets">
        <table class="table">
            <thead>
            <tr>
                <th>Quantity</th>
            </tr>
            </thead>
            <tbody>
            @foreach (var product in products)
            {
                <tr>
                    <td>
                        <label for="quantity">Quantity</label>
                        <InputNumber id="quantity"
                                     min="0"
                                     @bind-Value="@product.Quantity">
                        </InputNumber>
                    </td>
                </tr>
            }
            </tbody>
        </table>
        <button type="submit">Buy Tickets</button>
    </EditForm>
}

@code {

    private List<Product> products;
        
    protected override void OnInitialized()
    {
       products = new List<Product>()
        {
            new()
            {
                Name = "Members",
                Description = "Members",
                Price = 30,
                Quantity = 2,
                PriceId = "price_1OvI69ICuq9ZAmsOnd56qTqV"
            },
            new()
            {
                Name = "Guests",
                Description = "Guests",
                Price = 50,
                Quantity = 1,
                PriceId = "price_1OvI6VICuq9ZAmsOCOPZrPRc"
            }
        };
    }
    
  
    private void CheckOutTickets(EditContext obj)
    {
        //DO Something
    }

}

Solution

  • Ok, Marking the page as @rendermode InteractiveServer , did the job.

    @page "/"
    
    @using Blazor_Try_Stripe_Api.Model
    @rendermode InteractiveServer
    

    Also removed @attribute [StreamRendering] (From comments )