ASP.NET Web Pages 教程 —— Razor 语法全面指南

在本教程中，我们将学习如何在 ASP.NET Web Pages 中使用 Razor 语法，并通过示例掌握 C# 和 Visual Basic 的基本用法。Razor 能让你在网页中嵌入服务器端代码，实现动态内容生成。

什么是 Razor？

Razor 是一种简洁的 服务器端标记语法，用于将 C# 或 VB 代码嵌入 HTML 页面。它的特点包括：

轻量、易学，比传统 ASP.NET Web Forms 简洁
支持 C# 和 Visual Basic
可在服务器端执行代码并返回结果
文件扩展名：.cshtml（C#）、.vbhtml（VB）
内联表达式以 @ 开头，可在 HTML 中直接显示变量或函数结果

Razor 语法的设计理念是 代码少、易读、易维护，非常适合 Web 开发新手和 ASP.NET 开发者。

添加 Razor 代码示例

假设我们有一个最基础的 HTML 页面：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Pages Demo</title>
</head>
<body>
<h1>Hello Web Pages</h1>
</body>
</html>

我们可以使用 Razor 显示服务器时间：

html 复制代码

<p>The time is @DateTime.Now</p>

完整页面示例：

cshtml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Pages Demo</title>
</head>
<body>
<h1>Hello Web Pages</h1>
<p>The time is @DateTime.Now</p>
</body>
</html>

@DateTime.Now 是 Razor 的内联表达式，会在服务器端执行并返回当前时间。

Razor C# 基本语法

特性	说明
代码块	`@{ ... }` 包含多条语句
内联表达式	以 `@` 开头，例如 `@myVariable`
语句结束	使用分号 `;`
变量声明	使用 `var`
字符串	双引号 `"..."`
文件扩展名	`.cshtml`
区分大小写	是

示例：

cshtml 复制代码

@{ var myMessage = "Hello World"; }

<p>The value of myMessage is: @myMessage</p>

@{
    var greeting = "Welcome to our site!";
    var weekDay = DateTime.Now.DayOfWeek;
    var greetingMessage = greeting + " Today is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>

Razor Visual Basic 基本语法

特性	说明
代码块	`@Code ... End Code`
内联表达式	以 `@` 开头，例如 `@myVariable`
变量声明	使用 `Dim`
字符串	双引号 `"..."`
文件扩展名	`.vbhtml`
区分大小写	不区分

示例：

vbhtml 复制代码

@Code
dim myMessage = "Hello World"
End Code

<p>The value of myMessage is: @myMessage</p>

@Code
dim greeting = "Welcome to our site!"
dim weekDay = DateTime.Now.DayOfWeek
dim greetingMessage = greeting & " Today is: " & weekDay
End Code

<p>The greeting is: @greetingMessage</p>

Razor 页面示例

1. 主页（C#）

cshtml 复制代码

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

2. 隐私政策页

cshtml 复制代码

@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>

3. 错误页面

cshtml 复制代码

@page
@model ErrorModel
@{
    ViewData["Title"] = "Error";
}

<h1 class="text-danger">Error.</h1>
<h2 class="text-danger">An error occurred while processing your request.</h2>

@if (Model.ShowRequestId)
{
    <p>
        <strong>Request ID:</strong> <code>@Model.RequestId</code>
    </p>
}

<h3>Development Mode</h3>
<p>
    Enabling the <strong>Development</strong> environment displays detailed error information.
</p>
<p>
    <strong>Do not enable Development mode in production</strong> --- it may expose sensitive information.
</p>

4. 命名空间与 TagHelper

cshtml 复制代码

@using WebApplication1
@namespace WebApplication1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

小结

通过本教程，你已经掌握了：

Razor 的核心概念和语法
C# 与 VB 的 Razor 代码写法
ASP.NET Web Pages 页面创建与动态内容显示
页面模板、命名空间和 TagHelper 的基本使用

Razor 的简洁语法让 ASP.NET Web Pages 更易于学习和维护。如果想深入学习，可以参考官方文档：ASP.NET Core Web Apps。

✅ 优化亮点：

逻辑顺序更清晰：从概念 → 示例 → 语法 → 页面应用 → 总结
表格整理语法规则，阅读更直观
语言更自然、精炼，更适合 CSDN 发布
保留完整代码示例，适合初学者跟着实操