Blazor中点击打印按钮后如何将所有值传递至另一Razor页面？

针对你需要在点击打印按钮时把选中的clearance实体所有字段传递到/printclearance页面的需求，这里提供三种实用方案，结合你的MudBlazor代码进行修改：

方案一：通过URL查询参数传递（适合字段较少的场景） #

这种方式直接将实体字段拼接为URL查询参数，优点是无需额外依赖，缺点是字段多的时候代码繁琐，且数据会暴露在URL中，不适合敏感信息。

首页代码修改 #

@page "/"
@inject NavigationManager NavigationManager

<MudIconButton Icon="@Icons.Material.Filled.Print" aria-label="print" Class="btn2" Size="Size.Small"
               Variant="Variant.Outlined" Color="Color.Tertiary" @onclick="(e => Print(context.clear_id))"></MudIconButton>

@code
{
    // 假设xclearanceList是你的数据源
    private List<clearance> xclearanceList = new();

    public void Print(int id)
    {
        var print = xclearanceList.FirstOrDefault(_ => _.clear_id == id);
        if (print == null) return;

        // 构造查询字符串，注意对字符串字段进行URL编码
        var queryParams = new Dictionary<string, string>
        {
            { "clear_id", print.clear_id.ToString() },
            { "name", Uri.EscapeDataString(print.name) },
            { "age", print.age.ToString() },
            { "purok", Uri.EscapeDataString(print.purok) },
            { "request", Uri.EscapeDataString(print.request) },
            { "date", print.date.ToString("yyyy-MM-dd") },
            { "receipt", Uri.EscapeDataString(print.receipt) }
        };

        var queryString = string.Join("&", queryParams.Select(kv => $"{kv.Key}={kv.Value}"));
        NavigationManager.NavigateTo($"/printclearance?{queryString}");
    }
}

打印页面代码修改 #

@page "/printclearance"
@using GbmsClient.Models

@if (server != null)
{
    <p>@server.clear_id</p>
    <p>@server.name</p>
    <p>@server.age</p>
    <p>@server.purok</p>
    <p>@server.request</p>
    <p>@server.date</p>
    <p>@server.receipt</p>
}

@code {
    [SupplyParameterFromQuery] public int clear_id { get; set; }
    [SupplyParameterFromQuery] public string? name { get; set; }
    [SupplyParameterFromQuery] public int age { get; set; }
    [SupplyParameterFromQuery] public string? purok { get; set; }
    [SupplyParameterFromQuery] public string? request { get; set; }
    [SupplyParameterFromQuery] public DateTime date { get; set; }
    [SupplyParameterFromQuery] public string? receipt { get; set; }

    private clearance? server;

    protected override void OnInitialized()
    {
        server = new clearance
        {
            clear_id = clear_id,
            name = name,
            age = age,
            purok = purok,
            request = request,
            date = date,
            receipt = receipt
        };
    }
}

方案二：使用LocalStorage暂存对象（推荐，适合多字段场景） #

通过浏览器LocalStorage暂存实体对象，数据不会暴露在URL中，适合字段较多的情况，需要依赖第三方包Blazored.LocalStorage。

步骤1：安装依赖包 #

在项目中安装Blazored.LocalStorage：

dotnet add package Blazored.LocalStorage

步骤2：注册服务 #

在Program.cs中添加LocalStorage服务注册：

builder.Services.AddBlazoredLocalStorage();

首页代码修改 #

@page "/"
@inject NavigationManager NavigationManager
@inject ILocalStorageService LocalStorage

<MudIconButton Icon="@Icons.Material.Filled.Print" aria-label="print" Class="btn2" Size="Size.Small"
               Variant="Variant.Outlined" Color="Color.Tertiary" @onclick="(e => Print(context.clear_id))"></MudIconButton>

@code
{
    private List<clearance> xclearanceList = new();

    public async Task Print(int id)
    {
        var print = xclearanceList.FirstOrDefault(_ => _.clear_id == id);
        if (print == null) return;

        // 将实体序列化后存入LocalStorage
        await LocalStorage.SetItemAsync("PrintClearance", print);
        NavigationManager.NavigateTo("/printclearance");
    }
}

打印页面代码修改 #

@page "/printclearance"
@using GbmsClient.Models
@inject ILocalStorageService LocalStorage

@if (server != null)
{
    <p>@server.clear_id</p>
    <p>@server.name</p>
    <p>@server.age</p>
    <p>@server.purok</p>
    <p>@server.request</p>
    <p>@server.date</p>
    <p>@server.receipt</p>
}

@code {
    private clearance? server;

    protected override async Task OnInitializedAsync()
    {
        // 从LocalStorage读取实体
        server = await LocalStorage.GetItemAsync<clearance>("PrintClearance");
        // 读取后删除缓存，避免下次访问残留数据
        await LocalStorage.RemoveItemAsync("PrintClearance");
    }
}

方案三：使用共享状态服务（适合复杂应用多组件共享数据） #

创建一个全局状态服务来暂存选中的实体，适合需要在多个组件间共享数据的复杂场景。

步骤1：创建状态服务 #

public class ClearanceStateService
{
    public clearance? SelectedClearance { get; set; }
}

步骤2：注册服务 #

在Program.cs中注册为Scoped服务：

builder.Services.AddScoped<ClearanceStateService>();

首页代码修改 #

@page "/"
@inject NavigationManager NavigationManager
@inject ClearanceStateService ClearanceState

<MudIconButton Icon="@Icons.Material.Filled.Print" aria-label="print" Class="btn2" Size="Size.Small"
               Variant="Variant.Outlined" Color="Color.Tertiary" @onclick="(e => Print(context.clear_id))"></MudIconButton>

@code
{
    private List<clearance> xclearanceList = new();

    public void Print(int id)
    {
        var print = xclearanceList.FirstOrDefault(_ => _.clear_id == id);
        if (print == null) return;

        // 将实体存入状态服务
        ClearanceState.SelectedClearance = print;
        NavigationManager.NavigateTo("/printclearance");
    }
}

打印页面代码修改 #

@page "/printclearance"
@using GbmsClient.Models
@inject ClearanceStateService ClearanceState

@if (ClearanceState.SelectedClearance != null)
{
    <p>@ClearanceState.SelectedClearance.clear_id</p>
    <p>@ClearanceState.SelectedClearance.name</p>
    <p>@ClearanceState.SelectedClearance.age</p>
    <p>@ClearanceState.SelectedClearance.purok</p>
    <p>@ClearanceState.SelectedClearance.request</p>
    <p>@ClearanceState.SelectedClearance.date</p>
    <p>@ClearanceState.SelectedClearance.receipt</p>
}

@code {
    // 可选：导航离开时清空状态
    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        if (!firstRender)
        {
            ClearanceState.SelectedClearance = null;
        }
    }
}

方案对比 #

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