Blazor 服务器、静态 SSR 页面、增强表单不起作用

Question

我用两种形式构建了一个测试页面：

@page "/ssr"
@layout StaticSSRMainLayout
@attribute [ExcludeFromInteractiveRouting]
@using BlazorPageScript
@using System.ComponentModel.DataAnnotations
@using System.Text
@using System.Text.Encodings.Web
@using Microsoft.AspNetCore.WebUtilities
@using BlazorApp9.Data
@implements IDisposable

<PageTitle>SSR Page</PageTitle>

<PageScript Src="./Pages/Tests/StaticSSR/StaticSSRPage.razor.js"></PageScript>

<div>
    <div class="row">
        <div class="col-md-4">
            <EditForm Model="Input" FormName="show-email1" id="showEmail1Input" OnValidSubmit="OnValidSubmitAsync" method="post" Enhance>
                <DataAnnotationsValidator />
                <ValidationSummary class="text-danger" role="alert" />
                <div class="form-floating mb-3">
                    <InputText @bind-Value="Input.Email" class="form-control" aria-required="true" placeholder="[email protected]" id="showEmail1Input" />
                    <label for="email" class="form-label">Email</label>
                    <ValidationMessage For="() => Input.Email" class="text-danger" />
                </div>
                <button type="submit" class="w-100 btn btn-lg btn-primary">Show1</button>
            </EditForm>
        </div>

        <div class="col-md-4">
            <EditForm Model="Input2" FormName="show-email12" id="showEmail2Input" OnValidSubmit="OnValidSubmitAsync2" method="post" Enhance>
                <DataAnnotationsValidator />
                <ValidationSummary class="text-danger" role="alert" />
                <div class="form-floating mb-3">
                    <InputText @bind-Value="Input2.Email" class="form-control" aria-required="true" placeholder="[email protected]" id="showEmail1Input2" />
                    <label for="email" class="form-label">Email</label>
                    <ValidationMessage For="() => Input2.Email" class="text-danger" />
                </div>
                <button type="submit" class="w-100 btn btn-lg btn-primary">Show1</button>
            </EditForm>
        </div>
    </div>
    <div>
        <RadzenAlert Variant="Variant.Filled" AlertStyle="@AlertStyle.Info" Size="@AlertSize.Medium" Shade="Shade.Light" AllowClose=true Text="Message">
            @message
        </RadzenAlert>
        <RadzenText TextStyle="TextStyle.DisplayH3" TagName="TagName.H3" class="rz-display-flex rz-mt-2 rz-my-0">
            Email: @email
        </RadzenText>            
    </div>
    <div>
        <RadzenAlert Variant="Variant.Filled" AlertStyle="@AlertStyle.Info" Size="@AlertSize.Medium" Shade="Shade.Light" AllowClose=true Text="Message">
            @message2
        </RadzenAlert>
        <RadzenText TextStyle="TextStyle.DisplayH3" TagName="TagName.H3" class="rz-display-flex rz-mt-2 rz-my-0">
            Email: @email2
        </RadzenText>            
    </div>
</div>

@code {
   
    string message = null;
    string email = null;    
    int id = 5;

    string message2 = null;
    string email2 = null;   
    int id2 = 5;


    [SupplyParameterFromForm(FormName = "show-email1")]
    private InputModel Input { get; set; } = new();

    [SupplyParameterFromForm(FormName = "show-email12")]
    private InputModel2 Input2 { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();        
    }

    private async Task OnValidSubmitAsync()
    {
        email = Input.Email;
        message = "Verification email sent. Please check your email.";
        id = 114;
    }

    private sealed class InputModel
    {
        [Required]
        [EmailAddress]
        public string Email { get; set; } = "";
    }


    private async Task OnValidSubmitAsync2()
    {
        email2 = Input2.Email;
        message2 = "Verification email sent. Please check your email.";
        id2 = 114;
    }

    private sealed class InputModel2
    {
        [Required]
        [EmailAddress]
        public string Email { get; set; } = "";
    }


    public async void Dispose()
    {
    }
}

我在 App.razor 中使用

blazor.web.js

，但增强表单不起作用。当发送表单并且部分页面被更新时，当我发送第二个表单时，第一个表单及其更新清晰，反之亦然。

那么如何在 blazor 中启用增强的表单更新？

编辑：在网络选项卡中，我看到发出了获取请求，因此它正在工作，但是当执行整个

@code{..}

块时，有什么好处？！一切都再次重置！好的方法是：只执行相关的

OnValidSubmit()

。

Answer 1

您需要添加

data-permanent

：

<div class="form-floating mb-3" data-permanent>
    <InputText @bind-Value="Input.Email" class="form-control" aria-required="true" placeholder="[email protected]" id="showEmail1Input" />
    <label for="email" class="form-label">Email</label>
    <ValidationMessage For="() => Input.Email" class="text-danger" />
</div>