如何在 ASP.NET Core 中实现 SEO 友好 URL 而不是默认 URL 模式？

Question

我有一个比较模块，屏幕是这样的：

当用户键入名称时，自动提示弹出窗口和比较将显示在表格中。

现在，当我查看 URL 时，它看起来像这样：

https://localhost:7043/Compare/ResultTwo?compareOne=4&compareTwo=2

ASP.NET Core 自动添加了它。但我想要一个友好的 URL，比如

https://localhost:7043/Compare/nvidia-vs-raiden

Compare 是我的控制器，ResultTwo 是我的动作。

public IActionResult ResultTwo(string compareOne, string compareTwo)
{
    _model.Item1 = Convert.ToInt16(compareOne);
    _model.Item2 = Convert.ToInt16(compareTwo);

    return View(FullPathsOfViews.CompareSpecs, _model);
}

我相信没有必要共享整个代码，因为这只是 ASP.NET Core 的默认行为。代码内部没有任何更改。其余代码只有业务逻辑。

Program.cs

也没有改变。

如果你想要一个特定的代码片段，请提及，我喜欢分享它。

如何实现？

Answer 1

你可以创建一个路由模板来匹配这个 url，这是一个工作演示

Program.cs

app.MapControllerRoute(                    
  name: "customCompareRoute",
  pattern: "Compare/{compareOne}-vs-{compareTwo}",
  defaults: new { controller = "Home", action = "ResultTwo" }
);

app.MapControllerRoute(
   name: "default",
   pattern: "{controller=Home}/{action=Index}/{id?}"
);

查看

<form method="get" >
    <input type="text" id="compareOne" name="compareOne" />
    <input type="text" id="compareTwo" name="compareTwo" />
    <button type="button" id="btn" >Compare</button>
</form>

@section Scripts{
   <script>

        document.getElementById('btn').onclick = submit

            function submit() {
                let value1 = document.getElementById('compareOne').value
                let value2 = document.getElementById('compareTwo').value
            window.location.href = `https://localhost:7144/Compare/${value1}-vs-${value2}`
            }

    </script>
}

演示