CSHTML项目中用href链接TikTok页面因@符号报错的技术问询

在CSHTML项目里尝试通过href属性链接TikTok页面时，因TikTok URL自带的@符号触发报错，尝试的两种写法分别出现以下错误：

• 示例1错误提示：Too many characters in the character literal（字符字面量包含过多字符）
• 示例2错误提示：The name "tiktok" does not exist in the current context（当前上下文中不存在“tiktok”这个名称）

错误代码示例1 #

<li>
   <a href="@('https://www.tiktok.com/@tiktok.example1?lang=en/')">
      <img src="/assets/img/social-tiktok.svg" alt="Tiktok Icon">
   </a>
</li>

错误代码示例2 #

<li>
   <a href="https://www.tiktok.com/@tiktok.example2?lang=en/">
      <img src="/assets/img/social-tiktok.svg" alt="Tiktok Icon">
   </a>
</li>

错误原因分析 #

• 示例1：C#语法里，单引号'仅用于包裹单个字符的字面量，你用它包裹整段URL字符串，编译器会识别为非法字符字面量，触发报错。
• 示例2：CSHTML基于Razor引擎，@是Razor的语法标记，编译器会把@tiktok当成需要解析的后端变量，但你并未定义这个变量，所以提示“名称不存在”。

正确写法 #

有两种可行的解决方式：

方式1：转义@符号

在Razor中，用两个@@表示一个实际的@符号，编译器就不会把它当成语法标记处理：

<li>
   <a href="https://www.tiktok.com/@@tiktok.example1?lang=en/">
      <img src="/assets/img/social-tiktok.svg" alt="Tiktok Icon">
   </a>
</li>

方式2：用Razor字符串表达式包裹

用双引号包裹URL字符串，再通过@("...")的Razor表达式输出，内部的@会被当成普通字符解析：

<li>
   <a href="@("https://www.tiktok.com/@tiktok.example1?lang=en/")">
      <img src="/assets/img/social-tiktok.svg" alt="Tiktok Icon">
   </a>
</li>

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