第7章 C#开发ASP.NET Web 应用程序.

Presentation on theme: "第7章 C#开发ASP.NET Web 应用程序."— Presentation transcript:

1 第7章 C#开发ASP.NET Web 应用程序

2 7.1 Web应用程序基础 7.1.1 HTML页面 HTML即超文本标记语言，它是显示Web网页的语言，指定了Web页的外观和布局。
步骤： 1、启动记事本，输入内容如图7-1所示：

3 图 7-1 Comments.htm网页标记内容

4 2、单击记事本“文件”菜单下的“保存”子菜单，打开“另存为…”对话框，保存路径选择为“C:\CSharpSamples\chp7”，文件名设置为“Comments.htm”，保存类型设置为“所有文件”，然后单击“保存”按钮，具体界面如图7-2所示。 图 7-2文件保存界面

5 3、文件保存完毕后，产生了一个网页文件，通过资源管理器，用鼠标双击该网页文件，IE将打开该网页文件，具体界面如图7-3所示。
图 7-3 Comments.htm打开界面

6 7.1.2 动态Web页面 动态Web页面有两种实现技术：客户端脚本技术和服务器端脚本技术。关于服务器端技术我们在7.2讲解，下面我们讲解客户端脚本技术。此处我们以JavaScript脚本技术为例来讲解动态网页设计。 案例：学习JavaScript脚本语言设计简单的动态页面 目标：掌握基本的JavaScript脚本语言 步骤： 1、启动记事本，输入内容如图7-4所示： 下面对输入内容作简要说明： （1）<script language=”javascript”>表示当前网页的客户端脚本语言是Javascript。 （2）var用于变量的声明。 （3）Date对象是JavaScript的内置对象。 （4）document对象是浏览器的内置对象。 （5）getDay（）是Date对象的一个方法，它返回今天是星期几，注意：0代表星期一。

7 图 7-4 GetDay.htm网页脚本内容

8 3、文件保存完毕后，产生了一个网页文件，通过资源管理器，用鼠标双击该网页文件，IE将打开该网页文件，具体界面如图7-5所示。
2、单击记事本“文件->保存”菜单，打开“另存为…”对话框，路径选择为“C:\CSharpSamples\chp7”，文件名为“GetDay.htm”，保存类型设置为“所有文件”，然后单击“保存”按钮。图 7-5 GetDay.htm打开界面 3、文件保存完毕后，产生了一个网页文件，通过资源管理器，用鼠标双击该网页文件，IE将打开该网页文件，具体界面如图7-5所示。 图 7-5 GetDay.htm打开界面

9 7.2 ASP.NET简介 ASP.NET技术是建立动态Web站点的.NET方式。它的名称来源于上一代技术Active Server Pages（ASP），不过，它们的相似之处并不多。实际上，ASP页面是用功能有限的脚本语言来解释和编写的，而ASP.NET应用程序则被编译为MSIL，就像其它的.NET应用程序那样。 ASP.NET技术在建立Web程序方面主要拥有三大特点：一是支持编译语言，二是程序代码与页面内容的成功分离，三是引入服务器端控件。

10 7.2.1 支持编译语言 目前流行的几种脚本语言比如VBScript、JavaScript和ASP等都有两个主要的缺点，第一，不支持强数据类型。在JavaScript中定义变量只有一个关键字var，使用var关键字定义的变量，如果赋值是字符串，该变量就是字符串变量；如果赋值是整数，则该变量就是整型变量。在VBScript和ASP中，定义变量只通过一个关键字DIM，该变量也没有具体的类型。第二，脚本语言是解释型的。通常情况下，解释型的脚本语言在性能上抵不上编译型的语言。 自推出.NET开发平台以来，微软在Web服务器端开发语言方面，主推VB.NET和C#.NET这两种编译型语言。

11 7.2.1 支持编译语言 通过这两种开发语言，程序员可以像开发普通的Windows程序一样来开发Web程序，只不过在Windows程序中用于开发GUI界面的各种控件，在Web程序开发中也有它们的相应的Web版本。 程序员通过C#语言，利用VS.NET提供的各种Web控件，可以非常容易地开发ASP.NET Web程序，开发完的ASP.NET程序，被编译成MSIL语言，这种中间语言拥有平台无关性，而且，ASP.NET页面在执行前由于会被编译，所以ASP.NET的性能得到了很大的提高。

12 7.2.2 程序代码与页面内容的成功分离 通常的动态网页开发，往往是在一个网页上混合多种脚本语言，比如在HTML脚本语言上可以嵌入JavaScript或VBScript等客户端脚本语言，也可以同时嵌入ASP或JSP等服务器端脚本语言，这种多语言混合的Web开发模式通行已久，但是它的代码可读性很差，程序代码同页面内容混合在一起，程序员要在多种语言的思维上频繁切换，如果程序很复杂的话，这种开发模式非常不利于程序的开发，而且日后的维护也将成为大问题。 ASP.NET Web开发技术为程序员提供了一种非常好的开发模式，即Code Behind技术，它通过Web控件将程序代码与页面内容成功分离，从而使ASP.NET的程序结构异常清晰，开发和维护的效率也得到了很大的提高。

13 7.2.3 引入服务器端控件 在ASP中，可以给页面手动添加HTML控件，对这些控件的响应有两种办法，一种是在客户端的脚本语言中响应用户对这些控件的输入，另一种是把该页面提交给服务器。这两种办法都存在问题，第一种办法产生的问题是不同的浏览器以不同的方式执行客户端脚本语言，我们很难编写在多种浏览器上都能良好运行的复杂的Web页面。第二种办法存在的问题是，如果我们把Web页面重新提交给服务器，那么Internet的无状态特性就会导致页面上存储在变量中的信息丢失，除非我们编写了复杂的代码，把它们存储在HTML元素或URL查询字符串中。 ASP.NET通过服务器控件解决了上述问题。服务器端控件会生成发送给浏览器的HTML代码，显示控件，它们还能生成隐藏的HTML元素来存储它们当前的状态。在提交页面时，这些信息就会传送回服务器，控件将自动处理这些信息，改变HTML，显示控件。

14 7.3 建立ASP.NET应用程序 ASP.NET Web程序需要由Web服务器来编译、解释才能运行，也就是说，我们在开发ASP.NET程序之前需要先启动Windows 2000自带的Web服务器IIS，然后才可以利用VS.NET创建ASP.NET Web程序。

15 7.3.1 启动IIS服务器 下面我们学习一下如何启动IIS Web服务器。 案例：学习如何启动IIS Web服务器
1、单击“开始->程序->管理工具”菜单下的“Internet信息服务”软件，启动如图7-6所示的界面。

16 图 7-6 IIS启动界面

17 在图7-6中，ttserver是作者机器的名字，在不同用户的机器上，该名字是不同的。在ttserver目录下，有多个子目录，我们只关注同ASP.NET Web程序相关的“默认Web站点” 目录，因为该目录管理着我们的Web程序。图 7-7 启动IIS服务菜单 2、用鼠标右键单击“默认Web站点”，打开右键菜单，单击“启动”菜单项，从而启动IIS Web服务，注意：通常情况下，每次Windows 2000启动时，该项服务都会自动启动。具体界面如图7-7所示。

18 图 7-7 启动IIS服务菜单

19 7.3.2 用Visual Studio.NET创建ASP.NET应用程序
VS.NET集成开发环境是微软提供的开发ASP.NET程序的首选开发工具，程序员可以通过它高效方便地开发Web程序。 案例：学习通过VS.NET开发简单的ASP.NET Web程序 目标：掌握利用VS.NET开发ASP.NET Web程序的基本过程 步骤： 1、启动VS.NET，单击“新建项目”按钮，打开“新建项目”对话框，项目类型选择“Visual C#项目”，模板选择“ASP.NET Web应用程序”，位置填为“

20 图 7-8 “新建项目”窗口

21 2、我们按照图7-8设置完“新建项目”窗口后，按下“确定”按钮，出现如下的进度窗口，如图7-9所示。
图 7-9 正在创建WebApp程序 3、建立完WebApp程序后的界面如图7-10所示。如果把图7-10同第六章的图6-3进行对比，我们就会发现二者非常相似。这说明，利用VS.NET进行Web开发，就如同进行Windows开发，当然区别还是有的，不过同ASP相比，ASP.NET开发确实更像Windows GUI开发。

22 实际上，微软想尽量利用程序员开发Windows GUI程序的经验来开发Web程序，从作者的角度来看，我非常赞成微软的这种努力，也希望读者能理解微软的苦心。
下面我说一下图7-10同图6-3的不同之处，毕竟，不同之处是我们学习的重点。 从图7-10来看，它同Windows GUI程序的开发主要有两大不同点： 一是控件不同。在Windows GUI程序开发中我们使用的控件是Windows Forms控件，而在ASP.NET Web开发中，我们使用的控件则是Web窗体控件和HTML控件，注意：我们将在下一节重点介绍它们。二是窗体不同。在Windows GUI程序开发中我们使用的是Windows Forms窗体，而在ASP.NET Web开发中，我们使用的则是Web窗体。

23 图 7-10 ASP.NET Web程序设计界面

24 4、用鼠标双击左侧工具箱中“Web窗体”下的Label控件，在Web窗体设计器上添加一个Label控件，界面如图7-11所示。

25 5、用鼠标选中Web窗体上的Label控件，按F4打开属性窗口，修改Label控件的Text属性为“欢迎大家学习ASP
5、用鼠标选中Web窗体上的Label控件，按F4打开属性窗口，修改Label控件的Text属性为“欢迎大家学习ASP.NET程序设计”，界面如图7-12所示。 图 7-12 Label控件设计界面(二)

26 6、按F5编译并运行程序，IE将自动启动并打开当前ASP.NET网页，界面如图7-13所示。

27 7.4 Web窗体和控件 就像Windows GUI程序设计的过程一样，ASP.NET程序设计也依靠Web窗体和Web/HTML控件。
我们将在本节重点介绍Web窗体和Web/HTML控件。其中，Web窗体重点介绍它的三种窗口，Web/HTML控件重点介绍它们的基本用法。

28 7.4.1 Web窗体 Web窗体是ASP.NET网页的主容器。我们设计的各种各样的HTM/Web控件最终都会放在Web窗体上。Web窗体包含两个文件，即网页文件和代码文件，其中网页文件的扩展名是“.aspx”，代码文件的扩展名是“.cs”。 Web窗体拥有三个窗口，即设计窗口、HTML窗口和后台代码窗口。 案例：认识Web窗体的三种窗口 目标：了解每种窗口的打开方式及特点 步骤：图 7-14 Web窗体的“设计窗口” 1、启动VS.NET，在“打开现有项目”列表，用鼠标单击“WebApp”项目（即7.3.2节我们建立的项目），我们看到的就是“设计窗口”，如图7-14所示。

29 图 7-14 Web窗体的“设计窗口”

30 2、打开Web窗体的“HTML”窗口。用鼠标单击Web窗体下方的“HTML”链接，即打开Web窗体的“HTML”窗口。具体界面如图7-15所示。

31 3、按F7打开Web窗体的“代码窗口”，具体界面如图7-16所示。

32 7.4.2 Web控件 下面详细介绍在开发ASP.NET时常用的Web控件的使用方法。 7.4.2.1 TextBox控件和Button控件
TextBox控件是Web页上用来收集用户信息的主要控件，比如姓名和密码等。Button控件则是用户用来向服务器执行提交动作的主要控件。下面通过一个完成加法操作的网页来演示上述两个控件的用法。 案例：设计求和网页 目标：了解TextBox控件和Button控件的使用方法 步骤：具体如下

33 1、启动VS. NET，打开“WebApp”项目，单击“项目->添加Web窗体…”菜单，添加一个新窗体，名称为“WebForm2
1、启动VS.NET，打开“WebApp”项目，单击“项目->添加Web窗体…”菜单，添加一个新窗体，名称为“WebForm2.aspx”，具体界面如图7-17所示。 图 7-17 添加新窗体

34 表 7-1 WebForm2.aspx上的控件属性设置
2、将WebForm2.aspx设置为启动窗体。具体步骤是，打开“解决方案管理器”，选中“WebForm2.aspx”并单击鼠标右键，在弹出菜单中选中“设为起始页”，并单击它。 表 7-1 WebForm2.aspx上的控件属性设置 控件类型 属性名 设置值 TextBox Name txtNum1 txtNum2 Label lblResult Text (空) Button butSum 求和

35 3、在Web窗体上添加两个TextBox控件、一个Button控件和一个Label控件，并修改它们的属性如表7-1所示。设计完的界面如图7-18所示。
图 7-18 WebForm2.aspx设计界面

36 4、用鼠标双击“求和”按钮，自动产生该按钮单击事件的代码框架，在其中编写如下代码：
private void butSum_Click(object sender, System.EventArgs e) { int ret=int.Parse(this.tbNum1.Text)+ int.Parse(this.tbNum2.Text); this.lblResult.Text=ret.ToString(); } 代码说明： （1）tbNum1和tbNum2是两个TextBox的名称，用于获取用户准备求和的数值； （2）lblResult是Label控件名称，显示求和后的结果； （3）ret为声明的整型变量，用于存储求和后的结果； （4）int.Parse()方法用于字符串文本转换成整型数值； （5）ToString()方法用于将数值转换成字符串文本。

37 5、按F5编译并运行WebForms2.aspx网页，然后在两个TextBox控件上输入两个整数，再单击“求和”按钮，结果将在Label控件上显示出来。具体界面见图7-19所示。
图 7-19 WebForm2aspx网页运行界面

38 7.4.2.2 LinkButton控件和ImageButton控件
LinkButton控件和ImageButton控件在Web窗体上主要用来做超级链接，只不过，LinkButton控件是文字超级链接，ImageButton控件是图像超级链接。 案例：设计超级链接网页 目标：了解LinkButton控件和ImageButton控件的使用方法 步骤： 1、启动VS.NET，打开“WebApp”项目，单击“项目->添加Web窗体…”菜单，添加一个窗体，名称为“WebForm3.aspx”，将它设置为起始页面。 2、在Web窗体上添加一个LinkButton控件和一个ImageButton控件，并修改它们的属性如表7-2所示。

39 表 7-2 WebForm3.aspx上的控件属性设置
控件类型 属性名 设置值 LinkButton Name lbHLJJDC Text 黑龙江省机动车检测网 ImageButton ibHLJJDC ImageUrl hljjdc.jpg 注意：hljjdc.jpg图片已经同WebForm3.aspx存放在同一目录下。 按照上述表7-2属性设置完后，WebForm3.aspx网页的设计界面如图7-20所示。 3、用鼠标双击LinkButton控件，产生单击事件代码框架，并编写如下代码： private void lbHLJJDC_Click(object sender, System.EventArgs e) { Response.Redirect(" }

40 4、双击ImageButton控件，产生单击事件代码框架，编写如下代码：
private void ibHLJJDC_Click(object sender, System.Web.UI.ImageClickEventArgs e) { Response.Redirect(" } 图 7-20 WebForm3.aspx网页设计界面

41 5、按F5编译并运行程序，IE将打开WebForm3
5、按F5编译并运行程序，IE将打开WebForm3.aspx网页，然后用鼠标单击LinkButton超级链接或ImageButton超级链接，网页将导航到“黑龙江省机动车检测网”，具体界面如图7-21所示。 图 7-21 WebForm3.aspx网页运行界面

42 DropDownList控件 DropDownList控件在Web窗体上主要用来做下拉列表框，它可以容纳多个条目，而且还节省空间。 案例：设计下拉列表框网页 目标：了解DropDownList控件使用方法 步骤： 1、启动VS.NET，打开“WebApp”项目，单击“项目->添加Web窗体…”菜单，添加一个新窗体，名称为“WebForm4.aspx”，并将它设置为起始页面。

43 表 7-3 WebForm4.aspx上的控件属性设置
2、在Web窗体上添加一个Label控件和一个DropDownList控件，并修改它们的属性如表7-3所示。 表 7-3 WebForm4.aspx上的控件属性设置 控件类型 属性名 设置值 Label Name lblTip Text 城市列表： DropDownList ddlCities

44 按照表7-3设置完属性后，WebForm4.aspx网页的设计界面如图7-22所示。

45 3、双击WebForm4.aspx窗体，打开该窗体的Load事件代码框架，并编写如下代码：
private void Page_Load(object sender, System.EventArgs e) { // 在此处放置用户代码以初始化页面 this.ddlCities.Items.Add("哈尔滨市"); this.ddlCities.Items.Add("齐齐哈尔市"); this.ddlCities.Items.Add("牡丹江市"); this.ddlCities.Items.Add("佳木斯市"); this.ddlCities.Items.Add("大庆市"); this.ddlCities.Items.Add("鸡西市"); this.ddlCities.Items.Add("鹤岗市"); this.ddlCities.Items.Add("双鸭山市"); }

46 4、按F5编译并运行WebForm4.aspx网页，IE将启动如图7-23所示的界面。

47 7.4.2.4 CheckBox控件和RadioButton控件
CheckBox控件用于设计网页上的多选框，RadioButton控件用于设计网页上的单选框。其中，RadioButton控件要注意设计好排它性选择。 案例：设计具有多项选择和单项选择功能的网页 目标：掌握CheckBox控件和RadioButton的使用方法 步骤： 1、启动VS.NET，打开“WebApp”项目，单击“项目->添加Web窗体…”菜单，添加一个新窗体，名称为“WebForm5.aspx”，并将它设置为起始页面。

48 表 7-4 WebForm5.aspx上的控件属性设置
2、在Web窗体上添加四个Label控件、一个TextBox控件、两个RadioButton控件、四个CheckBox控件和一个Button控件，修改它们的属性如表7-4所示。 表 7-4 WebForm5.aspx上的控件属性设置 控件类型 属性名 设置值 Label Name lblName Text 姓名： TextBox tbName (空) lblSex 性别： RadioButton rbMale GroupName sex 男 rbFemale 女

49 表 7-4 WebForm5.aspx上的控件属性设置（续前表）
Label Name lblFavor Text 爱好： CheckBox cbSwim 游泳 cbWeb 上网 cbStreet 逛街 cbBook 看书 Button butPersonInfo 个人信息 lblInfo (空)

50 按照表7-4设置完属性后，WebForm5.aspx网页的设计界面如图7-24所示。

51 3、双击“个人信息”按钮，打开单击事件代码框架，并编写如下代码：
private void butPersonInfo_Click(object sender, System.EventArgs e) { string name=""; string sex=""; string favor=""; name=this.tbName.Text; if(this.rbMale.Checked) { sex="男"; } if(this.rbFemale.Checked) { sex="女"; } if(this.cbSwim.Checked) { favor+="游泳 "; } if(this.cbWeb.Checked) { favor+="上网 "; } if(this.cbStreet.Checked) { favor+="逛街 "; } if(this.cbBook.Checked) { favor+="看书 "; } this.lblInfo.Text="姓名："+name+"<br>性别："+sex+"<br> 爱好："+favor;图 7-24 WebForm5.aspx网页设计界面 }

52 4、按F5编译并运行程序，IE将打开WebForm5.aspx网页，运行界面如图7-25所示。

53 7.4.2.5 RequiredFieldValidator控件
RequiredFieldValidator控件是ASP.NET提供给程序员专门用来对TextBox控件进行验证的控件。 在进行网页设计时，我们经常需要对一些TextBox控件进行判空操作，如果空就不允许用户进一步操作。RequiredFieldValidator控件在控制TextBox控件不允许空方面节省了程序员很多的劳动。 另外，RequiredFieldValidator控件属于客户端验证，它在用户响应方面显然比服务器端验证拥有优势。

54 案例：设计具有文本框验证功能的网页 目标：掌握RequiredFieldValidator控件的使用方法 步骤： 1、启动VS.NET，打开“WebApp”项目，单击“项目->添加Web窗体…”菜单，添加一个新窗体，名称为“WebForm6.aspx”，并将它设置为起始页面。 2、在Web窗体上添加两个Label控件、一个TextBox控件、一个RequiredFieldValidator控件和一个Button控件，修改它们的属性如表7-5所示。

55 RequiredFieldValidator
表 7-5 WebForm6.aspx上的控件属性设置 控件类型 属性名 设置值 Label Name lblName Text 姓名： TextBox tbName (空) RequiredFieldValidator rfvName ControlToValidate ErrorMessage 姓名不能为空 Button butShowName 显示姓名 lblInfo

56 按照表7-5设置完属性后，WebForm6.aspx网页的界面如图7-26所示。

57 3、用鼠标双击“显示姓名”按钮，打开单击事件代码框架，并编写如下代码：
private void butShowName_Click (object sender, System.EventArgs e) { this.lblInfo.Text=this.tbName.Text; }

58 图 7-27 WebForm6.aspx网页运行界面(一)
4、按F5编译并运行程序，IE将打开WebForm6.aspx网页，当姓名文本框不填内容而单击“显示姓名”按钮时，运行界面如图7-27所示。 图 7-27 WebForm6.aspx网页运行界面(一)

59 图 7-28 WebForm6.aspx网页运行界面(二)
当姓名文本框填内容再单击“显示姓名”按钮时，运行界面如图7-28所示。 图 7-28 WebForm6.aspx网页运行界面(二)

60 7.4.3 HTML控件 ASP.NET仍旧支持HTML控件，由于本书不讲解HTML，所以读者如果想详细了解HTML控件，需要参考有关HTML的书籍。不过，本节将通过一个案例演示在ASP.NET中如何使用HTML控件。 案例：设计具有Label控件、TextField控件和Button控件的HTML网页 目标：掌握Label控件、TextField控件和Button控件的使用方法 步骤： 1、启动VS.NET，打开“WebApp”项目，单击“项目->添加HTML页…”菜单，添加一个新HTML网页，名称为“HTMLPage1.htm”，并将它设置为起始页面。

61 <td></td>
2、在HTMLPage1网页上添加一个Label控件、一个TextField控件和一个Button控件，修改它们的属性如表7-6所示。 表 7-6 HTMLPage1.htm上的控件属性设置 控件类型 属性名 设置值 Label <td></td> 姓名 TextField name txtName value (空) Button butShowName 显示姓名

62 按照表7-6设置完属性后，HTMLPage1网页的界面如图7-29所示。

63 3、用鼠标双击“显示姓名”按钮，将打开一段代码框架，这是一段基于JavaScript脚本语言的代码框架，当用鼠标单击该按钮时，该段代码将自动运行，具体代码如下：
<script id="clientEventHandlersJS" language="javascript"> <!-- function Button1_onclick() { } //--> </script>

64 4、在上述代码框架中编写如下代码： <script id="clientEventHandlersJS" language="javascript"> <!-- function Button1_onclick() { alert(txtName.value); } //--> </script> 代码说明： alert()方法为javascript语言内置的方法，txtName为TextField的名称。

65 5、按F5编译并运行该网页，IE将打开如图7-30所示的界面。在姓名文本框输入名字“李继武”，然后单击“显示姓名”按钮，网页弹出一个消息框，显示“李继武”字样。
图 7-30 HTMLPage1网页运行界面

66 本章小结 本章主要讲解如何通过C#开发ASP.NET Web程序。首先介绍Web程序的基础知识，然后介绍ASP.NET的工作原理及特点，接着演示如何启动IIS Web服务器和VS.NET开发Web程序的基本步骤，最后重点讲解Web窗体和Web控件的使用技巧。 通过本章的学习，读者应能掌握通过C#开发ASP.NET Web程序的基本技能。