ASP.NET 4.0 实例教程：从零开始构建一个Web应用

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

虽然现在 .NET 6/7/8 (ASP.NET Core) 是主流，但仍有大量企业级项目基于 .NET Framework 4.x 运行，学习 ASP.NET 4.0 有以下好处：

asp.net 4.0 实例教程
（图片来源网络，侵删）
  1. 理解基础：ASP.NET 4.0 的 Web Forms 模式是理解现代 ASP.NET 框架（如 MVC, Blazor）工作原理的绝佳基础。
  2. 维护旧项目：如果你需要维护或升级遗留系统，掌握 ASP.NET 4.0 是必不可少的技能。
  3. 概念清晰：相比于现代框架的“约定优于配置”，ASP.NET 4.0 的“事件驱动”模型更直观，更容易理解 Web 应用的生命周期。

第一部分：准备工作

开发环境

你需要安装以下软件：

  • Visual Studio 2010 / 2012 / 2025 / 2025: 任意一个版本均可，但推荐 Visual Studio 2025 或更高版本，它们对 .NET 4.0 的支持更好，界面也更现代化。
  • .NET Framework 4.0 (或更高版本): Visual Studio 安装程序通常会包含，你也可以从微软官网单独下载。

创建第一个 ASP.NET Web 应用

  1. 打开 Visual Studio。
  2. 选择 文件 -> 新建 -> 项目。
  3. 在“新建项目”对话框中，选择 Visual C# -> Web。
  4. 选择 ASP.NET Web 应用程序。
  5. 给项目命名,StudentManagementSystem，然后点击 确定。
  6. 在下一个对话框中,选择 ASP.NET Web 窗体，这是我们本教程将要使用的模型。

第二部分：核心概念与实例

我们将围绕一个简单的 “学生信息管理系统” 来展开，这个系统将具备以下功能：

  • 学生列表页面
  • 添加学生页面
  • 编辑学生信息页面
  • 删除学生功能

创建学生列表页面

目标：在页面上显示一个学生列表。

步骤：

asp.net 4.0 实例教程
（图片来源网络，侵删）

  1. 添加一个 Web 窗体

    • 在“解决方案资源管理器”中，右键点击项目 -> 添加 -> Web 窗体。
    • 将其命名为 Students.aspx。

  2. 设计页面布局

    • 打开 Students.aspx，切换到“源”视图。
    • 在 <form> 标签内，添加一个 asp:GridView 控件，并设置其 ID 为 gvStudents。
    • 为了添加新学生,我们再添加一个 asp:Button 控件。
    <%@ Page Title="学生列表" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Students.aspx.cs" Inherits="StudentManagementSystem.Students" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h2>学生信息列表</h2>
    <p>
        <asp:Button ID="btnAddStudent" runat="server" Text="添加新学生" OnClick="btnAddStudent_Click" />
    </p>
    <asp:GridView ID="gvStudents" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4">
        <Columns>
            <asp:BoundField DataField="StudentID" HeaderText="学号" />
            <asp:BoundField DataField="Name" HeaderText="姓名" />
            <asp:BoundField DataField="Gender" HeaderText="性别" />
            <asp:BoundField DataField="Age" HeaderText="年龄" />
            <asp:HyperLinkField Text="编辑" DataNavigateUrlFields="StudentID" DataNavigateUrlFormatString="EditStudent.aspx?id={0}" />
            <asp:CommandField ShowDeleteButton="True" HeaderText="删除" />
        </Columns>
        <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
        <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
        <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
        <RowStyle BackColor="White" ForeColor="#003399" />
        <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
        <SortedAscendingCellStyle BackColor="#EDF6F6" />
        <SortedAscendingHeaderStyle BackColor="#004D7A" />
        <SortedDescendingCellStyle BackColor="#D6E0F0" />
        <SortedDescendingHeaderStyle BackColor="#002868" />
    </asp:GridView>
</asp:Content>
    • 说明：
      • asp:GridView 是一个强大的数据绑定控件，可以自动将数据显示为表格。
      • AutoGenerateColumns="False" 表示我们手动定义列。
      • asp:BoundField 用于显示数据源中的普通文本字段。
      • asp:HyperLinkField 用于生成一个链接，这里我们用它跳转到编辑页面，并将学号作为参数传递。
      • asp:CommandField 的 ShowDeleteButton="True" 会自动生成一个删除按钮。

  3. 编写后台代码绑定数据

    • 双击 Students.aspx 页面空白处，切换到代码视图 Students.aspx.cs。
    • 在 Page_Load 事件中，编写代码从数据源获取数据并绑定到 GridView，为了简化，我们先用一个“假”数据列表来模拟。
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace StudentManagementSystem
{
    public partial class Students : System.Web.UI.Page
    {
        // 模拟数据库
        private static List<Student> studentList = new List<Student>
        {
            new Student { StudentID = "1001", Name = "张三", Gender = "男", Age = 20 },
            new Student { StudentID = "1002", Name = "李四", Gender = "女", Age = 19 },
            new Student { StudentID = "1003", Name = "王五", Gender = "男", Age = 21 }
        };
        protected void Page_Load(object sender, EventArgs e)
        {
            // 如果是第一次加载页面（非回发）
            if (!IsPostBack)
            {
                BindStudentData();
            }
        }
        private void BindStudentData()
        {
            // 将学生列表数据绑定到GridView
            gvStudents.DataSource = studentList;
            gvStudents.DataBind();
        }
        protected void btnAddStudent_Click(object sender, EventArgs e)
        {
            // 跳转到添加学生页面
            Response.Redirect("AddStudent.aspx");
        }
    }
    // 学生实体类
    public class Student
    {
        public string StudentID { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public int Age { get; set; }
    }
}
    • 说明：
      • !IsPostBack 是 ASP.NET Web Forms 中一个非常重要的判断，它确保页面只在第一次请求时绑定数据，而不是在每次按钮点击等事件回发时都重新绑定，避免数据丢失或重复操作。
      • gvStudents.DataBind() 是执行数据绑定的核心方法。

  4. 运行项目

    asp.net 4.0 实例教程
    （图片来源网络，侵删）
    • 按 F5 运行项目。
    • 浏览器会打开 Students.aspx 页面，你应该能看到一个包含三个学生信息的表格，以及“添加新学生”按钮和每一行的“编辑”和“删除”链接。

添加新学生

目标：通过一个表单收集学生信息，并添加到列表中。

步骤：

  1. 添加 Web 窗体 AddStudent.aspx，并设计如下表单：

    <%@ Page Title="添加学生" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="AddStudent.aspx.cs" Inherits="StudentManagementSystem.AddStudent" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h2>添加新学生</h2>
    <div>
        <table>
            <tr>
                <td>学号:</td>
                <td><asp:TextBox ID="txtStudentID" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>姓名:</td>
                <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <asp:RadioButtonList ID="rblGender" runat="server">
                        <asp:ListItem Text="男" Value="男" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="女" Value="女"></asp:ListItem>
                    </asp:RadioButtonList>
                </td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><asp:TextBox ID="txtAge" runat="server"></asp:TextBox></td>
            </tr>
        </table>
        <asp:Button ID="btnSave" runat="server" Text="保存" OnClick="btnSave_Click" />
        <asp:Button ID="btnCancel" runat="server" Text="取消" OnClick="btnCancel_Click" />
    </div>
</asp:Content>

  2. 编写后台代码处理保存逻辑

    using System;
using System.Web.UI;
namespace StudentManagementSystem
{
    public partial class AddStudent : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void btnSave_Click(object sender, EventArgs e)
        {
            // 1. 获取页面上的数据
            string id = txtStudentID.Text.Trim();
            string name = txtName.Text.Trim();
            string gender = rblGender.SelectedValue;
            int age = int.Parse(txtAge.Text.Trim());
            // 2. 验证数据（简单示例，实际项目中需要更严格的验证）
            if (string.IsNullOrEmpty(id) || string.IsNullOrEmpty(name))
            {
                // 使用客户端脚本显示提示
                ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('学号和姓名不能为空！');", true);
                return;
            }
            // 3. 创建新学生对象并添加到“数据库”
            Student newStudent = new Student { StudentID = id, Name = name, Gender = gender, Age = age };
            Students.studentList.Add(newStudent); // 注意：这里直接访问了另一个页面的静态字段，仅作演示
            // 4. 提示成功并跳转回列表页
            ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('添加成功！'); window.location='Students.aspx';", true);
        }
        protected void btnCancel_Click(object sender, EventArgs e)
        {
            // 直接返回列表页
            Response.Redirect("Students.aspx");
        }
    }
}
    • 说明：
      • 我们通过 TextBox.Text、RadioButtonList.SelectedValue 等属性获取用户输入。
      • 这里我们直接修改了 Students.aspx.cs 中定义的静态 studentList，这只是一个模拟，真实应用中你需要连接数据库。
      • 使用 ClientScript.RegisterStartupScript 可以在客户端执行 JavaScript 代码，这里用来弹出提示框。

编辑和删除学生

目标：根据学号找到学生，进行信息修改或删除。

步骤：

  1. 创建编辑页面 EditStudent.aspx

    • 在设计视图中,添加与 AddStudent.aspx 类似的控件。
    • 将这些控件的 ReadOnly 属性设为 true（除了需要修改的字段），或者直接使用 Label 控件来显示现有信息，用 TextBox 来修改信息。
    • 添加一个隐藏字段 asp:HiddenField 用于保存学号。
    <!-- EditStudent.aspx -->
<asp:HiddenField ID="hfStudentID" runat="server" />
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="btnUpdate" runat="server" Text="更新" OnClick="btnUpdate_Click" />

  2. 处理页面参数和加载数据

    • Students.aspx 中的编辑链接是 EditStudent.aspx?id=1001，我们需要在 EditStudent.aspx.cs 的 Page_Load 中获取这个 id。
    • 根据学号从“数据库”中查找学生，并将数据填充到控件中。
    // EditStudent.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string studentId = Request.QueryString["id"];
        if (!string.IsNullOrEmpty(studentId))
        {
            // 从“数据库”中查找学生
            Student studentToEdit = Students.studentList.FirstOrDefault(s => s.StudentID == studentId);
            if (studentToEdit != null)
            {
                // 将数据填充到控件
                hfStudentID.Value = studentToEdit.StudentID;
                txtName.Text = studentToEdit.Name;
                // ... 其他字段
            }
            else
            {
                Response.Write("未找到该学生！");
                Response.End();
            }
        }
    }
}

  3. 编写更新和删除逻辑

    // EditStudent.aspx.cs (续)
protected void btnUpdate_Click(object sender, EventArgs e)
{
    string id = hfStudentID.Value;
    string newName = txtName.Text.Trim();
    // 查找并更新
    Student studentToUpdate = Students.studentList.FirstOrDefault(s => s.StudentID == id);
    if (studentToUpdate != null)
    {
        studentToUpdate.Name = newName;
        ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('更新成功！'); window.location='Students.aspx';", true);
    }
}
// 在 Students.aspx 中处理删除事件
// Students.aspx.cs (在 Students 类中添加)
protected void gvStudents_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
    // e.RowIndex 是被点击行的索引
    string studentId = gvStudents.DataKeys[e.RowIndex].Value.ToString();
    // 从“数据库”中删除
    Students.studentList.RemoveAll(s => s.StudentID == studentId);
    // 重新绑定数据
    BindStudentData();
}
    • 说明：
      • 更新操作：先找到对象，修改其属性，然后保存回列表。
      • 删除操作：gvStudents_RowDeleting 事件是 GridView 的删除按钮自动触发的。DataKeys 属性用于获取某行数据的主键值，我们使用 RemoveAll 方法一次性移除所有匹配项。

第三部分：进阶主题

使用 ADO.NET 连接 SQL Server

上面的例子使用了内存列表,数据无法持久化，现在我们来看看如何连接真实的 SQL Server 数据库。

  1. 准备数据库和表

    • 在 SQL Server 中创建一个数据库，StudentDB。
    • 创建一个 Students 表：
    USE [StudentDB]
GO
CREATE TABLE [dbo].[Students](
    [StudentID] [nchar](10) NOT NULL,
    [Name] [nvarchar](50) NOT NULL,
    [Gender] [nchar](2) NULL,
    [Age] [int] NULL,
    CONSTRAINT [PK_Students] PRIMARY KEY CLUSTERED ([StudentID] ASC)
) ON [PRIMARY]
GO

  2. 添加数据连接

    • 在 Visual Studio 的“服务器资源管理器”中，右键点击“数据连接” -> “添加连接”。
    • 选择你的 SQL Server，输入数据库名称 StudentDB，测试连接成功。

  3. 修改代码以使用数据库

    • 我们不再使用静态列表,而是通过 SqlConnection, SqlCommand, SqlDataReader 等 ADO.NET 对象来操作数据库。
    // 在 Students.aspx.cs 中修改 BindStudentData 方法
private void BindStudentData()
{
    string connectionString = "Data Source=.;Initial Catalog=StudentDB;Integrated Security=True"; // 你的连接字符串
    string query = "SELECT StudentID, Name, Gender, Age FROM Students";
    using (SqlConnection con = new SqlConnection(connectionString))
    {
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            con.Open();
            SqlDataReader reader = cmd.ExecuteReader();
            gvStudents.DataSource = reader;
            gvStudents.DataBind();
            reader.Close();
        }
    }
}
    • 说明：
      • using 语句确保数据库连接在使用后被正确关闭和释放，防止资源泄漏。
      • SqlDataReader 是一个只 forward-only、read-only 的数据流，性能很高，适合用于 GridView 绑定。
      • 连接字符串最好放在 Web.config 文件的 <connectionStrings> 节中，方便管理和修改。
    <!-- Web.config -->
<connectionStrings>
  <add name="StudentDBConnectionString" 
       connectionString="Data Source=.;Initial Catalog=StudentDB;Integrated Security=True" 
       providerName="System.Data.SqlClient" />
</connectionStrings>

使用 ASP.NET AJAX

为了提升用户体验,我们可以使用 ASP.NET AJAX 实现无刷新操作。

  1. 配置 AJAX

    • 在 Web.config 中，确保有 httpHandlers 和 webServices 的 AJAX 配置（通常在创建 AJAX-enabled Web Site 时会自动添加）。
    • 在需要使用 AJAX 的页面（如 Students.aspx）上，添加一个 ScriptManager 控件。
    <asp:Content ...>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <!-- 页面其他内容 -->
</asp:Content>

  2. 使用 UpdatePanel

    • 将 GridView 和“添加学生”按钮等需要局部更新的区域包裹在 asp:UpdatePanel 中。
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <!-- 这里放 gvStudents 和 btnAddStudent -->
        <asp:GridView ID="gvStudents" runat="server" ... OnRowDeleting="gvStudents_RowDeleting">
        </asp:GridView>
        <asp:Button ID="btnAddStudent" runat="server" Text="添加新学生" OnClick="btnAddStudent_Click" />
    </ContentTemplate>
</asp:UpdatePanel>
    • 当你在 UpdatePanel 内部触发回发事件（如点击删除按钮）时，整个页面不会刷新，只有 UpdatePanel 内部的内容会更新。

第四部分：总结与后续学习

通过以上实例,你已经掌握了 ASP.NET 4.0 Web Forms 开发的基本流程，包括：

  • 页面生命周期：理解 Page_Load, IsPostBack, 事件处理。
  • 服务器控件：熟练使用 GridView, TextBox, Button 等控件及其事件。
  • 数据绑定：掌握 DataSource 和 DataBind() 的使用。
  • 状态管理：初步了解了视图状态和回发机制。
  • ADO.NET：学会了如何连接数据库并读取、修改数据。
  • AJAX：了解了如何实现无刷新页面更新。

后续可以学习的方向：

  1. ASP.NET MVC：学习更现代、更灵活的 MVC (Model-View-Controller) 架构，这是目前 .NET 开发的主流。
  2. Entity Framework (EF)：学习使用 ORM（对象关系映射）框架，让你可以用 C# 对象直接操作数据库，而不用写 SQL 语句。
  3. Web API：学习如何构建 RESTful 服务，为移动应用或前端框架（如 Angular, Vue）提供数据。
  4. ASP.NET Core：了解跨平台的、高性能的新一代 ASP.NET 框架。

这份教程为你打下了坚实的基础,希望对你有所帮助！