表单提交时发生回发，Blazor 模型在表单提交时重置

Question

我正在初始化产品列表并通过 UI 更新数量。

在提交表单时，我正在调用

CheckOutTickets

，想要获取更新的上下文并将其发送给处理。

但是每次我点击提交时，

@Code

里面的所有内容都会被执行，而不是

CheckOutTickets

只被调用。

@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
    }

}

Answer 1

好的，将页面标记为

@rendermode InteractiveServer

，完成工作。

@page "/"

@using Blazor_Try_Stripe_Api.Model
@attribute [StreamRendering]
@rendermode InteractiveServer