ASP.NET Core 5 Blazor Server预渲染后HttpContext查询串被替换问题

这个问题我之前帮不少开发者排查过，本质是Blazor Server的预渲染机制和后续交互式连接的特性导致的。

当你启用ServerPrerendered渲染模式时，第一次执行OnInitialized()是在服务器预渲染阶段，此时HttpContext对应的是用户浏览器发起的原始页面请求——也就是带Proj_ID=23407&Tail_Nr=TG6R&Location=N的那个请求，所以你能正常拿到参数初始化数据。

但预渲染完成后，浏览器会和服务器建立一个SignalR长连接，用来实现Blazor的交互式更新（比如组件事件响应、状态同步）。这个SignalR连接的请求会自动带上一个随机生成的id参数（就是你看到的那种随机字符串）。而在交互式渲染阶段再次触发OnInitialized()时，此时的HttpContext对应的是这个SignalR连接的请求，而不是用户最初的页面请求，所以查询串就变成了带随机id的版本。但浏览器地址栏显示的始终是用户最初输入的URL，这就造成了视觉上的不一致。

要解决这个问题，核心思路是在预渲染阶段就把初始请求的参数保存下来，后续生命周期不再依赖HttpContext获取。这里有几种靠谱的实现方式：

方法1：直接通过组件参数传递（最推荐） #

这是最直接的方式，把初始请求的参数从宿主页面传递给Blazor组件：

1. 打开渲染Blazor组件的_Host.cshtml（或者你的自定义宿主页面），先从当前HttpContext里提取查询参数：

@page "/OperationsAll"
@{
    var projId = Context.Request.Query["Proj_ID"].ToString();
    var tailNr = Context.Request.Query["Tail_Nr"].ToString();
    var location = Context.Request.Query["Location"].ToString();
}

<component type="typeof(OperationsAll)" render-mode="ServerPrerendered" 
           param-Proj_ID="@projId" param-Tail_Nr="@tailNr" param-Location="@location" />

2. 然后在OperationsAll.razor组件中定义对应的参数，直接用这些参数初始化数据：

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

    [Parameter]
    public string Tail_Nr { get; set; }

    [Parameter]
    public string Location { get; set; }

    protected override void OnInitialized()
    {
        // 直接用组件参数初始化，完全不需要碰HttpContext
        LoadOperationData(Proj_ID, Tail_Nr, Location);
    }

    private void LoadOperationData(string projId, string tailNr, string location)
    {
        // 你的数据加载逻辑
    }
}

这种方式完全避开了后续HttpContext的变化问题，参数从一开始就被传递到组件里，不管后续SignalR怎么连接，组件都能拿到正确的初始值。

方法2：用状态容器共享初始参数（适合多组件场景） #

如果这些参数需要在多个组件中使用，可以创建一个全局状态容器来保存：

1. 先创建一个状态类：

public class InitialRequestState
{
    public string Proj_ID { get; set; }
    public string Tail_Nr { get; set; }
    public string Location { get; set; }
}

2. 在Program.cs里把它注册为Scoped服务：

builder.Services.AddScoped<InitialRequestState>();

3. 回到_Host.cshtml，注入这个状态容器并把初始参数存进去：

@inject InitialRequestState RequestState
@{
    RequestState.Proj_ID = Context.Request.Query["Proj_ID"].ToString();
    RequestState.Tail_Nr = Context.Request.Query["Tail_Nr"].ToString();
    RequestState.Location = Context.Request.Query["Location"].ToString();
}

4. 最后在OperationsAll组件中注入状态容器，直接读取参数：

@inject InitialRequestState RequestState

@code {
    protected override void OnInitialized()
    {
        LoadOperationData(RequestState.Proj_ID, RequestState.Tail_Nr, RequestState.Location);
    }
}

方法3：用NavigationManager获取地址栏真实URL（适合交互式阶段） #

如果你只需要在交互式渲染阶段获取参数，可以用NavigationManager——它会同步浏览器地址栏的真实URL，不受SignalR请求的影响：

@inject NavigationManager NavManager

@code {
    protected override void OnInitialized()
    {
        // 解析地址栏的查询参数
        var uri = new Uri(NavManager.Uri);
        var queryParams = System.Web.HttpUtility.ParseQueryString(uri.Query);
        
        var projId = queryParams["Proj_ID"];
        var tailNr = queryParams["Tail_Nr"];
        var location = queryParams["Location"];

        LoadOperationData(projId, tailNr, location);
    }
}

注意：这个方法在预渲染阶段可能会出问题，因为NavigationManager在预渲染时还没有完全初始化，所以最好只在交互式阶段使用，或者和预渲染的参数传递结合起来。

你看到的"查询串被替换"其实不是真的被修改了，只是不同阶段的HttpContext对应了不同的请求（初始页面请求 vs SignalR连接请求）。通过上面的方法，你可以牢牢锁定初始请求的参数，让组件在整个生命周期都能拿到正确的数据，解决页面渲染时的数据缺失问题。

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