Razor 语法中链接生成方法详解

目录#

基础方法：手动拼接 URL
HTML 辅助方法（HTML Helpers）
- 生成普通链接 (ActionLink)
- 生成路由链接 (RouteLink)
标签辅助器（Tag Helpers）
- 锚点标签辅助器 (asp-*)
- 常用属性详解
生成到静态文件的链接
常见场景与最佳实践
- 传递参数（路由值、查询字符串）
- 指向区域（Areas）
- 指定协议和主机名
- 最佳实践总结
总结
参考

基础方法：手动拼接 URL#

最简单直接的方式是使用 HTML 原生的 <a> 标签并手动填写 href 属性。

<!-- 指向外部网站 -->
<a href="https://www.github.com">访问 GitHub</a>
 
<!-- 指向站内绝对路径 -->
<a href="/Home/Privacy">隐私政策</a>
 
<!-- 指向站内相对路径 -->
<a href="Privacy">隐私政策</a>

缺点：

脆弱性：如果应用程序的根路径（Application Root Path）发生变化（例如，部署在虚拟目录下），硬编码的路径很容易出错。
难以维护：当控制器（Controller）或动作方法（Action）的名称改变时，你需要手动查找并更新所有相关的链接，容易遗漏。
不灵活：无法利用 ASP.NET Core 的路由系统进行智能生成。

适用场景：仅用于指向明确的外部 URL 或非常简单的、不会改变的静态内部路径。

HTML 辅助方法（HTML Helpers）#

HTML Helpers 是服务器端方法，它可以在 Razor 视图中返回 HTML 字符串。它们是生成链接的传统且强大的方式。

生成普通链接 (`ActionLink`)#

Html.ActionLink 方法根据控制器和动作方法的名字生成链接。

@Html.ActionLink("显示文本", "Action方法名", "控制器名")

示例：

假设有一个 HomeController，其中有一个 Index 动作方法和一个 About 动作方法。

<!-- 生成：<a href="/">首页</a> -->
@Html.ActionLink("首页", "Index", "Home")
 
<!-- 生成：<a href="/Home/About">关于我们</a> -->
@Html.ActionLink("关于我们", "About", "Home")
 
<!-- 如果当前就在 HomeController 的上下文中，可以省略控制器名 -->
@Html.ActionLink("关于我们", "About")

生成路由链接 (`RouteLink`)#

Html.RouteLink 方法根据特定的路由名称（在 Startup.cs 或属性路由中定义）生成链接。这在处理复杂路由时非常有用。

定义路由：

// Startup.cs 中的 Configure 方法
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
 
    endpoints.MapControllerRoute(
        name: "blog_route",
        pattern: "blog/{*article}",
        defaults: new { controller = "Blog", action = "Read" });
});

在 Razor 中使用：

<!-- 使用默认路由生成：<a href="/">首页</a> -->
@Html.RouteLink("首页", "default")
 
<!-- 使用命名路由"blog_route"生成：<a href="/blog/my-article-title">阅读博客</a> -->
@Html.RouteLink("阅读博客", "blog_route", new { article = "my-article-title" })

标签辅助器（Tag Helpers）#

标签辅助器是 ASP.NET Core 中引入的现代方法。它们允许你像编写标准 HTML 一样编写代码，同时在服务器端进行处理，语法更直观、更易读。

要使用标签辅助器，请确保在 _ViewImports.cshtml 文件中引入了它们：

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

锚点标签辅助器 (`asp-*`)#

最常用的是锚点标签 <a> 的辅助器。

基本语法：

<a asp-controller="控制器名" asp-action="动作方法名">显示文本</a>

示例：

<!-- 生成：<a href="/">首页</a> -->
<a asp-controller="Home" asp-action="Index">首页</a>
 
<!-- 生成：<a href="/Home/About">关于我们</a> -->
<a asp-controller="Home" asp-action="About">关于我们</a>
 
<!-- 如果视图本身属于 HomeController，可以省略 asp-controller -->
<a asp-action="About">关于我们</a>

常用属性详解#

属性	描述	示例
`asp-controller`	指定目标控制器名称。	`asp-controller="Products"`
`asp-action`	指定目标动作方法名称。默认为当前控制器的 `Index` 方法。	`asp-action="Details"`
`asp-route-*`	传递路由参数。`*` 是参数名。	`asp-route-id="10"`
`asp-route`	指定路由的名称。	`asp-route="blog_route"`
`asp-area`	指定目标区域（Area）名称。	`asp-area="Admin"`
`asp-fragment`	指定 URL 片段（即哈希值）。	`asp-fragment="section1"`
`asp-protocol`	指定协议，如 `https`。	`asp-protocol="https"`
`asp-host`	指定主机名。	`asp-host="example.com"`
`asp-all-route-data`	提供一个包含所有路由参数的字典。	见下文示例

生成到静态文件的链接#

对于存储在 wwwroot 文件夹下的静态文件（如 CSS， JS，图片），可以使用 ~ 符号来代表网站的根路径。这是推荐的最佳实践。

<!-- 使用 ~ 指向 wwwroot 下的文件 -->
<a href="~/docs/user-manual.pdf">下载用户手册</a>
<!-- 可能生成：<a href="/docs/user-manual.pdf">下载用户手册</a> -->
 
<!-- 加载图片 -->
<img src="~/images/logo.png" alt="Logo" />
 
<!-- 引入 CSS 文件 -->
<link rel="stylesheet" href="~/css/site.css" />
 
<!-- 引入 JavaScript 文件 -->
<script src="~/js/site.js"></script>

~ 符号会被自动转换为应用程序的基路径，确保无论在何种部署环境下链接都是正确的。

常见场景与最佳实践#

传递参数（路由值、查询字符串）#

1. 路由参数（推荐）： 使用 asp-route-* 属性，参数会成为 URL 路径的一部分。

<!-- 指向 /Products/Details/5 -->
<a asp-controller="Products" asp-action="Details" asp-route-id="5">产品详情</a>
 
<!-- 传递多个参数 -->
<a asp-controller="Blog" asp-action="Search" asp-route-year="2023" asp-route-month="10">2023年10月的文章</a>
<!-- 可能生成：<a href="/Blog/Search/2023/10">...</a> -->

2. 查询字符串（Query String）： 如果路由模板不匹配，参数会自动以查询字符串的形式附加。

<!-- 假设路由没有为 ‘page' 定义，则会生成查询字符串 -->
<a asp-controller="Items" asp-action="List" asp-route-page="2">第二页</a>
<!-- 生成：<a href="/Items/List?page=2">第二页</a> -->

指向区域（Areas）#

如果你的项目使用了 Areas 来组织代码，必须显式指定 asp-area 属性。

<!-- 指向 Admin 区域下 UsersController 的 Index 动作 -->
<a asp-area="Admin" asp-controller="Users" asp-action="Index">管理用户</a>
<!-- 生成：<a href="/Admin/Users">管理用户</a> -->

指定协议和主机名#

通常用于生成指向站外或需要绝对 URL 的场景（如邮件、RSS）。

<!-- 生成完整的绝对 URL -->
<a asp-controller="Home"
   asp-action="Index"
   asp-protocol="https"
   asp-host="www.mysite.com">安全首页</a>
<!-- 生成：<a href="https://www.mysite.com/">安全首页</a> -->

最佳实践总结#

优先使用标签辅助器（Tag Helpers）：它们的语法更接近 HTML，可读性更强，是现代的推荐做法。
避免手动硬编码内部路径：始终使用 asp-controller, asp-action, asp-route-* 等辅助方法，以确保链接的正确性和可维护性。
对静态资源使用 ~：引用 wwwroot 下的文件时，总是使用 href="~/path/to/file" 来正确处理应用基路径。
利用路由系统：通过 asp-route-* 传递参数，让框架帮你处理 URL 的构建逻辑，避免手动拼接。
考虑区域（Areas）：当项目结构复杂，使用了 Areas 时，不要忘记 asp-area 属性。

总结#

在 ASP.NET Core Razor 视图中生成链接，我们拥有从传统 HTML Helpers 到现代 Tag Helpers 的多种工具。选择正确的方法可以极大地提升代码的健壮性和可维护性。

简单外部链接：直接使用 <a href="https://...">。
所有内部链接：强烈推荐使用锚点标签辅助器 (<a asp-controller="..." asp-action="..." asp-route-="...">)。
静态资源链接：使用 href="~/" 语法。
复杂或命名路由：可考虑使用 Html.RouteLink 或 asp-route 属性。

掌握这些方法将使你能够轻松应对各种 URL 生成需求，并编写出高质量的 ASP.NET Core 应用程序。

目录#