第 20 章开发 Web 应用程序

第20章开发Web应用程序 （时间：2次课，4学时）

第20章开发Web应用程序 • 20世纪没有一项计算机技术能像Internet这样深刻地变革着我们的生活，它拉近了人们之间的距离，成为了一种重要的交流与信息发布工具。作为Internet提供的基本服务之一，Web也许是最常接触到的，随着Internet技术的进步，Web编程技术也在不断地发展。 • ASP.NET是建立在微软新一代.NET平台架构上，利用公共语言运行时CLR在服务器后端为用户提供建立强大的企业级Web应用服务的编程框架。本章介绍如何用C#语言借助ASP.NET技术进行Web开发，内容覆盖了使用控件、访问数据库和创建Web服务方面的内容，对初学ASP.NET具有指导作用。 • 本章教学目的： • 学习编写ASP.NET应用程序 • 学会创建Web服务

第20章开发Web应用程序 • 20.1 ASP.NET的开发环境配置 • 20.2 编写ASP.NET Web应用程序 • 20.3 ASP.NET服务器端控件 • 20.4 创建Web服务

20.1 ASP.NET的开发环境配置 • 在学习使用ASP.NET开发Web应用程序前，先来看一下如何配置一个ASP.NET开发环境。首先并不是所有的Windows系统都可作为ASP.NET的开发平台，Windows 98系统系列就不支持ASP.NET。其次为了能够创建ASP.NET Web应用程序，系统要安装微软的Internet信息服务器(IIS)，如果使用的系统是Windows 2000或Windows XP系列，那它们直接就带有IIS，可以通过【控制面板】中的添加/删除程序来安装。

20.2 编写ASP.NET Web应用程序 • Visual Studio .NET是一个功能十分强大的开发工具，我们先来使用它创建一个简单的Web应用程序，然后逐步对这个程序进行讲解。 • 【例20.1】 • 打开Visual Studio .NET，选择【文件】|【新建】|【项目】命令。从【模板】栏内选择【ASP.NET Web应用程序】。如果是第一次创建，Web应用程序的名称将是WebApplication1，接受默认值，单击【确定】按钮。这时将出现WebForm1.aspx的设计界面，现在可以向其中添加控件形成一个完整的Web窗体。

20.3 ASP.NET服务器端控件 • 20.3.1 Web服务器控件 • 20.3.2 HTML服务器控件 • 20.3.3 验证控件 • 20.3.4 用户控件

20.3 ASP.NET服务器端控件 • 上面学习了如何使用ASP.NET编写Web应用程序，这一节将学习服务器端控件。服务器端控件是ASP.NET编程的基础，编写Web页面很大程度上就是将控件拼凑起来，以使其协同工作。Web窗体总共可以加入4种控件，它们是：Web服务器控件，HTML服务器控件，验证控件和用户控件。下面将分别介绍。

20.3.1 Web服务器控件 • Web服务器控件也许是最常使用的控件，前面例子中向Web窗体中添加的都是Web服务器控件。 • Visual Studio .NET提供了众多的Web服务器控件，这些控件都包含多种属性，更改这些属性可使控件具有不同的功能。控件的属性既可以在Visual Studio .NET的属性对话框中进行静态更改，也可以在程序运行时进行动态更改。下面将挑选一些经常使用的控件进行简要介绍。

20.3.1 Web服务器控件 • 1. 文本框(TextBox)控件 • 文本框控件提供了向Web窗体输入信息的方法，可以将文本框的TextMode属性赋为SingLine、MultiLine和Password来改变它的行为模式(图20.6)。 • 下面列出文本框控件的一些重要的公共属性和公共方法(表20.1、表20.2)。

20.3.1 Web服务器控件 图20.6 文本框控件

20.3.1 Web服务器控件 表20.1 文本框控件的公共属性

20.3.1 Web服务器控件 表20.2 文本框控件的公共方法

20.3.1 Web服务器控件 续表

20.3.1 Web服务器控件 • 2. 按钮控件 • Visual Studio .NET的工具箱中提供了3种按钮控件：普通按钮Button、显示超链接样式的按钮LinkButton和显示图像样式的ImageButton(图20.7)。 • 按钮控件发生Click事件时会直接导致向服务器端提交。 • 下面分别列出这些按钮控件一些重要的公共属性 (表20.3、表 20.4)。 • 3. 复选框控件(CheckBox、CheckBoxList)和单选按钮控件(RadioButton、 RadioButtonList) • 复选框控件和单选按钮控件十分类似，它们都允许从多个选项中进行选择，不同的是复选框控件允许同时选择多项，而单选按钮控件每次只能选择一项。CheckBoxList控件和RadioButtonList控件可以单独使用，而CheckBox控件和RadioButton控件则需要多个一起使用。它们都可以和数据源进行绑定，不过比较起来使用CheckBoxList控件和RadioButtonList控件访问数据更为方便一些(图20.8)。

20.3.1 Web服务器控件 图20.7 按钮控件

20.3.1 Web服务器控件 表20.3 Button和LinkButton控件的公共属性

20.3.1 Web服务器控件 表20.4 ImageButton控件的公共属性

20.3.1 Web服务器控件 图20.8 复选框控件和单选按钮控件

20.3.1 Web服务器控件 • 下面列出这些控件的一些重要的公共属性(表20.5、表20.6)。 • 对CheckBoxList控件和RadioButtonList控件来说，可以直接通过Items属性来设置显示项和标签。打开这些控件属性对话框中的Items项，将出现ListItem集合编辑器 (图20.9)。 • 可以在左侧【成员】栏内添加显示项，右边的属性栏可以设置该项的属性。Selected属性表明该项是否被选定，Text属性的值将作为该项的显示标签，Value的值可以作为编程时的内部值使用，该值可与Text属性采用不同的值。 • 4. DropDownList控件和ListBox控件 • DropDownList控件和ListBox控件都提供了选择特定项的功能，不同处在于DropDownList控件提供一个下拉列表框进行选择，而ListBox控件直接提供多个选项，而且还可同时选择ListBox控件中的多项(图20.10)。 • 下面列出它们的一些重要的公共属性(表20.7、表20.8)。 • 与复选框控件和单选按钮相同，它们都可以通过属性对话框的Items项打开ListItem集合编辑器对显示项进行添加删除，它们也都具有数据源绑定功能。

20.3.1 Web服务器控件 表20.5 CheckBox和RadioButton控件的公共属性

20.3.1 Web服务器控件 表20.6 CheckBoxList和RadioButtonList控件的公共属性

20.3.1 Web服务器控件 图20.9 ListItem集合编辑器

20.3.1 Web服务器控件 图20.10 DropDownList控件和ListBox控件

20.3.1 Web服务器控件 表20.7 DropDownList控件的公共属性

20.3.1 Web服务器控件 表20.8 ListBox控件的公共属性

20.3.2 HTML服务器控件 • ASP.NET的Web窗体也支持HTML服务器控件，在工具箱的HTML子项就可以找到它们，你可能会发现HTML服务器控件和刚才介绍的Web服务器控件有些重复，它同样也具有按钮控件、文本框控件等，那它与Web控件有什么区别呢，什么时候应该用Web服务器控件什么时候应该用HTML服务器控件呢，这一节就来解决这些问题。 • 先来看看HTML服务器控件与Web服务器控件的区别，浏览器都支持基本的HTML元素，而应用这些基本的HTML元素可以组合出复杂的元素，HTML服务器控件和基本的HTML元素是对应的。使用Web服务器控件时，从服务器方的角度来看根本不知道最终控件会在浏览器中用什么样的HTML元素显示出来，显示一个Web服务器控件可能需要组合多个HTML元素，也就是说浏览器显示什么样的HTML元素对服务端是透明的。HTML服务器控件提供了操纵浏览器HTML元素的机会，下面来看一个例子。

20.3.2 HTML服务器控件 • 【例20.4】新建一个Web项目，将位置栏中的项目名改为TestHTML。从【工具箱】中的HTML栏内添加一个Button控件，切换到Web窗体的HTML对话框，将会显示aspx文件的内容，如以下代码所示： • <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" • AutoEventWireup="false" Inherits="TestHTML.WebForm1" %> • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > • <HTML> • <HEAD> • <title>WebForm1</title> • <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0"> • <meta name="CODE_LANGUAGE" Content="C#"> • <meta name="vs_defaultClientScript" content="JavaScript"> • <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> • </HEAD> • <body MS_POSITIONING="GridLayout"> • <form id="Form1" method="post" runat="server"> • <FONT face="宋体"><INPUT style="Z-INDEX: 101; LEFT: 283px; WIDTH: 186px; POSITION: absolute; TOP: 168px; HEIGHT: 41px" type="button" value="Button"></FONT> • </form> • </body> • </HTML>

20.3.2 HTML服务器控件 • 该Button控件在aspx文件里直接对应着一个HTML元素，因此会不加处理地直接传给浏览器，其他的HTML控件也与此类似。 • 也可以在服务器端处理HTML服务器控件的事件，不过要先使它们能在服务器端运行。在上面的例子的Web窗体的设计对话框中右击Button控件，从中选择【作为服务器控件运行】(图20.11)。 • 在Button控件的左上方会出现一个小绿色箭头，它就表明该控件将作为服务器控件运行，这时在aspx文件里对应的行变成： • <INPUT style="Z-INDEX: 101; LEFT: 225px; WIDTH: 186px; POSITION: absolute; TOP: 35px; HEIGHT: 41px" type="button" value="Button" id="Button1" name="Button1" runat="server">

20.3.2 HTML服务器控件 图20.11 使HTML控件作为服务器控件运行

20.3.2 HTML服务器控件 • 通过加入runat=“server”使它从简单的HTML元素变成了HTML服务器控件，这样就可以像Web服务器对它进行服务器端编程。在上面的设计对话框中双击Button控件将切换到代码编辑对话框，在Button1_ServerClick方法下填写如下代码： • private void Button1_ServerClick(object sender, System.EventArgs e) • { • //改变按钮标签 • Button1.Value = "Click"; • } • 运行这个程序，单击Button按钮，页面刷新过后Button按钮的标签就变成了Click。该Button按钮的回发也是由客户端脚本程序产生的，可以使用上面介绍查看浏览器内容的方法来具体看一下实现过程，这些客户端脚本程序是Web服务器处理ASP.NET程序时产生的。 • 现在就面临着如何在Web服务器控件和HTML服务器控件直接选择的问题，这里建议如果偏爱使用RAD编程模型的话最好使用Web服务器控件，如果想更好地控制浏览器的显示，与客户端脚本程序交互，那么就请用HTML服务器控件。

20.3.3 验证控件 • ASP.NET提供了多种验证控件，下面列出了这些验证控件(表20.9)。 • 这些验证控件都支持服务器端验证，如果浏览器支持DHTML的话也可提供客户端验证。如果运用得当客户端验证可以有效地减少与服务器端的交互，极大地提高Web应用程序的性能。下面将具体介绍一下这些控件的使用方法。 • 验证控件通常要认证其他控件的有效性，因而必须和其他控件一起使用，它们都具有一个属性ControlToValidate来指定要验证的控件，这个值是必需的，否则验证控件将会出错。下面通过一个例子来演示这些验证控件的使用。 • 【例20.5】打开Visual Studio .NET新建一个Web应用程序项目，命名为Validator。向Web窗体中添加标签控件、输入控件和验证控件(图20.12)。 • 依次放入5个标签控件，设定它们的Text属性分别为“姓名”、“年龄”、“密码”、“确认密码”和“E-mail”。在标签控件之后依次放入5个输入框控件，它们的ID在默认状态下会自动设为TextBox1、TextBox2、TextBox3、TextBox4和TextBox5。设定TextBox3和TextBox4的TextMode属性为Password。 • 在TextBox1、TextBox2、TextBox4和TextBox5控件后分别放入一个RequiredField Validator验证控件，分别将这些RequiredFieldValidatork控件的ErrMessage属性设定为“姓名不能为空”、“年龄不能为空”、“密码不能为空”和“E-mail不能为空”，ControlToValidate属性分别设置为TextBox1、TextBox2、TextBox4和TextBox5。 • TextBox2后再放入一个RangeValidator验证控件其ErrMessage属性设为“值不合法”，ControlToValidate属性设为TextBox2，MaximumValue属性设为100，Minimum属性设为1，Type属性设为Integer。 • TextBox4后再放入一个CompareValidator控件，它的ErrMessage属性设为“两次输入不一致”，ControlToCompare属性设为TextBox3，ControlToValidtae属性设为TextBox4。 • Text5后再放一个RegularExpressionValidator控件ErrMessage属性设为“输入不正确”，ControlToValidator属性设为TextBox5，当在属性对话框选择ValidationExpress属性时会弹出【正则表达式编辑器】对话框，从中选择【Internet电子邮件地址】(图21.13)。

20.3.3 验证控件 • 最后向窗体中添加一个Button控件和一个ValidationSummary控件。 • 到此为止整个程序就完成了。RequiredFieldValidator控件保证它所验证控件的输入不能为空，RangeValidator控件保证了它所验证控件的输入应在一定的范围内。在本例中保证在TextBox2中输入为1到100之间的整型值。CustomValidator控件将它验证的控件的内容与另一个控件或另一个值进行比较，在本例中使用了ControlToCompare属性，以此来表明需要与另一控件相比较，默认的比较操作属性Operator的值是Equal(相等)，这样该控件的功能其实就是保证两次密码输入相等。最后的验证控件RegularExpressionValidator保证控件的输入应满足特定的正则表达式规则，本例指定为“Internet电子邮件地址”，即要求TextBox5中要输入一个电子邮件地址。这些验证控件的EnableClientScript现在都默认为True，这就表明将生成浏览器脚本在客户端进行验证。 • 运行程序，在验证控件对应的文本框中必须正确输入，否则将会在验证控件的位置出现错误信息，在ValidationSummary控件中则会显示出所有这些错误信息(图20.14)。 • 现在还有一个CustomValidator控件没有涉及到，CustomValidator控件提供了用户自定义的功能，当上面的验证控件都无法满足要求的时候就需要CustomValidator控件了。它提供了自定义客户端与服务器端验证的功能，它包含有一个ClientValidationFunction属性和ServerValidate事件，可以分别与客户端和服务器端进行绑定，然后编写满足自己需要的验证函数。

20.3.3 验证控件 表20.9 验证控件

20.3.3 验证控件 续表

20.3.3 验证控件 图20.12 验证控件的使用

20.3.3 验证控件 图20.13 正则表达式编辑器

20.3.3 验证控件 图20.14 程序的运行

20.3.4 用户控件 • 当ASP.NET提供的控件都无法满足要求的时候就需要自己编写控件了，这些控件叫做用户控件。可以使用两种方式来创建用户控件：一种方式是把以前编写的Web页面包装成控件，这样的控件称为Web用户控件，另一种方式是从.NET的某个框架类继承一个新类用来生成控件，这样的控件称为Web自定义控件。下面将分别进行介绍。 • 1. Web用户控件 • 先来介绍第一种方式，下面创建一个Web窗体，然后把它转化成Web用户控件的形式，接着再创建一个新的Web窗体来使用这个控件。 • 【例20.6】新建一个ASP.NET Web应用程序，命名为MyControl，在窗体上放入一个标签控件、一个文本框控件和一个Button控件(图20.15)。 • 双击Button控件将切换到代码编辑对话框，在Button1_Click方法中填写下列代码： • private void Button1_Click(object sender, System.EventArgs e) • { • //改变文本标签的内容 • Label1.Text = "Hello " + TextBox1.Text; • } • 切换到Web窗体的HTML代码对话框，将显示出WebForm1.aspx文件的内容。现在依次进行下面步骤，将Web页面转换成Web控件。 • (1) 从文件中删除<HTML>标签、<!DOCTYPE>标签、<HEAD>标签及内容、<BODY>标签和<FORM>标签。

20.3.4 用户控件 图20.15 Web用户控件

20.3.4 用户控件 • (2) 将文件第一行的Page改为Control并把WebForm1.aspx.cs更名为WebForm1.ascx.cs。 • (3) 在解决方案对话框中选中WebForm1.aspx，右击选择【重命名】，将WebForm1.aspx的名字改为WebForm1.ascx，这时文件WebForm1.aspx.cs也会自动更名为WebForm1.ascx.cs。将WebForm1.ascx.cs中的 • public class WebForm1 : System.Web.UI.Page • 一行改为 • public class WebForm1 : System.Web.UI.UserControl • (4) 保存项目，Web用户控件就完成了。 • 这个Web用户控件只实现了很简单的功能。为使一个Web对话框变为控件必须首先将其中的页面元素删除，其次由于Web用户控件的扩展名为ascx，因此也要将aspx扩展名变为ascx，最后Web用户控件应由用户控件类派生。 • 下面用一个新的Web应用程序项目来测试一下刚才生成的Web用户控件。 • 新建一个ASP.NET Web应用程序，命名为UserControl。 • 在解决方案资源管理器对话框内的UserControl项上右击，选择【添加现有项】，弹出【添加现有项】对话框(图20.16)，文件类型中选择【公用Web文件】，定位到MyControl目录选定WebForm1.ascx，单击【打开】按钮。 • 这时就把Web用户控件添加到了UserControl项目中，在解决方案资源管理器内单击WebForm1.ascx，把它拖动到Web对话框中。Web对话框中就会出现刚才新建的Web用户控件(图20.17)。 • 由于现在的控件没有设计器的支持，因此在设计对话框中没有显示出Web用户控件的显示界面。 • 执行这个项目，在文本框内输入“maj”，单击按钮，这时标签中就会显示出“Hello maj”(图20.18)。整个页面的功能其实都是由一个Web用户控件提供的。 • 可以将更复杂的窗体组合在一起做成Web用户控件，使用在项目里以达到代码重用的目的。

20.3.4 用户控件 图20.16 添加现有项对话框

20.3.4 用户控件 图20.17 向窗体中添加Web用户控件

20.3.4 用户控件 图20.18 使用Web用户控件

20.3.4 用户控件 • 2. Web自定义控件 • Web自定义控件是一种更方便、功能更强大的设置用户控件的方式。它最终将编译成DLL文件，可以方便地进行发布。下面将演示如何编写一个最简单的Web自定义控件。 • 【例20.7】打开Visual Studio .NET，新建一个项目，在右侧【模板】栏内选择【Web控件库】，将项目名称改为MyCustomControl，单击【确定】按钮。这时将会直接出现WebCustom Control1.cs文件的代码编辑对话框，将代码改为如下形式： • using System; • using System.Web.UI; • using System.Web.UI.WebControls; • using System.ComponentModel; • namespace MyCustomControl • { • /// <summary> • /// WebCustomControl1 的摘要说明 • /// </summary> • [DefaultProperty("Text"), • ToolboxData("<{0}:WebCustomControl1 runat=server></{0}:WebCustomControl1>")] • public class WebCustomControl1 : System.Web.UI.WebControls.WebControl • { • /// <summary> • /// 将此控件呈现给指定的输出参数 • /// </summary> • /// <param name="output"> 要写出到的 HTML 编写器 </param> • //输出当前时间 • protected override void Render(HtmlTextWriter output) • { • output.Write(DateTime.Now.ToString()); • } • } • }

20.3.4 用户控件 • 上面的代码实现了一个显示出当前时间的控件。当控件呈现在页面上时会调用Render方法，本例中当前的时间就是在Render方法中输出的。这个控件没有公开任何的属性和事件。 • 保存项目，选择【生成】|【生成MyCustomControl】命令，这将会在该项目对应目录的bin\Debug子目录下生成名为MyCustomControl.dll的文件。这样这个简单的Web自定义控件就生成了。 • 现在演示如何使用这个控件。新建一个ASP.NET Web应用程序项目，命名为UseCustomControl。下一步要把新建的控件加入到工具箱内，选择【工具】|【自定义工具箱】命令，将会显示图20.19所示的对话框。 • 单击【浏览】按钮，在弹出的对话框中选定CustomControl项目所在目录，选定文件CustomControl.dll，单击【确定】按钮。这样在Web的工具箱中就会出现一个新的控件 (图20.20)。 • WebCustomControl1就是刚才生成的用户自定义控件，现在就可以在项目中使用这个新建的控件。选定该控件并把它添加到窗体上。执行这个项目，浏览器中的显示内容将如图20.21所示。 • 在浏览器中显示出了当前的时间。例子虽然简单但是却演示了Web自定义控件的基本生成方法，生成用户自定义控件的过程都是一致的，如果综合运用.NET的类库就可以实现更加复杂的自定义控件。 • 如果想使控件设计时更加美观，可以将System.Design.dll引用到项目里，并从System.Web.UI.Design.ControlDesigner继承一个新类，实现该类的GetDesignTimeHtml方法，并把它加入到自定义控件的属性声明中，这样就可像普通Web服务器控件一样在设计阶段就可以显示出外观。

20.3.4 用户控件 图20.19 向工具箱中添加控件

20.3.4 用户控件 图20.20 添加到工具箱中的用户自定义控件

20.3.4 用户控件 图20.21 用户自定义控件的使用

20.4 创建Web服务 • 20.4.1 Web服务 • 20.4.2 一个简单的Web服务 • 20.4.3 使用Web服务访问数据库

20.4 创建Web服务

第 20 章 开发 Web 应用程序