如何在 Blazor 中正确获取 HTML 表单的 GET 查询参数-html教程-PHP中文网

如何在 Blazor 中正确获取 HTML 表单的 GET 查询参数

Blazor 是客户端渲染框架，不支持传统的 ASP.NET Core Request 对象；需通过 NavigationManager 解析当前 URL 查询字符串来获取表单提交的参数。

blazor 是客户端渲染框架，不支持传统的 asp.net core `request` 对象；需通过 `navigationmanager` 解析当前 url 查询字符串来获取表单提交的参数。

在 Blazor（尤其是 Blazor WebAssembly 或托管式 Blazor Server 的组件中），HttpContext、Request 等服务不可直接访问，因为组件运行在浏览器沙箱中（WebAssembly）或与请求生命周期解耦（Server）。因此，直接使用 Request.Query 会触发编译错误 CS0103：名称 "Request" 不存在于当前上下文。

✅ 正确做法是利用 NavigationManager 获取当前 URI，并借助 QueryHelpers.ParseQuery() 解析查询参数：

@inject NavigationManager NavigationManager

@{
    double distance = 0;

    var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
    var query = Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(uri.Query);

    if (query.TryGetValue("distance", out var distanceValues) && distanceValues.Count > 0)
    {
        double.TryParse(distanceValues[0], out distance);
        // 可选：记录或用于后续计算
        Console.WriteLine($"Parsed distance: {distance}");
    }
}

对应的 HTML 表单保持标准语义即可（无需 @onsubmit 或 EventCallback）：

<p>Enter distance:</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img
														src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a>
													<p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

? 关键说明：

<form method="get"></form> 提交后会触发页面导航（URL 变化），Blazor 组件将自动重新渲染；
NavigationManager.Uri 返回当前完整 URL（如 https://localhost:5001/?distance=42.3），ToAbsoluteUri() 确保解析安全；
QueryHelpers.ParseQuery() 返回 IReadOnlyDictionary<string stringvalues></string>，其中 StringValues 是可索引集合，推荐用 TryGetValue() 安全读取；
⚠️ 注意：此方式仅适用于 GET 表单；若需 POST 或复杂交互（如防重提交、输入验证、异步处理），应改用 EditForm + InputNumber/InputText 绑定模型，并配合 OnValidSubmit 事件。