Blazor静态服务器渲染(SSR)：无按钮提交表单实现方案

可以通过两种纯Blazor SSR原生机制实现需求，无需依赖JavaScript或手动提交按钮：

方法一：利用EditForm自动提交 #

通过EditForm实例引用结合InputSelect的OnChange事件，用户选择选项时直接触发表单提交，服务器端处理后重新渲染筛选数据。

步骤与代码示例： #

1. 定义筛选模型：

public class FilterModel
{
    public string SelectedCategory { get; set; } = string.Empty;
}

2. 组件实现：

@page "/products"
@inject IProductService ProductService

<EditForm Model="FilterModel" OnValidSubmit="HandleSubmit" @ref="FormRef">
    <DataAnnotationsValidator />
    <InputSelect @bind-Value="FilterModel.SelectedCategory" 
                 OnChange="async () => await FormRef.SubmitAsync()">
        <option value="">所有分类</option>
        <option value="Electronics">电子产品</option>
        <option value="Clothing">服装</option>
        <option value="Books">图书</option>
    </InputSelect>
</EditForm>

<table>
    <thead>
        <tr>
            <th>名称</th>
            <th>分类</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in FilteredProducts)
        {
            <tr>
                <td>@product.Name</td>
                <td>@product.Category</td>
                <td>@product.Price.ToString("C")</td>
            </tr>
        }
    </tbody>
</table>

@code {
    private FilterModel FilterModel { get; set; } = new();
    private EditForm? FormRef { get; set; }
    private IEnumerable<Product> FilteredProducts { get; set; } = Enumerable.Empty<Product>();

    protected override async Task OnInitializedAsync()
    {
        // 初始化加载全部数据
        FilteredProducts = await ProductService.GetProductsAsync(FilterModel.SelectedCategory);
    }

    private async Task HandleSubmit()
    {
        // 根据筛选条件获取数据
        FilteredProducts = await ProductService.GetProductsAsync(FilterModel.SelectedCategory);
    }
}

原理： #

• 通过@ref="FormRef"获取表单实例，在InputSelect的OnChange事件中调用SubmitAsync()，自动触发表单提交。
• 服务器端执行HandleSubmit方法，根据筛选模型的值获取对应数据，完成后重新渲染页面展示筛选结果。

方法二：利用路由参数导航 #

将筛选条件作为路由参数，用户选择选项时导航到对应路由，触发页面重新加载，服务器端根据路由参数筛选数据。

组件实现： #

@page "/products/{SelectedCategory?}"
@inject NavigationManager NavManager
@inject IProductService ProductService

<InputSelect Value="@SelectedCategory" 
             OnChange="(e) => NavManager.NavigateTo($"/products/{e.Value}")">
    <option value="">所有分类</option>
    <option value="Electronics">电子产品</option>
    <option value="Clothing">服装</option>
    <option value="Books">图书</option>
</InputSelect>

<table>
    <thead>
        <tr>
            <th>名称</th>
            <th>分类</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in FilteredProducts)
        {
            <tr>
                <td>@product.Name</td>
                <td>@product.Category</td>
                <td>@product.Price.ToString("C")</td>
            </tr>
        }
    </tbody>
</table>

@code {
    [Parameter]
    public string? SelectedCategory { get; set; }

    private IEnumerable<Product> FilteredProducts { get; set; } = Enumerable.Empty<Product>();

    protected override async Task OnInitializedAsync()
    {
        // 根据路由参数获取筛选后的数据
        FilteredProducts = await ProductService.GetProductsAsync(SelectedCategory ?? string.Empty);
    }
}

原理： #

• 将筛选条件作为可选路由参数，用户选择选项时，通过NavigationManager跳转到包含对应参数的路由。
• 服务器端通过[Parameter]接收路由参数，在初始化时根据参数获取数据并渲染页面。
• 此方式的额外优势是URL会随筛选条件更新，支持用户收藏或分享筛选后的页面。

内容的提问来源于stack exchange，提问作者user21641787