第二章（2）服务器端控件

来源：互联网发布：oa系统 mac 编辑：程序博客网时间：2024/06/06 20:07

摘要：本章主要讲述了几个服务器端的控件、它们的校验、取值方法等，从中我们可以看到asp.net中各种控件功能是非常强大的，如上面的例子所示，我们甚至可以用一个简单的语句就可以验证输入的合法性。对取值，我们也有简单的方法，对比于用html所写的代码，我们觉得用asp.net所写的是简单了很多。

ASP.NET基础教程-第二章（2）服务器端控件

2.2.1 服务器端控件示例

在讲述服务器端控件的时候，我们先来讲述一个具体的例子。
我们说过，在asp.net里面，一切都是对象。我们也谈到：WEB页面本身就是一个对象。或者说，WEB页面就是一个对象的容器。那么，这个容器可以装些什么东西呢？这一节我们学习服务器端控件，英文是Server Control。这是WEB页面能够容纳的对象之一。

什么是Control？熟悉VB的读者肯定再清楚不过了。简单地说，Control就是一个可重用的组件或者对象，这个组件不但有自己的外观，还有自己的数据和方法，大部分组件还可以响应事件。通过微软的集成开发环境(Visual Studio.NET 7.0)，你可以简单地把一个Control拖放到一个Form中。
那为什么叫"Server Control"？这是因为这些Control是在服务器端存在的。服务器端控件也有自己的外观，在客户端浏览器中，Server Control的外观由HTML代码来表现。Server Control会在初始化时，根据客户的浏览器版本，自动生成适合浏览器的HTML代码。以前我们做网页或者做ASP程序时候，必须考虑到浏览器的不同版本对HTML的支持有所不同，比如Netscape和IE对DHTML的支持就有所不同。当时，解决浏览器版本兼容问题的最有效方法，就是在不同版本的浏览器中作测试。现在，由于Server Control自动适应不同的浏览器版本，也就是自动兼容不同版本的浏览器，程序员的工作量减轻了许多。下面，我们来看看如何在WEB FORM中嵌入Server Control。我们的例子是从上一节继承来的：如图：
下面是实现如图效果的代码：(sample.aspx)

<html>
<script language="VB" runat=server>
Sub SubmitBtn_Click(Sender As Object, E As EventArgs)
Message.Text = "Hi " & Name.Text & ", 你选择的城市是: " & city.SelectedItem.Text
End Sub
</script>
<body>
<center>
<form action="form2.aspx" method="post" runat="server">
<h3>姓名: <asp:textbox id="Name" runat="server"/>

所在城市: <asp:dropdownlist id="city" runat=server>
<asp:listitem>北京</asp:listitem>
<asp:listitem>上海</asp:listitem>
<asp:listitem>重庆</asp:listitem>
</asp:dropdownlist>
<asp:button type=submit text="确定" OnClick="SubmitBtn_Click" runat="server"/>
<p>
<asp:label id="Message" runat="server"/>
</form>
</center>
</body>
</html>

请注意：上面的代码中我们使用了三种Server Control，分别是：

1、 asp:textbox
2、asp:dropdownlist
3、asp:label

我们注意到三个控件都有相同的RunAt属性：RunAt="Sevrer"。所有的服务器端控件都有这样的属性。这个属性标志了一个控件是在Server端进行处理的。
我们看下面的代码：

用过VB的朋友是不是觉得很熟悉？没错，这是用VB写的一个事件处理函数，void SubmitBtn_Click(Object sender , EventArgs e) ，你可能一看就明白了，void代表该函数没有返回值，该函数带有两个参数，可是这里的Sender 的意义是什么意思呢？它的用处又到底是什么呢？其实很简单，这个Sender 就是这个事件的触发者。这里，Sender 就是被Click 的button。其中代码只有一行，你可能注意到这行代码中的Message、Name、city你并没有定义，那么它们从哪里来的呢？

看下面的代码：:
<form action="form2.aspx" method="post" runat="server">
<h3> Name: <asp:textbox id="Name" runat="server"/>
Category: <asp:dropdownlist id="city" runat=server>
<asp:listitem>北京</asp:listitem>
<asp:listitem>上海</asp:listitem>
<asp:listitem>重庆</asp:listitem>
</asp:dropdownlist>
<asp:button type=submit text="确定" OnClick="SubmitBtn_Click" runat="server"/>
<p>
<asp:label id="Message" runat="server"/>
</form>
我们发现每个服务端的控件都带有一个ID号。而我们在VB.NET代码中所引用的就是这些ID。我们可以认为ID就是控件的名称。在ASP中我们也使用过ID吧。那时候，ID属性和Name属性并没有什么不同：
<input id=email name=email >
在客户端，我们通过VBSCript代码或者Jscript代码，可以这样访问Form表单的Input域：
<SCRIPT LANGUAGE=javascript>

</SCRIPT>
从上面的代码可以看出，在DHTML中，我们也是通过ID来访问Form表单的输入域的。在ASPX中，情况有些类似之处。差别在于：一个在客户端，一个在服务器端。
如果你和第一节的例子代码对比一下，你会发现：这个表单的写法和html表单完全不同了吧？首先，所有的表单项包括表单本身后面都加上了runat=server，这句话的意思就是说这个是服务器端控制项，另外象传统表单的什么<input type=text>等的写法都变了，你仔细观察一下可以看出，原来的文本框变为<asp:textbox>，选择框变为<asp:dropdownlist> , 选择框选项变为<asp:listitem>，而submit按钮变为<asp:button>，这个按钮对应的控制函数就刚才我提到的那个SubmitBtn_Click函数，它是运行在服务器端的。另外还有一个服务器端控制<asp:label id="Message" runat="server"/>，这个asp:label是传统表单所没有的，它是一个服务器端文本控制，那么就存在一个问题，如果传统的HTML里没有这个元素，那么ASP.NET是怎么接收的呢？你运行一下这个程序，然后看一下HTML源码，你会发现这么一行：
<input type="hidden" name="__VIEWSTATE value="…" />对，ASP.NET就是通过这个隐藏表单的形式传递过去的。
所以，一个客户端控件，加上runat=Server就变成服务器端控件，服务器端控件能在服务器端脚本中被自由运用。在以后的章节中，我们还要对常用的服务器端控件进行详细介绍。

2.2.2 文本输入控件
文本输入控件目的是让用户输入文本，文本模式是一个单行的输入框，但是用户可以根据自己的需要把它改成密码输入模式或者多行输入模式。

在此我们用单行文本输入模式和密码模式来说明，在asp.net中，输入一个文本，可用下面的语句来表示：

<asp:TextBox id=email width=200px maxlength=60 runat=server />
第一句为注释，我们可以设定输入框的宽度和文本的长度，runat=server为表示运行于服务器端，下面我们来看看输入控件的校验，一个简单的语句就可以实现我们在普通的html页面上的复杂的JavaScript、VBScript或者其他代码的验证。首先我们用户必须输入邮件地址：

<asp:RequiredFieldValidator id="emailReqVal"
ControlToValidate="email"
ErrorMessage="Email. "
Display="Dynamic"
Font-Name="Verdana" Font-Size="12"
runat=server>
*
</asp:RequiredFieldValidator>
ControlToValidate="email"属性为针对TextBox id=email的文本框，Display属性我们定义为"Dynamic"，即为当鼠标光标所在位置发生变化时属性根据条件变化。如果为空，则打印出" * "字符出来。

在通常情况下，邮件地址总会包含一些特定的字符，我们在验证的时候，就可以要求用户输入的内容中包含我们规定的字符。

<asp:RegularExpressionValidator id="emailRegexVal"
ControlToValidate="email"
Display="Static"
ValidationExpression="^[\w-]+@[\w-]+\.(com|net|org|edu|mil)$"
Font-Name="Arial" Font-Size="11"
runat=server>
不是有效邮件地址
</asp:RegularExpressionValidator>
ControlToValidate="email"语句跟上面一样，
ValidationExpression="^[\w-]+@[\w-]+\.(com|net|org|edu|mil)$"表示我们在邮件里要包含的内容，如果没有包含，则打印出"不是有效邮件地址"这个提示。

对密码也是同样的道理的，主要的差别是，对于密码，通常我们要确认一次，校验两次输入的密码是否相等。下面是我们的代码：

<asp:CompareValidator id="CompareValidator1"
ControlToValidate="passwd2" ControlToCompare="passwd"
Display="Static"
Font-Name="Arial" Font-Size="11"
runat=server>
密码不相等
</asp:CompareValidator>
ControlToValidate="passwd2" ControlToCompare="passwd"此语句即为两个密码之间的比较，不相等，打印出"密码不相等"的提示。

下面是我们的完整的代码(textbox.aspx)：

<html>
<body>
<br><br><br>
<center>
<h3><font face="Verdana">.NET->文本控件</font></h3>
</center>
<form method=post runat=server>
<hr width=600 size=1 noshade>
<br><br>
<center>

<asp:ValidationSummary ID="valSum" runat="server"
HeaderText="按照下面的要求填写:"
DisplayMode="SingleParagraph"
Font-Name="verdana"
Font-Size="12"
/>
<p>
<table border=0 width=600>
<tr>
<td align=right>
<font face=Arial size=2>电子邮件:</font>
</td>
<td>

<asp:TextBox id=email width=200px maxlength=60 runat=server />
</td>
<td>

<asp:RequiredFieldValidator id="emailReqVal"
ControlToValidate="email"
ErrorMessage="Email. "
Display="Dynamic"
Font-Name="Verdana" Font-Size="12"
runat=server>
*
</asp:RequiredFieldValidator>

<asp:RegularExpressionValidator id="emailRegexVal"
ControlToValidate="email"
Display="Static"
ValidationExpression="^[\w-]+@[\w-]+\.(com|net|org|edu|mil)$"
Font-Name="Arial" Font-Size="11"
runat=server>
不是有效邮件地址
</asp:RegularExpressionValidator>
</td>
</tr>

<tr>
<td align=right>
<font face=Arial size=2>密码:</font>
</td>
<td>

<asp:TextBox id=passwd TextMode="Password" maxlength=20 runat=server/>
</td>
<td>

<asp:RequiredFieldValidator id="passwdReqVal"
ControlToValidate="passwd"
ErrorMessage="Password. "
Display="Dynamic"
Font-Name="Verdana" Font-Size="12"
runat=server>
*
</asp:RequiredFieldValidator>

<asp:RegularExpressionValidator id="passwdRegexBal"
ControlToValidate="passwd"
ValidationExpression=".*[!@#$%^&*+;:].*"
Display="Static"
Font-Name="Arial" Font-Size="11"
Width="100%" runat=server>
密码必须包含 (!@#$%^&*+;:)
</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td align=right>
<font face=Arial size=2>再次输入密码:</font>
</td>
<td>

<asp:TextBox id=passwd2 TextMode="Password" maxlength=20 runat=server/>
</td>
<td>

<asp:RequiredFieldValidator id="passwd2ReqVal"
ControlToValidate="passwd2"
ErrorMessage="Re-enter Password. "
Display="Dynamic"
Font-Name="Verdana" Font-Size="12"
runat=server>
*
</asp:RequiredFieldValidator>

<asp:CompareValidator id="CompareValidator1"
ControlToValidate="passwd2" ControlToCompare="passwd"
Display="Static"
Font-Name="Arial" Font-Size="11"
runat=server>
密码不相等
</asp:CompareValidator>
</td>
</tr>
</table>
<p>
<input runat="server" type=submit value="提交">
<p>
<hr width=600 size=1 noshade>

</form>
</center>
</body>
</html>

运行结果如下：

我们不按照要求的输入，开到了下面的提示：

多行文本输入控件一般用来输入相关的内容，比如用户简短介绍、相关信息的补充等，一般情况下可以不用限制用户的输入。当然有些时候像留言板，我们不希望用户的输入内容中包含HTML的相关标记，这个时候我们就可以用上面的同样的方法来限制用户的输入，用法都是一样的，在此我们就不打算举个例子来说明了。

2.2.3 按钮控件

按钮控件的目的是使用户对页面的内容作出判断，当按下按钮后，页面会对用户的选择作出一定的反应，达到与用户交互的目的。
按钮控件的使用虽然很简单，但是按钮控件却是最常用的服务器控件之一，值得我们学习。对按钮控件的使用要注意它的3个事件和一个属性，即:
OnClick事件，即用户按下按钮以后，即将触发的事件。我们通常在编程中，利用此事件，完成对用户选择的确认、对用户表单的提交、对用户输入数据的修改等等。
OnMouseOver事件，当用户的光标进入按钮范围触发的事件。为了使页面有更生动的显示，我们可以利用此事件完成，诸如，当光标移入按钮范围时，使按钮发生某种显示上的改变，用以提示用户可以进行选择了。
OnMouseOut事件，当用户光标脱离按钮范围触发的事件。同样，为使页面生动，当光标脱离按钮范围时，也可以发生某种改变，如恢复原状，用以提示用户脱离了按钮选择范围，若此时按下鼠标，将不是对按钮的操作。
Text属性，按钮上显示的文字，用以提示用户进行何种选择。

例子：下例将显示3个按钮，分别演示3种事件的处理。
当按下第一个按钮时，根据 <asp:button id="btn1" text="OnClick事件演示" Width=150px Onclick="btn1_Onclick" runat=server />的定义将调用btn1_OnClick过程，该过程的作用，即在按钮后显示lbl1控件的内容"OnClick事件触发"
当移动光标到第二个按钮时，根据按钮定义 <asp:button id="btn2" text="OnMouseOver事件演示" Width=150px OnMouseOver="this.style.backgroundColor='lightgreen'" OnMouseOut="this.style.backgroundColor='buttonface'" runat=server />，光标移动到按钮上时，按钮的背景色应该变为淡绿色。
当移动光标到第三个按钮时，根据其定义<asp:button id="btn3" text="OnMouseOut事件演示" Width=150pxOnMouseOver="this.style.fontWeight='bold'" OnMouseOut = "this.style.fontWeight = 'normal'" runat=server />，按钮的字体变为黑体，但是我们要观察的是当又把光标移开后，第三个按钮是否恢复正常的字体。

1．源程序(FormButton.aspx)


<html>
<script language="vb" runat=server>
sub btn1_OnClick(s as object,e as EventArgs)
lbl1.text="Onclick 事件触发"
end sub

</script>

<head>
<title>
Button控件的使用
</title>
</head>

<body bgcolor=#ccccff>
<center>
<h2>Button控件三种事件的响应实验</h2>
<hr>
</center>
<form runat=server>
<asp:button id="btn1" text="OnClick事件演示" Width=150px Onclick="btn1_Onclick" runat=server />
  
<asp:label id="lbl1" runat=server/>
<br>

<asp:button id="btn2" text="OnMouseOver事件演示" Width=150px OnMouseOver="this.style.backgroundColor='lightgreen'"
OnMouseOut="this.style.backgroundColor='buttonface'"
runat=server />

<br>

<asp:button id="btn3" text="OnMouseOut事件演示" Width=150px OnMouseOver="this.style.fontWeight='bold'"
OnMouseOut="this.style.fontWeight='normal'"
runat=server />

</form>

<body>

2．开始时的输出画面如下：

3．当按下"OnClick事件演示"按钮后，lbl1显示"OnClick事件触发"：

4．当移动光标到"OnMouseOver事件演示"按钮时，该按钮背景色变为淡绿色：

5．当光标移动到"OnMouseOut事件演示"按钮时，该按钮的字体变为黑体，但是我们需观察的却是再移开光标后，字体是否恢复正常，结论是会的，这里只给出了移动到该按钮时的画面，移开后的画面由于和开始画面一样，就不演示了。

2.2.4 复选控件

在日常信息输入中，我们会遇到这样的情况，输入的信息只有两种可能性（例如：性别、婚否之类）,如果采用文本输入的话，一者输入繁琐，二者无法对输入信息的有效性进行控制，这时如果采用复选控件（CheckBox），就会大大减轻数据输入人员的负担，同时输入数据的规范性得到了保证。
CheckBox的使用比较简单，主要使用id属性和text属性。Id属性指定对复选控件实例的命名，Text属性主要用于描述选择的条件。另外当复选控件被选择以后，通常根据其Checked属性是否为真来判断用户选择与否。
例如：使用复选控件
…
<asp:CheckBox id="chkbox1" text="中国人" runat=server/>
…
判断条件满足否：
…
If chkbox1.Checked=True
LblTxt.text="是中国人"
Else
LblTxt.text="不是中国人"
End If
…
2.2.5 单选控件

使用单选控件的情况跟使用复选控件的条件差不多，区别的地方在于，单选控件的选择可能性不一定是两种，只要是有限种可能性，并且只能从中选择一种结果，在原则上都可以用单选控件（RadioButton）来实现。
单选控件主要的属性跟复选控件也类似，也有id属性、text属性，同样也依靠Checked属性来判断是否选中，但是与多个复选控件之间互不相关不同，多个单选控件之间存在着联系，要么是同一选择中的条件，要么不是。所以单选控件多了一个GroupName属性，它用来指明多个单选控件是否是同一条件下的选择项，GroupName相同的多个单选控件之间只能有一个被选中。

例如：对单选控件的使用
…
年龄选择：
<asp:RadioButton id="rbtn11" text="20岁以下" GroupName="group1" runat=server /><br>
<asp:RadioButton id="rbtn12" text="20-30岁" GroupName="group1" runat=server /><br>
<asp:RadioButton id="rbtn13" text="30-40岁" GroupName="group1" runat=server /><br>
<asp:RadioButton id="rbtn14" text="40岁以上" GroupName="group1" runat=server /><br>
工作收入：
<asp:RadioButton id="rbtn21" text="1000元以下" GroupName="group2" runat=server /><br>
<asp:RadioButton id="rbtn22" text="1000-2000元" GroupName="group2" runat=server/><br>
<asp:RadioButton id="rbtn23" text="2000元以上" GroupName="group2" runat=server />
…

对选择条件的判断：
…
If rbtn11.Checked = True
LblResult1.text="20岁以下"
Else if rbtn12.Checked = True
LblResult1.text="20-30岁"
Else if rbtn13.Checked = True
LblResult1.text="30-40岁"
Else
LblResult1.text="40岁以上"
End If

If rbtn21.Checked = True
LblResult2.text="1000元以下"
Else if rbtn22.Checked = True
LblResult2.text="1000-2000元"
Else
LblResult.text="2000元以上"
End If
…
2.2.6 列表框

列表框（ListBox）是在一个文本框内提供多个选项供用户选择的控件，它比较类似于下拉列表，但是没有显示结果的文本框。到以后，我们会知道列表框实际上很少使用，大部分时候，我们都使用列表控件DropDownList来代替ListBox加文本框的情况，在这里对列表框的讨论，主要是为以后的应用学习一些简单的控件属性。
列表框的属性SelectionMode，选择方式主要是决定控件是否允许多项选择。当其值为ListSelectionMode.Single时，表明只允许用户从列表框中选择一个选项；当值为List.SelectionMode.Multi时，用户可以用Ctrl键或者是Shift键结合鼠标，从列表框中选择多个选项。
属性DataSource，说明数据的来源，可以为数组、列表、数据表。
方法DataBind，把来自数据源的数据载入列表框的items集合。

例子：在这里我们将结合前面学习的按钮控件（Button）、复选控件（CheckBox）、单选控件（RadioButton）以及列表框（ListBox）给出一个实例。
首先，页面加载时，我们产生一个数组Values，并添加4个关于水果的测试数据到Valuse数组。然后列表框从数组取得数据加载进自己的items集合。然后根据复选控件chkBold的状态决定是否用黑体字输出列表框的选择结果。根据单选控件rbtnMulti和rbtnSingle的状态决定下一次列表框是否允许多选，最后按下按钮控件提交表单，显示选择的结果。

1．源程序(FormListBox.aspx)

<html>
<head>
<title>
ListBox控件试验
</title>
</head>

'如果选中黑体复选控件，把文本标签的字体设为黑体
If chkBold.Checked
lblTxt.font.bold=True
Else
lblTxt.font.bold=False
End If

'如果选中多选的单选控件，那么则把列表框设为允许多选
If rbtnMulti.Checked
list1.SelectionMode=ListSelectionMode.Multiple
Else
list1.SelectionMode=ListSelectionMode.Single
End If

If Not IsPostBack
'第一次请求时，为列表框设置数据
Dim values as ArrayList=new ArrayList()

values.add("苹果")
values.add("梨子")
values.add("香蕉")
values.add("西瓜")
list1.datasource=values
list1.databind
Else
'把从列表框选中的内容赋予文本标识，如果未选择，显示"未选择"
Dim i as int32
Dim tmpStr as String

'对列表框list1的items集合轮询，根据其Selected属性，判断是否被选中
For i=0 to list1.items.count-1
If list1.items(i).selected
tmpStr=tmpStr & " " & list1.items(i).text
End If
Next

If tmpStr is Nothing
tmpStr="未选择"
End If

lblTxt.text="您选中的项为: " & tmpStr

End If

End Sub
</script>

<body >
<center>
<h2>ListBox控件试验</h2>
<hr>
<form method="POST" runat=server>
请选择水果
<br>
<asp:ListBox id="list1" runat=server/>
<br>
<asp:CheckBox id="chkBold" text="黑体" runat=server />
<br>
'第一次设置为单项选择
<asp:RadioButton id="rbtnSingle" Checked=True text="单项选择"
groupname="group1" runat=server />
<asp:RadioButton id="rbtnMulti" text="多项选择"
groupname="group1" runat=server />
<br>
<asp:button text="提交" runat=server />
<hr>
<asp:label id="lblTxt" runat=server />
</form>
</center>
</body>

</html>

2．开始时的画面输出，第一次缺省设置为单项选择

3．选择以黑体字输出，并且允许多项选择后的画面：

2.2.7 RequiredFieldValidator

这个RequiredFieldValidator服务器控件保证用户不会跳过一个入口，如果用户输入的值跟符合RequiredFieldValidator的要求，这个值就是有效的；否则，不会跳过这一输入步骤而往下走。

下面的例子(RequiredFieldValidator.aspx)验证了这个要求：

<html>
<title>检验</title>
<h3><font face="Verdana">.NET->RequiredFieldValidator Example</font></h3>
<form runat=server>
Name: <asp:TextBox id=Text1 runat="server"/>
<asp:RequiredFieldValidator id="RequiredFieldValidator1" ControlToValidate="Text1"

Font-Name="Arial" Font-Size="11" runat="server">
Required field!
</asp:RequiredFieldValidator>
<p>
<asp:Button id="Button1" runat="server" Text="验证" />
</form>
</body>
</html>

运行效果如下：

2.2.8 ValidationSummary

用户的输入有时候是按照一定的顺序来的，有效性控件验证用户的输入并设置一个属性来线使用户的输入是否通过了验证。当所用得验证项都被处理之后，页面的IsValid属性就被设置，当有其中的一个验证没有通过时，整个页面将会不被通过验证。

当页面的IsValid属性为false时，ValidationSummary属性将会表现出来。他获得页面上的每个确认控件并对每个错误提出修改信息。
文件Summary.aspx的内容：

<%@ Page clienttarget=downlevel %>
<html>
<head>
<script language="VB" runat="server">

Sub ListFormat_SelectedIndexChanged(sender As Object, e As EventArgs)

' Change display mode of the validator summary when a new option
' is selected from the "ListFormat" dropdownlist
valSum.DisplayMode = ListFormat.SelectedIndex

End Sub

</script>

</head>
<BODY>
<h3><font face="Verdana">ValidationSummary Sample</font></h3>
<p>

<form runat="server">
<table cellpadding=10>
<tr>
<td>
<table bgcolor="#eeeeee" cellpadding=10>
<tr>
<td colspan=3>
<font face=Verdana size=2><b>Credit Card Information</b></font>
</td>
</tr>
<tr>
<td align=right>
<font face=Verdana size=2>Card Type:</font>
</td>
<td>
<ASP:RadioButtonList id=RadioButtonList1 RepeatLayout="Flow"
runat=server>
<asp:ListItem>MasterCard</asp:ListItem>
<asp:ListItem>Visa</asp:ListItem>
</ASP:RadioButtonList>
</td>
<td align=middle rowspan=1>
<asp:RequiredFieldValidator id="RequiredFieldValidator1"
ControlToValidate="RadioButtonList1"
ErrorMessage="Card Type. "
Display="Static"
InitialValue="" Width="100%" runat=server>
*
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align=right>
<font face=Verdana size=2>Card Number:</font>
</td>
<td>
<ASP:TextBox id=TextBox1 runat=server />
</td>
<td>
<asp:RequiredFieldValidator id="RequiredFieldValidator2"
ControlToValidate="TextBox1"
ErrorMessage="Card Number. "
Display="Static"
Width="100%" runat=server>
*
</asp:RequiredFieldValidator>

</td>
</tr>
<tr>
<td align=right>
<font face=Verdana size=2>Expiration Date:</font>
</td>
<td>
<ASP:DropDownList id=DropDownList1 runat=server>
<asp:ListItem></asp:ListItem>
<asp:ListItem >06/00</asp:ListItem>
<asp:ListItem >07/00</asp:ListItem>
<asp:ListItem >08/00</asp:ListItem>
<asp:ListItem >09/00</asp:ListItem>
<asp:ListItem >10/00</asp:ListItem>
<asp:ListItem >11/00</asp:ListItem>
<asp:ListItem >01/01</asp:ListItem>
<asp:ListItem >02/01</asp:ListItem>
<asp:ListItem >03/01</asp:ListItem>
<asp:ListItem >04/01</asp:ListItem>
<asp:ListItem >05/01</asp:ListItem>
<asp:ListItem >06/01</asp:ListItem>
<asp:ListItem >07/01</asp:ListItem>
<asp:ListItem >08/01</asp:ListItem>
<asp:ListItem >09/01</asp:ListItem>
<asp:ListItem >10/01</asp:ListItem>
<asp:ListItem >11/01</asp:ListItem>
<asp:ListItem >12/01</asp:ListItem>
</ASP:DropDownList>
</td>
<td>
<asp:RequiredFieldValidator id="RequiredFieldValidator3"
ControlToValidate="DropDownList1"
ErrorMessage="Expiration Date. "
Display="Static"
InitialValue=""
Width="100%"
runat=server>
*
</asp:RequiredFieldValidator>
</td>
<td>
</tr>
<tr>
<td></td>
<td>
<ASP:Button id=Button1 text="有效性验证" runat=server />
</td>
<td></td>
</tr>
</table>
</td>
<td valign=top>
<table cellpadding=20><tr><td>
<asp:ValidationSummary ID="valSum" runat="server"
HeaderText="You must enter a value in the following fields:"
Font-Name="verdana"
Font-Size="12"
/>
</td></tr></table>
</td>
</tr>
</table>

<font face="verdana" size="-1">Select the type of validation summary display you wish: </font>

<asp:DropDownList id="ListFormat" AutoPostBack=true

OnSelectedIndexChanged="ListFormat_SelectedIndexChanged" runat=server >
<asp:ListItem>List</asp:ListItem>
<asp:ListItem selected>Bulleted List</asp:ListItem>
<asp:ListItem>Single Paragraph</asp:ListItem>
</asp:DropDownList>

</form>

</body>
</html>

结果如下：

2.2.9 使用panel控件

我们在进行用户信息录入的时候，如果使用ASP程序写的话，通常需要三个网页：
① 进行用户身份检查
② 填写相关的内容
③ 显示你填写的内容
填写的流程如下：

这样的话，我们将分别设计3个网页。这样会显得很麻烦。可喜的是，我们可以使用asp.net
中的panel控件，在一个页面中即可实现上述的功能。
流程如下：

用户身份验证

填写内容

显示输入的信息

这三个过程在asp.net可以在同一个网页中完成

好了，有了上面的叙述，请看panel.aspx文件内容：

<Html>
<Body bgcolor="White">
<center><H3>使用Panel控件示例<Hr></H3></center>
<title>使用Panel控件示例</title>
<script Language="VB" runat="server">
Sub Page_Load(sender As Object, e As EventArgs)
If Not Page.IsPostBack Then
panel2.Visible = False
panel3.Visible = False
End If
End Sub
Sub Button1_Click(sender As Object, e As EventArgs)
panel1.Visible = False
panel2.Visible = True
End Sub

Sub Button2_Click(sender As Object, e As EventArgs)
panel2.Visible = False
panel3.Visible = True
Span1.InnerHtml = "用户名: " & UserID.Text & "<BR>"
Span1.InnerHtml &= "密码: " & Password.Text & "<BR>"
Span1.InnerHtml &= "姓名: " & Name.Text & "<BR>"
Span1.InnerHtml &= "电话: " & Tel.Text & "<BR>"
Span1.InnerHtml &= "E-mail: " & mail.Text & "<BR>"
Span1.InnerHtml &= "地址: " & Addr.Text & "<P>"

End Sub
Sub Button3_Click(sender As Object, e As EventArgs)
Span1.InnerHtml &= "输入完成!"
Button3.Visible = False
End Sub
</script>
<Form runat="server">
<center>
<asp:Panel id="panel1" runat="server">
<Font Color="#800000"><B>第一步：请输入用户名和密码</B></Font><Blockquote>
用户名：<asp:TextBox id="UserID" runat="server" Text="kjwang"/><p>
密码：<asp:TextBox id="Password" TextMode="Password"
Text="kj6688" runat="server"/><p>
<Input Type="Button" id="Button1" value=" 登录 "
OnServerClick="Button1_Click" runat="server">
</Blockquote>
</asp:Panel>
<asp:Panel id="panel2" runat="server">
<Font Color="#800000"><B>第二步：请输入用户信息</B></Font><Blockquote>
姓名：<asp:TextBox id="Name" runat="server" Text="小李"/><p>
电话：<asp:TextBox id="Tel" runat="server" Text="(023)65355678" /><p>
E-mail：<asp:TextBox id="mail" runat="server" Text="jimmy.zh@263.net" /><p>
地址：<asp:TextBox id="Addr" runat="server" Text="重庆市人民路115#" Size="40" /><p>
<Input Type="Button" id="Button2" value="申请"
OnServerClick="Button2_Click" runat="server">
</Blockquote>
</asp:Panel>
<asp:Panel id="panel3" runat="server">
<Font Color="#800000"><B>第三步：请确认你的输入</B></Font><Blockquote>
<Span id="Span1" runat="server"/>
<Input Type="Button" id="Button3" value=" 确认 "
OnServerClick="Button3_Click" runat="server">
</Blockquote>
</asp:Panel>
</center>
</form>
<Hr></body>
</html>
请看程序的运行效果：
第一步：

第二步：

第三步：

大家可以留意浏览器的地址栏，我们注意到地址都是相同的。我就是我们使用pann控件所得到的效果。

2.2.10 选择控件

选择的方式有两种：单选、多选。我们下面用具体的例子来说明这两种选择控件在asp.net
上的实现。

对单选控件，asp.net里面有一个专用的表示：RadioButtonList，我们看下面的代码：

<ASP:RadioButtonList id=ccType Font-Name="Arial" RepeatLayout="Flow"
runat=server>
<asp:ListItem>招行一卡通</asp:ListItem>
<asp:ListItem>牡丹卡</asp:ListItem>
</ASP:RadioButtonList>
我们在取值的时候，就可以用一个语句：

Request.QueryString("ccType")
来取得这个值。下面是我们这个说明的完整代码（RadioButtonList.aspx）：

<html>
<body >
<center>
<br><br>
<h3><font face="Verdana">.NET->选择控件!</font></h3>
<br><br><br>
</center>
<form method=post runat=server>
<hr width=600 size=1 noshade>

<center>
<asp:ValidationSummary ID="valSum" runat="server"
HeaderText="你必须填写下面的内容:"
DisplayMode="SingleParagraph"
Font-Name="verdana"
Font-Size="12"
/>
<p>

<table border=0 width=600>
<tr>
<td colspan=3>
<center>
<font face=Arial size=2><b>信用卡信息</b></font>
</center>
</td>
</tr>
<tr>
<td align=right>
<font face=Arial size=2>信用卡类型:</font>
</td>
<td>

<ASP:RadioButtonList id=ccType Font-Name="Arial" RepeatLayout="Flow" runat=server>
<asp:ListItem>招行一卡通</asp:ListItem>
<asp:ListItem>牡丹卡</asp:ListItem>
</ASP:RadioButtonList>
</td>
<td>
<asp:RequiredFieldValidator id="ccTypeReqVal"
ControlToValidate="ccType"
ErrorMessage="信用卡类型. "
Display="Static"
InitialValue=""
Font-Name="Verdana" Font-Size="12"
runat=server>
*
</asp:RequiredFieldValidator>
</td>
</tr>
</table>
<p>
<input runat="server" type=submit value="提交">
<p>
<hr width=600 size=1 noshade>
</form>
</center>
</body>
</html>

我们的运行效果如下：

我们选择一个并提交，则会提交成功；反之，如果我们没有选择就提交，会出现如下的信息：

我们再来看看多选的情况：

'选择项列表
<asp:CheckBoxList id=Check1 runat="server">
<asp:ListItem>北京</asp:ListItem>
<asp:ListItem>深圳</asp:ListItem>
<asp:ListItem>上海</asp:ListItem>
<asp:ListItem>广州</asp:ListItem>
<asp:ListItem>南宁</asp:ListItem>
<asp:ListItem>重庆</asp:ListItem>
</asp:CheckBoxList>
跟我们上面的单选控件就相差在定义上，我们用CheckBoxList来描述我们的选择框，我们写一个方法来响应我们的"提交"事件：

'响应按钮事件
Sub Button1_Click(sender As Object, e As EventArgs)
Dim s As String = "被选择的选项是:<br>"
Dim i As Int32
For i = 0 to Check1.Items.Count-1
If Check1.Items(i).Selected Then
'列出选择项
s = s & Check1.Items(i).Text
s = s & "<br>"
End If
Next
'打印出选择项
Label1.Text = s
End Sub
这个方法为定义打印被选择的选项。具体的内容如下(list.aspx)：

<html>
<head>
<script language="VB" runat="server">
'响应按钮事件
Sub Button1_Click(sender As Object, e As EventArgs)
Dim s As String = "被选择的选项是:<br>"
Dim i As Int32
For i = 0 to Check1.Items.Count-1
If Check1.Items(i).Selected Then
'列出选择项
s = s & Check1.Items(i).Text
s = s & "<br>"
End If
Next
'打印出选择项
Label1.Text = s
End Sub
</script>
</head>
<body bgcolor="#ccccff">
<br><br><br>
<center>
<h3><font face="Verdana">.NET->CheckBoxList</font></h3>
</center>
<br><br>
<center>
<form runat=server>
'选择象列表
<asp:CheckBoxList id=Check1 runat="server">
<asp:ListItem>北京</asp:ListItem>
<asp:ListItem>深圳</asp:ListItem>
<asp:ListItem>上海</asp:ListItem>
<asp:ListItem>广州</asp:ListItem>
<asp:ListItem>南宁</asp:ListItem>
<asp:ListItem>重庆</asp:ListItem>
</asp:CheckBoxList>
<p>
<asp:Button id=Button1 Text="提交" onclick="Button1_Click" runat="server"/>
<p>
<asp:Label id=Label1 font-name="Verdana" font-size="8pt" runat="server"/>
</form>
</center>
</body>
</html>

我们看到显示如下：

选择几个选项，并点击"提交"按钮"，看到如下的情况：

2.2.11 ImageButton 控件

ImageButton 控件
当我们在浏览网页的时候，可能会发现这样一种情况：当鼠标移到图象按钮上和当鼠标移走的时候，将会发现同一按钮上将会显示不同的两个图片。我们可以用Image Button控件的 onmouseout 和 onmouseover 事件来实现。
请看Image.aspx中的代码：

<html>
<Body BgColor="White">
<center><H3>ImageButton 控件演示</H3></center>
<title>ImageButton 控件演示</title>
<script Language="VB" runat="server">
Sub Button1_Click(sender As Object, e As ImageClickEventArgs)
'定义当我们点击按钮的时候，将访问的网页
Page.Navigate( "http://www.yesky.com" )
End Sub
</script>
<Form runat="server">
<center>
<asp:ImageButton OnClick="Button1_Click"
ImageUrl="18.gif" id="Button1" runat="server"
OnMouseOut="this.src='18.gif';"
OnMouseOver="this.src='19.gif';" />
</center>
</Form>
<asp:Label id="Label1" runat="server"/>
</Body>
</Html>
在这段程序中，我们使用了onmouseout和onmouseover事件。
请看程序的演示效果：

当鼠标移动到按钮上的时候，将显示：

2.2.12 列表控件

在asp.net中，有几种方法可以应用于列表控件。我们可以在aspx代码中直接嵌入相关
的代码，也可以在页面装入的时候加载这些列表信息。

下面是具体的应用，我们先看看在aspx中的列表方法：

<asp:DropDownList id=DropDown1 runat="server">
<asp:ListItem>北京</asp:ListItem>
<asp:ListItem>深圳</asp:ListItem>
<asp:ListItem>上海</asp:ListItem>
<asp:ListItem>广州</asp:ListItem>
<asp:ListItem>南宁</asp:ListItem>
<asp:ListItem>重庆</asp:ListItem>
</asp:DropDownList>
我们在需要取出所选的数据时，直接去取id值，即DropDown1；我们再定一一个方法，响应"提交"按钮的事件，就可以了。下面是完整的代码(DropDown.aspx)：

<html>
<head>

'在点击按钮时候响应
Sub list_Click(sender As Object, e As EventArgs)
Label1.Text="你的选择是: " + DropDown1.SelectedItem.Text
End Sub

</script>

</head>
<body bgcolor="#ccccff">
<br><br><br>
<center>
<h3><font face="Verdana">.NET->列表控件</font></h3>
</center>
<br><br>
<center>
<form runat=server>

<asp:DropDownList id=DropDown1 runat="server">
<asp:ListItem>北京</asp:ListItem>
<asp:ListItem>深圳</asp:ListItem>
<asp:ListItem>上海</asp:ListItem>
<asp:ListItem>广州</asp:ListItem>
<asp:ListItem>南宁</asp:ListItem>
<asp:ListItem>重庆</asp:ListItem>
</asp:DropDownList>

<asp:button text="提交" OnClick="list_Click" runat=server/>

<p>

<asp:Label id=Label1 font-name="Verdana" font-size="10pt" runat="server">

</asp:Label>

</form>
</center>
</body>
</html>
我们看看运行效果：

点击提交按钮时候看到下面的效果：

下面我们再来看看另外一个列表控件的使用，我们定义一个在页面装载的时候调用的方法：

'再页面装载的时候调用的方法：
Sub Page_Load(sender As Object, e As EventArgs)
If Not IsPostBack Then
Dim values as ArrayList= new ArrayList()
values.Add ("北京")
values.Add ("深圳")
values.Add ("上海")
values.Add ("广州")
values.Add ("南宁")
values.Add ("重庆")
'设定DropDown1的数据源为values，即上面定义的信息
DropDown1.DataSource = values
'数据的绑定
DropDown1.DataBind
End If
End Sub
我们在aspx代码中调用它：

<asp:DropDownList id="DropDown1" runat="server" />

就这样的一个简单的语句就可以了，下面是这个文件的完整的代码：

If Not IsPostBack Then
Dim values as ArrayList= new ArrayList()
values.Add ("北京")
values.Add ("深圳")
values.Add ("上海")
values.Add ("广州")
values.Add ("南宁")
values.Add ("重庆")
'设定DropDown1的数据源为values，即上面定义的信息
DropDown1.DataSource = values
'数据的绑定
DropDown1.DataBind
End If
End Sub

'提交按钮响应的方法
Sub select02_Click(sender As Object, e As EventArgs)
Label1.Text = "你的选择是: " + DropDown1.SelectedItem.Text
End Sub

</script>

</head>
<body BGCOLOR="#CCCCFF">

<asp:DropDownList id="DropDown1" runat="server" />

<asp:button Text="提交" OnClick="select02_Click" runat=server/>
<p>
<asp:Label id=Label1 font-name="Verdana" font-size="10pt" runat="server" />

</form>
</center>
</body>
</html>

运行的结果跟上面的一样。

2.2.13 重复列表Repeator

这种服务器控件会以给定的形式重复显示数据项目，故称之为重复列表。使用重复列表有两个要素，即数据的来源和数据的表现形式。数据来源的指定由控件的DataSource属性决定，并调用方法DataBind绑定到控件上。这里需要说明的是数据取出以后如何表现的问题，即如何布局。重复列表的数据布局是由给定的模板来决定的，由于重复列表没有缺省的模板，所以使用重复列表时至少要定义一个最基本的模板"ItemTemplate"。
重复列表支持以下模板标识，所谓模板就是预先定义的一种表现形式，以后我们还会就这个问题专门讨论，这里就不在多说。

1） ItemTemplate模板，数据项模板，必需的，它定义了数据项极其表现形式。
2） AlternatingItemTemplate模板，数据项交替模板，为了使相邻的数据项能够有所区别，可以定义交替模板，它使得相邻的数据项看起来明显不同，缺省情况下，它和ItemTemplate模板定义一致，即缺省下相邻数据项无表示区分。
3） SeparatorTemplate模板，分割符模板，定义数据项之间的分割符。
4） HeaderTemplate模板，报头定义模板，定义重复列表的表头表现形式。
5） FooterTemplate模板，表尾定义模板，定义重复列表的列表尾部的表现形式。
切记，由于缺乏内置的预定义模板和风格，在使用重复列表时，请一定记住要使用HTML格式定义自己的模板。
下面给出一个例子，看它是如何使用重复列表控件的。下面的例子首先在页面加载过程时把数据装载，并绑定到两个重复列表上；然后以一个2列的表格显示；最后把所有数据显示到一行上面，并且国家和领导人之间以3个中横线分隔，每一国家之间以竖划线分隔。

1．源代码(FormRepeater.aspx)

<html>
<head>
<script language="vb" runat=server>

Class Leader
'定义一个类Leader
dim strCountry as String
dim strName as String

Public Sub New(country As String, name As String)
MyBase.New
strName = name
strCountry= country
End Sub

ReadOnly Property Name As String
Get
Return strName
End Get
End Property

ReadOnly Property Country As String
Get
Return strCountry
End Get
End Property

End Class

sub Page_Load(s as object,e as eventargs)
dim leaders as ArrayList = New ArrayList()
if Not Page.IsPostBack
'加载数据
leaders.add(new leader("美利坚","布什"))
leaders.add(new leader("俄罗斯","普京"))
leaders.add(new leader("中国","江泽民"))

Repeater1.DataSource=leaders
Repeater2.DataSource=leaders
Repeater1.DataBind
Repeater2.DataBind
end if
end sub
</script>
<title>
重复列表使用例子
</title>
</head>

<center>
<h2>重复列表的使用</h2>
<hr>
<br>
'以表格形式显示国家，领导人信息
<asp:Repeater id="Repeater1" runat=server>
'定义表头
<template name=HeaderTemplate>
<table border=2>
<tr>
<th>
国家名
</th>
<th>
领导人
</th>
</tr>
</template>

'定义数据显示格式
<template name=ItemTemplate>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem,"Country") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem,"Name") %>
</td>
</tr>
</template>

'定义表尾
<template name=FooterTemplate>
<tr>
<td>日期</td>
<td>2001年</td>
</tr>
</table>
</template>
</asp:Repeater>

<br>
<asp:Repeater id=Repeater2 runat=server>
'国家和领导人以|分割显示
<template name=ItemTemplate>
<%# DataBinder.Eval(Container.DataItem,"Country") %>
---
<%# DataBinder.Eval(Container.DataItem,"Name") %>
</template>

2．输出结果

2.2.14 数据列表 DataList

数据列表显示跟重复列表（Repeator）比较类似，但是它可以选择和修改数据项的内容。数据列表的数据显示和布局也如同重复列表都是通过"模板"来控制的。同样的，模板至少要定义一个"数据项模板"（ItemTemplate）来指定显示布局。数据列表支持的模板类型更多，它们如下：

1） ItemTemplate模板，数据项模板，必需的，它定义了数据项极其表现形式。
2） AlternatingItemTemplate模板，，数据项交替模板，为了使相邻的数据项能够有所区别，可以定义交替模板，它使得相邻的数据项看起来明显不同，缺省情况下，它和ItemTemplate模板定义一致，即缺省下相邻数据项无表示区分。
3） SeparatorTemplate模板，分割符模板，定义数据项之间的分割符。
4） SelectedItemTemplate模板，选中项模板，定义被选择的数据项的表现内容与布局形式，当未定义"SelectedItemTemplate"模板时，选中项的表现内容与形式无特殊化，由ItemTemplate模板定义所决定。
5） EditItemTemplate模板，修改选项模板，定义即将被修改的数据项的显示内容与布局形式，缺省情况下，修改选项模板就是数据项模板（ItemTemplate）的定义。
6） HeaderTemplate模板，报头定义模板，定义重复列表的表头表现形式。
7） FooterTemplate模板，表尾定义模板，定义重复列表的列表尾部的表现形式。

数据列表还可以通过风格形式来定义模板的字体、颜色、边框。每一种模板都有它自己的风格属性。例如，可以通过设置修改选项模板的风格属性来指定它的风格。
此外，还有一些其他属性可以导致数据列表的显示有较大的改变，下面择重说明。
RepeatLayout：显示布局格式，指定是否以表格形式显示内容。
RepeatLayout.Table指定布局以表格形式显示。
RepeatLayout.Flow指定布局以流格式显示，即不加边框。
RepeatDirection：显示方向，指定显示是横向显示还是纵向显示
RepeatDirection.Horizontal指定是横向显示
RepeatDirection.Vertical指定是纵向显示
RepeatColumns：一行显示列数，指定一行可以显示的列数，缺省情况下，系统设置为一行显示一列。这里需要注意的是，当显示方向不同时，虽然一行显示的列数不变，但显示的布局和显示内容的排列次序却有可能大不相同。
例如：有10个数据需要显示，RepeatColumns设定为4，即一行显示4列时
当RepeatDirection=RepeatDirection.Horizontal横向显示时，显示布局如下：
Item1 Item2 Item3 Item4
Item5 Item6 Item7 Item8
Item9 Item10
当RepeatDirection=RepeatDirection.Vertical纵向显示时，显示布局如下：
Item1 Item4 Item7 Item10
Item2 Item5 Item8
Item3 Item6 Item9
BorderWidth：当RepeatLayout=RepeatLayout.Table即以表格形式显示时，边框的线宽度
Unit.Pixel(x) x>=0,当x为0时无边框
GridLines: 当RepeatLayout=RepeatLayout.Table以表格形式显示时，在表格当中是否有网隔线分离表格各单元。
GridLines=GridLines.Both，有横向和纵向两个方向的分割线。
GirdLines=GridLines.None，无论横向还是纵向均无分割线。

例子：演示以上介绍的各属性的设置对数据列表输出的影响，并且当数据项被选中时，数据项以粉红色来反显。

1．源程序(DataList.aspx)

<%@ Import Namespace="System.Data" %>
<html>
<script language="VB" runat="server">
'创建初始化表和载入实验数据
Function LoadData() As ICollection
Dim dt As DataTable
Dim dr As DataRow
Dim i As Integer
'创建数据表
dt = New DataTable
'建立数据项结构
dt.Columns.Add(New DataColumn("Content", GetType(String)))
'载入10个实验数据
For i = 1 To 10
dr = dt.NewRow()
dr(0) = "Info " & i.ToString()
dt.Rows.Add(dr)
Next
'为数据表建立一个数据视图，并将其返回
LoadData = New DataView(dt)
End Function
Sub Page_Load(s As Object, e As EventArgs)
If Not IsPostBack Then
DataList1.DataSource = LoadData()
DataList1.DataBind
End If
End Sub
Sub DataList1_ItemCommand(s As Object, e As DataListCommandEventArgs)
Dim cmd As String = e.CommandSource.CommandName

If cmd = "select" Then
DataList1.SelectedIndex = e.Item.ItemIndex
End If

DataList1.DataSource = LoadData()
DataList1.DataBind
End Sub
'当刷新按钮按下后，对数据列表属性重新设置
Sub RefreshBtn_Click(s As Object, e As EventArgs)
If lstDirection.SelectedIndex = 0
DataList1.RepeatDirection = RepeatDirection.Horizontal
Else
DataList1.RepeatDirection = RepeatDirection.Vertical
End If

If lstLayout.SelectedIndex = 0
DataList1.RepeatLayout = RepeatLayout.Table
Else
DataList1.RepeatLayout = RepeatLayout.Flow
End If
If chkBorder.Checked And DataList1.RepeatLayout = RepeatLayout.Table Then
DataList1.BorderWidth = Unit.Pixel(1)
Else
DataList1.BorderWidth = Unit.Pixel(0)
End If

If chkGridLines.Checked And DataList1.RepeatLayout = RepeatLayout.Table then
DataList1.GridLines = GridLines.Both
Else
DataList1.GridLines = GridLines.None
End If
DataList1.RepeatColumns=lstColsPerLine.SelectedIndex + 1
End Sub
</script>
<head>
<title>
数据列表实验
</title>
</head>
<body>
<center>
<h2>
数据列表属性方法实验
</h2>
<form runat=server>
<font face="Verdana" size="-1">
<asp:DataList id="DataList1" runat="server"
BorderColor="black"
CellPadding="3"
Font-Name="Verdana"
Font-Size="8pt"
HeaderStyle-BackColor="#aaaadd"
AlternatingItemStyle-BackColor="#ccccff"
SelectedItemStyle-BackColor="#ffccff"
OnItemCommand="DataList1_ItemCommand"
>
<template name="HeaderTemplate">
<h><center>内容</center></h>
</template>
<template name="ItemTemplate">
<asp:LinkButton id="DetailBtn" runat="server" Text="详细" CommandName="select" />
<%# DataBinder.Eval(Container.DataItem, "Content") %>
</template>
<template name="SelectedItemTemplate">
<%# DataBinder.Eval(Container.DataItem, "Content") %>已经被选中
</template>
</asp:DataList>
<p>
<hr>
显示方向:
<asp:DropDownList id=lstDirection runat="server">
<asp:ListItem>横向</asp:ListItem>
<asp:ListItem>纵向</asp:ListItem>
</asp:DropDownList>
布局类型:
<asp:DropDownList id=lstLayout runat="server">
<asp:ListItem>表方式</asp:ListItem>
<asp:ListItem>流方式</asp:ListItem>
</asp:DropDownList>
一行列数:
<asp:DropDownList id=lstColsPerLine runat="server">
<asp:ListItem>1列</asp:ListItem>
<asp:ListItem>2列</asp:ListItem>
<asp:ListItem>3列</asp:ListItem>
<asp:ListItem>4列</asp:ListItem>
<asp:ListItem>5列</asp:ListItem>
</asp:DropDownList>
边框显示:
<asp:CheckBox id=chkBorder runat="server" />
网格显示：
<asp:CheckBox id=chkGridLines runat="server" />
<p>

<asp:Button id=RefreshBtn Text="刷新界面" OnClick="RefreshBtn_Click" runat="server"/>

</font>
</form>
</center>
</body>
</html>

2．开始时的界面显示如下，（方向为横向，表方式，一行一列，无边框及网格）

3．当选择显示方向为横向，表方式，一行含5列，显示边框和网格时，界面显示如下：

4．选择纵向显示，表方式，一行含5列，无边框，无网格时，界面显示如下：

5．当在步骤4的基础上选择了第5项数据项时，界面显示如下：

接下来，我们讨论一下一种比较有实际意义的应用，即对选中数据项的修改的实现。
首先是对模板EditItemTemplate的定义，通常做法是排列可以进行修改的内容，然后定义一个修改确认键和一个修改取消键。
然后应定义数据列表支持的三种消息处理函数即OnEditCommand、OnUpdateCommand、OnCancelCommand(编辑事件处理、修改事件处理、撤消修改事件处理)
编辑事件处理：通常设置数据列表的EditItemIndex属性为选中的数据项索引，然后重载数据列表。
Protected Sub DataList_EditCommand(Source As Object, e As DataListCommandEventArgs)
DataList1.EditItemIndex = CType(e.Item.ItemIndex, Integer)
'重新加载并绑定数据
BindList()
End Sub

取消修改事件处理：通常设置数据列表的EditItemIndex为-1，表示没有数据项需要修改，然后重载数据列表
Protected Sub DataList_CancelCommand(Source As Object, e As DataListCommandEventArgs)
DataList1.EditItemIndex = -1
BindList()
End Sub

修改事件处理：通常先修改数据源的数据，然后设置数据列表的EditItemIndex为-1，最后重载数据列表。
Sub DataList_UpdateCommand(Source As Object, e As DataListCommandEventArgs)
'修改数据源数据，应根据具体情况而变
ModifySource()
DataList.EditItemIndex=-1
BindList
End Sub

例子：显示一个关于书籍修改的实例。一条书籍记录包含序号、书名、价格信息。初始化数据时，我们设置序号为1-6，书名为"书名"+序号，价格为1.11*序号。

1．源程序(FormDataList01.aspx)
<
<%@ Import Namespace="System.Data" %>
<html>
<script language="VB" runat="server">
dim Book As DataTable
dim BookView As DataView
'设置数据源，并绑定
Sub BindList()
DataList1.DataSource= BookView
DataList1.DataBind
End Sub

Sub Page_Load(s As Object, e As EventArgs)

Dim dr As DataRow
'如果没有连接变量session_book，定义数据表Book,并载入实验数据
if session("session_Book") = Nothing then
Book = New DataTable()
Book.Columns.Add(new DataColumn("num", GetType(string)))
Book.Columns.Add(new DataColumn("name", GetType(String)))
Book.Columns.Add(new DataColumn("price", GetType(String)))
session("session_Book") = Book
'载入部分测试数据
For i = 1 To 6
dr = Book.NewRow()
dr(0)=i.ToString
dr(1) = "书名 " & i.ToString
dr(2) = ( 1.11* i).ToString
Book.Rows.Add(dr)
Next
'有session_book变量，直接引用
Else
Book = session("session_Book")
end if
'产生数据视图，并按num字段排序
BookView = New DataView(Book)
BookView.Sort="num"
'初次需绑定数据源
if Not IsPostBack then
BindList
End If

End Sub

'编辑处理函数
Sub DataList_EditCommand(sender As Object, e As DataListCommandEventArgs)
DataList1.EditItemIndex = e.Item.ItemIndex
BindList
End Sub
'取消处理函数
Sub DataList_CancelCommand(sender As Object, e As DataListCommandEventArgs)
DataList1.EditItemIndex = -1
BindList
End Sub
'更新处理函数
Sub DataList_UpdateCommand(sender As Object, e As DataListCommandEventArgs)
Dim lbl1 As Label = e.Item.FindControl("lblNum")
Dim txt2 As TextBox = e.Item.FindControl("txtBook")
Dim txt3 As TextBox = e.Item.FindControl("txtPrice")

dim strNum as String
dim strBook as String
dim strPrice as String

strNum=lbl1.text
strBook=txt2.text
strPrice=txt3.text
'用先删除再插入的方式，实现数据的更新操作
BookView.RowFilter = "num='" & strNum & "'"
If BookView.Count > 0 Then
BookView.Delete(0)
End If

BookView.RowFilter = ""
dim dr as DataRow=Book.NewRow()
dr(0) = strNum
dr(1) = strBook
dr(2) = strPrice
Book.Rows.Add(dr)

DataList1.EditItemIndex = -1
BindList
End Sub

</script>
<head>
<title>
数据列表修改实验
</title>
</head>
<body>
<center>
<h2>数据列表修改实验</h2>
<hr>
<p></p>

<form runat=server>
<font face="Verdana" size="-1">

<asp:DataList id="DataList1" runat="server"
BorderColor="black"
BorderWidth="1"
GridLines="Both"
CellPadding="3"
CellSpacing="0"
Font-Name="Verdana"
Font-Size="8pt"
Width="150px"
HeaderStyle-BackColor="#aaaadd"
AlternatingItemStyle-BackColor="Gainsboro"
EditItemStyle-BackColor="green"
OnEditCommand="DataList_EditCommand"
OnUpdateCommand="DataList_UpdateCommand"
OnCancelCommand="DataList_CancelCommand"
>
<template name="HeaderTemplate">
<center><h>书籍序号</h></center>
</template>
<template name="ItemTemplate">
<asp:LinkButton id="button1" runat="server" Text="详细" CommandName="edit" />
<%# Container.DataItem("name") %>
</template>
<template name="EditItemTemplate">
书籍: 序号
<asp:Label id="lblNum" runat="server" Text='<%# Contai, ner.DataItem("num") %>' /><br, >
书名:
<asp:TextBox id="txtBook" runat="server" Text='<%# Container.DataItem("name") %>' /><br>
价格:
<asp:TextBox id="txtPrice" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "price") %>' />
<br>
<center>
<asp:Button id="button2" runat="server" Text="修改" CommandName="update" />
<asp:Button id="button3" runat="server" Text="撤消" CommandName="cancel" />
</center>
</template>
</asp:DataList>
</font>
</form>
</center>
</body>
</html>
2．准备对第2项进行修改，此时的画面如下：

3.把序号为2的书籍的价格改为9.99以后，重新进入其编辑状态后，它的输出画面如下：

2.2.15 数据表格DataGrid

数据表格服务器端控件以表格形式显示数据内容，同时还支持数据项的选择、排序、分页和修改。缺省情况下，数据表格为数据源中每一个域绑定一个列，并且根据数据源中每一个域中数据的出现次序把数据填入数据表格中的每一个列中。数据源的域名将成为数据表格的列名，数据源的域值以文本标识形式填入数据表格中。
通过直接操作表格的Columns集合，可以控制数据表格各个列的次序、表现方式以及显示内容。缺省的列为Bound型列，它以文本标识的形式显示数据内容。此外，还有许多类型的列类型可供用户选择。
列类型的定义有两种方式：显视的用户定义列类型和自动产生的列类型（AutoGenerateColumns）。当两种列类型定义方式一起使用时，先用用户定义列类型产生列的类型定义，接着剩下的再使用自动列定义规则产生出其他的列类型定义。请注意自动定义产生的列定义不会加入Columns集合。
列类型介绍：

1） bound column ，列可以进行排序和填入内容。这是大多数列缺省用法。
两个重要的属性为：HeaderText指定列的表头显示
DataField指定对应数据源的域
2） hyperlink column，列内容以hyperlink控件方式表现出来。它主要用于从数据表格的一个数据项跳转到另外的一个页面，做出更详尽的解释或显示。
重要的属性有：
HeaderText指定列表头的显示
DataNavigateUrlField指定对应数据源的域作为跳转时的参数
DataNavigateUrlFormatString指定跳转时的url格式
DataTextField指定数据源的域作为显示列内容来源
3） button column，把一行数据的用户处理交给数据表格所定义的事件处理函数。通常用于对某一行数据进行某种操作，例如，加入一行或者是删去一行数据等等。
重要的属性有：
HeaderText指定列表头的显示
Text指定按钮上显示的文字
CommandName指定产生的激活命令名
4） Template column，列内容以自定义控件组成的模板方式显示出来。通常用作用户需要自定义显示格式的时候。
5） Edit Command column，当数据表格的数据项发生编辑、修改、取消修改时，相应处理函数的入口显示。它通常结合数据表格的EditItemIndex属性来使用，当某行数据需要编辑、修改、取消操作时，通过它进入相应的处理函数。例如，当需要对某行数据进行修改（update）时，通过它进入修改的处理步骤中。

其他重要列属性介绍：
1） Visible属性，控制定义的列是否出现在显示的数据列表中。
2） AllowSorting属性，是否可以进行列排序。当AollowSorting=true时，可以以点击列的列表头的方式，把数据以该列次序进行排序。缺省的（即载入数据后）的排序方式，实际上是以数据在数据源中的排列次序进行排序的。
3） AllowPage属性，是否以分页方式显示数据。当对有大量数据的数据源进行显示时，可以以例如10行一页的方式来显示数据，同时显示一个下页/前页的按钮，按下按钮可以以向前或向后的方式浏览整个数据源的数据。当AllowPage=true时，即以分页方式进行显示。可以通过设定CurrentPageIndex属性来直接跳转到相应的数据页。

例子：演示以上各种类型的列定义的用法
1．源程序(FormDataGrid.aspx)

<%@ Import Namespace="System.Data" %>

<html>
<script language="VB" runat="server">
dim Order as DataTable
dim OrderView as DataView

'对数据表格1创建数据表，并返回数据视图
Function LoadData() As ICollection

Dim dt As DataTable
Dim dr As DataRow
Dim i As Integer

'创建数据表
dt = New DataTable
dt.Columns.Add(New DataColumn("Num", GetType(Integer)))
dt.Columns.Add(New DataColumn("Name", GetType(String)))
dt.Columns.Add(New DataColumn("DtTm", GetType(DateTime)))
dt.Columns.Add(New DataColumn("Assembly", GetType(Boolean)))
dt.Columns.Add(new DataColumn("Price", GetType(Double)))

'载入数据
For i = 1 To 6
dr = dt.NewRow()
dr(0) = i
dr(1) = "书名 " + i.ToString()
dr(2) = DateTime.Now.ToShortTimeString
If (i Mod 2 <> 0) Then
dr(3) = True
Else
dr(3) = False
End If
dr(4) = 1.11 * i
'把产生的数据加入数据表中
dt.Rows.Add(dr)
Next

LoadData = New DataView(dt)

End Function

'页面初始化，分别对DataGrid1和DataGrid2绑定数据源
Sub Page_Load(sender As Object, e As EventArgs)

If Session("session_order") = Nothing Then
Order = New DataTable()
Order.Columns.Add(new DataColumn("Name", GetType(string)))
Order.Columns.Add(new DataColumn("Price", GetType(string)))
Session("session_order") = Order
Else
Order = Session("session_order")
End If
OrderView = New DataView(Order)
DataGrid2.DataSource = OrderView
DataGrid2.DataBind

If Not IsPostBack Then
DataGrid1.DataSource = LoadData()
DataGrid1.DataBind
End If

End Sub

'对ButtonColumns的处理函数集合
Sub Grid_Command(sender As Object, e As DataGridCommandEventArgs)

Dim dr As DataRow = order.NewRow()

Dim Cell1 As TableCell = e.Item.Cells(3)
Dim Cell2 As TableCell = e.Item.Cells(6)
Dim name As String = Cell1.Text
Dim price As String = Cell2.Text

If e.CommandSource.CommandName = "Add" Then
dr(0) = name
dr(1) = price
order.Rows.Add(dr)
Else
OrderView.RowFilter = "name='" & name & "'"
If OrderView.Count > 0 Then
OrderView.Delete(0)
End If
OrderView.RowFilter = ""
End If
DataGrid2.DataBind()
End Sub

</script>
<head>
<title>
数据表格实验
</title>
</head>

<body>
<center>
<h2>数据表格列类型实验</h2>
<hr>
<p></p>

<form runat=server>
<h3><b>图书清单</b></h3>
<ASP:DataGrid id="DataGrid1" runat="server"
BorderColor="black"
BorderWidth="1"
GridLines="Both"
CellPadding="3"
CellSpacing="0"
Font-Name="Verdana"
Font-Size="8pt"
HeaderStyle-BackColor="#aaaadd"
AutoGenerateColumns="false"
OnItemCommand="Grid_Command">
<property name="Columns">

<asp:ButtonColumn HeaderText="操作" Text="订购" CommandName="Add" />
<asp:ButtonColumn HeaderText="操作" Text="退订" CommandName="Remove" />

<asp:HyperLinkColumn
HeaderText="链接"
DataNavigateUrlField="Num"
DataNavigateUrlFormatString="FormDataGrid01.aspx?id={0}"
DataTextField="Num"
Target="_new"
/>

<asp:BoundColumn HeaderText="书名" DataField="Name" />
<asp:BoundColumn HeaderText="入库时间" DataField="DtTm"/>
<! -- 1个TemplateColumn示例 ,以CheckBox来表示布尔型数据 -->
<asp:TemplateColumn HeaderText="合集">
<template name="ItemTemplate">
<asp:CheckBox ID=Chk1 Checked='<%# DataBinder.Eval(Container.DataItem, "Assembly") %>' Enabled="false" runat="server" />
</template>
</asp:TemplateColumn>

<asp:BoundColumn HeaderText="价格" DataField="Price" DataFormatString="{0:c}" ItemStyle-HorizontalAlign="right" />
</property>

</asp:DataGrid>
<hr>
<h3><b>订购清单</b></h3>
<ASP:DataGrid id="DataGrid2" runat="server"
BorderColor="black"
BorderWidth="1"
CellPadding="3"
Font-Name="Verdana"
Font-Size="8pt"
HeaderStyle-BackColor="#aaaadd"
/>

</form>
</center>
</body>
</html>

文件FormDataGrid01.aspx的内容：

<html>
<head>
<title>
数据表格链接测试实验
</title>
<script language="VB" runat="server">

Dim num As String

Sub Page_Load(sender As Object, e As EventArgs)
num=Request.QueryString("id")
End Sub

</script>

</head>
<body bgcolor=#ccccff>
<center>
<h2>数据表格链接测试结果画面</h2>
<hr>
<p></p>

<h4>您选择的是第<u> <%= num %></u>本藏书</h4>

</body>
</html>

2．开始时画面：

3．当选择订购了第一本和第三本后的画面如下：

4．当选择退订第三本书后的画面如下：

5．当点击连接第六项时的画面如下：

2.2.16 小结

本章主要讲述了几个服务器端的控件、它们的校验、取值方法等，从中我们可以看到asp.net中各种控件功能是非常强大的，如上面的例子所示，我们甚至可以用一个简单的语句就可以验证输入的合法性。对取值，我们也有简单的方法，对比于用html所写的代码，我们觉得用asp.net所写的是简单了很多。

转自：http://www.lezhu99.com/4.html

0 0