第10章 Web服务器控件本章介绍Web服务器控件常用的属性、事件和方法，以及用Web服务器控件编制服务器端动态网页的方法。由于在ASP.Net中数据绑定和Windows应用程序的数据绑定有一些区别，功能有所加强，因此数据绑定也是本章的重点。本章例子中使用的数据库仍是第8章中用SQL Server速成版数据库系统建立的学生信息系统数据库StudentI。

10.1 标准Web服务器控件标准Web服务器控件包括：Label、TextBox、Button、LinkButton、ImageButton、CheckBox、CheckBoxList、RadioButton、RadioButtonList、Image、HyperLink、Table、TableCell、TableRow、DropDownList、ListBox、Panel等。这些控件在网页中用HTML语言标记，基本的标记格式为：<asp:控件名称其他属性 runat=server/>或者<asp:控件名称其他属性> </runat=server>，其中asp:控件名称、runat=server两项是必须的，表示是Web服务器控件，由Web服务器解释、运行。其他属性是可选的，属性标记格式为：属性=属性值。

Web服务器控件一些共有的属性如下： id：控件名称，相当于Windows应用程序中控件的Name属性，用来区分不同对象。 forecolor：字符颜色，例如forecolor =“red”表示字符的颜色为红色。 BackColor：背景色，例如BackColor=“white”表示背景的颜色为白色。 Enabled：布尔变量，为true表示控件可以使用，为false表示不可用，控件变为灰色。 Visible：布尔变量，为true表示控件正常显示，为false表示控件不可见。 ToolTip：当鼠标指针停留在控件上时显示的提示文本。 Width和Height：Web服务器控件的宽度和高度。 AutoPostBack：布尔变量，指示控件事件产生后是否自动调用在服务器端事件处理函数。

10.1.1 Label 控件用HTML标记Label控件的格式为：
<asp:Label id="label1" font-size="14" font-bold="true" forecolor="red" Text="显示的字符" runat=server/> 或 <asp:Label id="Label1" runat=server>标签控件显示的字符串</asp:Label> Label控件常用的属性如下： Font： Text：

10.1.2 TextBox控件 TextBox控件HTML标记格式如下：
<asp:TextBox id="textBox1" runat=server> </asp:TextBox> TextBox控件常用的属性和事件如下：属性Text：属性TextMode :TextMode=MultiLine为多行编辑框， TextMode=SingleLine为单行编辑框；TextMode=PassWord为口令编辑框；属性MaxLength：属性Rows：多行编辑框时，该属性有效，表示允许最大行数事件TextChanged：

10.1.3 Button、LinkButton和ImageButton控件
Button控件为普通按钮，LinkButton控件为超级链接形式的按钮，ImageButton控件为图形按钮。用HTML标记这3个按钮控件的格式如下： <asp:button text="按钮标题" id="btn1" Onclick="Btn_Click" runat=server/> <asp:LinkButton text="按钮标题" id="btn2" Onclick="Btn_Click" runat=server/> <asp:ImageButton id="btn3" Onclick="Btn_Click" ImageUrl="t.bmp" runat="server"/> 3个按钮控件常用的属性和事件如下：属性Text：

属性ImageUrl：ImageButton控件图像文件的URL。可以用4种方法定位图像文件t. bmp的位置，假定t
属性ImageUrl：ImageButton控件图像文件的URL。可以用4种方法定位图像文件t.bmp的位置，假定t.bmp的路径为"宿主目录/e1/imges/t.bmp"，这里e1为网站所在目录。t.bmp的绝对路径为" e1/imges/t.bmp"；与根相关(相对于宿主目录)的路径为"/e1/imges/t.bmp "；与文档相关(相对于控件所在网页文件的路径)的路径，如果t.bmp和网页文件在同一目录，t.bmp与文档相关路径为“t.jpg”，如果网页文件在“宿主目录/e1/”目录中，t.bmp与文档相关路径为“imges/t.jpg”，如果网页文件在“宿主目录/e1/e2/”目录中，t.bmp与文档相关路径为“../imges/t.jpg”；在ASP.Net2.0中，用“~/”表示网站所在目录，t.bmp路径可记为“~/imges/t.bmp”，但该方法只能用于Web服务器端控件和代码。为了保证发布网站到任意目录，应选用文档相关路径，只有图像文件是在其他网站时，才使用绝对路径。事件Click：

10.1.4 CheckBox和CheckBoxList控件
<asp:CheckBoxList id="checkboxlist1" runat="server"> <asp:ListItem Selected=true>音乐</asp:ListItem> <asp:ListItem>文学</asp:ListItem> </asp:CheckBoxList> CheckBoxList控件常用的属性和事件如下：属性SelectedItem：属性RepeatColumns：属性RepeatDirection：属性Items：事件SelectedIndexChanged：

CheckBox多选框控件常用的属性和事件如下：
属性Selected：属性Text: 属性Value: 事件CheckedChanged：【例10.1】下面例子在窗口中用Label控件显示某人的爱好，有两个CheckBox多选框，一个代表是否爱好音乐，一个代表是否爱好文学，用鼠标单击CheckBox多选框，选中或不选中标题为"音乐"或"文学"多选框，Label控件显示实际所做的选择。网页文件如下：

<html> <script runat="server" Language="C#" > void Check_Clicked(Object sender, EventArgs e) { String s="你的爱好是："; for(int i=0;i<checkboxlist1.Items.Count; i++) { if (checkboxlist1.Items[i].Selected) s += checkboxlist1.Items[i].Text; } Message.Text=s; </script>

【例10.2】用VS2005集成环境实现具体步骤如下：创建一个网站。放置Label控件到Web窗体,其属性Text=“你的爱好是：”。放置CheckBoxList控件到窗体，单击属性Items右侧标题为"…"的按钮，出现"ListItem集合编辑器"对话框。单击"添加"按钮，增加两个CheckBox按钮，属性Text分别为：音乐、文学。设定属性AutoPostBack=true。为CheckBoxList控件SelectedIndexChanged事件处理函数增加语句如下： private void CheckBoxList1_SelectedIndexChanged (object sender,EventArgs e) { string s="你的爱好是："; for(int i=0;i<2;i++) { if(CheckBoxList1.Items[i].Selected) s=s+CheckBoxList1.Items[i].Text; } Label1.Text=s; }

10.1.5RadioButton和RadioButtonList控件
该控件用如下方法标记： <asp: RadioButtonList id=radioButtonList1 runat="server"> <asp:ListItem Selected=true>男</asp:ListItem> <asp:ListItem>女</asp:ListItem> </asp:RadioButtonList1> 【例10.3】两个单选按钮，标题分别为男和女，初始标题为“男”的单选按钮被选中。用Label控件显示选择的结果。网页文件如下：

<html> <script language="C#" runat="server"> void Check_Clicked(Object sender, EventArgs e) { if(RadioButtonList1.SelectedIndex==0) //第一个单选按钮的索引号为0 Label1.Text="男"; else Label1.Text="女"; } </script>

【例10.4】用VS2005实现的具体步骤如下：创建一个网站。放置Label控件到Web窗体,属性Text=“男”。放置RadioButtonList控件到窗体，单击属性Items右侧标题为"…"的按钮，出现"ListItem集合编辑器"对话框。单击"添加"按钮，增加1个RadioButton按钮，属性Text为"男"， Selected属性为true。增加另一个RadioButton按钮，Text属性为"女"，Selected属性为false。属性AutoPostBack=true。为RadioButtonList控件SelectedIndexChanged事件增加事件处理函数如下： private void RadioButtonList1_SelectedIndexChanged (object sender,EventArgs e) { if(RadioButtonList1.SelectedIndex==0) Label1.Text="男"; else Label1.Text=“女”; }

10.1.6 Image控件控件的HTML标记格式如下： <asp:Image id="Image1" runat="server"
ImageUrl="images/image1.jpg"/> Image控件常用的属性如下： AlternateText：字符串类型，如果图像不能被正确显示，则显示此字符串。 ImageAlign：图像对齐方式。 ImageUrl：显示在网页中的图像文件的URL地址。【例10.5】该例有2个单选按钮，根据单选按钮哪个被选中，显示不同的图像。用VS2005实现的具体步骤如下：

创建网站。将p1.jpg和p2.jpg图像文件拷贝到网站目录中，放置Image控件到窗体，属性id= Image1，单击属性ImageURL后标题为"…"的按钮，在打开的对话框中选择初始图像为p1.jpg。放置RadioButtonList控件到窗体。单击属性Items后标题为"…"的按钮，出现"ListItem集合编辑器"对话框，单击"添加"按钮，增加一个RadioButton按钮，Text属性"图1"，Value属性为"p1.jpg"，Selected属性为true。增加另一个RadioButton按钮，Text属性为"图2"，Value属性为"p2.jpg"，Selected属性为false。属性AutoPostBack=true。为RadioButtonList控件的SelectedIndexChanged事件增加事件函数如下：

4.为Page_Load事件处理函数增加语句： private void Page_Load { Image1.ImageUrl=
private void RadioButtonList1_SelectedIndexChanged (object sender,EventArgs e) { Image1.ImageUrl=RadioButtonList1.SelectedItem.Value;} 4.为Page_Load事件处理函数增加语句： private void Page_Load { Image1.ImageUrl= RadioButtonList1.Items[0].Value; }

10.1.7 HyperLink控件 HyperLink控件是超级链接控件，用来从一个网页级链到另一个网页。用如下方法标记：
<asp:HyperLink id="hyperlink1“ ImageUrl="images/pict.jpg" Target="_blank" NavigateUrl=" Text="微软" runat="server"/> HyperLink控件常用的属性如下： Text：设置的超级链接的文字。 ImageUrl：也可以使用图形完成超级链接，ImageUrl为控件显示的图像文件的URL。 NavigateUrl：超级链接到另一个网页的URL。 Target：表示打开的网页的位置。为_blank，在新窗口打开新网页；为_self，在原窗口打开，为_parent在父窗口打开。

10.1.8 Table、TableCell和TableRow控件
使用这3个控件可以在网页中建立一个表，使用方法如下： <asp:Table id="Table1" runat="server" CellPadding=10 GridLines="Both"> <asp:TableRow> <asp:TableCell>第0行，第0列</asp:TableCell> <asp:TableCell>第0行，第1列</asp:TableCell> </asp:TableRow> <asp:TableCell>第1行，第0列</asp:TableCell> <asp:TableCell>第1行，第1列</asp:TableCell> </asp:Table>

Table控件常用的属性如下： BackImageUrl：背景图像文件的URL。 CellPadding：列字符和列边框之间的间隔(以像素为单位)。默认值为 -1，表示还未设置该属性。 CellSpacing：列和列之间的间隔(以像素为单位)。默认值为 -1，表示还未设置该属性。 GridLines：指定Table控件的网格线型。为None不显示网格线；为Horizontal仅显示水平网格线。为Vertical仅显示垂直网格线；为Both 同时显示水平和垂直网格线。 HorizontalAlign：表的每个单元格中的文字的水平对齐方式。为NotSet，表示尚未设置水平对齐方式；为Left，表示左对齐；为Center，表示居中对齐；为Right表示右对齐。为Justify 表示同时与页面的左右页边对齐。【例10.6】该控件不支持数据绑定，在很多情况下，用DataList 或 GridView 控件可完成同样功能， Table类主要由控件开发人员使用。用VS2005创建表格的具体步骤如下：

创建一个网站。放置Table控件到窗体，属性Caption=“所学课程”为表的标题，属性GridLines=both表示有网格线。单击属性Row右侧标题为“…”的按钮，出现“TableRow集合编辑器”对话框，单击“添加”按钮，增加两行(TableRow对象)。选择索引号为0的TableRow，单击属性Cell右侧标题为“…”的按钮，出现“TableCell集合编辑器”对话框，单击“添加”按钮，增加三列。修改每列的属性Text，分别为：课程总论、刚体静力学、弹性静力学。选择引号为1的TableRow，用同样的方法增加三列。修改每列的Text属性，分别为：数据结构、计算机组成原理、操作系统。运行后，可以看到两行三列的表。

10.1.9 DropDownList控件控件HTML标记格式如下：
<asp:DropDownList id="dropDownList1“ AutoPostBack="True" runat="server" OnSelectedIndexChanged="Selection_Change"> <asp:ListItem Selected="True" Value="White"> 白色 </asp:ListItem> <asp:ListItem Value="Black"> 黑色 </asp:DropDownList> DropDownList控件常用的属性和事件如下：

属性SelectedIndex：从下拉列表中选定项的索引。默认值为0，选择下拉列表第1项。
属性SelectedItem：控件中的选定项。例如上边的例中，标题为"白色"的项被选中，则有：SelectedItem.Text="白色"；SelectedItem.Value="White"。事件OnSelectedIndexChanged：选定项被改变时产生的事件。【例10.7】用记事本程序生成网页的例子可参考例10.15。下例用VS2005创建，该例增加一个DropDownList控件用来选择课程，标签控件显示所做的选择，具体步骤如下：创建一个网站。放置DropDownList控件到窗体。单击属性Items右侧标题为“…”的按钮，出现“ListItem集合编辑器”对话框，单击添加按钮，增加三项。修改每项的Text属性分别为：课程总论、刚体静力学、弹性静力学。放工具箱的Label控件到窗体，id=Label1。

3.放置Button控件到窗体，增加单击按钮事件处理函数如下：
private void Button1_Click(object sender,EventArgs e) { Label1.Text=DropDownList1.SelectedItem.Text; } 4.运行，从下拉列表选择"刚体静力学"，单击按钮控件，标签控件显示"刚体静力学"。

10.1.10 ListBox控件 ListBox列表控件的HTML标记格式如下：
<asp:ListBox id="listBox1" Rows="6“ SelectionMode="Single" runat="server"> <asp:ListItem Selected="True" Value="White"> 白色</asp:ListItem> <asp:ListItem Value="Black"> 黑色</asp:ListItem> </asp:ListBox> ListBox控件常用的属性、事件和DropDownList控件基本一致，不相同的如下： SelectionMode：指定控件的选择模式。为Multiple允许多选，为Single只能单选。 SelectedValue：等价于SelectedItem.Value。如果未选定任何项，返回空字符串("")。 Rows：获取或设置 ListBox 控件中显示的行数。

10.2 数据验证控件用户输入了数据，在提交前，首先要验证输入的数据是否正确。当然，可以自己编程序进行验证。ASP.Net提供了一些验证控件，可以不用编写验证程序完成对输入数据的验证。本节介绍如何使用这些数据验证控件。

数据验证概述对用户输入的数据进行验证，可以在客户端进行。实现原理是当用户输入了信息并单击提交按钮后，用在客户端运行的JavaScript脚本或VBScript脚本对数据验证，只有所有数据都正确，才发送数据到服务器端处理。此种方法的优点是程序运行在客户端，因此反应速度快，减轻了服务器和网络的负担。缺点是由于JavaScript脚本或VBScript脚本是以明文的方式嵌入在HTML文档中，客户端可以看到这些脚本程序，如果用户把这段脚本删除，网页也就失去了验证功能，因此这种方法是不安全的。另一种数据验证方法是在服务器端进行，当用户输入了数据并单击提交按钮后，把数据立刻发送到服务器端，用服务器端程序验证数据的正确性，如果验证不通过，返回错误信息。这种方法虽然响应速度比较慢，增加了服务器的负担，但可靠性上要强很多。

ASP.Net提供了一些验证控件，可以不用编程完成在浏览器端或服务器端对输入数据进行必要的验证。在浏览器端的验证采用JavaScript脚本语言，这些代码被保存到网站宿主目录下的aspnet_client文件夹中。如果修改了宿主目录，请把aspnet_client文件夹拷贝到修改后的宿主目录中。ASP.Net提供如下一些验证控件： RequiredFieldValidator：该验证控件检查是否输入了必须输入的数据。 CustomValidator：自定义数据验证规则的验证控件。 CompareValidator：对两个控件输入的值进行比较的验证控件。 RegularExpressionValidator：正则表达式验证控件。 ValidationSummary：该控件集中显示上述四种验证控件的验证错误信息。所有这些验证控件的共有的常用属性如下：

ControlToValidate：被验证控件id值。
ErrorMessage：验证不通过时，显示在控件放置处和ValidationSummary控件中的错误提示信息。如设置了Text属性，将只在ValidationSummary控件中显示。 Text：显示在控件放置处的验证提示信息，显示方式由属性Display设定。 Display：决定属性Text的显示方式，为None，无提示信息；为Static，总是显示提示信息；为Dynamic，发生错误时显示提示信息。 IsValid：为True，验证通过，否则不通过。网页也有此属性：Page.IsValid，只有本网页中所有验证控件的验证都通过，Page.IsValid才为true。 SetFocusOnError：=true，验证失败将焦点设置到ControlToValidate属性指定的控件。 ValidationGroup：默认条件下，同一网页的所有验证控件都通过才能提交。可设置若干验证控件和一个提交控件(一般为Button)的该属性为相同值，表示它们为一组，只要该组的所有验证控件都通过就能提交，而不必考虑组外的验证控件。

10.2.2 RequiredFieldValidator控件
数据可以用文本框，单选按钮或多选框等控件输入，如果要求用户必须输入数据，可以用控件RequiredFieldValidator对这些控件输入的数据进行验证，检查用户是否输入了必须输入的数据，如果没有输入，则显示提示信息。本控件用HTML标记的格式如下： <asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server“ Text="错误提示信息" ErrorMessage="错误提示信息" ControlToValidate="被验证的控件的id值" Display="None或Static或Dynamic"/> 【例10.8】下边是使用RequiredFieldValidator验证控件的简单例子。本例用户用编辑控件TextBox1输入姓名，要求必须输入数据。用控件RequiredFieldValidator对TextBox1控件输入的数据进行验证，检查用户是否输入了数据，因此属性ControlToValidate=TextBox1。当单击提交按钮后，如果用户没有输入姓名，则用"必须输入姓名"提示用户。

【例10.9】网上商店允许顾客用银行卡或活期存折付款，只要输入银行卡号或活期存折账号，就可以提交，用VS2005实现该功能网页步骤如下：
创建一个网站。放置2个TextBox控件到窗体,属性id分别为TextBox1和TextBox2，分别用Label控件说明：输入银行卡号，输入活期账号。放置RequiredFieldValidator控件到窗体, 属性ControlToValidate为TextBox1, 属性ErrorMessage="必须输入银行卡号"，属性Text="没有输入银行卡号"。属性Display=Dynamic，属性ValidationGroup="NO1"，属性EnableClientScript="false"。放置Button控件到窗体,属性Text="提交银行卡号"，属性ValidationGroup="NO1"，这个控件和前边的RequiredFieldValidator控件为一组。为按钮增加单击事件函数如下：

private void Button1_Click(object sender, EventArgs e)
{ if(Page.IsValid==true) Label1.Text=“已输入了银行卡号”; } 4.放置另一个RequiredFieldValidator控件到窗体, 属性ControlToValidate为TextBox2, 属性ErrorMessage="必须输入活期账号"，属性Text="没有输入活期账号"。属性Display=Dynamic，属性ValidationGroup="NO2"，属性EnableClientScript="false"。 5.放置Button控件到窗体,属性Text=“提交活期账号”，属性ValidationGroup=“NO2”，为按钮增加单击事件处理函数如下： private void Button2_Click(object sender, EventArgs e) Label1.Text=“已输入了活期账号”; } 6.运行，如果不在两个TextBox输入数据，单击"提交"按钮，验证控件将显示错误信息。

ValidationSummary控件如果希望在固定位置显示所有验证控件的提示信息，可以在页面中放置控件ValidationSummary，它将自动显示发现错误的数据验证控件的属性ErrorMessage的内容。控件用如下格式标记： <asp:ValidationSummary id=“ValidationSummary1” runat=“server“ HeaderText=”标题” DisplayMode="BulletList（默认值）或List或SingleParagraph" ShowSummary="true或false"> </asp:ValidationSummary> 继续例10.9，增加一个ValidationSummary控件，修改属性HeaderText="集中显示NO1组的错误"，修改属性DisplayMode为SingleParagraph，属性ValidationGroup="NO1"。运行后，如果不输入银行卡编号，单击标题为"提交银行卡号"按钮，控件ValidationSummary将显示属性ErrorMessage内容"必须输入银行卡号"。

10.2.4自定义数据验证控件CustomValidator
<asp: CustomValidator id="CustomValidator1" runat="server" Text="错误提示信息" ErrorMessage="错误提示信息" ControlToValidate="被验证的控件的id值" Display="None或Static或Dynamic" ClientValidationFunction="浏览器端验证函数名" OnServerValidate=“服务器端验证函数名” /> 一般数据验证分为浏览器端验证和服务器端验证，因此，编程者要根据在哪一端验证，编写不同的函数。如果仅在服务器端验证，属性OnServerValidate为编写的服务器端验证函数名，而属性ClientValidationFunction不设定任何值。如在浏览器端验证，在创建浏览器端验证函数时，一定要同时创建服务器端验证函数，否则恶意代码就有可能使验证通过。

CompareValidator控件 CompareValidator控件可以对两个控件输入的值进行比较。控件HTML标记格式如下： <asp: CompareValidator id="CompareValidator1" runat="server" Text="错误提示信息" ErrorMessage="错误提示信息" ControlToValidate="被验证控件的id值" Display="None或Static或Dynamic" ValueToCompare="与被验证控件比较的的值" ControlToCompare="与被验证控件比较的控件的id值" Type="要比较的数据类型" Operator="比较运算符"/> 其中属性Type为比较的数据类型，可以是Currency、Time、Double、Integer、String、Date等。属性Operator为比较运算符，可以是：Equal、GreatThan、LessThan、GreatThanEqual、LessThanEqual、NotEqual。

10.2.6 RegularExpressionValidator控件
<asp:RegularExpressionValidator id="RegularExpressionValidator1" Text="错误提示信息" ErrorMessage="错误提示信息" ControlToValidate="被验证控件的id值" runat="server" Display="None或Static或Dynamic" ValidationExpression="验证正则表达式" /> 本控件依据正则表达式进行验证，因此知道一些正则表达式的基本知识，然后介绍如何使用正则表达式验证控件。正则表达式是由普通字符(例如a-z)和特殊字符组成的字符串，用这个字符模板与所要验证的字符串进行比较，查看是否匹配，若匹配则通过验证。

10.3 Web服务器控件数据绑定所谓数据绑定技术是把数据集的某个或某些数据与控件的某些能够显示的属性绑定在一起的技术，这些控件可以是Label控件、ListBox控件、GridView控件等，它们被称作数据绑定控件，当这些控件完成数据绑定后，这些被绑定的属性显示的值将随着数据集中被绑定的数据变化而变化。ASP.Net允许控件属性绑定到DataTable、DataView，还可以绑定到List、数组、哈希表、堆栈、队列等，甚至可以绑定到其他控件属性和方法调用返回的结果。

绑定到其他控件属性 DataBind是页和所有服务器控件都有的方法。当需要更新被绑定的数据时，必须调用此方法。当在父控件上调用DataBind方法时，该控件的所有子控件也同时调用自己的DataBind方法。例如，在调用页的DataBind方法，既Page.DataBind()，会导致调用页上的所有控件的DataBind方法，更新页上所有绑定数据。【例10.15】本例说明如何将一个服务器控件的属性绑定到另一个服务器控件的属性。 <html> <script language="C#" runat="server"> void SubmitBtn_Click(Object sender, EventArgs e) //更新页内所有控件中被绑定的数据 { Page.DataBind(); } </script>

<body> <form runat=server> <asp:DropDownList id="StateList" runat="server"> <asp:ListItem>课程总论</asp:ListItem> <asp:ListItem>刚体静力学</asp:ListItem> <asp:ListItem>弹性静力学</asp:ListItem> </asp:DropDownList><BR> <asp:button Text=“提交” OnClick="SubmitBtn_Click" runat=server/><BR> 选定的课程： <asp:label text='<%#StateList.SelectedItem.Text%>‘ runat=server/> </form> </body> </html>

10.3.2 绑定到函数返回值 <html>
绑定到函数返回值【例10.16】本例说明如何绑定到函数返回值。在编辑框中输入数字，单击按钮判断该数的奇偶。 <html> <script language="C#" runat="server"> void Btn_Click (Object src,EventArgs e) { Page.DataBind(); } String EvenOrOdd(string s) { int number=Convert.ToInt16(s); if((number%2)==0) return "偶数"; else return “奇数”; } </script>

绑定到集合类对象【例10.17】像GridView、ListBox、DrowDownList这样的服务器控件的列表都可以绑定到公共语言运行库的集合类对象，如List、Dictionary等。本例说明如何将DrowDownList控件的下拉列表绑定到List类对象。运行后单击按钮，标签将显示所作的选择。 <html> <script language="C#" runat="server"> void Page_Load(Object Sender, EventArgs E) { if(Page.IsPostBack) return; System.Collections.Generic.List<string> l= new System.Collections.Generic.List<string>(); l.Add ("北京"); l.Add ("上海"); DropDown1.DataSource=l; DropDown1.DataBind(); }

void Btn_Click(Object sender, EventArgs e)
{ Label1.Text=“您选择了：”+ DropDown1.SelectedItem.Text; } </script> <body> <form runat=server> <asp:DropDownList id="DropDown1" runat="server"/> <BR> <asp:button Text=“提交” OnClick="Btn_Click" runat=server/> <BR> <asp:Label id=Label1 runat="server"/> </form> </body> </html>

数据源控件数据源控件是ASP.Net2.0中新增控件，包括ObjectDataSource、AccessDataSource、SqlDataSource、XMLDataSource。数据源控件是数据绑定控件和数据库之间的中间层，为和其绑定的数据绑定控件提供以下功能：和数据库连接、读取数据、更新、插入、删除、编辑、排序等，极大地减少程序员所编写的代码。数据源控件常用属性如下： DataSourceMode(DataSet(默认)或DataReader )、SelectCommandTypeText(默认SQL语句或StoredProcedure存储过程) 、ConnectionString(数据库连接的连接字符串)、 SelectQuery、DeleteQuery、InsertQuery和UpdateQuery(SQL语句 )

【例10.18】下边以SqlDataSource为例，介绍建立Sql Server数据源的步骤：
新建一个网站。在解决方案资源管理器中右击App_Data文件夹，然后单击“添加现有项”，打开“添加现有项”对话框，在对话框中找到StudentI.mdf文件，单击“添加”按钮， StudentI.mdf文件将被拷贝到App_Data文件夹中。在 App_Data 文件夹中的数据库是私有的。不允许直接访问这些文件。

从工具箱中将数据源组件SqlDataSource拖到窗体中，单击该控件右上角箭头按钮，在打开窗体中，单击"配置数据源…"字符，打开"配置数据源…"对话框。

可以选择已有的数据库连接，也可以建立新的数据库连接。这里单击“新建连接(C)…”按钮，打开“添加连接”对话框，如图8
可以选择已有的数据库连接，也可以建立新的数据库连接。这里单击“新建连接(C)…”按钮，打开“添加连接”对话框，如图8.1，从App_Data文件夹中选择StudentI.mdf文件，单击“确定”按钮建立新的数据库连接。

返回"配置数据源…"对话框。单击标题"连接字符串"前的+号，可以看到连接字符串。单击"下一步"，打开第2个"配置数据源…"对话框

选中把连接字符串保存到配置文件的多选框，这样做的好处是如果发布时数据库位置变动，只要修改配置文件。单击"下一步"，打开第3个"配置数据源…"对话框

按照图10.2那样选择，生成“SELECT * FROM [Student]” SQL语句,可以使用“Where(W)…”按钮为SQL语句增加选择条件，使用“ORDER BY(R)…”按钮为SQL语句增加排序条件。单击“高级(V)…”按钮，打开“高级SQL生成选项”对话框。

在对话框中，选中"生成INSERT、UPDATE和DELETE语句(G)"多选框，将自动生成插入、删除和更新SQL语句，单击"确定"按钮，退出"高级SQL生成选项"对话框。

单击"下一步"，打开第4个"配置数据源…"对话框，在此对话框中，单击"测试查询(T)"按钮，可以测试所作的设置，单击"完成(F)"，结束配置，数据源组件可以使用了。

按以上设置生成的SqlDataSource组件的HTML语句如下。请注意如何从配置文件中取出连接字符串。
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:StudentIConnectionString %>" DeleteCommand="DELETE FROM [Student] WHERE [StudentNum] InsertCommand="INSERT INTO [Student] ([StudentNum], [StudentName],[StudentSex]) VALUES SelectCommand="SELECT * FROM [Student]" UpdateCommand="UPDATE [Student] SET [StudentName] = WHERE [StudentNum]

<DeleteParameters>
<asp:Parameter Name="StudentNum“ Type="Int32"/> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="StudentName" Type="String"/> <asp:Parameter Name="StudentSex" Type="String" /> <asp:Parameter Name="StudentNum" Type="Int32" /> </UpdateParameters> <InsertParameters> <asp:Parameter Name="StudentName" Type="String" /> </InsertParameters> </asp:SqlDataSource>

下面介绍将数据源控件绑定到ListBox、DrowDownList、RadioButtonList、CheckBoxList的方法。这些控件和绑定数据库表有关的属性有4个：
DataSourceID或DataSource：绑定DataSource使用第1个，绑定DataSet使用第2个。 DataTextField和DataValueField：ListBox和DrowDownList的列表或RadioButtonList和CheckBoxList的标题和它们的Value属性绑定到数据源指定的数据库表的哪个字段。【例10.19】将学生信息库SdudentI的学生情况表Student中的学生姓名和学号字段绑定到DrowDownList控件的下拉列表中，具体步骤如下：继续例10.18，在窗体中增加Label控件和DropDownList控件。单击DropDownList控件右上角的箭头按钮，将打开一窗体，在窗体中选中"启用AutoPostBack"多选框。单击"选择数据源…"字符，打开"数据源配置向导"对话框，按图中那样选择。

为DropDownList控件事件SelectedIndexChanged增加事件处理函数如下:

protected void DropDownList1_SelectedIndexChanged
(object sender,EventArgs e) { Label1.Text="下拉列表控件所选项的Text= "+DropDownList1.SelectedItem.Text+"，下拉列表控件所选项的Value=" + DropDownList1.SelectedItem.Value; } 运行，在DropDownList控件的下拉列表中，可以看到学生信息库SdudentI的学生情况表Student中的所有学生姓名，从中选择不同姓名的学生，Label中将显示所选学生的姓名和学号。

12.4 GraidView控件【例10.20】将学生信息库SdudentI的学生情况表Student数据用GridView显示。
建立新网站，放DropDownList控件到窗体，属性Name= DropDownList1，单击该控件右上角箭头按钮，将打开一窗体，在窗体中选中“启用AutoPostBack”多选框按钮。单击“编辑项…”字符，打开“ListItem集合编辑器”窗体，为下拉列表添加两项:男、女。按照例10.18的步骤增加SqlDataSource控件，在出现第6步图时，单击"WHERE(W)…"按钮，打开"添加Where子句"窗体，按照图中那样选择后，单击"添加(A)"按钮，为SqlDataSource控件增加select语句的where子句，其中where子句的条件来自DropDownList控件的选择值，即只选择所有男生或所有女生。

放GridView控件到窗体。单击控件右上角箭头按钮，打开一窗体，在窗体“选择数据源：”下拉列表框中，选中“SqlDataSource1”，窗体将如图。按照图中那样选择。属性PageStyle可设定外观，也可单击“自动套用格式”字符，打开的“自动套用格式”对话框，选择所喜欢的GridView控件样式。单击“编辑列…”字符，打开“字段”对话框 "字段"对话框左上角列表框列出一些列，这些列可以增加到GridView控件中。左下角的列表框列出GridView控件中已有列，选中其中的某列，右侧显示出该列的属性，例如，修改属性HeaderText可以修改列标题。删除StudentSex列，增加模板列TemplateField显示性别，列标题分别为：学号、姓名和性别。不选中"自动生成字段(G)"多选框。

在模板列中可以放置数据绑定控件显示数据。单击图10. 5中的字符"编辑模板"，打开模板编辑器(图10
在模板列中可以放置数据绑定控件显示数据。单击图10.5中的字符"编辑模板"，打开模板编辑器(图10.7)。首先设计非编辑状态的显示模板ItemTemPlate，在其中放置Label控件(图10.8)，单击该控件右上角箭头按钮打开一窗体，单击"编辑DataBindings…"字符，在打开的对话框中，将Label控件属性Text绑定到Student表的StudentSex字段。再设计编辑状态的显示模板EditItemTemPlate，在其中放置DropDownList控件,下拉列表中增加男、女两项，控件属性SelectedValue绑定到Student表的StudentSex字段，在编辑状态下，用DropDownList控件选择性别。模板的概念见10.7节。这里特别注意，StudentSex字段必须为nchar(1)或nvarchar类型，否则出错。

修改GridView属性PageSize=3，指定每页的记录数，以便看出分页效果。PageIndex 属性为当前页号。PagerSettings 属性设置导航条的各种特性，有多个分属性，例如Mode表示导航条模式，默认为Numeric，有多个页号，显示页号的数目决定于属性PageButtonCount，也可是2个箭头表示前页和后页及其他模式，还可修改箭头为图形或文字，例如LastPageImageURL、LastPageText表示替换后页按钮的图形文件及文字。

运行可分页、删除、编辑，删除和编辑后能把修改的内容存回数据库。从DropDownList控件中选择男(或女)，GridView控件将只显示男生(或女生)。双击列标题可以对该列按升序排序，再双击同一列标题对该列按降序排序。GridView 控件不允许插入记录，可使用 DetailsView或FormView控件添加新记录。使用本节方法很容易实现主从关系，例如显示数据库StudentI的Student和Score表数据时，希望选中Student表某个学生，Score表只显示此学生的成绩。实现步骤简述如下：Student表用GridView1显示，在图10.5中选中"启用选定内容"多选框。Score表用GridView2显示。分别为Student和Score表建立数据源，Student数据源的Sql查询语句不包含条件，Score数据源的Sql查询语句包含条件，用图10.4建立条件，其中"列(C)"下拉列表框选择字段StudentNum，"控件ID(D)"下拉列表框选择GridView1，请读者完成。

10.5 DetailsView 控件【例10.21】许多网页需要一次显示一条记录，并可前后移动记录。DetailsView控件可以实现此功能。实现显示StudentI.mdf数据库Student表的具体步骤如下：新建一个网站。按照例10.18方法创建数据源。放DetailsView控件到窗体。单击该控件右上角箭头按钮，打开一窗体，在窗体的"选择数据源："下拉列表中，选中"SqlDataSource1",窗体将如图10.9。按图中那样选择。单击"编辑字段…"字符，将打开"字段"对话框(图10.6)。修改属性HeaderText将列标题改为中文。其他属性设置参见GridView控件。运行效果如图

10.5 FormView 控件【例10.22】FormView控件同DetailsView控件一样，一次显示一条记录。两者不同之处是FormView控件可为每个字段指定任意显示控件，DetailsView采用表格布局，FormView可自定义布局。使用FormView控件实现显示StudentI.mdf数据库Student表的步骤如下：创建一个网站。按照例10.18方法创建数据源。放FormView控件到窗体，单击该控件右上角箭头按钮，打开一窗体，在窗体的“选择数据源：”下拉列表框中，选中“SqlDataSource1”。选中“启用分页”多选框。单击"编辑模板"字符，打开一窗体，在右侧下拉列表选中"EditItemTemplate"项，这是在编辑状态的显示模板。删除显示StudentSex字段的文本框，在其中放置控件DropDownList,下拉列表中增加男、女两项，控件属性SelectedValue绑定到Student表的StudentSex字段。这样在编辑状态下，可用DropDownList控件选择性别。直接修改"EditItemTemplate"和"ItemTemplate"两模版的标题为中文。其他内容不作修改。

运行，单击编辑按钮后，性别后编辑控件变为下拉列表，可以从下拉列表中选择男或女，单击更新将所作修改存回数据库。

10.7 Repeater控件自学

10.8 DataList控件自学

10.9 AdRotator控件自学

Calender控件自学

10.11 登录和注册控件很多网站都有用户注册和登录功能，用户登录后网站根据用户权限允许用户浏览不同页面。在asp.net 2.0中无需编程，仅使用预定义控件，就可以实现这些功能。本节用实例介绍如何使用登录和注册等预定义控件，实现用户注册、登录和权限设定功能。

10.11.1LoginView、Loginname和LoginStatus控件
LoginView控件能根据用户是否登录而在网页中显示不同的内容，其HTML格式如下：＜asp:LoginView id="lvDorknozzle" runat="server"＞＜LoggedInTemplate＞登录用户能看到的内容或控件＜/LoggedInTemplate＞＜AnonymousTemplate＞匿名用户能看到的内容或控件＜/AnonymousTemplate＞＜/asp:LoginView＞ LoginStatus控件根据用户是否登录完成不同功能，用户未登录，其标题为"登录"，单击该控件后，将打开登录网页Login.aspx，登录成功后将返回LoginStatus控件所在网页，此时该控件标题变为"注销"，单击该控件后，将退出登录状态。Loginname控件记录登录用户的登录名。

【例10.32】下面是实现用户注册、登录和权限设定功能的具体步骤：
创建名称为e10_11的网站，第一个网页文件名称为：default.aspx，该页为网站的主页。放LoginView控件到窗体，单击该控件右上角的箭头按钮，将打开一窗体，在窗体“视图”下拉列表控件中选择AnonymousTemplate后，在控件中增加字符：如果希望留言必须登录，这些字符只有没有登录的用户才能看到。用同样的办法在“视图”下拉列表控件中选择LoggedInTemplate后，在控件中键入字符：欢迎，在其后放置Loginname控件，在Loginname控件下部增加两个LinkButton按钮控件，标题分别为“留言”和“管理留言”，这两个按钮为下节建立留言板做准备，这些只有登录的用户才能看到。放LoginStatus控件到窗体。修改其属性LoginText为"登录或注册"。

12.4 导航控件 SiteMapPath控件 Menu控件 TreeView控件

站点地图所谓站点地图，默认情况下指的就是一个用于描述站点逻辑结构的XML文件（即Web.sitemap文件）。注意，该文件必须保存于Web应用程序的根目录下。【例12-18】创建网站结构如下图的站点地图。

SiteMapPath控件 SiteMapPath控件是通过显示一个导航路径的方式来标示当前页在站点中的位置，从而实现站点导航的。 SiteMapPath控件的站点导航，是通过自动读取Web应用程序的根目录下的站点地图数据来实现的，而不需要编写任何代码完成。但是只有在站点地图中列出的页才能在SiteMapPath控件中显示导航数据；如果将SiteMapPath控件放置在站点地图中未列出的页上，该控件将不会显示任何信息。

12.4.1 SiteMapPath控件（续） SiteMapPath控件有以下常用的基本属性：
1) CurrentNodeStyle属性：定义当前节点的样式，包括字体、颜色、样式等内容。 2) NodeStyle属性：定义导航路径上所有节点的样式。若没有CurrentNodeStyle属性的定义，则包括当前节点在内的所有节点的显示样式由该属性决定。 3) ParentLevelsDisplayed属性：指定在导航路径上所要显示的相对于当前节点的父节点层数。默认值为-1，表示对控件显示的父级别数没有限制。

4) PathDirection属性：指定导航路径上各节点的显示顺序。默认值为RootToCurrent，即按从左到右的顺序显示有根节点到当前节点的路径。另一属性值为CurrentToRoot，即按相反的顺序显示导航路径。 5) PathSeparator属性：指定在导航路径中作为节点之间分隔符的字符串。默认值为“>”，也可自定义为其他符号。

6) PathSeparatorStyle属性：定义分隔字符串的显示样式。
7) RenderCurrentNodeAsLink属性：决定是否将导航路径上当前页名称显示为超链接形式。默认值为false。

12.4.1 SiteMapPath控件（续） 8) RootNodeStyle属性：定义根节点的样式。
9) ShowToolTips属性：决定当鼠标悬停于导航路径的某个节点时，是否显示相应的工具提示信息。默认值为true，即当鼠标悬停于某节点上时，将会使该节点在站点地图中定义的Description属性值以工具提示信息的方式显示。

SiteMapPath控件（续）【例12-19】SiteMapPath控件示例。

12.4.2 Menu控件 Menu控件，即菜单控件，主要用来创建页面上的显示菜单，可以包含一个主菜单和多个子菜单。

Menu控件（续） 1.常用的基本属性 1) MaximumDynamicDisplayLevels属性：设置可以动态显示的菜单的最大层次数。默认值为3。注意，该属性值不能为负。 2) StaticDisplayLevels属性：设置可以静态显示的菜单的最大层次数。默认值为1。当MaximumDynamicDisplayLevels属性值设置为0，StaticDisplayLevels属性值设置与菜单的最大深度一致时，该菜单为完全的静态菜单。

3) DisappearAfter属性：定义鼠标不在菜单项上之后，动态菜单的显示时间，以毫秒为单位。默认值为500ms。该属性值也可以设置为-1，表示动态菜单不会自动消失，除非在菜单外部单击鼠标。
4) DynamicEnableDefaultPopOutImage属性：决定是否在动态菜单的各级菜单之间显示分隔图像。默认值为true，。 5) DynamicPopOutImageUrl属性：设置动态菜单中自定义的内置图像的URL。

Menu控件（续） 6) DynamicPopOutImageTextFormatString属性：设置当动态菜单中的分隔图像不能正常显示时的替换文字。 7) DynamicBottomSeparatorImageUrl属性：指定显示在动态菜单项下方图像的URL。默认值为空字符串("") 。 8) DynamicTopSeparatorImageUrl属性：指定显示在动态菜单项上方图像的URL。默认值为空字符串("") 。

Menu控件（续） 9) DynamicHorizontalOffset属性：指定动态菜单相对于其父菜单项的水平距离，以像素位单位。默认值为0。 10) DynamicVerticalOffset属性：指定动态菜单相对于其父菜单项的垂直距离。 11) DynamicItemFormatString属性：设置与所有动态菜单项一起显示的附加文本。如该属性值设置为“子菜单：{0}”，则在所有的动态菜单项的文本前均会添加“子菜单：”字样。

12) Items属性：设置Menu控件中的所有菜单项。
13) Orientation属性：设置菜单中静态部分的展开方向。共有Horizontal和Vertical两个属性值，分别表示水平方向和垂直方向展开第一级动态菜单。默认值为Vertical ，即垂直方向。

12.4.2 Menu控件（续） 2. 菜单项定义方式【例1】利用Items属性设置的Menu菜单。

Menu控件（续）利用数据绑定的方式编辑Menu控件的各菜单项时，需要SitMapDataSource组件从站点地图Web.sitemap文件中检索导航数据，再将数据传递给Menu控件显示出来。与SiteMapPath控件不同的是，即使Menu控件所在页并没有在站点地图中列出，站点地图Web.sitemap文件中的所有导航数据也可以在Menu控件中显示出来。注意，由于站点地图Web.sitemap文件的特殊性，采用这种方式定义的Menu菜单项只能有一个一级菜单项，但采用Items属性定义则可以有多个一级菜单项。

TreeView控件 TreeView控件用于以树形结构显示分层数据，如目录或文件目录。TreeView控件由一个或多个节点构成，共有三种不同类型的节点。

12.4.3 TreeView控件（续）与Menu控件相似，TreeView控件也有两种节点设置方式：一是Nodes属性定义方式；
二是利用站点地图Web.sitemap文件和SiteMapDataSource控件设置的数据绑定方式。注意，若采用后一种方式设置节点，则TreeView控件的树结构中只能有一个根节点；若需要多个根节点，则要使用Nodes属性定义的方式。

12.4.3 TreeView控件（续） 1. TreeView控件的常用属性
1) CollapseImageToolTip属性：设置可折叠节点展开时，当鼠标移动到该节点前的指示图像上时，所要显示在其指示图像上的工具提示。默认值为“折叠{0}”。 2) CollapseImageUrl属性：自定义节点可折叠的指示图像。默认情况下，采用带方框的“-”号作为可折叠指示图像。

3) ExpandImageToolTip属性：设置可折叠节点折叠时，当鼠标移动到该节点前的指示图像上时，所要显示在其指示图像上的工具提示。默认值为“展开{0}”。
4) ExpandImageUrl属性：自定义节点可折叠的指示图像。默认情况下，采用带方框的“+”号作为可展开指示图像。 5) ShowExpandCollapse属性：决定是否显示可折叠节点的折叠、展开指示图像。默认值为true。

TreeView控件（续） 6) ImageSet属性：指定显示于各节点上的折叠、展开指示图像。可以选择预定义的图像组。默认值为Custom，即自定义指示图像。 7) EnableClientScript属性：决定是否可以在客户端处理节点的展开和折叠事件。默认值为true，表示节点的每个展开和折叠事件可以直接在客户端处理，不用发回服务器处理。 8) ExpandDepth属性：设置第一次显示TreeView控件时，树的展开层次数。默认值为FullyExpand（即-1），表示完全展开树的所有节点。

9) ShowLines属性：决定是否显示连接子节点和父节点的连线。默认值为false。
10) Nodes属性：设置TreeView 控件的各级节点及其属性。 11) ShowCheckBoxes属性：指示在哪些类型节点的文本前显示复选框。共有5个属性值：None、Root、Parent、Leaf和All。默认值为None。 12) 样式定义属性：TreeView控件有多种外观定义的集合属性。

12.4.3 TreeView控件（续） 2. TreeView控件的常用事件
1) SelectedNodeChanged事件：选定节点发生变化时触发。 2) TreeNodeExpanded事件：节点展开时触发。 3) TreeNodeCollapsed事件：节点折叠时触发。

12.4.3 TreeView控件（续） 3. TreeNode的常用基本属性
1) Expanded属性：决定是否展开该节点。 2) NavigateUrl属性：设置节点被选中时所要定位到页面的Url。 3) SelectAction属性：指定选中该节点时所要触发的事件。该属性的属性值及其触发的TreeView控件的对应事件如表12-3所示。默认值为Select。

12.4.3 TreeView控件（续） 4. TreeNode的模式
由TreeView控件的Nodes属性创建的目录树，其中的节点有两种模式：选择模式和导航模式。当节点的NavigateUrl属性不为空时，该节点处于导航模式，即单击该节点可以定位到由NavigateUrl属性指定的链接页面。当节点的NavigateUrl属性为空时，该节点处于选择模式，即单击该节点会将页面回发到服务器，并由TreeNode的SelectAction属性决定引发相应事件。

Similar presentations

Similar presentations

About project

反馈

请登录

Auth with social network:

Similar presentations

Similar presentations

About project

反馈