Web Forms 页面结构解析

ASP.NET Web Forms 是一种以事件驱动的开发模式，让开发者可以快速建构动态网站。本章将深入解析 Web Forms 页面的结构，包括 .aspx 文件与代码后置文件 (.cs 或 .vb) 的关系、伺服器控制项与 HTML 控制项的区别，以及使用 Code-Behind 开发模式。

1. .aspx 文件与代码后置文件的关系

在 ASP.NET Web Forms 中，页面分为两个部分：

.aspx 文件：负责定义页面的 HTML 结构与伺服器控制项。
代码后置文件 (.cs 或 .vb)：负责实现伺服器端的逻辑处理。

范例：简单的 Web Forms 页面

以下是一个示范：

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>简单的 Web Forms 页面</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="欢迎来到 Web Forms！"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="点击我" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>

Default.aspx.cs

using System;

public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 页面加载时的逻辑处理
}

protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "按钮已被点击！";
}
}

说明

<%@ Page %> 指令：

指定页面的编程语言（C# 或 VB.NET）。
指定代码后置文件 (CodeFile) 和继承类别 (Inherits)。

伺服器控制项：

如 <asp:Label> 和 <asp:Button>，这些控制项会被转换成对应的 HTML 元素，并且可以触发伺服器端事件。

2. 伺服器控制项与 HTML 控制项的区别

伺服器控制项

使用 runat="server" 属性。
可以触发伺服器端事件（例如按钮点击）。
可以直接在代码后置文件中操作。

范例：

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="提交" OnClick="Button1_Click" />

HTML 控制项

原生 HTML 元素。
若要触发伺服器端事件，需要额外设定。

范例：

3. 使用 Code-Behind 开发模式

Code-Behind 是 ASP.NET Web Forms 的开发模型，将页面逻辑与设计分离，提升程式码的可维护性。

使用 Code-Behind 的优点

分离逻辑与表现：开发者可专注于伺服器端逻辑，而设计师可专注于 HTML。

增强可读性：代码与介面分开，便于协作。

提升可维护性：修改设计时不会影响后端逻辑。

范例：

步骤 1：设计页面在 .aspx 文件中定义控制项：

<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="更新文字" OnClick="Button1_Click" />

步骤 2：撰写逻辑在 Default.aspx.cs 文件中实现按钮点击逻辑：

protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "按钮被点击了，文字已更新！";
}

小结

本章介绍了 ASP.NET Web Forms 页面结构的基本概念：

.aspx 文件与代码后置文件的分工与关系。

伺服器控制项与 HTML 控制项的功能差异与应用场景。

使用 Code-Behind 开发模式的优点与实例。

透过这些基础知识，您可以轻鬆开始使用 ASP.NET Web Forms 建构动态网站。

Web Forms 页面结构解析