首页
/ 正文

ASP.NET Web Pages 教程（千字长文）

更新时间: 2025-04-12 08:41:40

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;

《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习，欢迎点击围观

前言

在 Web 开发领域，ASP.NET Web Pages 是一个轻量级且易于上手的框架，特别适合快速构建小型到中型的动态网站。它以 Razor 语法为核心，结合了 HTML、C# 和服务器端逻辑，让开发者能够以简洁的方式实现功能。无论是个人博客、企业官网，还是简单的电子商务平台，ASP.NET Web Pages 都能提供高效灵活的解决方案。

本教程面向编程初学者和中级开发者，通过循序渐进的讲解和实际案例，帮助读者掌握从环境搭建到项目部署的全流程。文中将穿插代码示例、形象比喻和常见问题解答，确保知识点易于理解。

环境搭建与第一个 Web Pages 程序

开发环境准备

要开始开发 ASP.NET Web Pages 项目，需安装以下工具：

Visual Studio 或 Visual Studio Code（推荐）；
.NET SDK（可从 .NET 官网下载）。

示例：创建第一个 Web Pages 项目

打开 Visual Studio，选择 Create a new project。
在模板中搜索 ASP.NET Web Application，选择 Web Application (Razor Pages)。
输入项目名称并配置选项，点击 Create。

项目创建完成后，会在 Pages 文件夹下看到默认的 Index.cshtml 文件。这是一个典型的 Razor 文件，其扩展名 .cshtml 表示它混合了 HTML 和 C# 代码。

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

<h1>Welcome to ASP.NET Web Pages!</h1>  
<p>这是一个动态生成的页面，您可以通过 C# 代码控制内容。</p>

Razor 语法解析

Razor 是 ASP.NET Web Pages 的核心语法，通过 @ 符号区分 HTML 和服务器端代码。例如：

@DateTime.Now：直接输出当前时间。
@if (条件) { ... }：在页面中执行条件判断。

比喻：可以将 Razor 语法想象为一座桥梁，它连接了 HTML 的静态内容和 C# 的动态逻辑，让开发者在同一个文件中自由切换两者的使用场景。

基础语法与页面逻辑

变量与循环

在 Razor 文件中，可以通过 @{ ... } 声明代码块，例如：

@page  
@{  
    var message = "Hello, World!";  
    var numbers = new List<int> { 1, 2, 3, 4, 5 };  
}  

<p>@message</p>  

<ul>  
    @foreach (var num in numbers)  
    {  
        <li>@num</li>  
    }  
</ul>

页面间导航

通过 @Html.ActionLink 方法生成导航链接：

@Html.ActionLink("跳转到关于页面", "About", "Home")

注：这里的 "Home" 是控制器名称，"About" 是方法名称。

数据访问与数据库集成

连接数据库

ASP.NET Web Pages 支持通过 ADO.NET 或 Entity Framework 访问数据库。以下是一个简单的 SQL Server 示例：

@page  
@{  
    string connectionString = "Server=localhost;Database=MyDB;Trusted_Connection=True";  
    var db = Database.Open(connectionString);  

    var command = "SELECT * FROM Users";  
    var reader = db.Query(command);  
}  

<table>  
    <tr>  
        <th>ID</th>  
        <th>Name</th>  
    </tr>  
    @foreach (var row in reader)  
    {  
        <tr>  
            <td>@row.ID</td>  
            <td>@row.Name</td>  
        </tr>  
    }  
</table>

参数化查询与安全性

为防止 SQL 注入攻击，应使用参数化查询：

var command = "SELECT * FROM Users WHERE ID = @ID";  
var parameters = new { ID = 1 };  
var reader = db.Query(command, parameters);

路由与 URL 重写

默认路由配置

ASP.NET Web Pages 的路由规则默认存储在 Startup.cs 文件中。例如：

app.UseEndpoints(endpoints =>  
{  
    endpoints.MapRazorPages();  
});

自定义路由

通过修改 Startup.cs，可以实现更灵活的 URL 映射：

endpoints.MapRazorPages()  
    .AddRazorPagesOptions(options =>  
    {  
        options.Conventions.AddAreaFolderRouteModelConvention(  
            "/Blog", "/{year}/{month}/{slug}");  
    });

路由规则示例

URL 格式	对应的页面路径
`/blog/2023/08/my-post`	`/Pages/Blog/Post.cshtml`

表单处理与用户输入验证

创建表单

在 Razor 文件中定义 HTML 表单：

@page  
<form method="post">  
    <label>用户名：<input type="text" name="username" /></label>  
    <button type="submit">提交</button>  
</form>  

@if (IsPost)  
{  
    var username = Request.Form["username"];  
    <p>您输入的用户名是：@username</p>  
}

模型绑定与验证

使用 [BindProperty] 特性简化数据绑定：

@page  
@model MyPageModel  

<label>邮箱：<input type="email" asp-for="Email" /></label>  
<span asp-validation-for="Email"></span>  

@functions {  
    [BindProperty]  
    public string Email { get; set; }  

    public void OnPost()  
    {  
        if (!ModelState.IsValid)  
        {  
            return Page();  
        }  
        // 处理逻辑  
    }  
}

安全性与身份验证

防止跨站脚本（XSS）

使用 Html.Encode 或 Razor 的自动编码功能：

<p>@Html.Encode(userInput)</p>  
<!-- 或直接 -->  
<p>@userInput</p>  // Razor 默认会自动编码

授权与身份验证

通过 Authorize 特性限制页面访问：

@attribute [Authorize]  
@page  
...

实战案例：构建简易博客系统

需求分析

实现以下功能：

显示文章列表；
用户登录后可发布新文章；
文章按分类筛选。

代码实现

1. 文章模型

public class Article  
{  
    public int ID { get; set; }  
    public string Title { get; set; }  
    public string Content { get; set; }  
    public DateTime PublishedAt { get; set; }  
}

2. 列表页面（Articles.cshtml）

@page  
@model ArticlesModel  

@foreach (var article in Model.Articles)  
{  
    <div class="article">  
        <h2>@article.Title</h2>  
        <p>@article.Content</p>  
        <small>发布于：@article.PublishedAt.ToShortDateString()</small>  
    </div>  
}

3. 发布文章表单（Create.cshtml）

@page  
@model CreateModel  

<form method="post">  
    <label>标题：<input type="text" asp-for="Article.Title" /></label>  
    <label>内容：<textarea asp-for="Article.Content"></textarea></label>  
    <button type="submit">发布</button>  
</form>  

@functions {  
    [BindProperty]  
    public Article Article { get; set; }  

    public IActionResult OnPost()  
    {  
        if (!ModelState.IsValid)  
            return Page();  

        // 保存到数据库  
        return RedirectToPage("Articles");  
    }  
}

结论

通过本教程，您已掌握了 ASP.NET Web Pages 的核心概念、语法和实战技巧。从环境搭建到数据访问，再到安全性与项目部署，每个环节都通过代码示例和比喻进行了深入浅出的讲解。

下一步建议：

探索 Entity Framework Core，提升数据库交互能力；
学习 SignalR 实现实时通信；
参考微软官方文档，了解高级主题（如依赖注入、中间件）。

ASP.NET Web Pages 的灵活性和易用性使其成为快速开发的利器。希望本教程能为您打下坚实的基础，未来在 Web 开发领域不断探索创新！