任务2. 5 验证用户注册信息
(2)Web服务器控件的公共属性
所有Web控件实质都是对象,具有对象的所有特征,拥有自身的属性、方法和事件。它们由.NET框架预先定义,是ASP.NET中功能强大的面向对象编程单元。所有Web控件都继承于System.Web.UI.Controls的公共基类。而且,这些Web控件之间也存在相互的继承层次关系,因此,其很多属性和方法都是相同或相近的,相对而言,公共属性较多,而公共方法较少,使得Web控件具有统一的外观风格,Web控件的公共属性见表2.2。
表2.2 Web控件的公共属性
大多数ASP.NET服务器控件事件都要求到服务器进行处理,因此事件的处理过程需要一个远程的客户端—服务器的往返行程,对服务器资源和网络资源有一定的耗费,特别是在资源不足的情况下,会影响用户浏览网页的体验。因此,Web控件仅提供有限的一组事件,通常仅限于Click类型事件和Change类型事件。例如,Button按钮控件在用户单击时会引发Click事件,DropDownList下拉列表控件重新选择时会引发Change事件。
控件自身具备生命期,会在每个处理步骤引发生命期事件,如Init、Load和PreRender、DataBinding等事件。同样的,页面被封装为一个Page对象,也能引发生命期事件。一般而言,对网页的生命期事件编程较多,对控件的生命期事件则编程较少。
某些Web控件的Click事件会导致页面表单立即提交给服务器,如按钮控件。考虑到资源原因,这些即时回传的控件和事件数量都比较有限;而其他事件如Change事件不会导致页面立即回传,这些事件会延迟到下一次提交服务器时一起引发。
ASP.NETWeb窗体页和Web控件的事件遵循.NET框架提供的标准事件处理模式。所有事件都传递两个参数:表示引发事件的Object类型的目标对象,以及包含任何事件特定信息的EventArgs类型参数对象,例如某个按钮的事件处理方法为:
(3)Label、TextBox和Button控件
1)标签控件(Label)
标签控件主要用于静态或动态地显示提示信息文本,不能接受用户输入。
①HTML标记
也可以等价表示为:
该等价形式就是将成对标记的反标记用“/”进行简写,如果是单标记,也可加“/”保持格式的统一,与不加“/”的单标记完全等价,其他Web控件也有相同形式的简化表示,在介绍其他Web控件时就不再赘述。
上述HTML标记指示了一个标签控件,该控件的ID为Label1,runat=“server”表示需要在服务器端进行处理,控件上显示的内容为“姓名”二字。
②常用属性、方法、事件
a.ID属性:唯一标识该控件,用于对控件编程时引用,默认值为Label之后加上数字序号(从1开始)。
可以通过Visual Stdio集成开发环境的属性窗口修改ID属性的值,例如将“Label1”修改为lb_Name,以便识别。
b.Text属性:设置显示在控件上的文本信息,例如上述HTML标记中的“姓名”就是Text属性的属性值。Text属性的数据类型为String,对该属性可通过引用ID在编程时进行设置或读取,如:
2)文本框控件(TextBox)
文本框控件外观表现为一个输入框,主要用于接受用户的输入,同时也可以用于显示信息。
①HTML标记
上述HTML标记指示一个文本框控件,该控件的ID属性为TextBox1,runat=“server”表示需要在服务器端进行处理,控件中没有显示文本,是一个空的输入框。
②常用属性、方法、事件
A.常用属性
a.Text属性:设置或获取文本框的文本内容,数据类型也为String型,其他Web控件的Text属性(如果有)也同为String类型,以后不再赘述。当用来接受输入时,需要获取该属性值,当用于输出信息时,需要设置属性值为显示的内容,例如:
b.TextM ode属性:设置文本框的行为模式,有如下几种模式:
SingleLine:单行模式。只能显示单行文本(默认)。
MultiLine:多行模式。能显示多行文本。
Password:密码模式。在该模式下,任何输入或待显示的文本用一串“·”密文替代。
c.MaxLength属性:设置文本框可输入的最大字符数目,超过该数目的字符将不能显示出来,用于设置密码、邮政编码一类具有特定格式的数据的长度。
d.ReadOnly属性:设置文本框是否只读。当值为true时,文本框只可显示信息,不允许输入和修改信息。
e.AutoPostBack属性:设置文本框事件发生后是否立即回传服务器,为false(默认)时,文本框触发的事件不会回传到服务器,因此为该控件编写的事件处理代码(如果有)不会被执行,需要等到其他即时回传服务器的事件发生时一起引发。
注意:按钮控件是一种典型的提交控件,它的Click事件总会立即触发提交服务器,因此,按钮控件不需要AutoPostBack属性来控制是否立即提交。当按钮控件被单击时,表单范围内的所有控件输入信息都会被提交,按钮控件的事件处理代码会立刻被执行。
f.DataBindings属性:设置文本框显示的一个数据来源(称为绑定),通常是绑定到某数据集中的某数据表中的某条记录的某字段,关于数据绑定的内容将在后面的项目中详述。
B.事件
TextChange事件:当文本框内的文本改变时触发该事件,在输入时,该事件的触发频率高,如果立即回传服务器,将消耗大量的服务器和网络资源,因此,该事件为非回传事件,即使将AutoPostBack属性设置为true,当文本框内的文本发生改变时也不会立即触发回传服务器,而是将消息缓存起来,等到下一次的立即提交发生时才会去执行事件处理代码。
3)按钮控件(Button)
按钮控件的主要功能就是用于向服务器提交网页的表单信息。
①HTML标记
上述HTML标记指示了一个按钮控件,ID属性为Button1,runat=“server”表示需要在服务器端进行处理(所有Web控件都相同,以后不再赘述),按钮控件上显示的文字为“提交”。
②常用属性、方法、事件
A.常用属性
Text属性:显示在按钮控件上的文本,用于说明按钮控件执行的功能,如“提交”“确定”“登录”等。
B.事件
Click事件:按钮控件被单击时触发该事件,一旦触发,会立即回传服务器,并执行服务器上的事件处理方法中的代码。按钮控件的功能就是提交表单范围内的所有信息,若Click事件发生后得不到任务响应,那对应的按钮控件就没有必要存在。
【任务实施】
登录框的实现步骤。
①打开VS 2008集成开发环境,选择“文件”→“新建”菜单,新建一个ASP.NET网站,选择网站存放的物理路径,并将站点命名为“Web_Task1”。此时会在“解决方案资源管理器”中生成两个文件:一个是默认的Web窗体页面文件,文件名为“Default.aspx”;另一个是Web页面文件对应的代码文件,文件名为“Default.aspx.cs”。
注意:Web窗体页面文件主要控制页面的显示效果,对应的代码文件实现逻辑功能。
②从“工具箱”面板的“HTML”栏目下,将一个Table Html表格控件加入“设计视图”状态下的Web窗体页面,进行简单布局,将对应的属性面板设置为5行2列,宽度为100%。表格的第1行合并成1个单元格,居中对齐,在单元格直接输入文本“用户登录”。
注意:HTML控件呈现为一些标准HTML标签,如Table Html控件加入窗体后就会在页面文件的HTML代码中增加1个<Table>标记。
③表格的第2行和第3行的第1列设置为右对齐,分别加入两个Label标签控件,ID属性保持默认,Text属性分别设置为“登录名”和“密码”。
④表格的第2行和第3行的第2列设置为左对齐,分别加入两个TextBox文本框控件,作为用户名和密码的输入框,ID属性分别设置为“tb_Userid”和“tb_Pwd”,将两个控件的Text属性的默认值清空,第2行密码框“Pwd”的TextMode属性设置为“Password”模式,以密文形式显示密码。
⑤将表格第4行合并为1个单元格后,居中对齐,加入一个Button按钮控件,ID属性设置为“btn_Login”,Text属性设置为“登录”。
⑥将表格的最后1行合并为1个单元格后,加入一个Label标签控件,用来显示登录成功与否的提示信息,ID属性为“lb_Msg”,前景色属性“ForeColor”设置为红色的RGB值,使提示信息文字的颜色为红色。
⑦最后,单击属性面板上方的“闪电”形状的按钮,切换到事件面板,事件面板会显示出按钮的所有事件,在Click事件后双击,会直接进入CS代码文件中,并主动生成按钮的事件处理方法btn_Login_Click(),在事件处理方法中代码如下:
注意:在上述过程中,也可双击按钮生成Click事件处理方法,这是一种快捷方式,在某Web控件上双击可以为该控件的重要事件(主要是Click或Change类型的事件)自动生成事件处理方法。
⑧单击Visual Studio 2008工具栏上的绿色箭头按钮或按快捷键“F5”启动调试运行,对程序进行调试后使程序正常运行。
⑨最后对执行流程解释如下:单击登录按钮,事件处理方法btn_Login_Click()会被执行,验证用户的输入是否与固定的用户名admin和密码admin888都一致。如果一致则验证成功,会在lb_Msg标签控件上显示出登录成功的提示信息“恭喜,登录成功!”,否则就在lb_Msg标签控件上显示登录失败的提示信息“抱歉,登录失败”。
【拓展与提高】
(1)Web应用程序的事件
ASP.NET应用程序事件分为服务器事件与客户端事件:服务器事件的发生和处理都在服务器端;客户端事件发生在客户端,需要回传至服务器端进行处理。由于ASP.NET应用程序的客户端事件基本都由Web控件触发,都需回传服务器进行处理,因此Web控件的事件较窗体控件的事件少得多。同时,ASP.NET还采取了一些措施,用来减少事件的回传:大多数Web控件都有AutoPostBack属性,如被设置为false,则该控件事件不会回传服务器;另外,ASP.NET提供了Web验证控件,当验证未能获通过时,回传也不会发生。
1)内部事件
Web控件仅仅提供了一组有限的关于鼠标操作的内部事件。对于按钮类的Web控件而言,主要为单击事件(Click),即控件被鼠标单击时触发;对于其他类的Web控件,通常表现为状态改变事件(Changed),当控件的输入或选择被改变时触发。减少事件数量能有效地减轻网络的负担,但降低了编程的灵活性,可以通过使用JavaScript事件进行一定的弥补。
2)回传与非回传事件
有些Web控件的客户端事件是能立即回传的,这种事件称为回传事件;有些Web控件的客户端事件不会立即回传的,它们会被缓存起来等待下一次集中提交,这种事件称为非回传事件。另外,多数Web控件的事件是否立即回传,还受到控件的AutoPostBack属性的控制,当该属性值为true时会立即回传,反之则不会立即回传。AutoPostBack的默认值是false,表示多数Web控件的事件默认情况下都不会立即回传,按钮类Web控件除外,这类控件根本就没有AutoPostBack属性,其功能就是要提交信息,因此,其点击事件总会被回传服务器。
3)反升事件
在某些Web控件(如GridView、DataList和Repeater等数据控件)内部还可以加入一些其他控件,这些控件内部的控件也拥有事件。如GridView控件内部可以添加按钮,当这些内部按钮被单击时,并不会独立触发自身的Click事件,这些内部控件的事件会被传送至GridView父控件,触发父控件的RowCommand的通用内部按钮点击事件,可以为该事件编写事件处理方法,该事件处理方法会通过参数向内部传递一些信息,通过参数可以判断具体是哪个内部控件触发的事件,类似于RowCommand的这类事件称为反升事件。
4)事件处理方法
若想利用某个Web控件的事件触发特定的动作,就需为该事件生成事件处理方法,并在方法内部编写处理代码。选中某个Web控件,切换到事件面板(在属性面板上部单击闪电标记按钮即可切换),事件面板中会列出该控件的所有可供编程的事件。在事件名后单击,就会在对应的.CS代码文件中自动生成事件处理方法的声明形式,大多数事件处理方法的声明为:
方法名为objectName_Event,其中,objectName是被触发了事件的Web控件的名称,Event是该控件的事件名称。方法的参数有两个:一个是sender,表示哪个Web控件被触发了事件;一个是e,包含了关于该事件的相关信息,e是一个EventArgs类对象,内部包含了一般事件相关的可用信息。
(2)可视化事件驱动编程
在“任务实施”部分的编程可以被称之为“可视化事件驱动”编程方式:“可视化”指编程过程中若干步骤都是直接在可视化界面下通过控件拖放和属性设置完成的;“事件驱动”指通过为控件的事件编写事件处理代码,当事件发生并引发回传服务器时,就会去执行这段逻辑代码,实现Web应用程序的交互性和功能性。
可以将“可视化事件驱动”编程分为用户界面制作和后台逻辑编程两大部分,实现步骤总结如下:
①新建Web窗体页面。
②在Web窗体中加入Web控件,这之前可能要进行页面布局,一旦控件加入Web页,就会在后台自动将控件类实例化,并创建控件对象。
③在属性面板中设置控件的外观属性和其他属性,这时将使用的控件作为对象的能力。
④在事件面板中为具有即时提交服务器能力的控件事件生成事件处理方法,进入后台代码文件后,在事件处理方法中添加具体的功能代码。
注意:学过VB的读者应该对这种编程方法有一定的认识,一些典型的Microsoft微软开发平台都提供了这样的编程方法,这种编程方法简单、直观,可以显著提高程序员的开发效率,使之前复杂的Web开发成为一件令人愉快的事情;这种编程方法的缺点是不够灵活。
(3)HyerLipnk、LinkButton与Image Button控件
本小节主要介绍几个与登录框的3个主要控件具有相近功能或外观的控件。
1)超链接控件(HyperLink)
超链接控件用于在Web窗体创建一个可跳转的文字或图片超链接。
①HTML标记
②常用属性、方法、事件
a.Text属性:设置超链接上显示的文本。
b.ImageUrl属性:如果是图片超链接,该属性设置超链接的图片来源Url地址。
c.NavigateUrl属性:设置超链接所跳转的Url地址。
d.Target属性:设置跳转的目标页的显示框架,有如下几种方式:
_blank:在没有框架的新窗口中显示链接页;
_parent:在直接框架集父级中显示链接页;
_self:在具有焦点的框架中显示链接页;
_top:在没有框架的完全窗口中显示链接页。
e.Tooltip属性:设置鼠标置于控件上时显示的提示信息。
③示例
使用超链接控件制作超链接,要求为:超链接为文字链接,链接文本显示为“网易”,跳转Url地址为:http://www.163.com,在新浏览器窗口中打开目标网页,Html代码如下:
注意:以上HTML代码并不需要人工编写,通过可视化拖放超链接控件和设置属性后,在代码模式视图中能得到这样的代码,不过,直接看懂Web控件对应的Html标记代码仍然是读者必备且有用的一项基本能力。
2)图片按钮控件(ImageButton)
图片按钮控件的功能同Button普通按钮控件,区别是图片按钮控件的外观为自定义的图片。
①HTML标记
②常用属性、方法、事件
仅列出与Button普通按钮控件不同的部分:
a.ImageUrL属性:作为按钮的自定义图片的URL来源地址。
b.AlternateText属性:按钮图片无法正常显示时出现的替代信息。
其他属性、方法、事件与Button普通按钮控件一致。
3)超链接按钮控件(LinkButton)
超链接按钮控件是外观样式与超链接相同而功能与普通按钮相同的按钮控件。
①HTML标记
②常用属性、方法、事件
仅列出与Button普通按钮控件略有不同的地方:
Text属性:按钮上显示的文本,以超链接样式的链接文本形式呈现。
其他属性、方法、事件与Button普通按钮控件一致。
注意:目前学习到的即时提交按钮控件共3种(也只有这3种),它们的功能完全相同,不同的只是每种按钮在网页上的显示外观,可以根据外观的需要进行任意选用。
【教学评价】
评价标准见表2.3。
表2.3任务2.1评价标准
续表
任务2. 2 制作图书信息搜索界面
【任务描述】
搜索功能同样是网上书店和大部分Web应用程序应具备的基本功能,目的是通过搜索,可以快速、方便地找到所需要的信息,在本任务中,提供按书名、作者、出版社作为关键词对书籍信息按书籍类型进行搜索的方式,图书信息搜索界面如图2.2所示。
图2.2图书信息搜索界面
本任务用DropDownList下拉列表控件提供对书籍类型的选择,书籍类型包括“图书”“教材”“音像”;使用3个成组的RadioButton单选按钮控件提供对关键字类型的选择;另外,要使RadioButton单选按钮控件实现多选一,可将它们放在一个Panel容器控件中,Panel容器控件在运行时不可见。除此之外,还用到了TextBox文本框控件和ImageButton图片按钮控件,它们的使用方法在前面制作登录框时已进行了详述。
下面,在实施任务之前,将分别对图书信息搜索界面所用到的DropDownList下拉列表控件和RadioButton单选按钮控件的属性、事件、方法和使用进行介绍。
【知识准备】
(1)DropDownList控件
DropDownList下拉列表控件的功能是下拉框弹出的方式提供一组选项供用户进行单选,是一种预设输入信息范围的输入方式。
1)HTML标记
2)常用属性、方法和事件
Item s属性:控件中选项的集合。
构建选项集合有可视化设置和后台编码两种方式,一种是使用ListItem集合编辑器编辑,用于集合中的选项在程序设计阶段就已经预知的情况;另一种是在事件处理方法中通过对控件进行编程实现,用于需要在程序运行阶段动态创建的情况。
①使用ListItem集合编辑器编辑选项
在DropDownList控件的对应属性窗口单击Items属性名右侧的浏览按钮,打开ListItem集合编辑器,如图2.3所示。
图2.3 ListItem集合编辑器
单击“添加”按钮向集合中加入选项,单击“移除”按钮删除集合中已加入的选项,当选中集合中的某一选项后,可以在右侧对应选项的“属性”列表中设置选项文本,例如“教材”,也可以设置某选项对应的预设值,该预设值可以在编程时直接读取。上下箭头按钮能够调整当前项在列表中的位置。单击“确定”完成对选项集合的编辑,单击“取消”放弃之前对选项集合的设置。
②通过编程对集合中的选项进行添加和移除
这需要用到Items属性内部的子方法,这说明该属性的类型是对象,因而该属性内部具有属性和方法。
a.Add方法可以向选项集合添加新项,该方法的参数为选项文本,如:
以上代码向控件DropDownList1追加一个新的“音像”选项。
b.RemoveAt方法可以从集合中移除一项,该方法的参数需要移除项的索引号,如:
以上代码从控件DropDownList1移除第1个选项。
c.Insert方法可以向集合中插入一项,该方法的第1个参数指明插入位置索引,第2个参数是插入的选项文本,如:
以上代码向控件DropDownList1在第二个选项前插入一个新的“教材”选项。
d.Clear方法清空集合中的所有选项,如:
以上代码清除控件DropDownList1中所有原来的选项。
e.Count属性获取集合中的选项总数目。
DataSource属性:控件选项信息列表来自的数据源,一般指定到一个数据集。
DataM ember属性:控件选项信息列表来自的数据表,是DataSource指定的数据集中的某个数据表。
DataTextField属性:控件选项信息列表所要绑定的数据表的文本字段,是DataMember指定的数据表中的某个文本字段。
例如,要将控件DropDownList1的选项列表绑定到数据集“dataSet1”中的数据表“member-Info”中的账号字段“accountID”,则需要在属性窗口或在代码文件中将DataSource属性设置为“dataSet1”,将DataMember属性设置为“memberInfo”,将DataTextField属性设置为“accountID”。
注意:上述3个属性结合使用将实现数据绑定操作,这部分内容将在后面的项目中进行详细讲解。
Selected Index属性:控件中被选中项的索引号。
Selected Item属性:控件中被选择的项,下拉列表控件中的选项也是一个控件,因此属于对象类型,具有自身的属性、事件和方法,它有一个常用的属性即Text属性,指该选项对应的项目文本。
例如:DropDownList1.SelectedItem.Text的值就是控件DropDownList1中被选中的那一项的项目文本。
注意:通过上述两个属性可以读取或设置控件被选中项的索引号和项目文本,从而提供默认输出和获取用户输入。
Selected IndexChanged事件:该事件在控件的选项发生改变后触发,它是Change类型的事件,通过设置控件的AutoPostBack属性控制事件发生后是否立即提交服务器。
(2)Panel容器控件
Panel容器控件一般称为面板控件,在Web窗体中为其他控件提供容器。放入面板容器控件的多个子控件和静态文本信息可以作为一个单元进行控制,例如使它们可见或不可见,或移动它们并且让它们的相对位置保持不变。使用面板控件时,首先将其添加到Web窗体,然后再在其内部添加其他子控件和静态文本。
1)HTML标记
2)常用属性、方法和事件
backimageUrl属性:控件背景图片的URL地址,可以为控件设置背景图片。
HorizontalAlign属性:指定子控件在面板控件内部的对齐方式,包括“左对齐”“右对齐”“居中对齐”和“两端对齐”。
W rap属性:控件内的内容是否自动换行,若设置为false则超出了控件范围的内容被自动截断。
Visible属性:设置控件是否可见,若设置为false则所有控件中的子控件和文本内容也不可见。
.Controls属性:面板控件内容的所有子控件构成的集合。
注意:除面板控件外,Web窗体页和后面将提及的PlaceHolder占位控件以及Table动态表格控件等都是容器类控件,它们都具备相同的特征,请读者自行归纳。
3)示例
可以在设计阶段通过属性窗口向控件内部添加子控件,也可以编程方式在运行时动态添加子控件,以下代码说明如何向控件内部动态添加其他子控件。
(3)RadioButton控件
RadioButton单选按钮控件用于在成组使用时实现多选一。即一组单选按钮控件同时只能有一个按钮被选中。外观呈现为一个小圆圈,被选中的单选按钮圆心变黑。
1)HTML标记
<asp:RadioButton id="RadioButton1"runat="server"Text="书名"></asp:RadioButton>
2)常用属性、方法和事件
Checked属性:控件的选中状态标志,值为true时选中,为false时未选中。例如:
if(RadioButton1.Checked){…}//获取控件的状态标志,进行判断
RadioButton1.Checked= true;//设置控件的状态标志为选中
Text属性:控件圆圈旁的说明文字。
TextAlign属性:指示Text放在控件圆圈的右边还是左边,默认值为右边(Right)。
GroupName属性:多个控件成组使用时的组名。
RadioButton单选按钮控件需要成组使用。组内的单选按钮具有互斥性,能实现多中选一。为此,需要将成组的每个单选按钮的GroupName组名属性设置为同名。如果在同一Web窗体页上需要使用多组单选按钮,则组内控件的GroupName属性值相同,组间控件的Group-Name属性不同。
CheckedChanged事件:控件的点选状态发生变化后触发。为控件选择状态发生改变后的处理代码应写在这个事件对应的处理函数中。
【任务实施】
制作搜索界面的步骤。
①在Visual Studio 2008中打开在任务1所建立的网站“Web_Task1”,选择“文件”→“新建”菜单,新建一个Web窗体页面。命名为“Search.aspx”,这时会自动生成名为“Search.aspx”的页面文件和名为“Search.aspx. cs”的代码文件。在“解决方案资源管理器”选中站点“Web_Task1”右键单击,新建一个目录,命名为“Icons”,找到网站的物理位置,将网上下载的一张小“搜索”按钮图片复制到“Icons”目录。
②在网上书店系统首页顶部区域实现搜索界面,拖动工具箱的HTML栏目下的静态Table控件到页面顶部,进行简单布局,在属性面板设置表格行和列属性为1行5列,宽度属性为100%。
③在第1行第1个单元格中直接输入文字“商品搜索:”。
④在第1行第2个单元格加入一个DropDownList下拉列表控件,在控件的属性窗口中,设置ID为“ddl_CataList”。单击Items属性右侧的浏览按钮,打开ListItem集合编辑器,添加3个项目,右部“属性”窗口中的Text属性分别为“图书”“音像”“教材”,各项的Value属性与Text属性相同,单击“确定”按钮关闭ListItem集合编辑器对话框。
⑤在第1行第3个单元格加入一个TextBox文本框控件,ID属性分别为“tb_Keys”,清除Text属性的默认值。
⑥在第1行第4个单元格加入一个ImageButton图片按钮控件,ID属性分别为“btn_Search”,单击ImageUrL图片源属性后面的浏览按钮,选择网站“Icons”目录下的“搜索”按钮图片,如果路径正确,按钮图片将在Web窗体页上显示出来,ImageUrL图片源属性值也将显示为按钮图片的相对Url路径。
⑦在第1行第5个单元格首先加入一个Panel面板控件,通过拖动调整大小,其他属性保持默认,然后在其内部加入3个成组的RadioButton单选按钮控件,ID属性分别为“rb_BookName”“rb_Author”“rb_Publisher”,Text属性分别为“书名”“作者”“出版社”,所有单选按钮控件GroupName属性都设置为“SearchMode”,单选按钮控件“rb_BookName”的Checked属性设置为true,使成为默认被选项,其他属性采用默认。
⑧在布局表格下面放置一个标签控件,用来显示提示信息,ID属性为“lb_Msg”,设置提示信息文字的颜色为红色。
⑨双击“btn_Search”图片按钮,自动切换到后台代码文件,并自动为图片按钮生成了事件处理方法btn_Search_Click(),添加如下代码:
⑩单击Visual Studio 2008工具栏上的绿色箭头按钮或按快捷键“F5”启动调试运行,对程序进行调试后使程序正确运行。
最后对执行流程解释如下:单击“搜索”图片按钮,执行事件处理方法SearchBtn_Click(),首先获取下拉列表中控件的用户所选的书籍类别,然后获取文本框中的用户输入的搜索关键字,再获取一组单选按钮中用户所选择的搜索类型。将这些信息显示在消息提示标签控件中,这样就实现了搜索功能的信息输入。真实的逻辑功能实现:以获取的书籍类别、搜索方式和搜索关键字作为查询条件,对后台图书信息数据表进行查询,并显示查询出来的相关书籍记录,查询数据库并显示的编程过程将在后面的项目中进行讲解。
【拓展与提高】
下面介绍一些与本任务所使用的主要Web控件相关或相近的Web控件。
(1)ListBox控件
ListBox列表框控件的功能与DropDownList下拉列表控件相似,同样是提供一系列的选项供用户选择,不过ListBox列表框控件除能实现单选外,也能实现一次选择多项。
相比于DropDownList下拉列表控件,ListBox控件是不可下拉也不能收缩的,选项列表直接显示在列表框中,控件外观如图2.4所示。
图2.4 ListBox控件
1)HTML标记
2)常用属性、方法和事件
ListBox列表框控件与DropDownList下拉列表控件大多数的属性、方法和事件是相同的,下面仅简单地介绍有区别的部分。
SelectionM ode属性:列表框的选择模式,值为Single(单选,默认)或Multiple(多选)。
采用单选模式时,SelectedIndex属性仍然指控件中被选项的索引号,SelectedItem.Text属性仍然指被选项的文本信息;采用多选模式时,这两个属性指控件中多个被选项中第一个被选项的索引号或文本信息。
为得到控件的多个选中项,一般使用循环依次检查Items集合中每一个选项对象的Selected属性,若为true则表示当前项被选中。
(2)PlaceHolder容器控件
PlaceHoder容器控件一般称为占位控件,用于事先在页面中保留一个可伸缩的位置,以便动态插入控件。PlaceHoder占位控件同Panel面板控件的差异在于,当两者内部都没有子控件时,Panel会在页面上占据它本身大小的区域,而PlaceHoder不占据任务区域,即对界面不会产生任何影响。
1)HTML标记
2)重要说明
一般情况下,不会使用PlaceHoder占位控件的属性、事件、方法,使它保持默认就行。
PlaceHoder占位控件可以称为一个半可视化控件,我们可以将其拖放到Web窗体页上,但是在设计阶段向其内部添加子控件必须在VS 2008的“代码视图”模式下,找到控件对应的Html标记,在正标记和反标记之间添加其他子控件标记。
也可以在代码文件中编程,实现运行时动态添加子控件,示例如下:
(3)RadioButtonList控件
RadioButtonList单选按钮列表控件可以被看作是一个单选按钮的集合。它内部有一个选项集合,这个特点类似于DropDownList下拉列表控件和ListBox列表框控件;集合中每一选项是一个单选按钮,这一特点又和RadioButton单选按钮控件产生关系。我们可以将这种具有复杂内部结构的控件对象称作复合控件。
1)HTML标记
2)常用属性、方法和事件
Item s属性:单选按钮列表控件内部的选项集合,类似于DropDownList控件和ListBox控件,在设计阶段可以通过ListItem集合编辑器进行编辑;也可以通过编程,实现运行时动态添加选项,Items属性也有自己的方法和属性,常用的是Add、Insert、RemoveAt、Clear方法和Count属性,对选项集合进行追加、插入、移除和清空操作。
实际上,这种类型的复合控件都提供了可视化的集合编辑器和能对集合进行操作的属性和方法,请读者在后面的学习中认真体会。
DataSource属性:要绑定的数据源,一般是一个数据集。
DataM ember属性:要绑定的数据源中的数据表。
DataTextField属性:要绑定到控件选项文本上的数据表的字段。
DaraValueField属性:要绑定到控件预设值上的数据表的字段。
注意:上述3个属性结合使用实现数据绑定操作,这部分内容将在后面的项目中进行详细讲解。
RepeatColumns属性:控件中作为选项的多个单选按钮布局的列数。
RepeatDirection属性:控件中作为选项的多个单选按钮布局的方向,分为垂直和水平两种。
TextAlign属性:指示文本在作为选项的单选按钮的左边还是右边。
注意:上述3个属性用来对作为选项的多个单选按钮的呈现进行布局。
Selected Index属性:被选中项的索引号。
SelectedValue属性:被选中项的预设值。
Selected Item属性:被选中的选项对象,通常使用该对象的下级属性Text,获取被选中项的选项文本。
注意:通过上述3个属性可以读取或设置控件被选中项的索引号、项目文本和预设值,从而提供默认输出和获取用户输入。
Selected IndexChanged事件:类似于DropDownList控件和ListBox控件,该事件在控件的选项发生改变后触发,通过设置控件的AutoPostBack属性控制事件发生后是否立即提交服务器。
3)使用RadioButtonList控件实现搜索界面
可以采用RadioButtonList控件实现单选按钮关键字类型多选一的功能,与之前任务实施区别如下:
①在第1行第5个单元格只需加入一个RadioButtonList控件,ID为“rbl_SearchMode”,RepeatColumns属性设置为“3”,分3列显示,RepeatDirection属性设置为“Horizontal”,水平布局一组单选按钮选项。
②单击RadioButtonList控件属性窗口中Items属性后的“…”浏览按钮,启动ListItem集合编辑器,单击“添加”按钮,添加第一项,右部“属性”窗口中的Text属性设置为“书名”,Value属性设置为“BookName”,selected属性设置为“true”。同样地添加第二项和第三项,Text属性分别设置为“作者”和“出版社”,Value属性分别设置为“Author”和“Publisher”,设置完成后,单击“确定”按钮关闭ListItem集合编辑器,界面效果与RadioButton控件实现的界面完全相同。
③在事件处理方法SearchBtn_Click()添加代码如下:
}
④单击Visual Studio 2008工具栏上的绿色箭头按钮或按快捷键“F5”启动调试运行,对程序进行调试后使程序正确运行。
⑤说明:与之前本任务的实现代码不同的是:直接使用RadioButtonList控件的SelectedValue属性就能获取关键字搜索类型,而不需要使用if…else if分支语句进行对每个单选按钮判断其是否被选中。使代码更加简洁,而效果完全相同,尤其是在单选按钮选项比较多的情况下。这就是RadioButtonList控件的优点所在,判别选中项特别方便。
【教学评价】
评价标准见表2.4。
表2.4任务2.2评价标准
任务2. 3 制作图书信息分类搜索界面
【任务描述】
信息搜索是网站系统最重要的功能,因此网站系统一般会提供多种搜索方式,另一种对书籍按类别进行搜索的方式被称为分类搜索。分类搜索将书籍划分为若干个类别,用户可以选择一个或几个分类,以便限定搜索范围,进行更加有效的搜索,分类搜索的界面如图2.5所示:
图2.5分类搜索功能
图2.5中用到了CheckBox多选框控件。该控件在页面上表现为一个小方框,用户在控件上单击可以改变控件的勾选状态,CheckBox控件在使用时允许任意勾选,控件之间没有互斥关系。下面对CheckBox多选框控件的属性、事件和方法进行讲解。
【知识准备】
CheckBox控件
1)HTML标记
2)常用属性、方法和事件
Checked属性:控件的选中状态,其值为true时已勾选,为false时未勾选,其属性有两种用法:
①获取这个属性值,判断用户是否是勾选了控件。例如:
②设置这个属性值,使控件被选中或去掉选中。例如:
或者
Text属性:方框边的说明性文字。
TextAlign属性:指示Text放在方框的右边还是左边,默认值为Right。
CheckBox控件同RadioButton控件的属性类似,不同之处是CheckBox控件没有Group-Name组名属性。原因是CheckBox控件允许多选,所以各个控件相互独立的勾选,不需要相同的组名。
CheckedChanged事件:勾选改变事件,当控件的勾选状态发生变化后触发该事件。
【任务实施】
①制作分类搜索界面的步骤如下:参照效果图,进行简单布局后,加入若干个CheckBox多选框控件和换行符,将这些CheckBox控件的Text属性分别设置为“理工A(数学物理力学天地生)”、……“农业”、“医药卫生”、“文史哲”、……“经济与管理”,其他属性采用默认。
②为搜索按钮的单击事件生成处理方法SearchBtn_Click(),输入如下代码:
③解释如下:通过条件分支语句判断某个分类是否被用户勾选,如被勾选则将该分类名称放入字符串变量CataNames中,用“|”分隔所选择的多个分类名称,以便进一步编程能将每个分类的名称单独分离出来。
④多选框的另一种使用方式也很常见,此时,多选框接收“是否”的判断信息,选中则表示“是”,未选中则表示“否”。在这种情况下,多选框经常嵌入数据控件中使用,数据控件将在后面的项目中介绍,如图2.6中的多选框控件,其主要用来表示后面的数据记录是否被选中,以便对所有被选中的数据记录进行批量操作,如“加入购物车”或“删除”等操作。
图2.6多选框表示“是否”选择对应的信息
【拓展与提高】
使用CheckBoxList控件
另一种能实现分类搜索功能的方式是使用CheckBoxList控件。CheckBoxList控件称为多选框列表控件,CheckBoxList控件同DropDownList和RadioButtonList控件一样,是一个集合控件,由多个选项对象构成,每一选项对象相当于一个CheckBox控件,选项对象的使用方式也基本和CheckBox控件相同。接下来就对CheckBoxList控件的属性、事件和方法进行讲解。
1)HTML标记
2)常用属性、方法和事件
Item s属性:表示CheckBoxList的所有选项对象集合。与DropDownList和RadioButtonList控件类似,可通过ListItem集合编辑器进行编辑,其编辑方法也与DropDownList和RadioButtonList控件相同。Items属性也有下一级的方法和属性,常用的几个是Add、Insert、RemoveAt、Clear方法和Count属性。这与DropDownList和RadioButtonList控件完全相同。
对Items属性的常用编程方法为:遍历Items集合中的每一项,检查各项的Selected属性是否为真就能获得用户勾选了哪些选项。
RepeatColumns属性:用于布局的列数。默认为一列布局,也可多列布局。
RepeatDirection属性:指定布局的方向。默认为Vertical(垂直布局),也可选择Horizontal(水平布局),以上两个属性也与RadioButtonList相同。
Selected IndexChanged事件:当控件的任一选项的勾选状态发生改变后触发该事件。注意:changed类型事件如需立即触发,必须将控件的AutoPostBack属性设置为True。
3)使用CheckBoxList控件实现任务
①与使用多个CheckBox控件的不同之处是:只需加入一个CheckBoxList控件,选中CheckBoxList控件,单击属性窗口中Items属性后面的“…”浏览按钮,弹出ListItem集合编辑器,单击“添加”按钮,添加第一项,窗口右部“杂项”中的Text属性设置为“理工A(数学物理力学天地生)”,Value属性设置为“理工A”。按该方法继续添加第二项、第三项直至最后一项,Text属性分别设置为“理工B(化学化工冶金环境矿业)”、“理工C(机电航空交通水利建筑能源)”、“农业”、“医药卫生”……“经济与管理”,Value属性分别设置为“理工B”、“理工C”、“农业”、“医药卫生”……“经济与管理”,设置完毕后单击“确定”按钮关闭ListItem集合编辑器。可以看到界面上横向排列着10个复选框,同多个CheckBox控件的界面效果几乎完全相同。
②在“搜索”按钮的点击事件处理方法SearchBtn_Click()中编写如下代码:
③与多个CheckBox控件实现分类搜索依次判断每个CheckBox控件的勾选状态不同的是:CheckBoxList控件通过循环遍历CheckBoxList控件Items集合中每一项,判断该项是否勾选,如勾选则将该项的类别信息(该信息被预存到了每一项的Value属性中)保存在CataNames字符串变量中。这样使代码更简洁,尤其是在书籍类别的数量比较多的情况下,而完成的功能是完全是一样的,这正是使用CheckBoxList控件的优势所在。
【教学评价】
评价标准见表2.5。
表2.5任务2.3评价标准
任务2. 4 图书封面图片的上传和显示
【任务描述】
网上书店系统应该使用户能够浏览到图文并茂的图书信息,以方便用户的选择和购买。一般情况下,除了提供图书的书名、作者等文字信息外,还应向用户展示图书的封面图片,如图2.7所示。
图2.7书籍信息的浏览
每一张封面图片只能用于一条图书信息,因此,在网上书店的后台图书发布页面发布新书信息时,还应该将该图书信息对应的封面图片文件一起上传到网上书店系统所在的服务器,如图2.8所示。
图2.8新书信息的后台发布
在以上任务中显示封面图片可以使用Image图片控件,上传文件(包括图片文件)可以使用FileUpload文件上传控件。下面就对Image控件和FileUpload控件的一些主要的属性、事件和方法进行学习。
【知识准备】
(1)Image图片控件
Image图片控件主要用来在页面上显示标准网络格式的图片,如JPEG、GIF和PNG格式等。
1)HTML标记
2)常用属性、方法和事件
ImageUrl属性:图片来源的全路径字符串(包括路径和文件名),该路径必须为Internet上使用的虚拟路径,即URL,可以是绝对路径或相对路径。虚拟路径的概念在前导的课程中已经介绍过。
ToolTip属性:当鼠标停留在图片控件上时显示的提示信息,用于对图片进行说明。
AlternateText属性:当控件的来源图片无法正确显示时,出现在控件位置的替代文本信息。
ImageAlign属性:来源图片在网页中显示时与其他网页对象的相互对齐方式,可以参考前面学习过的HTML中<img>标记的align对应属性所产生的效果。
以下示例说明了Image控件在网页中显示图书封面图片时对应的HTML页面代码。
Image图片控件的使用方法简单,只需在属性窗口或后台代码中设置主要属性即可,它的方法和事件很少用到,故在此不再赘述。
(2)FileUpload上传控件
FileUpload文件上传控件能实现各种文件(包括图片)的上传。它的外观显示为一个文本框和随后的一个浏览按钮,通过浏览按钮选择或直接在文本框中输入待上传的本地文件所在的路径。
1)HTML标记
2)常用属性、方法和事件
FileName属性:获取要上传的本地文件的文件名(不包含路径),该属性是只读属性,数据类型为String型。
HasFile属性:判断文件上传控件中是否有本地文件要上传。该属性是只读属性,数据类型为Boolean型,为true表示已经选择了上传的本地文件路径,通过该属性可以验证用户是否对该控件进行了正确的操作。
PostedFile属性:获取一个HttpPostedFile类的对象,该对象代表已经上传到网站服务器内存中的文件,该对象封装了文件从本地上传服务器的整个过程。当用户使用该对象时,一定要认识到此时文件已经上传到网站服务器而不是存放在本地。
该属性作为一个对象,具备自己的下一级属性和方法,常用的有:
ContentLength属性:获取上传文件的大小(以字节为单位),该属性是只读属性,数据类型为int型。
SaveAs方法:将上传到网站服务器内存中的文件保存到网站服务器的物理路径下,该方法的参数为网站服务器上预先规定的特定的物理路径字符串。
该控件的编程方法是在确认有本地文件上传时,调用控件的PostedFile属性对象的SaveAs方法,将上传文件保存到网站服务器的物理路径中,即能实现文件上传的整个过程。
3)控件的其他特点
FileUpload控件上传能力强大,网上有FileUpload控件与其他流行的上传组件的综合评测报告,评测结果显示FileUpload控件最适合上传不高于50M的文件,在这个容量范围内,FileUpload控件上传速度和稳定性都非常优秀。50 M的容量范围覆盖了大多数的文件类型,如文本类型、图片类型、flash动画、音频类型和小型的视频文件。FileUpload控件原本就属于ASP.NET技术的一项,在.NET平台上的使用方法非常简单。因此,在开发基于.NET平台的网站系统时特别适用。
使用FileUpload控件可以对上传文件的大小进行限制,只需在.NET网站应用系统的Webconfig配置文件的System.Web配置项添加以下信息:
Webconfig配置文件是一个纯粹的XML格式文件,maxRequestLength属性指明了网站系统支持的上传文件的最大容量,以KB为单位,默认值为4 096 KB(4 MB)。超过了maxRequest-Length属性规定的上传文件大小将会被拒绝服务,通过此限制使用户可以根据网站系统的实际需要和外部网络环境控制文件上传的效率和性能。
【任务实施】
①制作简化的后台新书发布页面,只发布书名、作者信息和上传封面图片文件,与示例图不同的是,在页面中放置一个Image图片控件用于封面图片的预览,只要封面图片文件上传成功,那么该控件就会将封面图片显示出来。页面的下部用一个发布按钮(或保存按钮)以触发新书信息的发布和封面图片的上传。将“书名”文本框、“作者”文本框和“发布”按钮的ID设置为tb_BookName、tb_Author和btn_Publish,将FileUpload控件和Image控件的ID设置为fu_BookCover和img_Preview。在网站系统根目录下建立子目录BookCovers,用于保存上传的所有图书封面图片,而上传图片的名称使用在客户端时的名称。
②为“发布”按钮的单击事件生成事件处理方法btn_Publish_Click(),在该方法中编写代码如下:
【拓展与提高】
Server对象
Server对象是一个可以直接使用的内部对象,Server对象代表当前网站系统所在的服务器,该对象使用户能访问一些网站服务器的信息、并能对网站服务器进行一些处理。Server对象没有外观,因此也没有HTML标记,请注意理解。
1)常用属性、方法和事件
MachineName属性:获取服务器的计算机名称。
M apPath方法:将虚拟路径转换成对应的网站服务器的物理路径。
Transfer方法:在网站服务器上终止当前页的执行,并开始执行新页,外部效果类似于网页之间的跳转。
2)获取服务器物理路径
在网站系统编程时,经常需要得到网站服务器上存放各项资源的物理路径,这时可以使用MapPath方法将已知的虚拟路径(容易获取)转换成网站服务器上的物理路径,如本任务中就用到了这种路径的转换。
【教学评价】
评价标准见表2.6。
表2.6任务2.4评价标准
任务2. 5 验证用户注册信息
【任务描述】
用户注册是大多数网站系统必需的功能,通过注册成为注册用户,享受网站系统只对注册用户开放的功能,与普通用户区别开来。各个网站系统的用户注册信息有所不同,但大多数都包含用户名、密码、Email地址等基本信息的注册,图2.9所示为典型的网上书店系统的注册页面。
图2.9网上书店注册页面
在该页面进行注册时,网站系统首先会对用户输入信息的基本格式进行验证,当用户输入的基本格式出错时,无需将信息发送到网站服务器,在本地就能直接验证出来,根据验证结果向用户显示错误提示信息,让用户输入正确格式的信息。
要实现用户注册信息格式的本地验证(不需传送信息到网站服务器),可以使用ASP.NET提供的验证控件,以下将对它们进行详细介绍。
【知识准备】
(1)验证控件概述
ASP.NET向用户提供了能检验多种格式正确性的验证控件,具体验证过程如下:当网页有提交发生时,网站系统首先启动验证控件的验证功能,各验证控件检验它所要验证的输入控件(文本框等)的内部数据格式是否正确,只有当页面上所有输入信息的格式都被验证正确后,该网页才会被提交至网站服务器端进行逻辑处理。
综上所述可以看出,ASP.NET是一种本地验证方式。事实上,信息的验证只有两种方式:一种是服务器端验证,即将信息传递到服务器由网站后台程序进行验证,此种方式要消耗宝贵的网络带宽资源和服务器的处理器及内存资源,特别是对于不涉及具体内容的输入信息的格式验证,此种方式效率较低;另一种方式是客户端验证,对于能直接检验出正确与否的输入信息的格式,就在本地进行验证并根据验证结果决定是否提交服务器,即能有效节省网络和服务器资源。本地验证的传统方式是使用JS脚本语言编程进行验证,但JS存在着代码暴露和各种浏览器版本不兼容的问题,虽然在W3C组织的大力推动下,JS有标准化的趋势,但就目前而言也仅仅是趋势。进行网站开发时一般将两种验证方式结合起来:将简单的格式性验证放在本地进行;将复杂的逻辑性验证放在网站服务器的后台进行。
ASP.NET验证控件是为在本地进行格式性验证而提供的,它能对输入控件(如TextBox)或选择控件(如ListBox、DropDownList、RadioButtonList等,广义上也可以认为是一种输入控件)中数据的空值、范围和格式进行验证,验证的是输入控件的Text属性和选择控件中被选中项的Value属性。另外,ASP.NET验证控件使用简单,通常只需简单地设置控件的几个属性就能完成以前需要编写复杂的JS脚本程序才能完成的验证工作,我们在完成前面的任务后也应该发现ASP.NET的其他控件或对象同样具有简单易用的特点,这正是ASP.NET网站开发效率高的主要原因所在。
ASP.NET提供了以下5种基本的验证控件和1个验证总结控件,这些控件的基本功能说明见表2.7。
表2.7验证控件功能说明
(2)RequiredFieldValidator控件
RequiredFieldValidator控件用于验证用户的输入是否为空,它可以说是最简单且使用最多的验证控件。
1)HTML标记
注意:以上是控件的HTML标记的简写形式。
2)常用属性、方法和事件
ControlToValidate属性:待验证的目标控件的ID,该控件既可为输入型控件也可为选择型控件。
ErrorM essage属性:验证失败时显示的详细错误信息,如果页面上有ValidationSummary验证总结控件,该信息会由验证总结控件统一显示;否则在Text属性值为空时,该信息显示在验证控件的位置。
Text属性:验证失败时显示的简略错误信息,该信息会在验证控件的位置显示出来,如果该属性未设置,验证控件的位置显示的是ErrorMessage属性中的信息。
说明:以上3个属性是验证控件的基本属性,也适用于其他验证控件。
3)实例
使用RequiredFieldValidator控件验证下拉列表框控件是否没有选中项,在控件位置显示为“*”,仅为了说明出错位置,具体的错误提示信息为“请选择一个国家!”,如果有验证总结控件,将在该控件中集中显示,当通过属性面板设置了相关属性后,对应的主要HTML代码如下:
(3)CompareValidator控件
CompareValidator验证控件验证两个输入控件中的数据的大小关系,两个输入控件中的第一个称为“待比较的控件”,第二个称为“待验证的控件”,实际上也就是验证“待验证的控件”的输入值与“待比较的控件”的输入值是否满足验证控件规定的大小关系;同时,它还能验证输入控件中数据的类型。
1)HTML标记
2)常用属性、方法和事件
除前面介绍过的3个基本属性外,控件的其他主要属性如下:
ControlToCompare属性:待比较的目标控件的ID,在比较两个控件的值的大小关系时需设置。
ValueToCompare属性:也可输入控件的值同某个常数值相比较,设置ValueToCompare属性指定要与输入控件进行比较的常数值。
Type属性:两个进行比较的输入值应具有相同的数据类型才能进行比较,该属性用于设置输入控件的数据类型。可以是以下数据类型中的一种:字符串类型(String)、整型(Integer)、浮点型(Double)、日期型(Date)、货币型(Currency)。
Operator属性:用于设置要执行的比较操作的类型,如果是进行数据类型检查,则设置为“DataTypeCheck”操作,可以是以下操作中的一种:
等于(Equal)、不等于(NotEqual)、(大于)GreaterThan、大于等于(GreaterThanEqual)、
小于(LessThan)、小于等于(LessThanEqual)、数据类型检查(DataTypeCheck)。
3)实例
①验证日期类型
在设置了相关属性后,主要HTML代码如下:
②比较两个输入控件的值
在设置了相关属性后,主要HTML代码如下:
(4)RangeValidator控件
RangeValidator验证控件用于验证输入值的范围是否正确,很多情况下输入的信息需要限制上限或下限,如工资的信息应大于零,出生日期的信息不能为当前日期之后的日期等。
1)HTML标记
2)常用属性、方法和事件
除前面介绍过的3个基本属性外,控件的其他主要属性如下:
M inimumValue属性:指定有效范围的最小值。
MaximumValue属性:指定有效范围的最大值。
Type属性:设置输入值的数据类型,在设置上下限时,先将输入值、上限和下限强制转换为该数据类型,且输入值、上限和下限应能够转化为该数据类型,否则报错。
3)实例
使用RangeValidator控件验证在文本框中输入的值是否介于1和10,设置了相关属性后,主要HTML代码如下:
(5)RegularExpressionValidator控件
RegularExpressionValidator验证控件用来验证输入值是否满足规定的特殊格式,这些特殊格式包括:电子邮件地址、邮政编码、身份证号码和电话号码等。
1)HTML标记
2)常用属性、方法和事件
除前面介绍过的3个基本属性外,控件的其他主要属性如下:
ValidationExpression属性:设置用于验证输入控件格式的正则表达式
3)正则表达式的设置
正则表达式的思想是用具有某种语法规则的表达式将特殊格式表示在该式子中,它的语法很复杂,这里不赘述。现在介绍一种可视化的设置方法,不需要人工编写正则表达式,对于一般情况的格式验证是足够的,步骤如下:
在RegularExpressionValidator验证控件的属性窗口单击ValidationExpression属性后的“…”浏览按钮,打开正则表达式编辑器,如图2.10所示。
图2.10正则表达式编辑器
在编辑器上部的标准表达式列表中选择某种特殊格式,常用的特殊格式如Internet URL、邮政编码都已经存在于列表中,选中一个特殊格式后,则下方的验证表达式文本框中会自动出现对应的正则表达式,单击“确定”按钮完成正则表达式的可视化设置。如果读者从其他途径学会了正则表达式的书写,可以直接将正则表达式写入ValidationExpression属性后面的编辑框中,而不需要打开正则表达式编辑器。
4)实例
使用RegularExpressionValidator控件来验证输入到文本框中的值是否为6位数字的邮政编码,在设置了相关属性后,主要HTML代码如下:
(6)Va l i da t ionSumma r y控件
ValidationSummary验证控件用于收集本页面所有的验证错误提示信息,并将它们按统一的格式集中显示出来,是页面所有验证信息的集中总结显示。这里需要强调通常的做法为:同时设置了页面所有验证控件的Text属性和ErrorMessage属性,Text属性中的信息提示出错位置,而ErrorMessage属性中的信息提示具体出错原因,并统一显示在验证总结控件中。
1)HTML标记
2)常用属性、方法和事件
除前面介绍过的3个基本属性外,控件的其他主要属性如下:
DisplayM ode属性:设置验证总结信息的显示模式。可以为列表、项目符号列表或单个段落,默认是项目符号列表显示。
ShowSummary属性:设置为正则出错详细信息在验证总结控件位置集中显示。
ShowM essageBox属性:设置为正则出错详细信息通过在页面上弹出消息框集中显示。
以上两个属性只能其中一个值为真,一个值为假。
HeaderText属性:设置显示在所有出错详细信息上方的标题文本。
3)实例
指定在消息框中集中显示所有验证信息,在设置了相关属性后,主要HTML代码如下:
【任务实施】
①注册界面如图2.9所示,需要进行如下的验证:
A.所有的输入文本框都不能为空,因此,都要进行非空验证;
B.Email地址输入框要进行电子邮件的格式验证;
C.密码假设必须为数字,要进行数据类型的验证;
D.重输的密码和第一次的密码应该相同,要进行比较验证。
②界面设计
制作如图2.9所示的注册页面的输入部分,这里所有的输入控件都是TextBox文本框控件。将Email输入框的ID属性设置为“Email_TB”,昵称文本框的ID属性设置为“Nick_TB”,密码文本框的ID属性设置为“Password_TB”,重输密码文本框的ID属性设置为“Re_Password_TB”,验证码文本框的ID属性设置为“Validate_TB”。
③验证实现
A.在各个文本框架后面都放置一个RequiredFieldValidator非空验证控件,按从上到下的顺序,各控件的ControlToValidate分别设置为“Email_TB”“Nick_TB”“Password_TB”“Re_Password_TB”“Validate_TB”,分别对相应ID的输入框进行验证,将所有非空验证控件的ErrorMessage属性都设置为“此项必填”,这就是输入为空时将显示的错误提示信息。
B.在Email输入框再放置一个RegularExpressionValidator正则表达式验证控件,对邮箱地址的格式进行验证,设置控件的ControlToValidate为“Email_TB”,单击ValidationExpression属性后的“…”按钮,打开正则表达式编辑器,选中编辑器上部的列表框中的“电子邮件URL”标准项,在下方的验证表达式编辑框内会自动出现其正则表达式,单击确定按钮完成编辑,ErrorMessage属性设置为“Email格式错误,请重新填写”。
C.密码输入框后面再放置一个CompareValidator比较验证控件,设置控件的ControlToValidate为“Password_TB”,设置ErrorMessage属性为“密码必须全部为数字,请重新填写”,设置Type类型属性为“Integer”(整数),设置Operator操作属性为“DataTypeCheck”(数据类型检查)。
D.重输密码框后面同样放置一个CompareValidator控件,设置ControlToValidate属性为“Re_Password_TB”,设置控件的ControlToCompare属性为“Password_TB”,同初次输入密码的文本框内容进行比较,设置ErrorMessage属性为“两次密码输入不一致,请重新填写”,设置Type类型属性为“String”(字符串)或“Integer”(整数),设置Operator操作属性为“Equal”(相等)。
E.使用ValidationSummary验证总结控件将出错提示信息统一组织后再集中显示,这里用消息框的形式显示全部错误验证信息:首先放置一个ValidationSummary总结控件,将所有验证控件的Text属性都设置为“*”,将ValidationSummary总结控件的DisplayMode属性设置为“BulletList”,使用列表方式显示出错提示信息,将ShowMessageBox属性设置为“true”,同时将ShowSummary属性设置为“false”,以弹出消息框的形式显示提示信息,在HeaderText属性设置出错信息的标题,出错信息的字型和字号可以在Font-Name属性和Font-Size属性中设置。
F.设置“提交注册”图片按钮CausesValidation属性为“true”,使按钮按下,提交服务器之前的本地验证有效,需通过全部验证后,才会提交服务器。
G.在浏览器中运行,单击“提交注册”按钮,测试验证控件的实际运行效果特别注意浏览器状态栏上进度条的变化,如提交服务器,会有进度提示,验证效果如图2.11所示。
图2.11验证控件的实际运行效果
【拓展与提高】
(1)CustomValidator控件
CustomValidator控件用于验证输入信息是否符合自定义的验证逻辑,需要自行编写验证逻辑的客户端JS代码或服务器端的C#代码,是一款较为复杂的验证控件。
1)HTML标记
2)常用属性、方法和事件
除前面介绍过的3个基本属性外,控件的其他主要属性如下:
ClientValidationFunction属性:设置与控件相关联的客户端验证的函数的名称。由于脚本函数在客户端执行,该函数必须使用目标浏览器所支持的语言,如VBScript或JavaScript。
OnServerValidate属性:设置与控件相关联的服务器验证的事件处理方法的名称,Server-Validate事件是触发服务器验证事件。
3)实例
在服务器端和客户端上同时验证在文本框中输入的值是否为偶数,为节省篇幅,下面仅给出CustomValidator控件的HTML代码,客户端验证函数和服务器端验证事件处理方法的代码:
(2)按钮与验证
在默认情况下,单击提交按钮会导致验证控件执行验证,验证检查失败时不会提交该页面,但是也能对验证过程进行一定的人为控制,控制方法就是设置提交按钮控件的相关属性。
按钮控件用于控制验证过程的属性如下:
CausesValidation属性:指定向服务器提交前是否执行验证,此属性设置为“false”则不验证直接提交。
ValidationGroup属性:指定向服务器提交前执行页面上的哪些验证控件的验证过程。如果未建立任何验证组(ValidationGroup),则提交前会执行页面上的所有验证控件。
【教学评价】
评价标准见表2.8。
表2.8任务2.5评价标准
【归纳总结】
①Web控件是有外观的类,不但拥有自己的属性、方法和事件,同时也有HTML外观标记,在页面上Web控件的HMTL标记具有明确特征,全部采用如下形式:<asp:control_name id="some_id"runat="server"/>。另外,类似于表单,Web控件必须放置在<form></form>标记中。根据这些外观特征信息,可以猜想它们是表单元素和其他HTML标记的封装。
②Web控件是有外观的类,具有类的特征,拥有自己的属性、方法和事件。Web控件一旦拖放到页面上,就会生成一个对象实例,这时可以使用它们的属性、方法和事件进行事件驱动的可视化编程,可以将这种编程方式看成是一种较典型的面向对象编程。
③Web控件属性、方法、事件众多,读者在学习Web控件时,也不必有畏难情绪,实际上,所有Web控件都有共同基类:System.Web.UI.Controls。因此,即使不同的Web控件也具有很多相同的属性、方法和事件。通常将其称为公共属性、方法和事件,每个控件比较独特的属性、方法、事件是很少的。
④对于具体的Web控件,用户只需记忆它的最基本的属性、方法和事件就能很好地使用该控件:如标签控件的主要记忆Text属性;文本框控件主要记忆Text、TextMode、MaxLength属性;按钮控件主要记忆Text属性和Click事件;对于图片按钮主要记忆ImageUrl图片源属性;对于超链接控件,主要记忆NavigateUrl跳转地址属性等。
⑤验证控件是Web控件的一种,其特点与前面描述的一般Web控件的特点完全相同,不要因为在使用它时一般不需编程,就将其看成另类的控件。
【练习与实训】
实训1制作修改密码框页面,设置密码为密文显示,接收用户名、旧密码、新密码、重输密码,验证新密码和重输的密码是否相同,将这些信息显示出来。
实训2实现员工注册页面,注册信息包括姓名(文本框)、性别(单选按钮或单选按钮组控件)、职务(下拉框、包括总经理、经理、科长、一般职员或列表框)、爱好(复选框或复选框组控件,包括驾车、游泳、野营、爬山),接收这些信息并显示出来。
实训3在实训2员工注册页面的基础上,添加上传相片这一项信息,实现员工相片的上传和预览。
实训4实现学生注册信息(设计注册页面)的验证,学生信息包括姓名(非空)、年龄(非空、必须为整数)、入学日期(非空、格式必须正确)、毕业日期(非空、格式正确、且大于入学日期)、平均成绩(非空、大于0小于100分)。将验证错误信息汇总用列表的形式显示出来。