本章内容

◆ 了解Web窗体的概念与技术优点

◆ 理解Web窗体的代码分离技术，掌握代码内联与后台编码

◆ 理解Web窗体的事件驱动编程

◆ 了解Web窗体的处理过程及窗体事件

◆ 掌握Web窗体的常用事件编程

本章重点

◆ Web窗体的概念及代码分离

◆ Web窗体的事件驱动编程及窗体处理过程

第3章 Web窗体

ASP.NET将Web编程技术向前推进了一大步，ASP.NET中的Web窗体技术将事件驱动的交互模型引入了Web事件，使用户可以用熟悉的事件驱动、面向对象的编程方式来编写B/S模式程序，实现开发内容和代码完全分离的页面。本章将主要介绍Web窗体的基本知识，以及利用ASP.NET创建Web窗体页面的技术。

3.1 Web窗体概述

3.1.1 Web窗体的创建

Web窗体（Web Form，也称Web表单）及其架构是基于.NET通用运行环境的可扩展编程模型，类似于C#程序程序设计中的Windows窗体（Windows Form），主要是用来生成与用户交互的界面，并实现页面内容与代码的完全分离。下面创建一个由Web窗体实现的简单页面，通过这个页面来介绍Web窗体的创建步骤与方法，提出Web窗体的概念，理解Web窗体架构。

【例3.1】图3.1是一个使用Web窗体创建的页面，页面中有2个标签、1个文本框和1个命令按钮。运行该页面，在文本框中输入您的姓名，然后单击“请按我一下”按钮，第一个标签中就会显示“某某同学您好!”字符串，如图3.1所示。

创建这个页面的方法和步骤如下：

（1）创建本章的物理目录。创建本章例题的存储目录ch3，本教材ch3的物理路径为H:\C#2008\ch3，本章的例题全部在该目录下创建。

（2）创建ASP.NET应用程序。启动Microsoft Visual Studio 2008，然后执行“文件”→“新建网站”命令，打开“新建网站”对话框。在“模板”中选择“ASP.NET网站”，在“位置”框中选择“文件系统”，在右侧的下拉列表框中修改站点名称为“H:\C#2008\ch3\ch3_1”，在“语言”下拉列表框中选择使用的语言“Visual C#”，单击“确定”按钮，创建基于C#.NET的新ASP.NET应用程序，默认创建名为Default.aspx的页面文件、页面Default.aspx.cs的代码文件、web.config配置文件和App_Data文件夹，如图3.2所示。

图3.1 一个简单的Web窗体页面

图3.2 Web窗体中的应用程序和控件

（3）创建页面中的控件。在工具箱中选择“标准”选项卡，将其中的Label控件拖动到页面中，在Default.aspx页面的编辑视图中就会生成一个标签，按【Enter】键，利用同样的方法加入第二个标签、一个文本框和一个命令按钮，调整控件大小和位置，如图3.2所示。

（4）在Default.aspx页面的“设计”视图中，单击“Label1”控件，然后在属性窗口中修改其Text属性值为空，ID属性值为lbl1，如图3.3所示，利用同样的方法设置“Label2”控件的Text属性值为“请输入您的姓名：”，ID属性值为lbl2，将“Button1”按钮的Text属性改为“请按我一下”，ID属性改为btn1。完成控件属性值修改后的开发界面如图3.4所示。

图3.3 设置控件属性值

图3.4 完成控件属性值修改后的开发界面

（5）为“btn1”按钮的单击事件编写代码。要想实现所描述的程序功能，即当单击“请按我一下”命令按钮时，“lbl1”显示“某某同学您好！”字符串，用户必须为“btn1”的单击事件编写代码，来响应用户的单击操作。在图3.3页面中的“设计”视图中双击“btn1”按钮，代码编辑器就会打开与Default.aspx页面对应的Default.aspx.cs后台代码文件，出现如图3.5所示的代码编辑界面，为“btn1”的Click事件添加代码。也可以在页面的“设计”视图中选择“btn1”按钮，然后选择属性窗口中的事件标签，为“btn1”添加单击事件处理代码，如图3.6所示。

图3.5 代码编辑界面

图3.6 添加btn1的事件

提示：用户也可以通过单击解决方案资源管理器中的“查看代码”按钮 ，或在“设计”视图中右击控件，在弹出的快捷菜单中选择“查看代码”选项，或按【F7】键，打开代码编辑窗口。

（6）调试运行Default.aspx页面。执行“调试”→“启动”命令，Visual Studio 2008将编译调试当前应用程序，并在下方的“错误列表”窗口中显示详细调试信息。编译完毕后，Visual Studio 2008会自动打开IE窗口，浏览当前应用程序的主文档，显示当前页面，页面运行结果如图3.7所示。在文本框中输入字符串，验证Default.aspx页面中“请按我一下”命令按钮的功能。

图3.7 页面运行结果

（7）创建虚拟目录ch3。使用IIS管理器创建“C#程序设计”网站的虚拟目录ch3，虚拟目录的物理路径为H:\C#2008\ch3，然后在IE浏览器中输入虚拟目录的URL，页面效果如图3.1所示。

3.1.2 Web窗体的概念与技术优点

1.Web窗体的概念

3.1.1节介绍了一个ASP.NET页面的创建过程，页面中有两个标签、一个文本框和一个命令按钮，通过编写代码实现了程序的功能。虽然该例只设计了一个简单的ASP.NET页面，但它使用了Web窗体架构、组件技术和面向对象等编程技术。

在图3.2中，Visual Studio 2008开发工具为用户提供了一个ASP.NET页面编辑界面，一个名称为Default.aspx的页面，可以将这个可视化的编程界面理解为Web窗体，它是一个ASP.NET Web窗体在编程阶段的呈现。

ASP.NET提供的Web窗体是一个容器对象，它不仅有自己的属性、方法和事件，而且能容纳HTML服务器控件、Web服务器控件等对象。Visual Studio 2008开发工具通过Web窗体架构，实现了Web页面设计的“所见即所得”。在例3.1中，使用开发工具提供的拖放功能，很轻松地在页面中创建了两个标签、一个文本框和一个命令按钮，而且没有输入代码。这使用户在Visual Studio 2008开发环境中，可以使用熟悉的Windows窗体应用程序设计方式来设计Web页面，极大地提高了Web应用程序的开发效率。

ASP.NET的Web窗体模型由两部分组成，即用户界面UI（可视化组件）和实现逻辑（代码）。用户界面中含有页面布局信息和ASP.NET服务器控件的HTML模板，它负责对浏览器上的Web窗体进行显示。实现逻辑部分是对Web窗体进行逻辑处理的ASP.NET代码，它负责生成Web窗体上动态显示的内容，这些内容通常由在用户界面部分定义的服务器控件显示。实现逻辑和用户界面生成的HTML协同工作，可以实现完全动态的Web页面。

用户可以通过例3.1理解Web窗体模型。在Visual Studio 2008开发工具页面的“设计”视图中，Web窗体的用户界面UI如图3.2所示，单击Default.aspx页面的“源”按钮，就会打开页面的“源”视图，标签＜form id="form1"runat="server"＞＜/form＞就是Web窗体的HTML模板，其中包含的＜asp:Label ID="lbl1"runat="server"＞＜/asp:Label＞是标签组件，＜asp:Button ID="btn1"runat ="server"onclick="btn1_Click"Text="请按我一下"/＞是按钮组件。组件与窗体的包含关系代码如下所示：

              ＜form id="form1" runat="server"＞
              ＜div＞
                  ＜asp:Label ID="lbl1" runat="server"＞＜/asp:Label＞
                  ＜br /＞
                  ＜asp:Label ID="lbl2" runat="server" Text="请输入您的姓名："＞
              ＜/asp:Label＞
                  ＜asp:TextBox ID="TextBox1" runat="server" Height="23px"＞
              ＜/asp:TextBox＞
                  ＜br /＞
                  ＜asp:Button ID="btn1" runat="server" Height="25px" onclick=
              "btn1_Click"
                          style="text-align: left" Text="请按我一下" Width="104px" /＞
              ＜/div＞
              ＜/form＞

Web窗体的实现逻辑在Default.aspx.cs代码文件中，在页面“设计”视图中按【F7】键，代码编辑器就会打开Web窗体的Default.aspx.cs代码文件，Default.aspx.cs文件的部分内容如下所示：

              public partial class _Default : System.Web.UI.Page
              {
                  protected void Page_Load(object sender, EventArgs e)
                  {
                  }
                  protected void btn1_Click(object sender, EventArgs e)
                  {
                          lbl1.Text = TextBox1.Text + "同学您好！";
                  }
              }

在这个文件中，声明了一个继承自System.Web.UI.Page类的Default类，该类中有Page_Load事件处理代码及为命令按钮的单击事件编写的btn1_Click事件处理代码。Default.aspx.cs代码文件中的ASP.NET代码与Web窗体的HTML代码（Default.aspx文件中）在服务器上被编译执行，共同生成例3.1中的HTML代码，然后传给客户端浏览器呈现动态页面。

2.Web窗体的技术优点

与以前的ASP、JSP、PHP技术相比，ASP.NET 3.5的Web窗体模型有许多技术优点，主要体现在以下几个方面：

● Web窗体可以使用公共语言运行库所支持的程序语言来编写，可以是Visual Basic.NET、Visual C#等语言中的任意一种。

● Visual Studio 2008集成开发环境提供了丰富的服务器控件，为页面设计提供了“所见即所得”的设计支持，极大地提高了开发效率。

● 丰富的服务器控件使开发者能够顺利地将页面逻辑封装至一个可重复使用的组件中，减少了开发人员必须编写的代码量。

● Web窗体模型将页面的显示代码和逻辑处理代码分离，从而解决了页面代码难以维护的问题。

● Web窗体模型包含了多状态管理的特性，可以方便地保存页面的状态。

● Web窗体具有可扩展性，能够很好地使用第三方控件。

3.1.3 Web窗体的组成文件

在例3.1中用Web窗体创建了一个Web页面，在解决方案资源管理器中用户可以看到一个Web窗体由两个文件构成，即包含HTML内容的用户界面文件（.aspx或.ascx文件）和后台代码文件（.aspx.cs文件）。Visual Studio 2008默认将窗体文件分为Default.aspx和Default.aspx.vb两个文件，这样可以把应用程序界面和应用程序逻辑分开，方便应用程序的维护。目前，Web应用程序日趋复杂，用户界面的美工设计与业务逻辑代码设计分别由美工设计人员和程序设计人员完成，传统的ASP技术很难实现这一目标。Web窗体的逻辑代码与用户界面的分离技术是ASP. NET的一大技术优势，它极大地提高了Web应用程序设计的效率。在3.2节将通过分析例3.1中ASP.NET应用程序的窗体组成文件，来介绍Web窗体的代码分离技术。

在例3.1中，在“设计”视图中单击编辑窗口下方的“源”视图按钮，即可切换到“源”视图，查看Web窗体页面的源代码，Default.aspx文件的内容如下：

              ＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.
              aspx.cs"Inherits="_Default" %＞
              ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
              ＜html xmlns="http://www.w3.org/1999/xhtml"＞
              ＜head runat="server"＞
                  ＜title＞无标题页＜/title＞
              ＜/head＞
              ＜body＞
                  ＜form id="form1" runat="server"＞
                  ＜div＞
                          ＜asp:Label ID="lbl1" runat="server"＞＜/asp:Label＞
                          ＜br /＞
                          ＜asp:Label ID="lbl2" runat="server" Text="请输入您的姓名："＞
              ＜/asp:Label＞
                          ＜asp:TextBox ID="TextBox1" runat="server" Height="23px"＞
              ＜/asp:TextBox＞
                          ＜br /＞ ＜asp:Button ID="btn1" runat="server" Height="25px"
              onclick="btn1_Click"
                        style="text-align: left" Text="请按我一下" Width="104px" /＞
                  ＜/div＞
                  ＜/form＞
              ＜/body＞
              ＜/html＞

阅读Default.aspx文件，用户会发现整个页面是存放在一个大的Web窗体中的。ASP.NET提供了许多服务器控件，如HTML服务器控件和Web服务器控件，在这个窗体中放置了服务器控件，如标签、文本框、按钮等，而且这些控件都放在了＜form runat="server"＞…＜/form＞标记之间。代码＜asp:Button ID="btn1" runat="server" OnClick="btn1_Click" Text="请按我一下"/＞标记了一个命令按钮的ID、OnClick事件及文本属性值。.aspx文件在服务器上执行时，服务器会将这些控件转换为普通的HTML控件。由此可以看出，ASP.NET利用的是标准的HTML语言，它组合了一些常用的HTML标记，封装成了用户熟悉的、可视化的、面向对象的Web窗体和服务器控件等对象，使用户可以在更高的层面上进行Web程序设计，将页面的美术设计工作与代码编写工作分离。

查看Default.aspx.cs的代码，内容如下：

              using System;
              using System.Configuration;
              using System.Data;
              using System.Linq;
              using System.Web;
              using System.Web.Security;
              using System.Web.UI;
              using System.Web.UI.HtmlControls;
              using System.Web.UI.WebControls;
              using System.Web.UI.WebControls.WebParts;
              using System.Xml.Linq;
              public partial class _Default : System.Web.UI.Page
              {
                  protected void Page_Load(object sender, EventArgs e)
                  {
                  }
                  protected void btn1_Click(object sender, EventArgs e)
                  {
                          lbl1.Text = TextBox1.Text + "同学您好！";
                  }
              }

阅读Default.aspx.cs文件，用户可以看到：

① 在页面开头部分，通过using语句引入的是一些经常用到的命名空间，默认情况下自动引入，以减少编码的工作量。

② 接下来的语句public partial class _Default : System.Web.UI.Page定义了一个页面类，Web窗体Default是用户界面Page类派生出来的一个子类，每个页面都继承了Page类的属性、事件和方法。

③ 在这个类中添加了一些事件处理过程，如Page_Load、btn1_Click，默认情况下系统只给出页面加载事件Page_Load的模板。

当页面被请求时，服务器就会联合Default.aspx和Default.aspx.cs两个文件生成Default类的一个实例并执行，将类代码的执行结果HTML代码传递给客户端，HTML代码由浏览器负责显示为用户看到的页面。