ASP.NET 4.0 网站开发实例教程：从零开始构建个人博客

前言：为什么学习 ASP.NET 4.0？

ASP.NET 4.0 是一个成熟、稳定且功能强大的 Web 开发框架，虽然现在主流已经转向 .NET Core 和 .NET 5+，但仍有大量基于 .NET Framework 的 legacy 系统在运行，学习 ASP.NET 4.0 有以下好处：

asp.net 4.0网站开发实例教程
（图片来源网络，侵删）
  1. 理解 Web Forms 的核心思想：Web Forms 的“事件驱动、控件模型”思想是理解 ASP.NET 生态的重要一环。
  2. 维护现有项目：很多企业项目使用 ASP.NET 4.0 开发,掌握它是进行维护和升级的必备技能。
  3. 概念相通：ASP.NET 4.0 中的很多概念，如页面生命周期、状态管理、数据绑定等，在后续的 MVC 和 Core 框架中也有迹可循。

第一部分：准备工作

安装开发环境

你需要安装以下软件：

  • Visual Studio 2010 / 2012 / 2025 / 2025：推荐使用 Visual Studio 2025 或 2025，它们对 .NET 4.0 的支持更好，界面也更现代，本教程将以 Visual Studio 2025 为例。
  • .NET Framework 4.0 或更高版本：安装 Visual Studio 时通常会自动安装。
  • SQL Server Express：用于数据库，Visual Studio 安装包中通常会包含 SQL Server Express LocalDB，这是一个轻量级的 SQL Server 版本,非常适合开发。

创建第一个 ASP.NET 网站

  1. 打开 Visual Studio。
  2. 选择 文件 -> 新建 -> 网站...。
  3. 在模板中，选择 ASP.NET 空网站。
  4. 为网站选择一个位置，并确保选择的框架版本是 .NET Framework 4。
  5. 点击 确定。

你会看到一个空的项目，只有一个 web.config 文件。

第二部分：项目规划

我们的目标是创建一个简单的个人博客系统,包含以下功能：

  • 首页：显示博客文章列表。
  • 文章详情页：显示单篇文章的详细内容。
  • 后台管理：登录后可以发布、编辑和删除文章。

第三部分：数据库设计

我们需要一个数据库来存储文章信息，我们使用 SQL Server LocalDB。

asp.net 4.0网站开发实例教程
（图片来源网络，侵删）
  1. 在“解决方案资源管理器”中，右键点击你的项目 -> 添加 -> 新建项...。
  2. 选择 SQL Server 数据库，命名为 BlogDB.mdf。
  3. 点击 添加，此时会自动打开服务器资源管理器，并显示 BlogDB.mdf 数据库。
  4. 右键点击 表 -> 添加新表。
  5. 设计 Posts (文章表) 的结构,如下所示：
列名 数据类型 允许 Null 说明
Id int 否 主键，标识
Content nvarchar(MAX) 否
PostDate datetime 否 发布日期
Author nvarchar(50) 是 作者
  1. 将 Id 列设置为主键（右键点击行 -> 设置主键）。
  2. 点击 保存，将表命名为 Posts。

第四部分：首页 - 显示文章列表

创建首页

  1. 在解决方案资源管理器中，右键点击项目 -> 添加 -> 新建项...。
  2. 选择 Web 窗体，命名为 Default.aspx。
  3. 点击 添加。

设计页面布局

打开 Default.aspx，切换到“源”视图，修改 HTML 代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyBlog._Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">我的个人博客</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .post-list { list-style-type: none; padding: 0; }
        .post-item { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; border-radius: 5px; }
        .post-title { font-size: 1.5em; font-weight: bold; }
        .post-meta { color: #666; font-size: 0.9em; }
        .post-content { margin-top: 10px; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>我的个人博客</h1>
            <asp:Repeater ID="rptPosts" runat="server">
                <ItemTemplate>
                    <div class="post-item">
                        <div class="post-title">
                            <a href="PostDetail.aspx?id=<%# Eval("Id") %>"><%# Eval("Title") %></a>
                        </div>
                        <div class="post-meta">
                            发布于: <%# Eval("PostDate", "{0:yyyy-MM-dd}") %> | 作者: <%# Eval("Author") %>
                        </div>
                        <div class="post-content">
                            <%# Eval("Content") %>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>

代码解释：

  • <asp:Repeater>：这是一个数据绑定控件，它没有自己的内置 HTML，允许你完全控制其输出的 HTML 结构。
  • ItemTemplate：定义了如何为每一条数据项显示内容。
  • <%# Eval("FieldName") %>：这是数据绑定表达式，用于从数据源中取出 FieldName 字段的值并显示。

编写后台代码进行数据绑定

打开 Default.aspx.cs 文件，编写 C# 代码来连接数据库并绑定数据。

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI;
namespace MyBlog
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // 首次加载时才绑定数据，避免重复查询
            if (!IsPostBack)
            {
                BindPosts();
            }
        }
        private void BindPosts()
        {
            // 获取数据库连接字符串
            string connStr = @"Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\BlogDB.mdf;Integrated Security=True";
            using (SqlConnection conn = new SqlConnection(connStr))
            {
                string sql = "SELECT Id, Title, Content, PostDate, Author FROM Posts ORDER BY PostDate DESC";
                using (SqlCommand cmd = new SqlCommand(sql, conn))
                {
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    DataTable dt = new DataTable();
                    da.Fill(dt);
                    // 将数据绑定到 Repeater 控件
                    rptPosts.DataSource = dt;
                    rptPosts.DataBind();
                }
            }
        }
    }
}

代码解释：

asp.net 4.0网站开发实例教程
（图片来源网络，侵删）
  • Page_Load：页面加载时触发的事件。!IsPostBack 确保数据只在第一次加载页面时绑定，而不是在每次回发（比如按钮点击）时都绑定。
  • SqlConnection：用于建立与 SQL Server 数据库的连接。
  • SqlCommand：用于执行 SQL 语句。
  • SqlDataAdapter：用于执行 SQL 命令并填充 DataTable。
  • DataTable：一个内存中的数据表,用于临时存储从数据库查询到的结果。
  • rptPosts.DataSource = dt;：将 DataTable 设置为 Repeater 的数据源。
  • rptPosts.DataBind();：执行数据绑定，将 DataTable 中的数据填充到 Repeater 的模板中。

运行项目

按 F5 运行你的网站，如果一切正常，你应该能看到一个空白页面,因为我们还没有添加任何数据。

第五部分：添加测试数据

为了方便测试,我们直接在数据库中添加几条数据。

  1. 在“服务器资源管理器”中，展开你的 BlogDB.mdf -> 表 -> 右键点击 Posts -> 显示数据。
  2. 添加几条测试文章，

| Id | Title | Content | PostDate | Author |