第15章 Web应用程序设计.ppt

第第15章章Web应用程序设计应用程序设计15.1ASP.NET概述概述15.2开发开发Web应用程序的准备工作应用程序的准备工作15.3创建一个简单的创建一个简单的Web应用程序应用程序15.4基本基本ASP.NET服务器控件服务器控件15.5高级高级ASP.NET服务器端控件服务器端控件15.1ASP.NET概述概述15.1.1ASP.NET的发展历程的发展历程2000年年ASP.NET1.0正式发布。正式发布。2003年年ASP.NET升级为升级为1.1版本。版本。2005年年11月微软公司又发布了月微软公司又发布了ASP.NET2.0。ASP.NET2.0技术增加了大量方便、实用的新特性，是一技术增加了大量方便、实用的新特性，是一种建立在公共语言运行库上的编程框架，可用于在服务器种建立在公共语言运行库上的编程框架，可用于在服务器上开发功能强大的上开发功能强大的Web应用程序。应用程序。15.1.2.ASPNET网页的运行方式网页的运行方式ASP.NET页面作为代码在服务器上运行。因此，要得页面作为代码在服务器上运行。因此，要得到处理，页面必须配置为当使用者触发交互时提交到服务器。到处理，页面必须配置为当使用者触发交互时提交到服务器。每次页面都会传回服务器，以便再次运行其服务器代码，然每次页面都会传回服务器，以便再次运行其服务器代码，然后向使用者呈现其自身的新版本。其处理循环如下：后向使用者呈现其自身的新版本。其处理循环如下：（1）使用者请求页面。页面第一次运行时，执行初步处理。）使用者请求页面。页面第一次运行时，执行初步处理。（2）页面将标记动态呈现到浏览器中，使用者看到的网页类似于其他）页面将标记动态呈现到浏览器中，使用者看到的网页类似于其他任何网页。任何网页。（3）使用者输入信息或从可用选项中进行选择，然后回车或单击按钮）使用者输入信息或从可用选项中进行选择，然后回车或单击按钮确定。确定。（4）页面发送到）页面发送到Web服务器中。服务器中。（5）在）在Web服务器上，该页再次被运行。并且可在页上使用使用者输服务器上，该页再次被运行。并且可在页上使用使用者输入或选择的信息。入或选择的信息。（6）页面执行用户通过编程所要实现的操作。）页面执行用户通过编程所要实现的操作。（7）页面将其自身发送给使用者的浏览器呈现该页面。）页面将其自身发送给使用者的浏览器呈现该页面。注意与注意与Windows窗体运行的区别！窗体运行的区别！15.2开发开发Web应用程序的准备工作应用程序的准备工作15.2.1安装安装Web服务器服务器安装安装Web服务器实际上就是安装服务器实际上就是安装IIS服务器。服务器。IIS是是InternetInformationServer的缩写，是的缩写，是Windows服服务器操作系统中最重要的务器操作系统中最重要的Web技术。技术。15.2.2创建创建IIS的虚拟目录的虚拟目录（1）首先打开）首先打开“控制面板控制面板”中的中的“管理工具管理工具”页面，页面，可以看到可以看到“Internet服务管理器服务管理器”图标。双击该图标，将图标。双击该图标，将打开打开“Internet信息服务信息服务”对话框。对话框。（2）用鼠标右击）用鼠标右击“默认网站默认网站”，从弹出的快捷菜单中，从弹出的快捷菜单中选择选择“新建新建”|“虚拟目录虚拟目录”命令。命令。（3）打开创建虚拟目录向导，单击）打开创建虚拟目录向导，单击“下一步下一步”按钮，按钮，（4）在窗口中的）在窗口中的“别名别名”文本框中输入要建立虚拟目录文本框中输入要建立虚拟目录的名称，这里输入的名称，这里输入MyWeb。（5）单击）单击“下一步下一步”按钮，在打开的窗口中单击按钮，在打开的窗口中单击“浏览浏览”按钮，选择要建立虚拟目录的实际文件夹。这里选择按钮，选择要建立虚拟目录的实际文件夹。这里选择H:MyWeb文件夹，单击文件夹，单击“下一步下一步”按钮。按钮。（6）设置虚拟目录的访问权限。保持默认值。单击）设置虚拟目录的访问权限。保持默认值。单击“下下一步一步”按钮。按钮。（7）在）在“默认网站默认网站”节点下有了一个节点下有了一个MyWeb项，鼠标项，鼠标右击该项，在弹出的快捷菜单中选择右击该项，在弹出的快捷菜单中选择“属性属性”命令。命令。（8）在打开的窗口中选择）在打开的窗口中选择“目录安全性目录安全性”选项卡，打开选项卡，打开如下图所示的窗口，单击如下图所示的窗口，单击“编辑编辑”按钮。按钮。（9）打开如下图所示的对话框，勾选）打开如下图所示的对话框，勾选“集成集成Windows身身份验证份验证”复选框。单击复选框。单击“确定确定”按钮。按钮。15.3创建一个简单的创建一个简单的Web应用程序应用程序【例例15.1】创建一个创建一个Web应用程序，根据用户输入应用程序，根据用户输入Access数据库名称（在网站主目录的数据库名称（在网站主目录的App_Data文件夹中查找该数文件夹中查找该数据库文件）连接到该数据库。据库文件）连接到该数据库。操作步骤如下：操作步骤如下：（1）启动）启动MicrosoftVisualStudio2005，选择，选择“文件文件”|“新建网站新建网站”命令，打开命令，打开“新建网站新建网站”对话框，在对话框，在“VisualStudio己安装的模板己安装的模板”列表框中选择列表框中选择“ASP.NET网站网站”，在，在“位置位置”下拉列表中选择下拉列表中选择HTTP，在，在“语言语言”下拉列表中选择下拉列表中选择VisualC#。（2）单击）单击“浏览浏览”按钮，打开按钮，打开“选择位置选择位置”对话框，从对话框，从中选择中选择MyWeb作为其保存的位置，单击作为其保存的位置，单击“打开打开”按钮，再按钮，再单击单击“确定确定”按钮。按钮。（3）打开）打开Web窗体设计对话框，在解决方案管理器中可窗体设计对话框，在解决方案管理器中可以看到自动生成一个名称为以看到自动生成一个名称为Default.aspx的的Web窗体文件。窗体文件。另外，还自动生成了一个另外，还自动生成了一个App_Data文件夹。在左边的文件夹。在左边的“工工具箱具箱”中可以将看到各种控件。中可以将看到各种控件。（4）为了能够打开）为了能够打开school.mdb数据库，将该文件复制到数据库，将该文件复制到H:MyWeb的的App_Data文件夹中。单击解决方案管理器工文件夹中。单击解决方案管理器工具栏上的按钮，会看到具栏上的按钮，会看到school.mdb文件出现在解决方案管文件出现在解决方案管理器中。理器中。（5）单击中部下方的按钮，切换到）单击中部下方的按钮，切换到Web窗体设计模式，窗体设计模式，进行可视化网页设计。进行可视化网页设计。（6）双击）双击button1控件，出现代码编辑窗口，设计其事件控件，出现代码编辑窗口，设计其事件过程。最后设计整个过程。最后设计整个Web窗体的代码如下：窗体的代码如下：usingSystem;usingSystem.Data;usingSystem.Data.OleDb;/新增新增usingSystem.Configuration;usingSystem.Web;usingSystem.Web.Security;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;usingSystem.Web.UI.WebControls.WebParts;usingSystem.Web.UI.HtmlControls;其余引用都是系其余引用都是系统自加的统自加的publicpartialclass_Default:System.Web.UI.PageprotectedvoidButton1_Click(objectsender,EventArgse)OleDbConnectionmyconn=newOleDbConnection();myconn.ConnectionString=Provider=Microsoft.Jet.OLEDB.4.0;DataSource=+Server.MapPath(App_Data)+TextBox1.Text;myconn.Open();if(myconn.State=ConnectionState.Open)Label2.Text=Access数据库连接成功数据库连接成功;else Label2.Text=不能连接到不能连接到Access数据库数据库;myconn.Close();（7）单击按钮或按）单击按钮或按F5键，第一次运行时将有提示对话键，第一次运行时将有提示对话框出现，其界面如下图所示。框出现，其界面如下图所示。选中修改项（默设值），单击选中修改项（默设值），单击“确定确定”按钮，出现图浏按钮，出现图浏览器界面，在文本框中输入览器界面，在文本框中输入school.mdb，单击，单击“连接连接”命令命令按钮，其运行界面如下图所示，表示连接成功。按钮，其运行界面如下图所示，表示连接成功。（9）启动）启动IE浏览器，输入地址为浏览器，输入地址为http:/localhost/myweb，按回车键后会启动本网站。这样就隐藏了本网站的实际地址按回车键后会启动本网站。这样就隐藏了本网站的实际地址H:MyWeb，从而防止对本网站程序的攻击，这就是建立虚，从而防止对本网站程序的攻击，这就是建立虚拟目录的好处。拟目录的好处。15.4基本基本ASP.NET服务器控件服务器控件15.4.1服务器控件概述服务器控件概述1.什么是服务器控件什么是服务器控件服务器控件都包含在服务器控件都包含在ASP.NET页面中。当运行页面时，页面中。当运行页面时，.NET执行引擎将根据控件对象和程序逻辑完成一定的功能。执行引擎将根据控件对象和程序逻辑完成一定的功能。根据服务器控件定义方式，可分为根据服务器控件定义方式，可分为HTML服务器控件、服务器控件、Web标准服务器控件和自定义服务器控件：标准服务器控件和自定义服务器控件：2.服务器控件的属性、方法和事件服务器控件的属性、方法和事件常用属性常用属性说明说明ID控件标识控件标识Font-Bold字体是否为粗体字体是否为粗体Font-Italic字体是否为斜体字体是否为斜体Font-Name字体名字体名Font-Size字体大小字体大小Text控件上显示的文本控件上显示的文本Visible控件是否显示控件是否显示BackColor控件的背景色控件的背景色ForeColor控件的前景色控件的前景色常用方法常用方法说明说明DataBind完成数据绑定完成数据绑定Focus获得焦点获得焦点GetType获取当前实例的类型获取当前实例的类型常用事件常用事件说明说明DataBinding当一个控件上的当一个控件上的DataBind方法被调用并且该控件被绑定到方法被调用并且该控件被绑定到一个数据源时触发该事件。一个数据源时触发该事件。Init控件被初始化时触发该事件。控件被初始化时触发该事件。Load控件被装入页面时触发该事件。在控件被装入页面时触发该事件。在Init后发生。后发生。Unload从内存中卸载时触发该事件。从内存中卸载时触发该事件。3.服务器控件的相关操作服务器控件的相关操作（1）向页面中添加服务器控件）向页面中添加服务器控件可以通过以下可以通过以下3种方法添加服务器控件。种方法添加服务器控件。双击实现添加控件双击实现添加控件：在：在Web页面上，把光标停留在要添加控件的页面上，把光标停留在要添加控件的位置上。在工具箱中找到想要添加的服务器控件然后双击，服务器位置上。在工具箱中找到想要添加的服务器控件然后双击，服务器控件就会呈现在控件就会呈现在Web页面上光标停留的位置。页面上光标停留的位置。拖曳实现添加控件拖曳实现添加控件：在工具箱中找到想要添加的控件，然后拖曳：在工具箱中找到想要添加的控件，然后拖曳到到Web页想要添加控件的位置上。页想要添加控件的位置上。使用代码添加控件使用代码添加控件：还可以通过添加代码来实现添加控件。用户：还可以通过添加代码来实现添加控件。用户可以在可以在HTML视图下，在想要添加控件的位置输入相应控件的代码。视图下，在想要添加控件的位置输入相应控件的代码。（2）删除页面中服务器控件）删除页面中服务器控件删除页面中的控件有两种方法：一种方法是选中该控件，删除页面中的控件有两种方法：一种方法是选中该控件，按键盘上的按键盘上的Delete键；另一种方法是选择该控件并单击鼠标键；另一种方法是选择该控件并单击鼠标右键，在弹出的快捷菜单中选择右键，在弹出的快捷菜单中选择“删除删除”命令。命令。15.4.2Label、Button和和TextBox控件控件Label服务器控件服务器控件提供了一种以编程方式设置提供了一种以编程方式设置Web窗体窗体页中文本的方法，这些文本在页面上是静态的；用户无法页中文本的方法，这些文本在页面上是静态的；用户无法编辑。还可以将编辑。还可以将Label控件的控件的Text属性绑定到数据源，以在属性绑定到数据源，以在页面上显示数据库信息。页面上显示数据库信息。Button服务器控件服务器控件通过用户操作完成特定工作和事务逻通过用户操作完成特定工作和事务逻辑。其常用的事件有辑。其常用的事件有Click（在单击（在单击Button控件时触发）。控件时触发）。TextBox服务器控件服务器控件为用户提供了一种向为用户提供了一种向Web窗体输入窗体输入信息（包括文本、数字和日期）的方法。通过对信息（包括文本、数字和日期）的方法。通过对TextBox的的TextMode属性进行设置可以得到不同的属性进行设置可以得到不同的TextBox。另外，当。另外，当用户更改用户更改TextBox的文本时触发的文本时触发TextChanged事件。事件。15.4.3DropDownList控件控件DropDownList（下拉列表框）服务器控件允许用户（下拉列表框）服务器控件允许用户从预定义列表中选择某一项，其项列表在用户单击下拉列从预定义列表中选择某一项，其项列表在用户单击下拉列表以前一直保持隐藏状态。表以前一直保持隐藏状态。【例例15.2】设计一个设计一个Web窗体，当用户从下拉列表中选窗体，当用户从下拉列表中选择学生姓名和班号时，程序将用户选择的学生姓名和班号择学生姓名和班号时，程序将用户选择的学生姓名和班号显示出来。显示出来。WebForm2事件过程：事件过程：publicpartialclassWebForm2:System.Web.UI.PageprotectedvoidPage_Init(objectsender,EventArgse)OleDbConnectionmyconn=newOleDbConnection();myconn.ConnectionString=Provider=Microsoft.Jet.OLEDB.4.0;DataSource=+Server.MapPath(App_Data)+school.mdb;OleDbCommandmycmd=newOleDbCommand(SELECT姓名姓名FROMstudent,myconn);myconn.Open();OleDbDataReadermyreader=mycmd.ExecuteReader();DropDownList1.DataSource=myreader;DropDownList1.DataTextField=姓名姓名;DropDownList1.DataBind();/上面的绑定在调用该方法时才执行上面的绑定在调用该方法时才执行OleDbCommandmycmd1=newOleDbCommand(SELECTdistinct班号班号FROMstudent,myconn);OleDbDataReadermyreader1=mycmd1.ExecuteReader();DropDownList2.DataSource=myreader1;DropDownList2.DataTextField=班号班号;DropDownList2.DataBind();/上面的绑定在调用该方法时才执行上面的绑定在调用该方法时才执行myreader.Close();myreader1.Close();myconn.Close();Label3.Text=;protectedvoidButton1_Click(objectsender,EventArgse)Label3.Text=学生学生+DropDownList1.Text+属于属于+DropDownList2.SelectedValue+班班;运行界面运行界面15.4.4CheckBox、CheckBoxList、RadioButton和和RadioButtonList控件控件CheckBox（复选框）和（复选框）和CheckBoxList（复选框组）服务（复选框组）服务器控件为用户提供了一种在真器控件为用户提供了一种在真/假、是假、是/否或开否或开/关选项之间切关选项之间切换的方法。前者包含一个复选框，后者是由一组复选框组成。换的方法。前者包含一个复选框，后者是由一组复选框组成。RadioButton（单选按钮）和（单选按钮）和RadioButtonList（单选按（单选按钮组）服务器控件允许用户从一个预定义的选项中选择一项。钮组）服务器控件允许用户从一个预定义的选项中选择一项。【例例15.3】设计一个设计一个Web窗体，用户可以选择学生相关信窗体，用户可以选择学生相关信息并提交。息并提交。WebForm3事件过程：事件过程：protectedvoidButton1_Click(objectsender,EventArgse)stringresult=;/判断性别判断性别if(RadioButton1.Checked)result+=性别：女性别：女;/为屏幕换行为屏幕换行elseresult+=性别：男性别：男;/判断年龄判断年龄if(RadioButtonList1.SelectedItem!=null)result+=年龄：年龄：+RadioButtonList1.SelectedItem.Text+;/读取爱好信息读取爱好信息if(CheckBoxList1.SelectedIndex-1)result+=爱好：爱好：;for(inti=0;i=CheckBoxList1.Items.Count-1;i+)if(CheckBoxList1.Itemsi.Selected)result+=CheckBoxList1.Itemsi.Text+ result+=;/是否接受邮件信息是否接受邮件信息if(CheckBox1.Checked)result+=该生是三好生该生是三好生;Label1.Text=result;运行界面运行界面15.4.5数据验证控件数据验证控件在在ASP.NET中，提供了以下中，提供了以下6种数据验证控件（它们位种数据验证控件（它们位于于“工具箱工具箱”的的“验证验证”部分，可以拖放到窗体上）：部分，可以拖放到窗体上）：15.4.5数据验证控件数据验证控件在在ASP.NET中，提供了以下中，提供了以下6种数据验证控件（它们位种数据验证控件（它们位于于“工具箱工具箱”的的“验证验证”部分）：部分）：RequiredFieldValidator：又称非空验证控件。确保用户在：又称非空验证控件。确保用户在Web窗体页上输入数据时不会跳过必填字段，也就是说，检查被验证控窗体页上输入数据时不会跳过必填字段，也就是说，检查被验证控件的输入是否为空，如果为空，则在网页中显示提示信息。件的输入是否为空，如果为空，则在网页中显示提示信息。CompareValidator：又称比较验证控件。将用户的输入与常数值：又称比较验证控件。将用户的输入与常数值（由（由ValueToCompare属性指定）、另一个控件（由属性指定）、另一个控件（由ControlToCompare属性指定）的属性值进行比较，若不相同，则属性指定）的属性值进行比较，若不相同，则在网页中显示提示信息。在网页中显示提示信息。RangeValidator：又称范围验证控件。确保用户输入的值在指定的上：又称范围验证控件。确保用户输入的值在指定的上下限范围之内，当输入不在验证的范围内时，则在网页中显示提示信息。下限范围之内，当输入不在验证的范围内时，则在网页中显示提示信息。RegularExpressionValidator：又称正则表达式验证控件。确保用户输：又称正则表达式验证控件。确保用户输入信息匹配正则表达式指定的模式（由入信息匹配正则表达式指定的模式（由ValidationExpression属性指定），属性指定），例如，要验证用户输入的是否为例如，要验证用户输入的是否为E-mail地址，只要使用地址，只要使用E-mail的正则表的正则表达式来验证用户输入即可，若不符合，则在网页中显示提示信息。达式来验证用户输入即可，若不符合，则在网页中显示提示信息。CustomValidator：又称自定义验证控件。确保用户输入的内容符合：又称自定义验证控件。确保用户输入的内容符合自己创建的验证逻辑。自己创建的验证逻辑。ValidationSummary：又称错误总结控件。提供一个集中显示验证错：又称错误总结控件。提供一个集中显示验证错误信息的地方，将本网页中所有验证控件错误信息组织好并一同显示出误信息的地方，将本网页中所有验证控件错误信息组织好并一同显示出来。来。验证控件重要的属性验证控件重要的属性属性属性意义意义ControlToValidate正在验证的控件的正在验证的控件的ID。ErrorMessage验证失败时要显示的错误的文本。验证失败时要显示的错误的文本。【例例15.4】设计一个设计一个Web窗体，说明数据验证控件的使用方窗体，说明数据验证控件的使用方法。法。WebForm4控件类型控件类型ID属性属性Text属性属性其他属性其他属性TextBoxTextBox1空空TextBoxTextBox2空空TextMode：PasswordTextBoxTextBox3空空TextMode：PasswordTextBoxTextBox4空空ButtonButton1提交提交LabelLabel1空空控件类型控件类型ID属性属性ControlToValidateErrorMessageRequiredFieldValidatorRequiredFieldValidator1TextBox1姓名必须填写姓名必须填写RequiredFieldValidatorRequiredFieldValidator2TextBox2密码必须填写密码必须填写CompareValidatorCompareValidator1TextBox3两次密码不匹配两次密码不匹配RegularExpressionValidatorRegularExpressionValidator1TextBox4邮箱格式错误邮箱格式错误protectedvoidPage_Init(objectsender,EventArgse)Label1.Text=;protectedvoidButton1_Click(objectsender,EventArgse)if(Page.IsValid)/用户输入均有效用户输入均有效Label1.Text+=TextBox1.Text+;Label1.Text+=的密码为的密码为:+TextBox2.Text+;Label1.Text+=邮箱为邮箱为:+TextBox4.Text;运行界面运行界面15.5高级高级ASP.NET服务器端控件服务器端控件15.5.1AccessDataSource控件控件AccessDataSource控件（从控件（从SqlDataSource继承）是使继承）是使用用Access数据库的数据源控件。它可以连接到数据库的数据源控件。它可以连接到Access数据数据库，从中检索数据，并使得其他数据显示控件（如库，从中检索数据，并使得其他数据显示控件（如GridView等控件）可以绑定到该数据源。等控件）可以绑定到该数据源。使用使用AccessDataSource控件访问数据，只需要提供用于控件访问数据，只需要提供用于连接到数据库的连接字符串，并定义访问数据的连接到数据库的连接字符串，并定义访问数据的SQL语句语句或存储过程即可，运行时，或存储过程即可，运行时，AccessDataSource控件会自动控件会自动打开与数据库的连接，执行相应的打开与数据库的连接，执行相应的SQL语句或存储过程，语句或存储过程，完成数据访问后会自动关闭连接。完成数据访问后会自动关闭连接。15.5.2GridView控件控件GridView控件可以将多种不同数据源中的数据以表格的控件可以将多种不同数据源中的数据以表格的形式显示在页面中。这些数据源可以是数据库，也可以是形式显示在页面中。这些数据源可以是数据库，也可以是XML文件，还可以是公开数据的业务对象。文件，还可以是公开数据的业务对象。并且可以对这些数据进行编辑、删除，还可以很方便地并且可以对这些数据进行编辑、删除，还可以很方便地对数据进行分页、排序、选择操作。对数据进行分页、排序、选择操作。另外，另外，VisualStudio2005还为该控件提供名种套用格式，还为该控件提供名种套用格式，只需要简单的选择，就可以完成一个漂亮的页面。只需要简单的选择，就可以完成一个漂亮的页面。GridView控件控件:15.5.3DetailsView控件控件DetailsView控件在表格中显示数据源的单个记录，此表控件在表格中显示数据源的单个记录，此表格中每个数据行表示记录中的一个字段，使用它可以编辑、格中每个数据行表示记录中的一个字段，使用它可以编辑、删除和插入记录。删除和插入记录。GridView控件和控件和DetailsView控件的组合使用：控件的组合使用：