.NET 8 Blazor Web App使用查询参数时出现页面未找到问题

问题描述 #

在.NET 8 Blazor Web App中，访问以下URL时页面显示“未找到”：

https://localhost:7015/qrcode/info?Id=4a6830b2-0e4a-4c46-8cf0-ed01855ee65e&Type=Cylinder&Name=Tobias%20Steinmetz&MFG=Luxfer&Size=12&Snr=13254342&maxBar=200&checkBar=350

对应的Razor页面代码如下：

@page "/qrcode/info"

@using DPW.Shared.Models.QrCode

<h1>二维码数据</h1>

@code {
 [Parameter]
 [SupplyParameterFromQuery(Name = "Id")]
 public string Id { get; set; }

[Parameter]
[SupplyParameterFromQuery(Name = "Name")]
public string Name { get; set; }

[Parameter]
[SupplyParameterFromQuery(Name = "Type")]
public string Type { get; set; }

[Parameter]
[SupplyParameterFromQuery(Name = "MFG")]
public string Manufacturer { get; set; }

[Parameter]
[SupplyParameterFromQuery(Name = "Snr")]
public string SerialNumber { get; set; }

[Parameter]
[SupplyParameterFromQuery(Name = "Size")]
public decimal Size { get; set; }

[Parameter]
[SupplyParameterFromQuery(Name = "maxBar")]
public int MaxPressure { get; set; }

[Parameter]
[SupplyParameterFromQuery(Name = "checkBar")]
public int CheckPressure { get; set; }
}

可能的原因及解决方法 #

1. 页面文件位置错误 #

Blazor Web App的路由依赖文件存放位置：

• 若使用交互式服务器渲染或静态渲染模式，页面文件需放在服务器项目的Pages文件夹下（可创建qrcode子文件夹存放该页面）。
• 若使用交互式WebAssembly渲染模式，页面文件需放在客户端项目的Pages文件夹下。

2. 路由大小写不匹配 #

Windows系统下路径不区分大小写，但Linux/macOS或生产环境会严格区分。确认URL中的/qrcode/info与页面@page指令中的路径完全一致（包括大小写）。

3. 组件路由未正确配置 #

在项目的Program.cs中，确保已添加对应渲染模式的路由支持：

• 服务器端：需调用AddRazorComponents().AddInteractiveServerComponents()。
• WebAssembly客户端：需调用AddRazorComponents().AddInteractiveWebAssemblyComponents()。

4. 静态渲染模式不支持自动绑定查询参数 #

如果页面使用静态渲染模式，默认无法通过SupplyParameterFromQuery自动绑定查询参数。可改为交互式渲染模式，或手动通过HttpContextAccessor获取参数：

@inject IHttpContextAccessor HttpContextAccessor

@code {
    protected override void OnInitialized()
    {
        var id = HttpContextAccessor.HttpContext?.Request.Query["Id"];
        var name = HttpContextAccessor.HttpContext?.Request.Query["Name"];
        // 手动解析其他参数
    }
}

5. 参数类型转换异常 #

虽然“未找到”通常是路由问题，但参数类型转换失败可能触发隐性加载错误。可临时将所有参数改为string类型测试，确认路由正常后再逐步恢复原类型。

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