第 20 章 开发 Web 应用程序

67
http://www.wenyuan.com.cn/webnew/ 20 20 第第 第第 Web Web 第第第第 第第第第 时时时 (: 2 时时4 时时

description

第 20 章 开发 Web 应用程序. (时间: 2 次课, 4 学时). 第 20 章 开发 Web 应用程序. 20 世纪没有一项计算机技术能像 Internet 这样深刻地变革着我们的生活,它拉近了人们之间的距离,成为了一种重要的交流与信息发布工具。作为 Internet 提供的基本服务之一, Web 也许是最常接触到的,随着 Internet 技术的进步, Web 编程技术也在不断地发展。 - PowerPoint PPT Presentation

Transcript of 第 20 章 开发 Web 应用程序

Page 1: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

第第 2020 章 开发章 开发 WebWeb 应用程序 应用程序

(时间: 2 次课, 4 学时)

Page 2: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

第第 2020 章 开发章 开发 WebWeb 应用程应用程序 序

20 世纪没有一项计算机技术能像 Internet 这样深刻地变革着我们的生活,它拉近了人们之间的距离,成为了一种重要的交流与信息发布工具。作为 Internet 提供的基本服务之一, Web 也许是最常接触到的,随着Internet 技术的进步, Web 编程技术也在不断地发展。

ASP.NET 是建立在微软新一代 .NET 平台架构上,利用公共语言运行时CLR 在服务器后端为用户提供建立强大的企业级 Web 应用服务的编程框架。本章介绍如何用 C# 语言借助 ASP.NET 技术进行 Web 开发,内容覆盖了使用控件、访问数据库和创建 Web 服务方面的内容,对初学ASP.NET 具有指导作用。

本章教学目的: 学习编写 ASP.NET 应用程序 学会创建 Web 服务

Page 3: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

第第 2020 章 开发章 开发 WebWeb 应用程应用程序序

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

Page 4: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.1 ASP.NET20.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 ,可以通过【控制面板】中的添加 / 删除程序来安装。

Page 5: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.2 20.2 编写编写 ASP.NET WebASP.NET Web 应用程应用程序序

Visual Studio .NET 是一个功能十分强大的开发工具,我们先来使用它创建一个简单的 Web 应用程序,然后逐步对这个程序进行讲解。

【例 20.1 】 打开 Visual Studio .NET ,选择【文件】 | 【新建】 | 【项目】命令。

从【模板】栏内选择【 ASP.NET Web 应用程序】。如果是第一次创建,Web 应用程序的名称将是 WebApplication1 ,接受默认值,单击【确定】按钮。这时将出现WebForm1.aspx的设计界面,现在可以向其中添加控件形成一个完整的 Web窗体。

Page 6: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3 ASP.NET20.3 ASP.NET 服务器端控件 服务器端控件

20.3.1 Web服务器控件 20.3.2 HTML服务器控件 20.3.3 验证控件 20.3.4 用户控件

Page 7: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3 ASP.NET20.3 ASP.NET 服务器端控件 服务器端控件 上面学习了如何使用 ASP.NET 编写 Web 应用程序,这一节将学习服务

器端控件。服务器端控件是 ASP.NET 编程的基础,编写 Web页面很大程度上就是将控件拼凑起来,以使其协同工作。 Web窗体总共可以加入 4 种控件,它们是: Web 服务器控件, HTML 服务器控件,验证控件和用户控件。下面将分别介绍。

Page 8: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件 Web 服务器控件也许是最常使用的控件,前面例子中向Web窗体中添

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

Page 9: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件 1. 文本框 (TextBox) 控件 文本框控件提供了向Web窗体输入信息的方法,可以将文本框的 TextMode属性赋为 SingLine 、MultiLine 和 Password 来改变它的行为模式 (图 20.6) 。

下面列出文本框控件的一些重要的公共属性和公共方法 (表 20.1 、表 20.2) 。

Page 10: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件

图 20.6 文本框控件

Page 11: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件

名 称 描 述Columns 获取或设置文本框的显示宽度 ( 以字符为单位 )

MaxLength 获取或设置文本框中最多允许的字符数

ReadOnly 获取或设置一个值,用于指示能否更改 TextBox 控件的内容

Rows 获取或设置多行文本框的显示高度

Text 获取或设置文本框的文本内容

TextMode 获取或设置文本框的行为模式Wrap 获取或设置一个值,该值指示文本框内的文本内容是否换行

表 20.1 文本框控件的公共属性

Page 12: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件

名 称 描 述AppendText 向文本框的当前文本追加文本

Clear 从文本框控件中清除所有文本

ClearUndo 从该文本框的撤消缓冲区中清除关于最近操作的信息

Copy 将文本框中的当前选定内容复制到剪贴板

Cut 将文本框中的当前选定内容移动到剪贴板中

表 20.2 文本框控件的公共方法

Page 13: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件

名 称 描 述

Hide 对用户隐藏控件

Paste 用剪贴板的内容替换文本框中的当前选定内容

续表

Page 14: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件 2. 按钮控件 Visual Studio .NET 的工具箱中提供了 3 种按钮控件:普通按钮Butto

n 、显示超链接样式的按钮 LinkButton 和显示图像样式的 ImageButton(图 20.7) 。

按钮控件发生 Click事件时会直接导致向服务器端提交。 下面分别列出这些按钮控件一些重要的公共属性 (表 20.3 、表 20.4) 。 3. 复选框控件 (CheckBox 、 CheckBoxList) 和单选按钮控件 (RadioBu

tton 、 RadioButtonList) 复选框控件和单选按钮控件十分类似,它们都允许从多个选项中进行选

择,不同的是复选框控件允许同时选择多项,而单选按钮控件每次只能选择一项。 CheckBoxList 控件和 RadioButtonList 控件可以单独使用,而 CheckBox控件和 RadioButton 控件则需要多个一起使用。它们都可以和数据源进行绑定,不过比较起来使用 CheckBoxList 控件和RadioButtonList 控件访问数据更为方便一些 (图 20.8) 。

Page 15: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件

图 20.7 按钮控件

Page 16: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件

名 称 描 述

CausesValidation 获取或设置一个值,该值指示在单击 Button 控件时是否执行了验证

Text 获取或设置在 Button 控件中显示的文本标题

ToolTip 获取或设置当鼠标指针悬停在 Web 服务器控件上时显示的文本

表 20.3 Button 和 LinkButton 控件的公共属性

Page 17: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件

名 称 描 述AlternateText 获取或设置当图像不可用时, Image 控件中显示的替换文本。支持工具提示

功能的浏览器将此文本显示为工具提示

ImageAlign 获取或设置控件相对于 Web 页上其他元素的对齐方式

ImageUrl 获取或设置在控件中显示的图像的位置

表 20.4 ImageButton 控件的公共属性

Page 18: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件

图 20.8 复选框控件和单选按钮控件

Page 19: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.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 项打开 Lis

tItem集合编辑器对显示项进行添加删除,它们也都具有数据源绑定功能。

Page 20: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件

名 称 描 述

Checked 获取或设置一个值,该值指示是否已选中控件

Text 获取或设置与控件关联的文本标签

TextAlign 获取或设置与控件关联的文本标签的对齐方式

表 20.5 CheckBox 和 RadioButton 控件的公共属性

Page 21: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件 名 称 描 述

CellPadding 获取或设置表单元格的边框和内容之间的距离 ( 以像素为单位 )

CellSpacing 获取或设置单元格之间的距离 ( 以像素为单位 )

DataMember 获取或设置要绑定到控件的 DataSource 中的特定表DataSource 获取或设置填充列表控件项的数据源DataTextField 获取或设置为列表项提供文本内容的数据源字段DataTextFormatString 获取或设置格式化字符串,该字符串用来控制如何显示绑定到列表控件的数据

DataValueField 获取或设置为各列表项提供值的数据源字段Items 获取列表控件项的集合RepeatColumns 获取或设置要在控件中显示的列数RepeatDirection 获取或设置一个值,该值指示控件是垂直显示还是水平显示RepeatLayout 获取或设置复选框的布局SelectedIndex 获取或设置列表中选定项的最低序号索引SelectedItem 获取列表控件中索引最小的选定项

表 20.6 CheckBoxList 和 RadioButtonList 控件的公共属性

Page 22: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件

图 20.9 ListItem 集合编辑器

Page 23: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件

图 20.10 DropDownList 控件和 ListBox 控件

Page 24: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件

名 称 描 述

Items 获取列表控件项的集合

SelectedIndex 已重写。获取或设置 DropDownList 控件中的选定项的索引

SelectedItem 获取列表控件中索引最小的选定项

表 20.7 DropDownList 控件的公共属性

Page 25: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.1 Web20.3.1 Web 服务器控件服务器控件

名 称 描 述

Items 获取列表控件项的集合

Rows 获取或设置 ListBox 控件中显示的行数

SelectedIndex 获取或设置列表中选定项的最低序号索引

SelectedItem 获取列表控件中索引最小的选定项

SelectionMode 获取或设置 ListBox 控件的选择模式

表 20.8 ListBox 控件的公共属性

Page 26: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.2 HTML20.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元素的机会,下面来看一个例子。

Page 27: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.2 HTML20.3.2 HTML 服务器控件服务器控件 【例 20.4 】新建一个 Web 项目,将位置栏中的项目名改为 TestHTML 。从【工具箱】中的 HTML 栏内添加一个 Butt

on 控件,切换到 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: 1

68px; HEIGHT: 41px" type="button" value="Button"></FONT> </form> </body> </HTML>

Page 28: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.2 HTML20.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">

Page 29: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.2 HTML20.3.2 HTML 服务器控件服务器控件

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

Page 30: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.2 HTML20.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 服务器控件。

Page 31: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.3 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) 。

Page 32: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.3 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事件,可以分别与客户端和服务器端进行绑定,然后编写满足自己需要的验证函数。

Page 33: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.3 20.3.3 验证控件验证控件

名 称 描 述

RequiredFieldValidator 确保用户不会跳过某一项

CompareValidator 使用比较运算符 ( 小于、等于、大于等 ) 比较用户的输入与一个常量值或另一控件的属性值

RangeValidator 检查用户的输入是否在指定的上下限内。可以检查数字对、字母字符对和日期对的范围。边界可以表示为常数或从其他控件导出的值

表 20.9 验证控件

Page 34: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.3 20.3.3 验证控件验证控件

名 称 描 述RegularExpressionValidator 检查项与正则表达式定义的模式是否匹配。这种验证类型允许检

查可预知的字符序列,如社会保障号、电子邮件地址、电话号码、邮政编码等中的字符序列

CustomValidator 使用自己编写的验证逻辑检查用户的输入ValidationSummary 在一个统一摘要中显示页上所有其他验证控件的错误信息

续表

Page 35: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.3 20.3.3 验证控件验证控件

图 20.12 验证控件的使用

Page 36: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.3 20.3.3 验证控件验证控件

图 20.13 正则表达式编辑器

Page 37: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.3 20.3.3 验证控件验证控件

图 20.14 程序的运行

Page 38: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.4 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>标签。

Page 39: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.4 20.3.4 用户控件用户控件

图 20.15 Web 用户控件

Page 40: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.4 20.3.4 用户控件用户控件 (2) 将文件第一行的 Page改为 Control 并把WebForm1.aspx.cs更名为 WebForm1.ascx.cs 。 (3) 在解决方案对话框中选中 WebForm1.aspx,右击选择【重命名】,将 WebForm1.aspx的名字改为 W

ebForm1.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 用户控件,使用在项目里以达到代码重用的目的。

Page 41: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.4 20.3.4 用户控件用户控件

图 20.16 添加现有项对话框

Page 42: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.4 20.3.4 用户控件用户控件

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

Page 43: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.4 20.3.4 用户控件用户控件

图 20.18 使用 Web 用户控件

Page 44: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.4 20.3.4 用户控件用户控件 2. Web自定义控件 Web自定义控件是一种更方便、功能更强大的设置用户控件的方式。它最终将编译成 DLL 文件,可以方便地进行发布。下面将演示如何编写一个最简单的 We

b自定义控件。 【例 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()); } } }

Page 45: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.4 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 服务器控件一样在设计阶段就可以显示出外观。

Page 46: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.4 20.3.4 用户控件用户控件

图 20.19 向工具箱中添加控件

Page 47: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.4 20.3.4 用户控件用户控件

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

Page 48: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.3.4 20.3.4 用户控件用户控件

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

Page 49: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

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

Page 50: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4 20.4 创建创建 WebWeb 服务 服务

Page 51: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.1 Web20.4.1 Web 服务服务 Web 服务提供了一种调用网络应用的新方法,刚一出现就表现出了极大的生命力,它也许会带来网络应用程序的重大变革,本节将简要介绍一些Web 服务的内容。

在 Internet 的发展中,如何使各种应用系统有效集成一直是一个令人头痛的问题。使用不同技术建立起来的 Internet 应用系统无法互相通信,彼此的功能无法相互调用,造成了网络资源的极大浪费。虽然 CORBA 、 DCOM/COM+等技术为此进行了极大的努力,但目前仍然无法有效地解决问题, Web 服务的出现给我们带来了新的希望。

Web 服务使用基于 XML 的消息协议 SOAP ,提供了规范的数据封包格式并且使用 HTTP协议传输,从而可以方便地在各种异构的应用系统之间进行通讯。同样基于 XML 的 WSDL 用作 Web 服务的服务描述,它向外公布了 Web 服务所提供服务的接口。 UDDI则提供了 Web 服务的服务发现机制。

下面将通过一些简单例子演示Web 服务的开发与使用。

Page 52: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.2 20.4.2 一个简单的一个简单的 WebWeb 服务服务 下面来创建一个简单的 Web 服务来演示它的基本组成。 【例 20.9 】 Visual Studio .NET 为 Web 服务提供了强大的支持,借助它可以方便地进行 Web 服务

的开发。 打开 Visual Studio .NET ,新建项目,在项目模板中选择【 ASP.NET Web 服务】,命名为MyWeb

Service 。这时将出现设计对话框,现在切换到代码编辑对话框,按下面的程序改变对话框中的代码。 using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Diagnostics; using System.Web; using System.Web.Services; namespace MyWebService { /// Service1 的摘要说明 /// </summary> ///

Page 53: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.2 20.4.2 一个简单的一个简单的 WebWeb 服务服务 //设定该Web 服务的命名空间 [WebService(Namespace="http://www.tianjingmaj.com/")] public class Service1 : System.Web.Services.WebService { public Service1() { //CODEGEN :该调用是 ASP.NET Web 服务设计器所必需的 InitializeComponent(); } #region Component Designer generated code //Web 服务设计器所必需的 private IContainer components = null; /// <summary> /// 设计器支持所需的方法 - 不要使用代码编辑器修改 /// 此方法的内容。 /// </summary> private void InitializeComponent() { } /// <summary> /// 清理所有正在使用的资源 /// </summary> protected override void Dispose( bool disposing ) { if(disposing && components != null) { components.Dispose(); } base.Dispose(disposing); }

Page 54: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.2 20.4.2 一个简单的一个简单的 WebWeb 服务服务 #endregion // WEB 服务示例 // HelloWorld() 示例服务返回字符串 Hello World // 若要生成,请取消注释下列行,然后保存并生成项目 // 若要测试此 Web 服务,请按 F5 键 // 实现两个数相加的 Web 服务 [WebMethod] public int Add(int firstnumber, int secondnumber) { return firstnumber+secondnumber; } } } 这样就实现了一个简单的 Web 服务,它只提供了一项功能,计算两个整数的和。现在运行程序来测试

这个 Web 服务 (图 20.22) 。不过要注意Web 服务并不是在运行后的浏览器对话框中显示的这样,它本身只是提供给用户的服务,这里看到的只是 ASP.NET 提供的一个方便的测试界面。

Page 55: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.2 20.4.2 一个简单的一个简单的 WebWeb 服务服务

图 20.22 测试Web 服务

Page 56: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.2 20.4.2 一个简单的一个简单的 WebWeb 服务服务 图 20.22 中表明该Web 服务支持一个 Add 方法,单击 Add ,浏览器

将如图 20.23 所示。 在 firstnumber 后的文本框中填入“ 19”, secondnumber 后的文

本框中填入“ 36”,单击【调用】,将会出现图 20.24 所示结果。 Web 服务以 XML格式返回了两数相加的结果 55。 在类 Service1 上加入一行 [WebService(Namespace="http://www.

tianjingmaj.com/")]表明该Web 服务的命名空间,它用来和其他Web 服务相区别。下面的 Add 方法上的 [WebMethod]表明这是一个 Web 方法,这个方法的功能很简单,只是将传入的两个数相加并返回结果。上面在浏览器中测试的就是该方法。

Page 57: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.2 20.4.2 一个简单的一个简单的 WebWeb 服务服务

图 20.23 测试 Add 方法

Page 58: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.2 20.4.2 一个简单的一个简单的 WebWeb 服务服务

图 20.24 Web 服务调用结果

Page 59: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.3 20.4.3 使用使用 WebWeb 服务访问数据库服务访问数据库 下面结合使用 ADO.NET 创建一个可访问数据库的 Web 服务,同时编写一个客户端程序,用来调用这个 Web 服务。 【例 20.10 】打开 Visual Studio .NET ,新建项目,在【模板】中选择【 ASP.NET Web 服务】,将该项目命名为MyDataService 。切换到

代码编辑对话框,填写如下代码: using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Data.SqlClient; using System.Diagnostics; using System.Web; using System.Web.Services; namespace MyDataService { /// <summary> /// Service1 的摘要说明 /// </summary> // 指定该Web 服务的命名空间 [WebService(Namespace="http://www.tianjingmaj.com/")] public class Service1 : System.Web.Services.WebService { public Service1() { //CODEGEN :该调用是 ASP.NET Web 服务设计器所必需的 InitializeComponent(); }

Page 60: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.3 20.4.3 使用使用 WebWeb 服务访问数据库服务访问数据库 #region Component Designer generated code //Web 服务设计器所必需的 private IContainer components = null; /// <summary> /// 设计器支持所需的方法 - 不要使用代码编辑器修改此方法的内容 /// </summary> private void InitializeComponent() { } /// <summary> /// 清理所有正在使用的资源 /// </summary> protected override void Dispose( bool disposing ) { if(disposing && components != null) { components.Dispose(); } base.Dispose(disposing); }

Page 61: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.3 20.4.3 使用使用 WebWeb 服务访问数据库服务访问数据库 #endregion // 建立一个 sqlConnection连接 SQL Server 数据库 public SqlConnection myConn = new SqlConnection( "Data Source=localhost;Integrated Security=SSPI;Initial Catalog=northwind"); [WebMethod] public DataSet GetDataSet() { // 建立一个 sqlDataAdapter取得 products表内容 SqlDataAdapter myDA = new SqlDataAdapter( "SELECT * FROM PRODUCTS", myConn); // 新建一个数据集 DataSet myDS = new DataSet(); //填充数据集 myDA.Fill(myDS); return myDS; } } } 该Web 服务提供了一个 GetDataSet 方法,它通过 SqlConnection 对象连接到数据库,并将 Products表的数据填充

到数据集中,然后将得到的数据集返回。 下面开始编写一个 Web 应用程序来调用刚才生成的 Web 服务的客户程序。 新建一个 ASP.NET Web 应用程序项目,命名为 UseDataService 。转到该项目的解决方案资源管理器对话框,从列表

中选择【引用】,右击,选择【添加 Web引用】,将弹出【添加 Web引用】对话框 (图 20.25) 。

Page 62: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.3 20.4.3 使用使用 WebWeb 服务访问数据库服务访问数据库

图 20.25 【添加 Web 引用】对话框

Page 63: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.3 20.4.3 使用使用 WebWeb 服务访问数据库服务访问数据库 在该对话框的地址栏中填入刚才新建的 Web 服务的位置,这里是 http://localhost/ MyDataService/Service1.asmx。

刷新后左侧的对话框中将会出现该Web 服务支持的方法,单击【添加引用】,现在在项目中就可以直接引用这个 Web服务了。

现在将一个 DataGrid 控件添加到 Web窗体中,转到代码编辑对话框,填入下列代码: using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Drawing; using System.Web; using System.Web.SessionState; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; namespace UseDataService { /// <summary> /// WebForm1 的摘要说明 /// </summary> public class WebForm1 : System.Web.UI.Page {

Page 64: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.3 20.4.3 使用使用 WebWeb 服务访问数据库服务访问数据库 protected System.Web.UI.WebControls.DataGrid DataGrid1; private void Page_Load(object sender, System.EventArgs e) { // 生成 Web 服务引用实例 localhost.Service1 myService = new localhost.Service1(); DataSet myDataSet = new DataSet(); // 在此处放置用户代码以初始化页面 // 指定DataGrid 控件数据源 myDataSet = myService.GetDataSet(); DataGrid1.DataSource = myDataSet; // 将数据绑定到 DataGrid 控件中 DataGrid1.DataBind(); } #region Web Form Designer generated code override protected void OnInit(EventArgs e) { // // CODEGEN :该调用是 ASP.NET Web 窗体设计器所必需的 // InitializeComponent(); base.OnInit(e); }

Page 65: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.3 20.4.3 使用使用 WebWeb 服务访问数据库服务访问数据库 /// <summary> /// 设计器支持所需的方法 - 不要使用代码编辑器修改 /// 此方法的内容。 /// </summary> private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion } } 运行这个程序。在浏览器对话框中显示了从 Web 服务得到的数据库的内容 (图 20.26) 。 把Web引用添加到项目中后会自动生成一个该Web 服务的代理类,可以认为这个代理类就是

Web 服务的本地映像。在 Web 应用程序中可以直接生成该代理类的实例用来调用 Web 服务,本例中这个代理类是 localhost.Service1 ,这个名称是添加 Web引用后的默认生成的。生成代理类的实例后直接调用了 Web 服务提供的 GetDataSet 方法用来返回数据集,将该数据集绑定到 DataGrid 控件上就可以在浏览器中显示数据了。

Page 66: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

20.4.3 20.4.3 使用使用 WebWeb 服务访问数据库服务访问数据库

图 20.26 使用 Web 服务访问数据库

Page 67: 第 20 章  开发 Web 应用程序

http://www.wenyuan.com.cn/webnew/

Q & A?Q & A?

Thanks!Thanks!