ASP.NET 7 Razor Pages Get表单提交URL不符合预期问题排查

你遇到的核心问题是：GET表单的默认提交行为会将表单字段转为查询字符串，而非填充到路由模板中。即使你在@page里定义了{handler?}/{myvar?}的路由结构，浏览器依然会按照GET表单的标准逻辑处理参数。

解决方法 #

方法1：通过JavaScript拦截提交，构造目标URL跳转 #

这种方式直接控制提交行为，生成你想要的URL格式：

修改Cshtml代码：

@page "{handler?}/{myvar?}"

<form id="searchForm">
    <input id="myvarInput" name="myvar" value="test">
    <button type="submit">Search</button>
</form>

<script>
document.getElementById('searchForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认表单提交
    const myvar = document.getElementById('myvarInput').value;
    // 构造目标URL并跳转
    window.location.href = `/search/${encodeURIComponent(myvar)}`;
});
</script>

方法2：改用POST提交，再重定向到目标路由格式 #

如果不想用JS，可以借助POST接收参数后重定向，既保留表单输入体验，又得到目标URL：

1. 修改Cshtml的表单方法为POST：

@page "{handler?}/{myvar?}"

<form method="post" asp-route-handler="search">
    <input name="myvar" value="test">
    <button type="submit">Search</button>
</form>

2. 在Cshtml.cs中添加POST处理器，并执行重定向：

public IActionResult OnPostSearch(string myvar)
{
    // 重定向到带路由参数的GET页面
    return RedirectToPage(new { handler = "search", myvar = myvar });
}

// 保留原有的GET处理器
public void OnGetSearch(string myvar)
{
    // 你的业务逻辑
}

public void OnGet()
{
    // 默认GET逻辑
}

为什么原代码不生效？ #

@page "{handler?}/{myvar?}"只是定义了可匹配的路由规则，告诉ASP.NET Core可以接收/search/test这样的URL并映射到OnGetSearch方法。但浏览器的GET表单提交是标准HTTP行为，它不会自动将表单字段填充到路由模板里，只会把参数拼在URL的查询字符串部分，这就是你得到/search?myvar=test的原因。

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