Web应用程序设计.ppt

《Web应用程序设计.ppt》由会员分享，可在线阅读，更多相关《Web应用程序设计.ppt（61页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第18章章Web应用程序设计应用程序设计 18.1 ASP.NET概述概述l2000年年ASP.NET 1.0正式发布正式发布l2003年年ASP.NET升级为升级为1.1版本版本l2005年发布年发布ASP.NET 2.0l2008年发布年发布ASP.NET 3.5l2010年发布年发布ASP.NET 4.0l2012年发布年发布ASP.NET 4.5l18.1.1 ASP.NET18.1.1 ASP.NET的发展历程的发展历程18.1.2 ASP.NET18.1.2 ASP.NET网页的组成网页的组成 在在ASP.NET网页中，用户的编程工作分为两个部分：网页中，用户的编程工作分为两个部

2、分：可视元素和逻辑。可视元素和逻辑。l可视元素可视元素由一个包含静态标签（例如由一个包含静态标签（例如HTML或或ASP.NET服务器控件或两者）的文件组成。服务器控件或两者）的文件组成。ASP.NET网页用作要显示的静态文本和控件的容器。网页用作要显示的静态文本和控件的容器。lASP.NET网页的逻辑网页的逻辑由代码组成，这些代码由用户创由代码组成，这些代码由用户创建与页进行交互。代码可以驻留在页的建与页进行交互。代码可以驻留在页的script块中或者块中或者单独的类中。如果代码在单独的类文件中，则该文件单独的类中。如果代码在单独的类文件中，则该文件称为称为“代码隐藏代码隐藏”文件。代码隐藏

3、文件中的代码在本文件。代码隐藏文件中的代码在本书中使用书中使用C#来编写。来编写。ASP.NET页面作为代码在服务器上运行。因此，要得到页面作为代码在服务器上运行。因此，要得到处理，页面必须配置为当使用者触发交互时提交到服务器。处理，页面必须配置为当使用者触发交互时提交到服务器。每次页面都会传回服务器，以便再次运行其服务器代码，然每次页面都会传回服务器，以便再次运行其服务器代码，然后向使用者呈现其自身的新版本。后向使用者呈现其自身的新版本。18.1.3 ASPNET18.1.3 ASPNET网页的运行方式网页的运行方式注意注意与与Windows窗体运行的区别！窗体运行的区别！18.1.4 AS

4、P.NET18.1.4 ASP.NET网页代码编写模型网页代码编写模型 ASP.NET提供两种代码编写模型：单文件页模型和代提供两种代码编写模型：单文件页模型和代码隐藏页模型。这两个模型功能相同，在两种模型中可以码隐藏页模型。这两个模型功能相同，在两种模型中可以使用相同的控件和代码。使用相同的控件和代码。1.单文件页模型单文件页模型 在单文件页模型中，页的标记及其编程代码位于同一在单文件页模型中，页的标记及其编程代码位于同一个个.aspx文件中。文件中。编程代码位于编程代码位于script块中，该块包含块中，该块包含runat=server属性，此属性将其标记为属性，此属性将其标记为ASP.N

5、ET应执行的代码。应执行的代码。2.代码隐藏页模型代码隐藏页模型 通过代码隐藏模型，可以在一个文件（通过代码隐藏模型，可以在一个文件（.aspx）中保留）中保留标记，并在另一个文件中保留编程代码。标记，并在另一个文件中保留编程代码。代码文件的名称会根据所使用的编程语言而有所变化。代码文件的名称会根据所使用的编程语言而有所变化。这种模型的优点是可以清楚地分隔标记（这种模型的优点是可以清楚地分隔标记（HTML代码）和代代码）和代码（程序代码），适用于包含大量代码或多个开发人员共同码（程序代码），适用于包含大量代码或多个开发人员共同创建网站的创建网站的Web应用程序，便于程序的维护和升级。应用程序，

6、便于程序的维护和升级。18.2 创建一个简单的创建一个简单的Web应用程序应用程序 【例例18.1】创建一个创建一个Web窗体窗体WebForm1，根据用户输，根据用户输入入Access数据库名称（在网站主目录的数据库名称（在网站主目录的App_Data文件夹中文件夹中查找该数据库文件）连接到该数据库。查找该数据库文件）连接到该数据库。解：解：操作步骤如下：操作步骤如下：启动启动Visual Studio 2012，选择，选择“文件文件|新建新建|网站网站”命命令，打开令，打开“新建网站新建网站”对话框，选择对话框，选择“Visual C#”语言语言（默认值），在中间（默认值），在中间“己安装

7、的模板己安装的模板”列表框中选择列表框中选择“ASP.NET Web窗体网站窗体网站”，在，在“Web位置位置”下拉列表中选下拉列表中选择择“文件系统文件系统”（默认值），单击（默认值），单击“浏览浏览”按钮选择按钮选择“D:C#程序程序ch18”文件夹（存放网站的位置），如图文件夹（存放网站的位置），如图18.2所示，这样将创建了一个名称为所示，这样将创建了一个名称为ch18的的Web项目。项目。l文件系统文件系统：表示建立文件系统网站，此时在文件系统：表示建立文件系统网站，此时在文件系统网站中，可以在任何所需的文件夹中创建和编辑文件，网站中，可以在任何所需的文件夹中创建和编辑文件，其位置可

8、以在本地计算机上或是在通过网络共享访问其位置可以在本地计算机上或是在通过网络共享访问的另一台计算机上的文件夹中，无须在计算机上执行的另一台计算机上的文件夹中，无须在计算机上执行 IIS，但可以发布到一个，但可以发布到一个HTTP网站。网站。lHTTP：表示创建从其他计算机访问的网站，必须具有：表示创建从其他计算机访问的网站，必须具有管理员权限才能创建或调试管理员权限才能创建或调试IIS网站。网站。lFTP：表示创建：表示创建FTP服务器，可以依照服务器，可以依照FTP协议提供服协议提供服务。务。单击单击“确定确定”按钮，系统自动在指定的位置创建一个网按钮，系统自动在指定的位置创建一个网站，包含

9、一系列的文件夹和文件，如站，包含一系列的文件夹和文件，如App_Data文件夹用于存文件夹用于存放数据，这里可以将第放数据，这里可以将第15章的章的school.accdb文件复制到该文件文件复制到该文件夹中。夹中。并自动生成一个名称为并自动生成一个名称为Default.aspx的的Web窗体文件（通常窗体文件（通常作为网站的主页），首先出现该作为网站的主页），首先出现该Web窗体的代码窗口，如图窗体的代码窗口，如图18.3所示。所示。Default.aspx网页是自动采用系统母版页创建的，看上网页是自动采用系统母版页创建的，看上去比较复杂，这里新建一个去比较复杂，这里新建一个Web窗体窗体W

10、ebForm1。其步骤是：其步骤是：选择选择“网站网站|添加新项添加新项”命令，出现如图命令，出现如图18.4所示的对话框，所示的对话框，选中选中“Web窗体窗体”，修改名称为，修改名称为“WebForm1.aspx”，不勾选右，不勾选右下方下方“选择母版页选择母版页”，单击，单击“添加添加”按钮。按钮。进入进入WebForm1窗体的设计界面，单击中部下方的窗体的设计界面，单击中部下方的 按钮，切换到按钮，切换到Web窗体设计模式，从窗体设计模式，从“工具箱工具箱”中拖动控件中拖动控件进行设计，进行设计，。该。该Web窗体的设计界面如图窗体的设计界面如图18.5所示。所示。在在Web窗体设计模

11、式中双击窗体设计模式中双击Button1控件，出现代码控件，出现代码编辑窗口，在引用部分添加以下语句：编辑窗口，在引用部分添加以下语句：using System.Data.OleDb;设计该命令按钮的单击事件过程如下：设计该命令按钮的单击事件过程如下：protected void Button1_Click(object sender,EventArgs e)string mystr;OleDbConnection myconn=new OleDbConnection();mystr=Provider=Microsoft.ACE.OLEDB.12.0;Data Source=+Server.M

12、apPath(App_Data)+TextBox1.Text;myconn.ConnectionString=mystr;myconn.Open();if(myconn.State=System.Data.ConnectionState.Open)Label2.Text=成功连接到成功连接到Access数据库数据库;else Label2.Text=不能连接到不能连接到Access数据库数据库;myconn.Close();该窗体设计完成。单击中部下方的该窗体设计完成。单击中部下方的 按钮可以看到上按钮可以看到上述设计对应的源程序。述设计对应的源程序。单击工具栏的单击工具栏的 按钮或按按钮或按

13、F5键执行键执行Web窗体。窗体。第一次执行时将有提示对话框出现，其界面如图第一次执行时将有提示对话框出现，其界面如图18.7所示。所示。18.3 基本基本ASP.NET服务器控件服务器控件1.什么是服务器控件什么是服务器控件 服务器控件都包含在服务器控件都包含在ASP.NET页面中。当运行页面时，页面中。当运行页面时，ASP.NET引擎将根据控件对象和程序逻辑完成一定的功能。引擎将根据控件对象和程序逻辑完成一定的功能。根据服务器控件定义方式，可分为根据服务器控件定义方式，可分为HTML服务器控件、服务器控件、Web标准服务器控件和自定义服务器控件：标准服务器控件和自定义服务器控件：服务器控件

14、概述服务器控件概述2.服务器控件的属性、方法和事件服务器控件的属性、方法和事件常用属性常用属性说明说明ID控件标识控件标识Font-Bold字体是否为粗体字体是否为粗体Font-Italic字体是否为斜体字体是否为斜体Font-Name字体名字体名Font-Size字体大小字体大小Text控件上显示的文本控件上显示的文本Visible控件是否显示控件是否显示BackColor控件的背景色控件的背景色ForeColor控件的前景色控件的前景色常用方法常用方法说明说明DataBind完成数据绑定完成数据绑定Focus获得焦点获得焦点GetType获取当前实例的类型获取当前实例的类型常用事件常用事件

15、说明说明DataBinding当一个控件上的当一个控件上的DataBind方法被调用并且该控件被绑定到方法被调用并且该控件被绑定到一个数据源时触发该事件。一个数据源时触发该事件。Init控件被初始化时触发该事件。控件被初始化时触发该事件。Load控件被装入页面时触发该事件。在控件被装入页面时触发该事件。在Init后发生。后发生。Unload从内存中卸载时触发该事件。从内存中卸载时触发该事件。3.服务器控件的相关操作服务器控件的相关操作（1）向页面中添加服务器控件）向页面中添加服务器控件 可以通过以下可以通过以下3种方法添加服务器控件。种方法添加服务器控件。双击实现添加控件双击实现添加控件：在：

16、在Web页面上，把光标停留在要添加控件的页面上，把光标停留在要添加控件的位置上。在工具箱中找到想要添加的服务器控件然后双击，服务位置上。在工具箱中找到想要添加的服务器控件然后双击，服务器控件就会呈现在器控件就会呈现在Web页面上光标停留的位置。页面上光标停留的位置。拖曳实现添加控件拖曳实现添加控件：在工具箱中找到想要添加的控件，然后拖曳：在工具箱中找到想要添加的控件，然后拖曳到到Web页想要添加控件的位置上。页想要添加控件的位置上。使用代码添加控件使用代码添加控件：还可以通过添加代码来实现添加控件。用户：还可以通过添加代码来实现添加控件。用户可以在可以在HTML视图下，在想要添加控件的位置输入

17、相应控件的代视图下，在想要添加控件的位置输入相应控件的代码。码。（2）删除页面中服务器控件）删除页面中服务器控件 删除页面中的控件有两种方法：一种方法是选中该控件，删除页面中的控件有两种方法：一种方法是选中该控件，按键盘上的按键盘上的Delete键；键；另一种方法是选择该控件并单击鼠标右键，在弹出的快另一种方法是选择该控件并单击鼠标右键，在弹出的快捷菜单中选择捷菜单中选择“删除删除”命令。命令。Label服务器控件服务器控件提供了一种以编程方式设置提供了一种以编程方式设置 Web 窗体窗体页中文本的方法，这些文本在页面上是静态的；用户无法页中文本的方法，这些文本在页面上是静态的；用户无法编辑。

18、还可以将编辑。还可以将 Label 控件的控件的Text属性绑定到数据源，以在属性绑定到数据源，以在页面上显示数据库信息。页面上显示数据库信息。Button服务器控件服务器控件通过用户操作完成特定工作和事务逻通过用户操作完成特定工作和事务逻辑。其常用的事件有辑。其常用的事件有Click（在单击（在单击Button控件时触发）。控件时触发）。TextBox服务器控件服务器控件为用户提供了一种向为用户提供了一种向Web窗体输入窗体输入信息（包括文本、数字和日期）的方法。通过对信息（包括文本、数字和日期）的方法。通过对TextBox的的TextMode属性进行设置可以得到不同的属性进行设置可以得到不

19、同的TextBox。另外，当。另外，当用户更改用户更改TextBox的文本时触发的文本时触发TextChanged事件。事件。LabelLabel、ButtonButton和和TextBoxTextBox控件控件DropDownList（下拉列表框）服务器控件允许用户（下拉列表框）服务器控件允许用户从预定义列表中选择某一项，其项列表在用户单击下拉列从预定义列表中选择某一项，其项列表在用户单击下拉列表以前一直保持隐藏状态。表以前一直保持隐藏状态。DropDownListDropDownList控件控件【例例18.2】设计一个设计一个Web窗体，当用户从下拉列表中选窗体，当用户从下拉列表中选择学生

20、姓名和班号时，程序将用户选择的学生姓名和班号择学生姓名和班号时，程序将用户选择的学生姓名和班号显示出来。显示出来。WebForm2事件过程：事件过程：protected void Page_Init(object sender,EventArgs e)OleDbConnection myconn=new OleDbConnection();myconn.ConnectionString=Provider=Microsoft.ACE.OLEDB.12.0;Data Source=+Server.MapPath(App_Data)+school.accdb;OleDbCommand mycmd=n

21、ew OleDbCommand(SELECT 姓名姓名 FROM student,myconn);myconn.Open();OleDbDataReader myreader=mycmd.ExecuteReader();DropDownList1.DataSource=myreader;DropDownList1.DataTextField=姓名姓名;DropDownList1.DataBind();/上面的绑定在调用该方法时才执行上面的绑定在调用该方法时才执行 OleDbCommand mycmd1=new OleDbCommand(SELECT distinct 班号班号 FROM stu

22、dent,myconn);OleDbDataReader myreader1=mycmd1.ExecuteReader();DropDownList2.DataSource=myreader1;DropDownList2.DataTextField=班号班号;DropDownList2.DataBind();/上面的绑定在调用该方法时才执行上面的绑定在调用该方法时才执行 myreader.Close();myreader1.Close();myconn.Close();Label3.Text=;protected void Button1_Click(object sender,EventAr

23、gs e)Label3.Text=学生学生+DropDownList1.Text+属于属于+DropDownList2.SelectedValue +班班;运行界面运行界面CheckBoxCheckBox、CheckBoxListCheckBoxList、RadioButtonRadioButton和和RadioButtonListRadioButtonList控件控件 CheckBox（复选框）和（复选框）和CheckBoxList（复选框组）服（复选框组）服务器控件为用户提供了一种在真务器控件为用户提供了一种在真/假、是假、是/否或开否或开/关选项之间关选项之间切换的方法。前者包含一个复选

24、框，后者是由一组复选框组切换的方法。前者包含一个复选框，后者是由一组复选框组成。成。RadioButton（单选按钮）和（单选按钮）和RadioButtonList（单选按（单选按钮组）服务器控件允许用户从一个预定义的选项中选择一项。钮组）服务器控件允许用户从一个预定义的选项中选择一项。设置设置RadioButtonList控件的项控件的项设置设置CheckButtonList控件的项控件的项 【例例18.3】设计一个设计一个Web窗体，用户可以选择学生相窗体，用户可以选择学生相关信息并提交。关信息并提交。WebForm3事件过程：事件过程：protected void Button1_Cli

25、ck(object sender,EventArgs e)string result=;/判断性别判断性别 if(RadioButton1.Checked)result+=性别：女性别：女;/为屏幕换行为屏幕换行 else result+=性别：男性别：男;/判断年龄判断年龄 if(RadioButtonList1.SelectedItem!=null)result+=年龄：年龄：+;/读取爱好信息读取爱好信息 if(CheckBoxList1.SelectedIndex -1)result+=爱好：爱好：;for(int i=0;i=-1;i+)if(CheckBoxList1.Itemsi

26、.Selected)result+=CheckBoxList1.Itemsi.Text+ result+=;/是否接受邮件信息是否接受邮件信息 if(CheckBox1.Checked)result+=该生是三好生该生是三好生;Label1.Text=result;运行界面运行界面 在在ASP.NET中，提供了以下中，提供了以下6种数据验证控件（它们位种数据验证控件（它们位于于“工具箱工具箱”的的“验证验证”部分，可以拖放到窗体上）。部分，可以拖放到窗体上）。数据验证控件数据验证控件 RequiredFieldValidator：又称非空验证控件。确保用户在：又称非空验证控件。确保用

27、户在 Web 窗体页上输入数据时不会跳过必填字段，也就是说，检查被验窗体页上输入数据时不会跳过必填字段，也就是说，检查被验证控件的输入是否为空，如果为空，则在网页中显示提示信息。证控件的输入是否为空，如果为空，则在网页中显示提示信息。CompareValidator：又称比较验证控件。将用户的输入与常数：又称比较验证控件。将用户的输入与常数值（由值（由ValueToCompare属性指定）、另一个控件（由属性指定）、另一个控件（由ControlToCompare属性指定）的属性值进行比较，若不相同，属性指定）的属性值进行比较，若不相同，则在网页中显示提示信息则在网页中显示提示信息。RangeV

28、alidator：又称范围验证控件。确保用户输入的值在指定：又称范围验证控件。确保用户输入的值在指定的上下限范围之内，当输入不在验证的范围内时，则在网页中的上下限范围之内，当输入不在验证的范围内时，则在网页中显示提示信息。显示提示信息。RegularExpressionValidator：又称正则表达式验证控件。确保用户：又称正则表达式验证控件。确保用户输入信息匹配正则表达式指定的模式（由输入信息匹配正则表达式指定的模式（由ValidationExpression属性属性指定），例如，要验证用户输入的是否为指定），例如，要验证用户输入的是否为E-mail地址，只要使用地址，只要使用E-mail

29、的正则表达式来验证用户输入即可，若不符合，则在网页中显示的正则表达式来验证用户输入即可，若不符合，则在网页中显示提示信息。提示信息。CustomValidator：又称自定义验证控件。确保用户输入的内容符合：又称自定义验证控件。确保用户输入的内容符合自己创建的验证逻辑。自己创建的验证逻辑。ValidationSummary：又称错误总结控件。提供一个集中显示验证错：又称错误总结控件。提供一个集中显示验证错误信息的地方，将本网页中所有验证控件错误信息组织好并一同显误信息的地方，将本网页中所有验证控件错误信息组织好并一同显示出来。示出来。验证控件重要的属性验证控件重要的属性属性属性意义意义Cont

30、rolToValidate正在验证的控件的正在验证的控件的 ID。ErrorMessage验证失败时要显示的错误的文本。验证失败时要显示的错误的文本。【例例18.4】设计一个设计一个Web窗体，说明数据验证控件的使窗体，说明数据验证控件的使用方法。用方法。WebForm4ID属性属性Text属性属性其他属性其他属性TextBox1空空TextBox2空空TextMode：PasswordTextBox3空空TextMode：PasswordTextBox4空空Button1提交提交Label1空空ID属性属性ControlToValidateErrorMessage其他属性其他属性Requir

31、edFieldValidator1TextBox1姓名必须填写姓名必须填写RequiredFieldValidator2TextBox2密码必须填写密码必须填写CompareValidator1TextBox3两次密码不匹配两次密码不匹配ControlToCompare：TextBox2RegularExpressionValidator1 TextBox4邮箱格式错误邮箱格式错误ValidationExpression：Internet电子邮件地址电子邮件地址 只要网页中有一个验证控件没有通过验证，则只要网页中有一个验证控件没有通过验证，则Page.IsValid为为False（自动设置）。

32、（自动设置）。protected void Page_Init(object sender,EventArgs e)Label1.Text=;protected void Button1_Click(object sender,EventArgs e)if(Page.IsValid)/用户输入均有效用户输入均有效 Label1.Text+=TextBox1.Text+;Label1.Text+=的密码为的密码为:+TextBox2.Text+;Label1.Text+=邮箱为邮箱为:+TextBox4.Text;运行界面运行界面18.3.6 18.3.6 链接控件链接控件在在ASP.NET中，

33、链接控件主要有：中，链接控件主要有：LinkButton：链接按钮控件。：链接按钮控件。ImageButton：图像按钮控件。：图像按钮控件。HyperLink：超链接控件。：超链接控件。【例例18.5】设计一个设计一个Web窗体窗体WebForm5，其中放置有，其中放置有LinkButton1、ImageButton1和和HyperLink1等控件，单击等控件，单击时分别转向时分别转向WebForm2、WebForm3和和WebForm4网页。网页。将将LinkButton1控件的控件的PostBackUrl属性指定为属性指定为“/WebForm2.aspx”，Text属性设置为属性设置为“

34、转向转向WebForm2”。将将ImageButton1控件的控件的ImageUrl属性指定为属性指定为“/images/pic.jpg”，PostBackUrlt属性指定为属性指定为“/WebForm3.aspx”。将将HyperLink1控件的控件的NavigateUrl属性指定为属性指定为“/WebForm4.aspx”，Text属性设置为属性设置为“转向转向WebForm4”。设计：设计：运行：运行：单击某个链接单击某个链接 转向相应的网页转向相应的网页18.4 高级高级ASP.NET服务器端控件服务器端控件 SqlDataSource控件是使用数据库的数据源控件。它可控件是使用数据库

35、的数据源控件。它可以连接到以连接到Access数据库或数据库或SQL Server数据库等，从中检索数据库等，从中检索数据，并使得其他数据显示控件（如数据，并使得其他数据显示控件（如GridView等控件）可等控件）可以绑定到该数据源。以绑定到该数据源。18.4.1 SqlDataSource18.4.1 SqlDataSource控件控件配置配置SqlDataSource控件的过程控件的过程 在完成了在完成了SqlDataSource控件配置后，可以与某个数控件配置后，可以与某个数据绑定控件进行绑定。据绑定控件进行绑定。GridView控件可以将多种不同数据源中的数据以表格的控件可以将多种不

36、同数据源中的数据以表格的形式显示在页面中。这些数据源可以是数据库，也可以是形式显示在页面中。这些数据源可以是数据库，也可以是XML文件，还可以是公开数据的业务对象。文件，还可以是公开数据的业务对象。并且可以对这些数据进行编辑、删除，还可以很方便地并且可以对这些数据进行编辑、删除，还可以很方便地对数据进行分页、排序、选择操作。对数据进行分页、排序、选择操作。另外，另外，Visual Studio还为该控件提供名种套用格式，只还为该控件提供名种套用格式，只需要简单的选择，就可以完成一个漂亮的页面。需要简单的选择，就可以完成一个漂亮的页面。GridViewGridView控件控件GridView控件控件一种数据绑定控件一种数据绑定控件GridView控件控件:DetailsView控件在表格中显示数据源的单个记录，此控件在表格中显示数据源的单个记录，此表格中每个数据行表示记录中的一个字段，使用它可以编表格中每个数据行表示记录中的一个字段，使用它可以编辑、删除和插入记录。辑、删除和插入记录。DetailsViewDetailsView控件控件DetailsView控件控件一种数据绑定控件一种数据绑定控件GridView控件和控件和DetailsView控件的组合使用：控件的组合使用：多个记录操作多个记录操作单个记录操作单个记录操作插入新记录插入新记录 本课程结束本课程结束