4.当移动光标到“OnMouseOver事件演示“按钮时,该按钮背景色变为淡绿色:
7 o1 g7 O" H8 b0 w0 ^% u8 I5.当光标移动到“OnMouseOut事件演示“按钮时,该按钮的字体变为黑体,但是我们需观察的却是再移开光标后,字体是否恢复正常,结论是会的,这里只给出了移动到该按钮时的画面,移开后的画面由于和开始画面一样,就不演示了。$ }4 S0 G" F9 B0 q
2.2.4 复选控件
0 b. Y- Y9 Y* A- x- y* [; J' b: `8 I在日常信息输入中,我们会遇到这样的情况,输入的信息只有两种可能性(例如:性别、婚否之类),如果采用文本输入的话,一者输入繁琐,二者无法对输入信息的有效性进行控制,这时如果采用复选控件(CheckBox),就会大大减轻数据输入人员的负担,同时输入数据的规范性得到了保证。
& [* E- n3 d3 v6 N+ l- bCheckBox的使用比较简单,主要使用id属性和text属性。Id属性指定对复选控件实例的命名,Text属性主要用于描述选择的条件。另外当复选控件被选择以后,通常根据其Checked属性是否为真来判断用户选择与否。; j5 O$ r" G6 d2 _6 g
例如:使用复选控件( u0 c- }' g) {' U8 @
…' A6 A1 W# r! U( P- y+ V, N$ f/ j e
<asp:CheckBox id=”chkbox1” text=”中国人” runat=server/>$ M. c, l$ n1 F& y
…' @& M0 A, g, m
判断条件满足否:
0 l% y7 K+ m. ?4 L( ]. q- o; _…& I, r- H' Q2 R0 u/ W
If chkbox1.Checked=True
# C. {0 b4 \9 b/ L* r- C( Q5 f$ HLblTxt.text=”是中国人”
, R! I& w1 q/ C/ l1 S* k [Else
6 W; y# w- R K* W$ ?- ^LblTxt.text=”不是中国人”
0 I- v) J7 w6 I7 C+ z4 V* UEnd If
% \+ V& J4 k" R: a6 v…
7 T; S4 a6 J5 U* N$ \; o2.2.5 单选控件
* K: f- o* w( Y% g) f `使用单选控件的情况跟使用复选控件的条件差不多,区别的地方在于,单选控件的选择可能性不一定是两种,只要是有限种可能性,并且只能从中选择一种结果,在原则上都可以用单选控件(RadioButton)来实现。
0 w6 ]% H0 g, z1 L- F单选控件主要的属性跟复选控件也类似,也有id属性、text属性,同样也依靠Checked属性来判断是否选中,但是与多个复选控件之间互不相关不同,多个单选控件之间存在着联系,要么是同一选择中的条件,要么不是。所以单选控件多了一个GroupName属性,它用来指明多个单选控件是否是同一条件下的选择项,GroupName相同的多个单选控件之间只能有一个被选中。6 }2 i! K( j" q/ L; C
例如:对单选控件的使用" ~# G2 j- a8 ^7 ?
…, k6 i! s3 w A" a! h! A" z( @
年龄选择:
/ p) m9 L9 Z: ~! u ?* b<asp:RadioButton id=”rbtn11” text=”20岁以下” GroupName=”group1” runat=server /><br>
' D% j4 B2 \* e) |& |! @<asp:RadioButton id=”rbtn12” text=”20-30岁” GroupName=”group1” runat=server /><br>+ {6 l2 u6 W, S
<asp:RadioButton id=”rbtn13” text=”30-40岁” GroupName=”group1” runat=server /><br>
8 ]+ o; v. R5 s<asp:RadioButton id=”rbtn14” text=”40岁以上” GroupName=”group1” runat=server /><br>( k& }8 s8 A! w: ^) H6 M& H; ]& \
工作收入:
: }+ }2 S7 U8 ]* i5 J2 Q<asp:RadioButton id=”rbtn21” text=”1000元以下” GroupName=”group2” runat=server /><br>* Q/ O; y# M3 z. d
<asp:RadioButton id=”rbtn22” text=”1000-2000元” GroupName=”group2” runat=server/><br>
$ D. K/ r3 n2 E) v, o8 p<asp:RadioButton id=”rbtn23” text=”2000元以上” GroupName=”group2” runat=server />, z2 q6 w! p1 K/ Z: w
…
/ n4 I5 U& [4 `8 a7 w/ X! g* c5 L2 Z对选择条件的判断:; Y5 W2 x8 b; A3 w( b- |+ q
…; Y5 I/ R/ @9 X) `7 j D
If rbtn11.Checked = True5 p& Q2 a: |6 F& C. S4 k4 n: p
LblResult1.text=”20岁以下”
1 f8 z, I' X9 {7 V# ?# sElse if rbtn12.Checked = True$ x7 J U( W, D& {7 P6 r
LblResult1.text=”20-30岁”
! `4 H1 \5 @$ t+ R- b2 uElse if rbtn13.Checked = True
0 m/ m/ ^* \. B8 S% A" fLblResult1.text=”30-40岁”
- `. E e) m5 a& d1 z7 d( @. q. X/ vElse
5 W- W$ P; J/ K' t! g9 P6 ULblResult1.text=”40岁以上”
. S% K7 h6 P) tEnd If
& s% O6 A+ L) A% O8 q! b8 iIf rbtn21.Checked = True: _+ @+ W' O( Z
LblResult2.text=”1000元以下”
8 S. `7 H g/ n b, p+ F4 nElse if rbtn22.Checked = True
: r# {. F. T. W. R) a8 cLblResult2.text=”1000-2000元”
) n! b$ m ]! G5 J+ {8 I" q% eElse
$ t8 L# O W5 i. KLblResult.text=”2000元以上”
/ a+ }$ H& Z- g. o3 m1 {End If+ m" A% J% t% k- k1 ~
…& A( ^ A3 B& T
2.2.6 列表框 \- U5 n8 y( P- U, k( l3 x
列表框(ListBox)是在一个文本框内提供多个选项供用户选择的控件,它比较类似于下拉列表,但是没有显示结果的文本框。到以后,我们会知道列表框实际上很少使用,大部分时候,我们都使用列表控件DropDownList来代替ListBox加文本框的情况,在这里对列表框的讨论,主要是为以后的应用学习一些简单的控件属性。
# R) T' u3 l0 D6 w4 Y3 i5 f列表框的属性SelectionMode,选择方式主要是决定控件是否允许多项选择。当其值为ListSelectionMode.Single时,表明只允许用户从列表框中选择一个选项;当值为List.SelectionMode.Multi时,用户可以用Ctrl键或者是Shift键结合鼠标,从列表框中选择多个选项。: k9 ^$ X- F- o. w1 v
属性DataSource,说明数据的来源,可以为数组、列表、数据表。% S, u6 |% S: J% q% g- b
方法DataBind,把来自数据源的数据载入列表框的items集合。% a6 [, ^) b, W9 Y3 }1 B
例子:在这里我们将结合前面学习的按钮控件(Button)、复选控件(CheckBox)、单选控件(RadioButton)以及列表框(ListBox)给出一个实例。9 k$ \( A3 q6 K J' C
首先,页面加载时,我们产生一个数组Values,并添加4个关于水果的测试数据到Valuse数组。然后列表框从数组取得数据加载进自己的items集合。然后根据复选控件chkBold的状态决定是否用黑体字输出列表框的选择结果。根据单选控件rbtnMulti和rbtnSingle的状态决定下一次列表框是否允许多选,最后按下按钮控件提交表单,显示选择的结果。
0 ^/ Y& j- a. V' t+ [1 G; {$ r0 n1.源程序(FormListBox.aspx)
3 S# i( e+ b2 j/ }( E<!--源文件:form\ServerControl\formlistbox.aspx-->" R% N' ]# B5 e' M9 ?5 B, l' S
<html>
" Q; F/ e( V+ L4 P4 P ] <head>3 t, j7 J' b9 k& D0 S& W' i4 p
<title>" D$ `5 P! v C( M+ z
ListBox控件试验
7 N' A- B0 s# ]1 { </title>
' t- ^' ?7 k- l! F </head> D. y4 U( ]4 s# I
<script language="VB" runat=server>" R! G9 a* x# k9 T+ U1 F/ h& {
Sub Page_Load()
! F6 d4 Y |+ P& h '如果选中黑体复选控件,把文本标签的字体设为黑体6 y* c. B( H: Y1 M# i( N. ~0 d
If chkBold.Checked 6 j0 n$ q! M; @& a5 P, |; m
lblTxt.font.bold=True0 {) O& B% m+ H9 Q, z4 y+ R- @
Else2 z0 ~+ X; T. i6 G" o. s
lblTxt.font.bold=False
% ]' Z; K9 H8 L7 d+ @ End If/ q. X; Y7 Y' ?$ i% D+ D
'如果选中多选的单选控件,那么则把列表框设为允许多选
: `7 i, ~# y, ^9 e. @. x If rbtnMulti.Checked
2 P- s: G9 a6 v3 i- I1 |! e$ K& i list1.SelectionMode=ListSelectionMode.Multiple
' X1 q0 s+ q% W8 h( U# E Else
3 R( c6 j1 i9 z7 C& llist1.SelectionMode=ListSelectionMode.Single
( ~% @2 f. r+ k9 A( O End If
1 c, f1 K) P+ x: K7 d: ] If Not IsPostBack, Y5 I2 S( U: w. I7 X
'第一次请求时,为列表框设置数据* V4 _2 ]2 f0 s0 M7 d' ^
Dim values as ArrayList=new ArrayList()0 |% c- O) w* L
+ f* `# \6 s3 o% f: M! ?# F% J values.add("苹果")
; u- D7 z0 C7 W) U values.add("梨子")
8 ?: T5 j7 x. U/ A1 z5 _$ f& H values.add("香蕉")
' g# c8 ]# h, h" k values.add("西瓜")
K& o Z# n, }& X5 |( s list1.datasource=values
- o. h/ @% K4 y1 B! n7 C! c, z list1.databind
7 u6 `. K/ P% d" V Else3 ?- ]+ X9 @) [$ M+ K6 |
'把从列表框选中的内容赋予文本标识,如果未选择,显示"未选择"
3 @3 ?; P# U! P6 C; n Dim i as int32
2 T/ d% o7 w8 s' i! z% |1 n Dim tmpStr as String2 T$ a6 H/ i, G8 ]
‘对列表框list1的items集合轮询,根据其Selected属性,判断是否被选中* T, p8 A- Y9 N; d
For i=0 to list1.items.count-1- X' r1 M4 H8 K5 ~
If list1.items(i).selected
; `: Q- s# S+ P1 C) _7 }7 l( {6 u9 R tmpStr=tmpStr & " " & list1.items(i).text
9 b% a1 Y5 [! r End If
0 t% F) W4 f+ S6 M$ c Next
; T; y l% h, S# R" c3 g" { If tmpStr is Nothing
. c, J9 [( C# _4 w1 `- i tmpStr="未选择") O! Y8 ~ i" C* v5 w- ~' P4 Z
End If0 ]4 Q0 J f% ]% h3 Q0 Q
lblTxt.text="您选中的项为: " & tmpStr
6 t' u& N" v6 x: u) N2 ]0 C5 g End If$ P$ o+ U& \) z. B: S. H: B
End Sub
) M H4 m8 D7 C# ?6 [ </script>" Z' v% b. T% J, q
<body >
" ~$ g3 e' J6 D% K! s. ~) | <center>
3 ^5 u8 J2 f& N <h2>ListBox控件试验</h2> S6 {5 j; j( y. p; B
<hr>
! v/ e4 O N. v( h0 d <form method="POST" runat=server>
2 X1 o$ t. e" {. S$ [请选择水果
+ z$ [ b# m& ^/ K* ^- T- p<br>
# f/ p! [/ I* ^) v O* w <asp:ListBox id="list1" runat=server/>8 R8 l5 O2 B. b# g2 q9 t2 k+ M
<br>
! E# j& Q1 Y, n" A. e& a( C. ] <asp:CheckBox id="chkBold" text="黑体" runat=server />$ k. ]/ E, H* m/ C- N
<br>, V9 c% R# {, [, L9 F
‘第一次设置为单项选择
' ]; B$ L- z, d* H5 z3 t2 K5 v <asp:RadioButton id="rbtnSingle" Checked=True text="单项选择" 0 t% }; D4 k4 v, t( G5 G
groupname="group1" runat=server />
) d. [* ?, a, ? m4 K <asp:RadioButton id="rbtnMulti" text="多项选择" 0 e2 y+ _5 }$ l+ `, y0 u, c
groupname="group1" runat=server />
; B0 `9 A4 J) `- Z' A, _* ]<br>
# Z+ a$ e* Q; Y, Y! x+ e<asp:button text="提交" runat=server />9 S" v+ @6 n3 n3 |( D, X
<hr>
, N1 d) ^$ a5 W* C6 f. l9 N<asp:label id="lblTxt" runat=server />
# p5 [- ]: M6 `; u </form>0 T+ X& ^/ U- a' e2 n
</center>
, q: q$ o# e; y" \) R" \' F4 _ </body>, [0 |$ j8 s1 F8 i1 h
</html>
! m$ X1 u/ e/ d% [9 U$ D2.开始时的画面输出,第一次缺省设置为单项选择
# {) U4 e3 o! Y; K
$ b+ \7 Y/ d- I3.选择以黑体字输出,并且允许多项选择后的画面:
3 ]4 i7 G& M/ O% X( T
; S. [( B) v5 K, I! z7 u3 T4 |5 ~8 n1 d* ]
2.2.7 RequiredFieldValidator
6 Q, V# u% r) f0 E* j+ r# D! O这个RequiredFieldValidator服务器控件保证用户不会跳过一个入口,如果用户输入的值跟符合RequiredFieldValidator的要求,这个值就是有效的;否则,不会跳过这一输入步骤而往下走。
7 v9 v( ^4 {) ^- Q. _7 r+ q0 r下面的例子(RequiredFieldValidator.aspx)验证了这个要求:
- g- t9 D8 \ t<!--源文件:form\ServerControl\requiredfieldvalidator.aspx-->
5 I+ t# l4 d# `/ t8 x<html>
; N) T0 G; @, Z$ m<title>检验</title>1 Z" F; s! k3 u6 o, M2 ]$ n2 l, p
<h3><font face="Verdana">.NET->RequiredFieldValidator Example</font></h3>
( B+ I5 Q' p H3 S+ j3 H7 M <form runat=server>
' _9 c4 @. I- A8 m& Q" ?3 a Name: <asp:TextBox id=Text1 runat="server"/>$ J6 e ~ l* I* ~
<asp:RequiredFieldValidator id="RequiredFieldValidator1" ControlToValidate="Text1"
" B3 `4 ~/ V- j% a' `9 bFont-Name="Arial" Font-Size="11" runat="server">% J* C# a5 D& B! o+ t
Required field!+ g' U. M) @+ S' M$ s9 G
</asp:RequiredFieldValidator>
; ~2 |7 _+ ^. `* o/ G( ] <p>! l" Z" T+ _) p' t1 L
<asp:Button id="Button1" runat="server" Text="验证" />
! q) }1 p J" b$ ? N, f </form>
1 o' @8 T& q* h- G& l8 l</body>: t: E( C! L- A( F" M
</html>
S: K$ f/ y A运行效果如下:
7 S7 J0 u& K$ K/ g2.2.8 ValidationSummary
& S- |# z% ~ K5 [+ F用户的输入有时候是按照一定的顺序来的,有效性控件验证用户的输入并设置一个属性来线使用户的输入是否通过了验证。当所用得验证项都被处理之后,页面的IsValid属性就被设置,当有其中的一个验证没有通过时,整个页面将会不被通过验证。
+ q2 \3 p$ R% O- E$ [当页面的IsValid属性为false时,ValidationSummary属性将会表现出来。他获得页面上的每个确认控件并对每个错误提出修改信息。7 C1 ?" y- `) j! ]# s
文件Summary.aspx的内容:/ s! H. @5 L6 ]* U; @- {" m" h& H' D
<!--源文件:form\ServerControl\summary.aspx-->5 d) D6 H5 c8 M$ t1 o; A
<%@ Page clienttarget=downlevel %>
# Y& C2 |7 Z' c& K: A# R<html>
5 a. G7 l5 V% ]. S8 p/ r0 T# T<head>$ `# w4 @( d4 }
<script language="VB" runat="server">. W- A/ z( F5 m" U4 Z* @8 G% s$ A
Sub ListFormat_SelectedIndexChanged(sender As Object, e As EventArgs)
. H" k& X3 u9 s( c4 i: w- }8 N/ R0 \ ' Change display mode of the validator summary when a new option
, z* B; b# U% K7 ? ' is selected from the "ListFormat" dropdownlist
# K8 Z, W; j! W' b5 u& Y% h1 S) H+ h valSum.DisplayMode = ListFormat.SelectedIndex4 U" {2 l9 l$ C% ^4 ?2 p; x
C6 i, E7 h, P5 F& B9 N3 \6 p
End Sub" I4 {6 }0 Q8 J; I! w3 C: E
</script>7 P8 ?; T2 Q; ~5 s
</head>
5 s9 @: Z2 P- s. T! }<BODY>
& r% b7 o! k w6 R7 g# I<h3><font face="Verdana">ValidationSummary Sample</font></h3>. q. J/ R( H5 w5 O. D$ V+ i
<p>
# B0 ] B$ j5 y+ T. c" W2 ]* `<form runat="server">: M6 o4 g+ i0 [
<table cellpadding=10>
1 K: r+ N3 Q$ `/ H. E9 y <tr>& z$ n4 ~. u( i$ o) ]/ s/ q
<td>5 c/ m* F7 n; Y1 L0 a6 D
<table bgcolor="#eeeeee" cellpadding=10>) _) o' m: R* @$ `. a+ T9 |
<tr>8 O2 Y, U) \ h% m1 b" y; T
<td colspan=3>1 v! B7 g* C/ F; I* }
<font face=Verdana size=2><b>Credit Card Information</b></font>9 ]% O- M- I) T- p1 V
</td>7 y5 i! n) d9 H; X9 Y
</tr>
$ e6 `$ c2 D4 ^$ J0 Z, w <tr>6 b* h3 c4 s y9 M+ `' r
<td align=right>
% K* M g5 U6 i. D <font face=Verdana size=2>Card Type:</font>
+ s$ `8 M7 d# o9 x4 _ </td>4 r9 g7 F3 @' @ P# S+ h+ M6 M
<td>3 ]/ v* n( J3 ^
<ASP:RadioButtonList id=RadioButtonList1 RepeatLayout="Flow" : f2 C1 {% `( t4 [1 n
runat=server> ~- x4 M1 b, o+ k+ i9 F$ L
<asp:ListItem>MasterCard</asp:ListItem># u% t9 {: v- G% k. Y2 x7 Q" o
<asp:ListItem>Visa</asp:ListItem>
" z6 [1 {1 N( g </ASP:RadioButtonList>
# ?; h7 P6 e# C5 V2 t </td>" l5 l+ [$ Z) y% `, l! l1 P
<td align=middle rowspan=1>; E" @% A* {0 I# ~) |
<asp:RequiredFieldValidator id="RequiredFieldValidator1"
f" {# V& e) y$ J ControlToValidate="RadioButtonList1" 0 j8 K7 v! v# M' h5 j' K7 a! n. S
ErrorMessage="Card Type. "! r% {. o6 @9 y T% ^" a+ G# @
Display="Static"( q, D( D3 x% D1 ?% c2 n; H% @
InitialValue="" Width="100%" runat=server>
3 d+ d N B& j" ~/ @( |$ s# ?. d" U *; H4 G2 o4 X" t, U# g$ `# e
</asp:RequiredFieldValidator> @7 n2 @ g8 ?6 b* _9 D( _
</td>/ ?5 R6 w* }/ P: H* q
</tr>
\( O5 c: f8 ]: O <tr>
5 J4 W0 O$ P% z. I4 B <td align=right>
1 S) F. X* O) H: P3 u <font face=Verdana size=2>Card Number:</font>2 y: t2 u& Q4 ?0 S6 E( S7 E
</td>/ \+ [5 [! `3 ?2 H. C
<td>7 v' D7 Z! j% u+ \ \2 H2 I$ A" H
<ASP:TextBox id=TextBox1 runat=server />6 w6 Z+ v/ U, w7 I
</td>5 V- i8 u0 X' R. Z! T. `1 S
<td>) p3 g; Z% i) B
<asp:RequiredFieldValidator id="RequiredFieldValidator2"
% ?8 v/ I0 ]; {) b. b# X ControlToValidate="TextBox1"
C, F* u3 x9 i, y) ^ ErrorMessage="Card Number. "& Q, f* O7 M" Q% E! u. L
Display="Static"- D; G p9 O6 z9 O- I2 r% H" X7 M
Width="100%" runat=server>/ L, D/ X$ Z0 }2 ?3 ` c+ z' b
*
, y) T: l: F. D' L, h- u, T3 E </asp:RequiredFieldValidator>
& Q& `; A0 J8 D </td>
3 U- E" b, r3 q6 |/ U& `! X1 \ </tr>& a/ @: B# v4 i* q
<tr>
& m0 R5 V$ ~6 b) @, Y5 K& O) ?- q <td align=right>; c5 K) m3 s$ k ?
<font face=Verdana size=2>Expiration Date:</font>. h( j5 @- B$ @9 I5 Z. S8 U: n
</td>7 Z# ^, ^ u% N
<td>
?1 u d: j- ` <ASP:DropDownList id=DropDownList1 runat=server>
* F) B! I1 [/ \1 f' x8 N) U# w <asp:ListItem></asp:ListItem>8 J: ~3 a, p% ~4 _7 }
<asp:ListItem >06/00</asp:ListItem>- Y# A7 I ]- X+ O& E* X
<asp:ListItem >07/00</asp:ListItem>
# x4 ]) `0 \9 L. ^ <asp:ListItem >08/00</asp:ListItem>. ]6 g/ g% d( r+ ~, V" L7 I
<asp:ListItem >09/00</asp:ListItem>
& C1 m2 s" }7 T" [: U* h$ \ <asp:ListItem >10/00</asp:ListItem>
: A$ z2 j+ ^$ Y+ V9 j% y <asp:ListItem >11/00</asp:ListItem>
5 m2 c# u. S- H4 `/ i <asp:ListItem >01/01</asp:ListItem>
) L( L, k2 P) w) X+ D- ?' }% X <asp:ListItem >02/01</asp:ListItem>7 W: u2 X, N( t! r8 C3 S- r
<asp:ListItem >03/01</asp:ListItem>3 V- h1 Y! r. @1 b: Q a
<asp:ListItem >04/01</asp:ListItem>
& ]; X5 N0 Z% h& I( }- ] <asp:ListItem >05/01</asp:ListItem># O/ `! A7 S0 }% Z
<asp:ListItem >06/01</asp:ListItem>
: E, f; J/ _, t <asp:ListItem >07/01</asp:ListItem>
* {0 G( M7 K, }- ~0 e/ Q0 e4 F <asp:ListItem >08/01</asp:ListItem>
& G& f" T4 y3 M- P1 z; W9 ` <asp:ListItem >09/01</asp:ListItem>& P3 ^( y% B& H/ ?3 M$ Y7 Q3 M
<asp:ListItem >10/01</asp:ListItem>9 a4 k/ f) c+ z: G5 Q3 r; l3 p
<asp:ListItem >11/01</asp:ListItem>5 ?+ H; j( y( ]) r
<asp:ListItem >12/01</asp:ListItem>
3 ^1 d0 u2 }/ x; k( @# j5 ] </ASP:DropDownList>
4 [2 J; Q2 n0 t* [: l9 ^5 x8 `" n$ R </td> a+ H) J. i H6 Y9 P" t
<td>
: g" _/ p6 E) x( e <asp:RequiredFieldValidator id="RequiredFieldValidator3") t* `! E: C, I, O" g7 j" m; P
ControlToValidate="DropDownList1"
0 _% B: U! E# K& B- l ErrorMessage="Expiration Date. "# @% v$ o: q7 U$ P: @
Display="Static") O9 q# m3 e& F7 W/ ~! O0 d; d
InitialValue=""
+ c& m. E; i( s Width="100%"
, N+ [0 }6 i) x% K2 L, m2 o% X) A. t6 o runat=server>/ e& P: ^# A( s) y, V
*
! C. S+ W3 q m, `' Y </asp:RequiredFieldValidator>4 x2 Y; U+ `/ T- f. `; |% Q
</td>
" y& f5 O( y7 d3 G$ D* a& a% @ <td>4 j% I. |3 f- W2 Q
</tr># ]* s' v K0 B- G8 e
<tr>
( P; r% _7 X! d' p q, u" ? <td></td>! Y2 d% e S, [" G2 g3 k
<td>& J4 Z* s. _4 f, W5 W2 P
<ASP:Button id=Button1 text="有效性验证" runat=server />9 o+ U$ }: ^" o. u' T) N
</td>6 K* _5 h1 M; B( q$ [+ r
<td></td>
0 a2 N w1 c% y. \% S; g$ @2 O3 G$ @ </tr>/ G g+ i, w7 S9 P. s2 f! y# {
</table>
" W+ n) z% [& D3 ] </td>2 m6 u7 s) |6 Q* [7 I( J
<td valign=top>
# x( w, s( r F! I; P+ \3 J" ] <table cellpadding=20><tr><td>
4 k' Q# D" S4 K R" G# W <asp:ValidationSummary ID="valSum" runat="server"
+ H4 ~2 L6 [2 d1 j% c HeaderText="You must enter a value in the following fields:"7 P3 }* u$ Y( v) a
Font-Name="verdana" % P# _1 M' a& w' v) M8 j
Font-Size="12"
u) F' M3 ]; A- K />; C0 K. b& `! @
</td></tr></table>, |, C& i" U( g: u8 L6 N- B9 U6 H& _7 Q
</td>" h3 m; m H; N& b* r& r
</tr>
! T' B# T( A8 w% J* `4 Z</table>1 T" O! V6 V! {3 ^- f
<font face="verdana" size="-1">Select the type of validation summary display you wish: </font>6 B& J/ e+ i _5 `
<asp:DropDownList id="ListFormat" AutoPostBack=true 3 f# r' r5 v/ N4 L2 ]
OnSelectedIndexChanged="ListFormat_SelectedIndexChanged" runat=server >
# g; B% v" Y! o3 J4 p, x0 l0 | <asp:ListItem>List</asp:ListItem>
/ l, G2 ~$ L, f" V <asp:ListItem selected>Bulleted List</asp:ListItem>
' J- Y; p% R. d- `/ Q. s <asp:ListItem>Single Paragraph</asp:ListItem>
( s1 F R$ L) c, v. p% l' p</asp:DropDownList>( f! p8 C6 G' Q( I* r2 w; r
</form> a& Q9 ~! C8 ]& l, R$ @4 U
</body>
. z- [. h5 O- V$ a' X9 E" M3 i' v</html>
6 d4 O# D0 i8 Z0 i" a U结果如下:- q! ?9 {7 Z& N! W# A. ]
2.2.9 使用panel控件
8 f8 u/ r$ l G* [) _! v) D 我们在进行用户信息录入的时候,如果使用ASP程序写的话,通常需要三个网页:% J# R7 s1 O1 R9 }" M% U& Q. f
① 进行用户身份检查, |! D) \7 z" ^( b
② 填写相关的内容
9 d' k, ]) D5 G1 x& J ③ 显示你填写的内容
$ V% x I& i* V1 {1 Z2 k4 s 填写的流程如下:& ?5 m# ]2 P, V, V5 B! Z1 [: z
- \0 p) i6 u( s b' ^8 Y
; g+ U9 }. Y3 O# m9 K
这样的话,我们将分别设计3个网页。这样会显得很麻烦。可喜的是,我们可以使用asp.net5 B6 Z8 z" [; ^. d5 a, _7 n6 c |
中的panel控件,在一个页面中即可实现上述的功能。' i7 P7 f8 H0 U+ a/ ]
流程如下:) m$ {$ m4 R# q5 U
( e, }1 x, C% k4 `7 m, e0 o5 I, [6 U- E" Y: t8 z4 F
/ U6 ~! v) [$ D" j1 s" r' f8 x
) z# H' H. Z) l5 J
2 k4 F0 b4 g7 g, |0 J
6 d, w! A# F" R
! N! n9 Y3 N) {, a& o0 X" o# O& O/ t7 t) p% Z- j+ f% l
好了,有了上面的叙述,请看panel.aspx文件内容:
0 {, V3 I; f+ j& b4 P$ _<!--源文件:form\ServerControl\panel.aspx-->
8 `* X$ [) |: c: V <Html>
5 z7 U4 f( b: k <Body bgcolor="White">: f+ r8 k# m8 K( |
<center><H3>使用Panel控件示例<Hr></H3></center>
) V0 |& l- f! O<title>使用Panel控件示例</title>: W8 F, M( L9 x
<script Language="VB" runat="server">3 {% _$ y3 }$ w* m
Sub Page_Load(sender As Object, e As EventArgs): f d; x V! F: ~( e1 c. {
If Not Page.IsPostBack Then- d' X2 `: n7 }) k u( y
panel2.Visible = False
' a+ g7 V T3 | panel3.Visible = False
- f$ l/ }/ d9 x* a: g& w4 n End If
% g* ^& J7 A: E+ U$ d( O3 K; r End Sub
: Q' _( W q+ x$ V5 @Sub Button1_Click(sender As Object, e As EventArgs) 7 ~' z2 I' b1 t
panel1.Visible = False
( }( b2 }; S! ]/ u panel2.Visible = True
, N4 b( N# x4 P2 N* W( { End Sub1 z Q, _8 q* x, q5 M f
* m! y% h, d1 ^# w! V% o. K2 t+ K& V Sub Button2_Click(sender As Object, e As EventArgs) ; d- o, k! f& U
panel2.Visible = False
: v$ [3 z0 U: I# h* h# K U/ Y7 J) n panel3.Visible = True. K3 S7 F i% ~
Span1.InnerHtml = "用户名: " & UserID.Text & "<BR>". m3 K- S) R0 h6 J
Span1.InnerHtml &= "密码: " & Password.Text & "<BR>"1 `/ j2 A( e+ I- ^7 K
Span1.InnerHtml &= "姓名: " & Name.Text & "<BR>"" [# Z! e* [& i$ M/ ]# Y2 s4 y
Span1.InnerHtml &= "电话: " & Tel.Text & "<BR>"
& _! ^$ Z, c) q2 d Span1.InnerHtml &= "E-mail: " & mail.Text & "<BR>"
) f8 h I7 q. }+ E Span1.InnerHtml &= "地址: " & Addr.Text & "<P>"& @+ T5 p2 @1 t$ |0 x; ?
7 x$ w; E) G" [* {2 w+ D End Sub- {% A) {) E% |4 H3 k: V
Sub Button3_Click(sender As Object, e As EventArgs) g( i5 \8 @2 O$ b# Y+ Q4 D& {- [+ Q2 C
Span1.InnerHtml &= "输入完成!"
4 [9 t8 P$ f4 ^+ \3 t3 E5 c Button3.Visible = False4 M& G& X1 Z7 u3 c* M! }4 b6 m% v
End Sub1 M/ m2 \# K8 V: W* ^9 ?( q& K
</script>- n) L* O* d; }
<Form runat="server"> J, g8 g& O5 Y$ ~1 p) D! W
<center> * @- b8 ?" i; F: i. V1 i
<asp:Panel id="panel1" runat="server">
# a' Z& o9 m& _4 R <Font Color="#800000"><B>第一步:请输入用户名和密码</B></Font><Blockquote>
# B4 s& Q9 h, b& Q 用户名:<asp:TextBox id="UserID" runat="server" Text="kjwang"/><p>
5 i# R1 o$ w7 r# G7 M9 y* V 密码:<asp:TextBox id="Password" TextMode="Password" 3 H( L H9 ]: C0 K+ H' j+ z
Text="kj6688" runat="server"/><p> R7 X- P& V6 U. H# L( E' c7 {
<Input Type="Button" id="Button1" value=" 登录 "0 l) Z7 I% n! q0 A
OnServerClick="Button1_Click" runat="server">
& F% |' d5 R1 H& U </Blockquote>7 b! L) R, Z" `" _
</asp:Panel>7 [+ M, C- M% a ^6 x5 r
<asp:Panel id="panel2" runat="server">
8 q7 P. t( n% L, ?: F0 J <Font Color="#800000"><B>第二步:请输入用户信息</B></Font><Blockquote>. @. t9 _; m4 p7 @* |. {
姓名:<asp:TextBox id="Name" runat="server" Text="小李"/><p>( B' [/ s0 }9 r6 X3 d# \" I6 Z
电话:<asp:TextBox id="Tel" runat="server" Text="(023)65355678" /><p>
/ J( L& P9 N( u E-mail:<asp:TextBox id="mail" runat="server" Text="jimmy.zh@263.net" /><p>, l2 g s) F9 f/ ]3 ^
地址:<asp:TextBox id="Addr" runat="server" Text="重庆市人民路115#" Size="40" /><p>7 z) i& u7 d+ E4 M9 v6 l
<Input Type="Button" id="Button2" value="申请" 1 X; v; n4 D0 T( n) N T9 {: ^
OnServerClick="Button2_Click" runat="server">1 \' Y9 U3 M. f( X2 _
</Blockquote>
9 O+ d+ q* m1 J' _( e b </asp:Panel>
& G8 i( u+ J4 y& H, j* I/ ?6 m <asp:Panel id="panel3" runat="server">+ y* A) l' T9 c, K/ z9 \. \& [
<Font Color="#800000"><B>第三步:请确认你的输入</B></Font><Blockquote>8 k" r+ [ R- X' g: L/ P
<Span id="Span1" runat="server"/>
+ C+ F/ s5 P. N( s2 _, |# b& A <Input Type="Button" id="Button3" value=" 确认 " ) W8 K! ?* v7 y
OnServerClick="Button3_Click" runat="server">
* i" P% r+ G# v/ _! K </Blockquote>
& y+ }5 v0 p% R. P. ` </asp:Panel>2 ~. P+ Y! g! @$ l6 V! A
</center> ! Z0 B3 D) N2 B. I) ]0 K
</form>+ @( a/ E7 ?9 R R
<Hr></body>) T: k4 f/ K( [* T
</html>: ?. Q% J$ ^9 v5 I- h* V2 a
请看程序的运行效果:
; P- H1 F% O5 ~0 b: n4 U3 x+ D+ c$ @) G8 f8 R; }2 ]
$ ~1 U5 y1 F0 H) y* l" t' _4 |
/ t* L+ Y- a( F7 G3 E第一步:
6 H& ?6 ?) R) Z. L) a$ q8 ^1 [: t1 o7 d) B# u
第二步:1 G( j& _4 e) {# @" t
8 b* A. \) F: e' ^3 h第三步:
j3 c6 y( h3 _ I- t5 `) S9 B( R& p6 I% Z% {
大家可以留意浏览器的地址栏,我们注意到地址都是相同的。我就是我们使用pann控件所得到的效果。+ `; X9 d/ o/ T7 Q( v
2.2.10 选择控件; S) i2 c. P2 G( }# |0 R% F
选择的方式有两种:单选、多选。我们下面用具体的例子来说明这两种选择控件在asp.net' h# F' D+ z2 @7 u! @
上的实现。
+ Z, ]4 }. Z, C" e- j7 b对单选控件,asp.net里面有一个专用的表示:RadioButtonList,我们看下面的代码:( U' ^" D3 `5 O0 W5 M' {5 |4 U
<!--列出选择内容-->6 {7 O/ ?% F& Q1 B" X
<ASP:RadioButtonList id=ccType Font-Name="Arial" RepeatLayout="Flow" 6 X! L$ G8 L( J* S
runat=server>7 h5 o1 p# [3 D" r$ Y
<asp:ListItem>招行一卡通</asp:ListItem>
! o2 m. d3 q( b6 R( Z% ]) y2 n <asp:ListItem>牡丹卡</asp:ListItem>, P1 X% h% M) Z- i- d% N
</ASP:RadioButtonList>9 b0 {$ B* q2 Y( v: ]* I6 t* D6 d
我们在取值的时候,就可以用一个语句:& P) V8 }$ W- \
Request.QueryString(“ccType”); y9 P/ J/ F& P1 C+ j: T1 u
来取得这个值。下面是我们这个说明的完整代码(RadioButtonList.aspx):
( K& [- Z# d/ ]( F6 r% T2 h<!--源文件:form\ServerControl\RadioButtonList.aspx-->/ E! x$ M# U* `; A5 |
<html>
: _1 ~! J7 n; H2 X2 O<body >
2 }1 ?, F0 v& E9 j/ u<center>
! p3 X; v$ \& M# {5 t- O! h+ \$ c! t9 {<br><br>5 ~1 Z# Q1 F2 A: ~
<h3><font face="Verdana">.NET->选择控件!</font></h3>/ ]4 E8 s1 Q3 p+ ` \
<br><br><br>2 a l6 z! W7 n- }
</center>
! r7 H% d! q0 o J3 E/ S ]* l <form method=post runat=server>
8 ^7 [( n3 i& M7 j. B# v3 n* x <hr width=600 size=1 noshade>
* X# V$ J( V8 b* O) g O <center> A$ B8 D9 x1 r: o
<asp:ValidationSummary ID="valSum" runat="server"
5 s. i. u! S, u HeaderText="你必须填写下面的内容:"
8 Q& ~! ]* N9 e, Z# C0 x DisplayMode="SingleParagraph"' `$ ^5 |3 t& ~5 f+ t
Font-Name="verdana" , J- a$ W/ q3 a. ^" R
Font-Size="12" 6 |. o: S8 Q6 U
/>
" {) H1 O0 h1 J1 W) G x2 b3 `/ H <p>
2 c: k* T$ G {6 A& n) Y0 }2 W/ X <!-- 信用卡信息 -->
- e# h. t7 c4 D( R <table border=0 width=600>
% ^" `/ q# M( N8 @ y0 G <tr>
/ B6 G" w6 W; s" K) u. f <td colspan=3>
S2 X; T L& |8 ] <center> c; M/ }6 z' z, [0 k$ Y
<font face=Arial size=2><b>信用卡信息</b></font>% z5 u$ {: u$ U
</center>
, C; z* ~, A2 y6 e' [& D U </td>) q4 b |' t. |& c' P
</tr>
) @; U" _' A$ ?( _0 v- { <tr>. u/ M5 _) y" B6 Z
<td align=right> Z4 d% X3 I* Y9 l1 M7 T
<font face=Arial size=2>信用卡类型:</font>7 k$ S5 w9 W/ c0 z1 Y
</td>
3 c E* d- b# j% G' p( u2 A <td>2 \) H! m( L! l' u5 b" H' h
<!--列出选择内容-->8 b7 d; m' Z9 _& n4 r) C6 ^/ a. s4 w+ `
<ASP:RadioButtonList id=ccType Font-Name="Arial" RepeatLayout="Flow" runat=server>' f8 _, k0 C7 [2 O8 I( t7 |4 U
<asp:ListItem>招行一卡通</asp:ListItem>. v; Q( F9 j+ P8 B
<asp:ListItem>牡丹卡</asp:ListItem> o! `, m) h" c" ]; J
</ASP:RadioButtonList>5 @, {/ t( ~) p4 S
</td>$ W! _/ D" X5 v8 V, W) i) C
<td>+ J; B% s; W0 X6 Y s
<asp:RequiredFieldValidator id="ccTypeReqVal"* U/ N. n6 z2 g7 ]
ControlToValidate="ccType"
6 s/ [ j L% H& G3 q ErrorMessage="信用卡类型. "
3 D- O) ~/ T/ j% u- J Display="Static"
7 }0 E2 R+ B& V# `' z( R4 M) S9 ?; z$ X0 A InitialValue=""
- t; o3 K8 O2 D+ H( i( G Font-Name="Verdana" Font-Size="12"' V7 U: q5 \$ h' r
runat=server>$ C5 @0 T! M. v" S' u9 U$ u+ v5 I
*, c# h& k% z" y k
</asp:RequiredFieldValidator> }/ L7 F8 q' V z0 m% M3 [
</td>
' e; l# N" Y9 o) z# T </tr>4 a. i& @: x$ d/ [% x
</table>4 A0 H. V2 M" g
<p>
* A+ P4 q* }4 m6 A; k# X2 q <input runat="server" type=submit value="提交">
t9 v; o$ t5 w& ]3 k: m) c% i <p>
# S" I% [; C4 b <hr width=600 size=1 noshade>$ h+ x. |' i5 x8 e8 w# a+ U
</form>! K$ O I$ }4 t6 p% R/ t' e8 ^
</center>) }4 d6 c6 d4 A& V8 v5 E
</body>
4 g4 x0 Y" L: V( J</html>
7 e- a2 w6 }( n" q$ g我们的运行效果如下:# R* d" g1 m4 T3 O u0 f [
- t2 k! j& w8 q- l4 t7 Q) i* o
* Y# P% S2 |3 S o2 G
+ M6 W* ]: Q6 i我们选择一个并提交,则会提交成功;反之,如果我们没有选择就提交,会出现如下的信息:# n0 ]; F3 p) U6 c
% g0 g; d; l' E* Y
我们再来看看多选的情况:, V% a t1 ~0 F0 |% D
'选择项列表
& o1 Q: }2 g2 p <asp:CheckBoxList id=Check1 runat="server">8 q! @% k7 G% e6 Y, P/ J+ `, D
<asp:ListItem>北京</asp:ListItem>; L9 g8 C$ K, s7 r; K
<asp:ListItem>深圳</asp:ListItem>6 M i$ Z' m, J0 Q9 u$ I* g4 j
<asp:ListItem>上海</asp:ListItem>
" j% j( c4 u6 b# D <asp:ListItem>广州</asp:ListItem>: Z; j- @ [: D- [+ F
<asp:ListItem>南宁</asp:ListItem>* j0 a3 c7 Q l8 y( y! @7 ~
<asp:ListItem>重庆</asp:ListItem>
6 U+ k5 O3 ~( i' Y* d" l. V8 R8 B </asp:CheckBoxList>
* J+ F/ W$ @- n/ w5 {跟我们上面的单选控件就相差在定义上,我们用CheckBoxList来描述我们的选择框,我们写一个方法来响应我们的“提交“事件:' m, g5 r8 T8 }) @# _! W. v! }
'响应按钮事件6 U- [, X \2 T! v; F
Sub Button1_Click(sender As Object, e As EventArgs)4 ^, V: x& u- g i$ M
Dim s As String = "被选择的选项是:<br>"- @7 H+ |" V4 e2 }- p3 N
Dim i As Int32
( _, v; F+ V1 `" B For i = 0 to Check1.Items.Count-1! _1 I" a% p& m* O' Q
If Check1.Items(i).Selected Then 9 {5 u( G- U! G q: a: U
'列出选择项+ ?! {* W, m ?4 J/ ?8 Z
s = s & Check1.Items(i).Text
4 \# m) Q, U/ q0 F" i: J s = s & "<br>") x, E1 b3 j6 k* Q' q
End If
* F- f" m6 Q. z: [ c% j Next
, ?: s' M9 e% _6 Y/ Y' }/ ^ '打印出选择项. x7 X1 @- ^+ q* I* h
Label1.Text = s8 E8 Z D4 P4 }
End Sub
- \ M" A$ Z' A7 D这个方法为定义打印被选择的选项。具体的内容如下(list.aspx):8 V+ h" ^7 H& h
<!--源文件:form\ServerControl\list.aspx-->2 G# l" M" p _) {4 s9 e3 A
<html>
# }1 W- x$ N2 S2 f. @/ {<head>
' o5 X9 L3 y% S/ \* S <script language="VB" runat="server">
) g# o6 O1 ^" }4 k. i! T '响应按钮事件* U* I$ p) C( p" _$ F! ?- w7 ?
Sub Button1_Click(sender As Object, e As EventArgs)/ m" X. H7 R% O' e6 f4 E
Dim s As String = "被选择的选项是:<br>"$ @) a8 s" s" i1 X7 |& D
Dim i As Int32
, O7 Z& \ Y6 \; O! w+ V& R# [7 s For i = 0 to Check1.Items.Count-1
* I7 s1 f7 [ ^; `" B If Check1.Items(i).Selected Then
# I: j$ c) b( O# i$ e+ E2 o' V2 M '列出选择项
$ ]& c& f" [: F, F* } s = s & Check1.Items(i).Text
6 @, L- Q1 H; ?+ o1 v5 i) b; f5 d s = s & "<br>"
# M% P7 a* K X0 @ y End If
" I% ? O3 K/ ^: { p. g Next
' S% n1 v* |, o/ b* b( z '打印出选择项! ~! f7 a+ N$ O. \3 c
Label1.Text = s
+ e) s( L ]1 x$ R. r3 Y End Sub
' C9 y& g& k3 @: q </script># L+ \" {! ]! l# O, L' ]
</head>7 U, ]! F9 I; h# a, I/ K7 v3 A: R
<body bgcolor="#ccccff">; Q! ~6 \# p# _+ g0 q
<br><br><br>
$ ^. j! R3 W7 I: X<center>
9 R: A$ G1 @3 n& T: D8 f( e5 E <h3><font face="Verdana">.NET->CheckBoxList</font></h3>
9 P( r3 {/ k4 Q* P5 Q7 ~</center>
* ?* b7 H8 ?; e5 ` P' N1 S<br><br>; C% L1 a4 h' l
<center>9 z. F$ M5 R! k; E/ a8 t2 R: L6 K7 K
<form runat=server>
; x- z9 J) s: M# }. y! F3 G'选择象列表
Q+ p( U) t- h" L* o <asp:CheckBoxList id=Check1 runat="server">5 ?' \. R" t5 w" ]/ K( s& f& D7 S
<asp:ListItem>北京</asp:ListItem>
5 B; c. U; O* A$ X6 k <asp:ListItem>深圳</asp:ListItem>
) Q* B& Z! ?% w <asp:ListItem>上海</asp:ListItem>
4 ?, e8 S) L0 X, [ <asp:ListItem>广州</asp:ListItem>4 l+ ?% a+ ?0 O: I* q
<asp:ListItem>南宁</asp:ListItem>+ x X3 M. B- I9 z7 K
<asp:ListItem>重庆</asp:ListItem>
. V3 M1 M7 u' i+ a) A' s </asp:CheckBoxList>
' G. @3 O x v- H. g' B; c <p>
# N8 L; m3 b2 V" f; ?2 ~: M1 J5 { <asp:Button id=Button1 Text="提交" onclick="Button1_Click" runat="server"/>+ n$ c& x& V7 m% k, C1 r W3 ~
<p>
: ]* R4 m/ V' g# ~ <asp:Label id=Label1 font-name="Verdana" font-size="8pt" runat="server"/>1 F1 N: n( K# G; ^/ u
</form># b4 ~# n- t) X/ j3 {
</center>( p7 |5 O. d+ ~9 L2 i4 ]$ O/ c, H
</body>
1 k7 _$ N1 b- j6 w</html>
" U& D C7 d9 U
3 Q6 M3 ^5 R/ t( E! ^) d# @我们看到显示如下:
9 x+ M& E* `' z) c- o$ N, w" {/ U U) C* u6 q; m
选择几个选项,并点击“提交“按钮“,看到如下的情况:
3 {+ o, J3 y4 H8 p, E: D# y7 |! j# s7 a7 n
; r) E8 h) L+ K$ t/ }
% x: B! [: {9 y! f( K/ s- E7 P2.2.11 ImageButton 控件
* ?) s+ B. b- hImageButton 控件3 `) b: V% P r- U" f/ i% A
当我们在浏览网页的时候,可能会发现这样一种情况:当鼠标移到图象按钮上和当鼠标移走的时候,将会发现同一按钮上将会显示不同的两个图片。我们可以用Image Button控件的 onmouseout 和 onmouseover 事件来实现。4 ?& R- m& K; L" b7 m
请看Image.aspx中的代码:
# l% W. a ^1 [. B<!--源文件:form\ServerControl\image.aspx-->- M! b, z" g' L% s# H; d& e
<html>
: x! v& Q9 ~8 t% d3 o& F<Body BgColor="White">
2 z8 d, F4 P! l0 w# w<center><H3>ImageButton 控件演示</H3></center>/ `, ?: v6 r) d
<title>ImageButton 控件演示</title>2 M" o3 k. l C2 r- O
<script Language="VB" runat="server">
; V1 ~5 u- o9 x; \Sub Button1_Click(sender As Object, e As ImageClickEventArgs)
$ T) B* K" @3 q. H’定义当我们点击按钮的时候,将访问的网页9 |/ W# [' e" u8 f, F
Page.Navigate( "http://www.yesky.com" )" o- j- X& Y& q
End Sub
) ~( M5 n" o; t; Y+ L</script>
' [# Z& x5 G' ]9 M* Q<Form runat="server">. l8 T& Y! g2 U3 g/ D
<center>
" t! E9 @( _8 J# S( f; @# C3 |# p<asp:ImageButton OnClick="Button1_Click"
) i6 i/ y% {% S+ N: nImageUrl="18.gif" id="Button1" runat="server" % i% R% w) M9 V7 G( C
OnMouseOut="this.src='18.gif';"
1 ?: ?- b$ a6 r( mOnMouseOver="this.src='19.gif';" />
0 o# s# L) u# j8 P</center>" H8 f$ m Q3 m
</Form>. B* A: h$ Y3 ~0 B0 Y. z9 s' O& y( A6 @
<asp:Label id="Label1" runat="server"/>' u# C7 Y; Y4 o
</Body>
% M' w5 G4 E! l0 ?' D</Html>
/ V' `9 I: i4 W: w) h在这段程序中,我们使用了onmouseout和onmouseover事件。
7 v8 c: P$ \, G3 s; i2 e请看程序的演示效果:- s$ y" N' P! K2 L
当鼠标移动到按钮上的时候,将显示:/ @9 {9 F4 M' l) K
# L9 t1 A+ V% F& ~ q5 p& q% U0 {7 b5 \5 r8 V" |* y; p9 l2 [
2.2.12 列表控件
- ?; k2 Z9 _ b" L在asp.net中,有几种方法可以应用于列表控件。我们可以在aspx代码中直接嵌入相关
, ]$ f+ a$ E/ R- O; C+ L/ F6 {3 [的代码,也可以在页面装入的时候加载这些列表信息。& e+ `. q6 R% [: c! @
下面是具体的应用,我们先看看在aspx中的列表方法: a' b; n! J- ]2 b5 r
<!--列表->列出内容-->( r6 D" \. Y( L! l- J$ \
<asp:DropDownList id=DropDown1 runat="server">
# t }' W( W$ m( }4 d b/ H3 | <asp:ListItem>北京</asp:ListItem>5 V$ P2 I. B& U1 O7 O* Q
<asp:ListItem>深圳</asp:ListItem>
) {8 R# r; h7 H' j' g, k- d) [ <asp:ListItem>上海</asp:ListItem>
' z; `% r" R8 |0 w1 h! S6 ] <asp:ListItem>广州</asp:ListItem>
# G# q D7 f! p6 m <asp:ListItem>南宁</asp:ListItem>* v( X9 G# M9 e
<asp:ListItem>重庆</asp:ListItem>
' M: J* H4 G# `2 E$ `0 J3 f </asp:DropDownList>
_3 Z8 W* u8 I! k, u# @我们在需要取出所选的数据时,直接去取id值,即DropDown1;我们再定一一个方法,响应“提交“按钮的事件,就可以了。下面是完整的代码(DropDown.aspx):
& C! \4 y2 ]2 X* _7 M<!--源文件:form\ServerControl\dropdown.aspx-->, K+ q2 y4 }: A, @
<html>
, X7 x8 O8 g: u% V$ D6 e& \<head>: h9 O2 j7 N/ j# I0 ~
3 B& L9 I- \6 P( B <script language="VB" runat="server">0 s% H! Y" n& ^( p% @9 m7 `* k$ C l ]3 B
8 i% N8 s0 C0 t$ t c) D" y'在点击按钮时候响应6 s9 E8 Y0 _8 U( B) H7 @
Sub list_Click(sender As Object, e As EventArgs)
4 A/ S7 p% L( c7 ?% }* F2 v6 | Label1.Text="你的选择是: " + DropDown1.SelectedItem.Text" Z! z7 S/ f' }9 S t
End Sub
# y S3 X5 ~2 l3 v/ ]) s) W </script>6 t1 w! m( G- K. P C" V4 M0 r
</head>% q( x- g% W# q8 y: Y# [9 t
<body bgcolor="#ccccff">
8 N; N4 w+ t5 t8 l7 I$ G6 j<br><br><br>
8 K T7 V0 c: \6 I1 r<center> ?4 ]$ i+ H& C w% K
<h3><font face="Verdana">.NET->列表控件</font></h3>7 ^; E* q( v' P x3 F3 }4 D
</center>
0 v, p% z5 P9 w<br><br>
; a- B# Q" D5 s* J1 ] {1 P<center>9 x( p4 M, Z) Q
<form runat=server>( K5 u5 C; r5 P' s) g5 t
<!--列表->列出内容-->
) K# a4 U+ K, v <asp:DropDownList id=DropDown1 runat="server">. K/ d# M d) _5 O3 B. i) r, S
<asp:ListItem>北京</asp:ListItem>9 C; ^5 z/ L5 W/ _
<asp:ListItem>深圳</asp:ListItem>
6 R1 ~! A5 a3 S/ s$ n9 B& N <asp:ListItem>上海</asp:ListItem>
+ P: e: j" f5 M- D& A" D u: C0 ~ <asp:ListItem>广州</asp:ListItem>8 i4 ]8 n0 ^9 {( v
<asp:ListItem>南宁</asp:ListItem>! k. {6 U# r L* W
<asp:ListItem>重庆</asp:ListItem>
& r+ I5 I# P0 w! ]8 n, ? </asp:DropDownList>
( b6 a1 g8 K+ ^6 J. y <asp:button text="提交" OnClick="list_Click" runat=server/>
( r3 D& e+ U6 F <p>" H+ n: q3 i1 H: c0 W y/ ?3 S
5 z/ d- L D& c <asp:Label id=Label1 font-name="Verdana" font-size="10pt" runat="server">
/ i& S! P2 ~) t& \3 k8 U
/ M1 M" L; _5 { </asp:Label>
% Y+ J% K! [ B' D; X </form>, C B. A3 {$ G' `# `/ L0 Q
</center>; z* a8 a2 k' q5 c. q9 F2 ~; k1 e6 m( j
</body>" s8 Q% \. x. y# B% i
</html>6 P. O1 Y( O' Y; W% s6 {- T
我们看看运行效果:4 f$ |6 w2 Z* W# U' }. x( A8 {
% ]/ W" o, O* X
: F6 h2 K/ p; x! Z点击提交按钮时候看到下面的效果:
* Y7 Q: E* W4 {0 b6 ?
* N4 B3 d' i' t$ ~
% e# F5 q2 R5 p; c下面我们再来看看另外一个列表控件的使用,我们定义一个在页面装载的时候调用的方法:% B" U0 U% t9 Z3 M8 M. M0 [
'再页面装载的时候调用的方法:. K5 W; w+ }. m1 D, C, D' [
Sub Page_Load(sender As Object, e As EventArgs)
3 f0 \% ?; ^- i9 Z If Not IsPostBack Then
# V" g1 R3 p D4 ]4 k/ F Dim values as ArrayList= new ArrayList()9 V4 |! A; E8 |8 P* _ a3 [
values.Add ("北京")
9 d9 A7 Z, r2 M' V2 d values.Add ("深圳")
* Q4 q% G% P& A' M values.Add ("上海")$ n$ p5 v5 a& I I7 E) j
values.Add ("广州")7 R v+ g$ ]3 S, Z; v
values.Add ("南宁")) Q; ]2 J. A: u5 `! _9 B4 u4 s
values.Add ("重庆")" B% B' s! @: d+ d3 z+ x/ h
'设定DropDown1的数据源为values,即上面定义的信息4 R& H! o P6 J, @& U) b
DropDown1.DataSource = values
- S$ C* d/ X! A- {, C '数据的绑定- ^% t3 ^) F7 F! F" B* o% ?
DropDown1.DataBind0 U9 k$ z2 x3 t9 l3 ?5 D# ~* p0 j" Q
End If% G: [6 [+ c+ Y3 r6 }2 i
End Sub
7 n* l. h; t8 o# t5 m# ?我们在aspx代码中调用它:
2 X, G) e# o; J, u<!--列出列表信息--> . }7 H3 u; T4 k- ~- n9 d
<asp:DropDownList id="DropDown1" runat="server" />* B u4 U/ |" [% X
就这样的一个简单的语句就可以了,下面是这个文件的完整的代码:
& Q* m% R: T4 Z; n) E6 t" `<html>" s9 K4 S0 g/ ~. n
<head> ]' W M3 G7 _$ c, r& {' g
<script language="VB" runat="server">
$ P4 ?: A% g0 l. \; c'再页面装载的时候调用的方法:. H% ]$ l: H; T7 y6 w
Sub Page_Load(sender As Object, e As EventArgs)
. M3 B3 N) L) ^ E If Not IsPostBack Then W! h) M% W: }6 W$ }9 l% m. b2 f
Dim values as ArrayList= new ArrayList()
& u4 o u' A' @3 k2 i, j" r$ c$ @ values.Add ("北京"), e4 M0 s! l: f
values.Add ("深圳")
, Q$ t; D7 V h; U G values.Add ("上海")
) y5 m. k! z* I" K' |3 h; z+ }4 s values.Add ("广州")7 J8 a3 |+ p5 ~; w& h; m
values.Add ("南宁")# `) i% V* Z2 M: l) p- v
values.Add ("重庆")
& i, u: L. R+ O: Q '设定DropDown1的数据源为values,即上面定义的信息7 D* P$ R/ ~* |" l) C
DropDown1.DataSource = values
. T; X1 f+ t( f4 r3 i% M '数据的绑定
( L- u1 T( g6 Q O7 ~8 O2 O6 x DropDown1.DataBind
4 k0 v4 `5 D& n7 a End If
5 f. N& v2 `: C3 V$ O End Sub* L& F& w. g# e
'提交按钮响应的方法
, V9 _! W5 `, ^( [! p( X" h. y Sub select02_Click(sender As Object, e As EventArgs)6 h4 k; U9 Q4 T4 c$ \
Label1.Text = "你的选择是: " + DropDown1.SelectedItem.Text
3 ?2 {. P, }. y4 ]& ?9 q End Sub- I. `% C9 [) ]; t( b: n$ ]
</script>
3 Z7 j5 P; J+ S- z: H7 ~</head>5 \- g+ O! `* y. G8 z) E
<body BGCOLOR="#CCCCFF">
/ `3 {7 G7 y* [/ K' V4 M, l<br><br><br>
" ~1 ]; l3 \# _: B1 }6 e# p" R<center>
( S# u# K5 r: ~4 w <h3><font face="Verdana">.NET->列表控件</font></h3>
& Q8 Z1 I, f7 X& D" j- J0 K9 ~. Y</center>7 }, C& y$ n4 q' h
<br><br>
; w; ^6 s# v, Q, F9 n1 H/ t<center>; @& J: _8 O0 p2 q$ y6 r
<form runat=server>" ]. K# Y1 c6 b: ]
<!--列出列表信息-->
0 |, {# d K4 p- I( j1 c% ] <asp:DropDownList id="DropDown1" runat="server" />5 m. v5 i, ]% o
<asp:button Text="提交" OnClick="select02_Click" runat=server/>
3 ^+ C) \: \. V; m <p>
5 a1 |* d8 p1 {8 h( D7 f. q <asp:Label id=Label1 font-name="Verdana" font-size="10pt" runat="server" />' }4 r+ C( Z" m3 B; O+ j* D
</form>
# Z& U" K; W7 F: O% I. K</center>
* v& K4 s: a/ e. v6 U! Z</body>: H# z8 y9 \2 C$ ^; A
</html>) u1 c& ?" y2 z% l5 S) U0 V' V; ]
运行的结果跟上面的一样。
6 h, i9 k+ C) \' r* L, J2 U2.2.13 重复列表Repeator h$ j; I" I& B; w" a: b
这种服务器控件会以给定的形式重复显示数据项目,故称之为重复列表。使用重复列表有两个要素,即数据的来源和数据的表现形式。数据来源的指定由控件的DataSource属性决定,并调用方法DataBind绑定到控件上。这里需要说明的是数据取出以后如何表现的问题,即如何布局。重复列表的数据布局是由给定的模板来决定的,由于重复列表没有缺省的模板,所以使用重复列表时至少要定义一个最基本的模板“ItemTemplate”。
2 d* d& _' z- u2 z6 ^- Q3 d重复列表支持以下模板标识,所谓模板就是预先定义的一种表现形式,以后我们还会就这个问题专门讨论,这里就不在多说。/ a0 o& @ r9 I$ J6 X' b7 {
1)ItemTemplate模板,数据项模板,必需的,它定义了数据项极其表现形式。& q% U1 s7 P9 r& m
2)AlternatingItemTemplate模板,数据项交替模板,为了使相邻的数据项能够有所区别,可以定义交替模板,它使得相邻的数据项看起来明显不同,缺省情况下,它和ItemTemplate模板定义一致,即缺省下相邻数据项无表示区分。
( Y1 o* O" N; a& O3)SeparatorTemplate模板,分割符模板,定义数据项之间的分割符。
+ {7 @) s2 [0 B6 `! B4)HeaderTemplate模板,报头定义模板,定义重复列表的表头表现形式。' W& h8 h& V. k/ g# r
5)FooterTemplate模板,表尾定义模板,定义重复列表的列表尾部的表现形式。
; E: [2 m, s2 {7 A8 g4 `切记,由于缺乏内置的预定义模板和风格,在使用重复列表时,请一定记住要使用HTML格式定义自己的模板。
9 R/ B" m o9 H7 ]* r; V4 ~下面给出一个例子,看它是如何使用重复列表控件的。下面的例子首先在页面加载过程时把数据装载,并绑定到两个重复列表上;然后以一个2列的表格显示;最后把所有数据显示到一行上面,并且国家和领导人之间以3个中横线分隔,每一国家之间以竖划线分隔。. N& X/ ]: s4 y* ]# h- a) A* I
1.源代码(FormRepeater.aspx)
1 Z; r! G$ i V' f2 _<!--源文件:form\ServerControl\FormRepeater.aspx--> y* X$ C8 t" }& j' k: g
<html>
, i8 o' E( _. D& H6 L <head>% R1 _9 E: R, Z3 G9 ?
<script language="vb" runat=server>
+ G: D$ [% B& V. I- ]* x& z
/ w: |' w( h$ G Class Leader( U! F" A4 \9 p1 a5 M; @
'定义一个类Leader
- s# {2 [1 @8 e9 F dim strCountry as String
1 ^1 {' y) \$ v dim strName as String, u& X1 e8 t1 f8 E: L
Public Sub New(country As String, name As String)
; N4 Y3 Y* a$ k' L- R) X MyBase.New& W1 l! ~( e* ?2 g% b
strName = name
% D, u J c" j, m; |/ z strCountry= country4 ^4 ^9 ]# Y- L0 ~
End Sub
9 d9 ?# y! R; G6 [( k ReadOnly Property Name As String
% N4 G) t8 R2 Y1 f Get : A% i/ \( x O, _- h! _7 T
Return strName9 q/ ^$ n' {8 S7 f9 |: _
End Get2 j+ y2 @5 Z y7 P& f
End Property, v0 y3 ^! G" t2 }0 P6 d
" M9 v; K7 B- ^* ^" _7 l6 i
ReadOnly Property Country As String
# T+ @, ]8 Y: N8 U: W Get ) k1 x7 Q1 y- H2 Q
Return strCountry9 ?6 ]) N3 L5 Y/ q8 \3 C5 K0 Q
End Get/ Z; _0 D6 r" U& M7 e
End Property
' n! G* p9 K/ t( m4 x9 m
: R: C; T7 {: ?* b+ I$ M8 J; ? End Class5 I& g# S+ c; ~
X0 ~% t3 b# b' q9 g
sub Page_Load(s as object,e as eventargs)
6 I4 V7 C6 D/ @* g dim leaders as ArrayList = New ArrayList()5 i) f# ]# y: q
if Not Page.IsPostBack1 K9 ?' }! j [. Z* c, D. b
'加载数据
; r: W* _) T- m leaders.add(new leader("美利坚","布 什"))
/ d; N+ d, k( G$ i6 C leaders.add(new leader("俄罗斯","普 京"))
9 m5 y2 {3 D; `( r; }; X" _; d) O leaders.add(new leader("中 国","江泽民"))
& N6 W3 A: G- {2 W 6 ^! B. O5 ~. T+ X0 p. R
Repeater1.DataSource=leaders: c W: Y8 R2 ~/ a% D) p- M! b" l( \
Repeater2.DataSource=leaders
/ F- ?- c0 z1 M) N Repeater1.DataBind% _! C' I( v" ]$ |' R
Repeater2.DataBind$ h1 K6 R6 D% |) {/ O4 ~, c$ C
end if/ @7 m8 l4 c3 E8 o" C+ S5 Q
end sub" k1 m7 u& f9 W, u# X3 l) t" T
</script>
4 m( z9 @5 g( s3 A <title>
' P7 Q& F# N5 u4 g 重复列表使用例子% ]5 S# |+ O: v# u7 s9 m) S
</title>
: I3 J# {, H6 S* p4 F </head>
, w1 Z& a+ N2 e7 L. [" I: e ! S5 ]% @' ?' Q; k- V# t
<center>
$ ?$ r, e& o3 d9 R& J' H <h2>重复列表的使用</h2>' o/ j2 S. E# H4 g& B s0 u$ U
<hr>
% y: k2 n% G0 ^, W; W <br>8 a9 e% Y* i" [% V
'以表格形式显示国家,领导人信息/ p0 K% G& [4 r( R
<asp:Repeater id="Repeater1" runat=server>- I3 P3 F+ b2 l) C6 j- s1 m. F7 p
'定义表头- b' N1 x* O n
<template name=HeaderTemplate>
5 K9 a9 u, y9 `( \: _ <table border=2>
7 d8 W; V- Z, R0 d. X0 s' I$ R. S <tr>
- _6 V7 h9 d# d# h4 d5 {# z <th>/ V, f: o, A- z) Y& F9 }& w9 O
国家名- t! E2 t- T6 _" Z
</th>
- X$ k+ Z& @* e# B <th>
* x/ C$ X2 H# p 领导人
! `6 s8 E1 F$ t# U8 _7 i4 a </th>
6 q. H7 X! a, u/ R </tr>7 A4 k! y4 V7 E- r- J7 N
</template>
V( `% |# _! D0 H r / p. _: Q: Q- F" n& C
'定义数据显示格式! |# O! d+ l; _1 D4 l9 @* H
<template name=ItemTemplate>
" E9 b' L! i- L% { W <tr>7 Q; N9 l0 G' V0 ?3 f
<td>( \# S; _: F$ `$ E+ m7 ^
<%# DataBinder.Eval(Container.DataItem,"Country") %>2 G2 n4 L# C. {3 V" z
</td>' X; P. ]" W% P2 X! Z
<td>. T4 K/ i: b% ~# P* C4 x, m
<%# DataBinder.Eval(Container.DataItem,"Name") %># Z6 |/ {* `( n! V; W
</td>
. s; `( x6 G" o- C </tr>
1 E& _: W" `3 T </template>
( O8 y! F$ p% m8 h0 l& u/ _& a5 V
+ j& t: f. ^1 s+ N! D/ l '定义表尾! C3 W8 u5 L2 m0 X5 q
<template name=FooterTemplate>4 Z& W; I3 l }# {
<tr>
- b0 `. s2 H1 _! I; |! J <td>日期</td>; Y' ~1 E! e1 G! L2 }- e$ g
<td>2001年</td>
0 b5 }5 H9 _; |9 o: x+ w% B </tr>
9 n0 H# e$ H5 ` </table>8 ]* `& e; i8 p2 m
</template>) {: N0 j3 B+ s, H4 ~+ w% E, J
</asp:Repeater>
# T" C1 W5 i2 ]9 c <br>) l; O, z0 D8 |
<asp:Repeater id=Repeater2 runat=server>8 ^+ m4 J' O9 b! O5 g$ G" X1 k
'国家和领导人以|分割显示$ \* ~7 @* E: W7 g. k
<template name=ItemTemplate>
0 q4 M! m* Y+ I }* P+ q6 T <%# DataBinder.Eval(Container.DataItem,"Country") %>
x" J: T% [2 T# U$ q: N ---5 l" J R8 u2 \4 f8 ]5 w
<%# DataBinder.Eval(Container.DataItem,"Name") %># T7 O# ~" f) k" }2 P; a3 I
</template>
: j/ ?9 T1 g0 Q' E$ e6 \: T6 ~ <template name=SeparatorTemplate>
% l3 ~$ B4 K& w0 u |
5 g( s4 |; E6 K </template>
; A; T) H; ?3 W7 s9 ^+ G </asp:Repeater>
" b5 Q9 G) o3 S* L W* K </center>
; y- y3 O$ a# k) K( X) | </body>
- H4 J$ B4 L( x5 O8 G- x<html>* ^ R% _* j3 G' c4 Y" n
2.输出结果
$ r1 j& x1 A' X. G+ C9 K' w! n* V! v! r% y( W
2.2.14 数据列表 DataList
t" z& c0 x6 V4 c. X数据列表显示跟重复列表(Repeator)比较类似,但是它可以选择和修改数据项的内容。数据列表的数据显示和布局也如同重复列表都是通过“模板”来控制的。同样的,模板至少要定义一个“数据项模板”(ItemTemplate)来指定显示布局。数据列表支持的模板类型更多,它们如下:" ]) k$ r7 O* h& X/ H3 x
1)ItemTemplate模板,数据项模板,必需的,它定义了数据项极其表现形式。
# _0 [& M4 q2 n7 ~" N j2)AlternatingItemTemplate模板,,数据项交替模板,为了使相邻的数据项能够有所区别,可以定义交替模板,它使得相邻的数据项看起来明显不同,缺省情况下,它和ItemTemplate模板定义一致,即缺省下相邻数据项无表示区分。( N0 _% G5 ^ D
3)SeparatorTemplate模板,分割符模板,定义数据项之间的分割符。
6 i1 `5 z% B# g0 N$ s7 j7 X4 q/ r4)SelectedItemTemplate模板,选中项模板,定义被选择的数据项的表现内容与布局形式,当未定义”SelectedItemTemplate”模板时,选中项的表现内容与形式无特殊化,由ItemTemplate模板定义所决定。
! V1 a. `1 L$ y3 L& Y0 u5)EditItemTemplate模板,修改选项模板,定义即将被修改的数据项的显示内容与布局形式,缺省情况下,修改选项模板就是数据项模板(ItemTemplate)的定义。. N; D. N. \# p% s. V* L. @2 L
6)HeaderTemplate模板,报头定义模板,定义重复列表的表头表现形式。
3 y' G9 K! Z9 D7)FooterTemplate模板,表尾定义模板,定义重复列表的列表尾部的表现形式。: B+ p6 X* n: H3 |+ a
数据列表还可以通过风格形式来定义模板的字体、颜色、边框。每一种模板都有它自己的风格属性。例如,可以通过设置修改选项模板的风格属性来指定它的风格。
) t0 G F0 R$ z3 c3 p此外,还有一些其他属性可以导致数据列表的显示有较大的改变,下面择重说明。
3 M; R+ g, E# u9 V: m4 i) ~RepeatLayout:显示布局格式,指定是否以表格形式显示内容。
; c0 z; G, k2 R* |+ G0 yRepeatLayout.Table指定布局以表格形式显示。
; ~; `% q2 @7 I% ?RepeatLayout.Flow指定布局以流格式显示,即不加边框。( d* }; W2 G9 O9 a3 R5 n
RepeatDirection:显示方向,指定显示是横向显示还是纵向显示
/ o; a2 r' q4 |' y; P; T RepeatDirection.Horizontal指定是横向显示
( t/ ~6 j( l! r. K5 k9 g9 e RepeatDirection.Vertical指定是纵向显示5 Z. e2 C; \# N/ J* g
RepeatColumns:一行显示列数,指定一行可以显示的列数,缺省情况下,系统设置为一行显示一列。这里需要注意的是,当显示方向不同时,虽然一行显示的列数不变,但显示的布局和显示内容的排列次序却有可能大不相同。
- l1 M m+ `0 c# s* o6 Y" G例如:有10个数据需要显示,RepeatColumns设定为4,即一行显示4列时 b8 ?* m, {% h
当RepeatDirection=RepeatDirection.Horizontal横向显示时,显示布局如下:
7 R7 f, |3 f5 L5 ~6 a2 p# CItem1Item2Item3Item4+ j4 d. l/ c7 F3 k' `
Item5Item6Item7Item8
5 U) J3 V. O# z0 y# L6 U& R) W$ NItem9Item10 k7 M0 i# r& ?" O. t6 B" i
当RepeatDirection=RepeatDirection.Vertical纵向显示时,显示布局如下:7 k a4 h1 T. R
Item1Item4Item7Item10! j9 q; [) P3 G5 u; b% O
Item2Item5Item8! Q8 U' D2 e& @& J) W7 ]( ]+ P
Item3Item6Item9$ S4 N9 Q6 e7 j7 s
BorderWidth:当RepeatLayout=RepeatLayout.Table即以表格形式显示时,边框的线宽度2 F- M/ G) y2 L) F
Unit.Pixel(x) x>=0,当x为0时无边框
: R% Q" j: M, V. \; `1 GGridLines: 当RepeatLayout=RepeatLayout.Table以表格形式显示时,在表格当中是否有网隔线分离表格各单元。3 U5 m. M9 x2 A; M' l3 I
GridLines=GridLines.Both,有横向和纵向两个方向的分割线。
3 h, f, N+ `2 l' y4 O1 U+ uGirdLines=GridLines.None,无论横向还是纵向均无分割线。
( j* _- }1 g% ^6 o) z4 A例子:演示以上介绍的各属性的设置对数据列表输出的影响,并且当数据项被选中时,数据项以粉红色来反显。& ^5 w" O; g1 M) {3 W/ J+ Q
1.源程序(DataList.aspx)
* H/ l8 M9 d8 X1 M( d5 m7 v2 S<!--源文件:form\ServerControl\dataList.aspx-->
0 K6 E+ y) `7 v* c# O<%@ Import Namespace="System.Data" %>) t; Z- S+ r- p. l8 J
<html>
# H0 G8 f, r7 X<script language="VB" runat="server">
$ h; s+ a' a0 Z( h+ p'创建初始化表和载入实验数据
' r: p( [/ F& S, y: v: n! \1 M# n Function LoadData() As ICollection# X) A: [, a$ \0 U
Dim dt As DataTable
" l3 N# f8 G) ~8 h/ Y Dim dr As DataRow4 D8 I4 f% L# ^4 W; ^
Dim i As Integer
( \( `- t/ V- L4 l8 D1 w4 V1 ]- G# s '创建数据表" {, G; p6 J, A" \ `( N
dt = New DataTable
0 j$ {: y( r" Y) P '建立数据项结构9 t; W3 n' v# T2 c
dt.Columns.Add(New DataColumn("Content", GetType(String)))7 g5 j: |, {' W" n: O2 r2 S, w
'载入10个实验数据
' g1 m9 h b- I9 G' v8 \" s2 Q: W7 X For i = 1 To 10
2 Y! p. L9 i2 s dr = dt.NewRow()
1 \. X. s9 v, e6 g dr(0) = "Info " & i.ToString()& F ^" r( ~ W: v" d, e) ^- X; A
dt.Rows.Add(dr)5 Z( C; g% B6 x+ _" A1 ?7 Z2 a
Next8 ?$ _! o2 I5 n, N6 n- X5 m
'为数据表建立一个数据视图,并将其返回" B* K6 C1 X! D6 V3 v+ C
LoadData = New DataView(dt)( z* C0 Y3 Y: S$ R( H9 f
End Function
6 ]% K' \" q( k a' k5 W# v4 l Sub Page_Load(s As Object, e As EventArgs) ' m: O! F0 @" v H" E" s9 o* @
If Not IsPostBack Then
& l- m" E, U$ I$ u2 v DataList1.DataSource = LoadData()% q0 W8 S# Z# Y: H
DataList1.DataBind- u% {* x6 G7 G2 E% X
End If7 H$ S" C7 W. }8 T) @
End Sub
: o+ A# [, a' u* s3 Z0 L Sub DataList1_ItemCommand(s As Object, e As DataListCommandEventArgs)+ x) ~$ v' @- T( z' r
Dim cmd As String = e.CommandSource.CommandName% k) }* J7 R( s
If cmd = "select" Then
/ \# N/ T, L: h) m# E1 _% Q+ Z8 p DataList1.SelectedIndex = e.Item.ItemIndex5 p* T3 Z) l# H3 b- H0 o
End If6 N( I2 H/ F) F6 O" L
0 u4 b2 {! H' }. Y6 P DataList1.DataSource = LoadData()! u s6 e G# u9 `
DataList1.DataBind
6 j" X. n5 z# v' B+ A End Sub& y6 @5 Z# \$ n, g
'当刷新按钮按下后,对数据列表属性重新设置
7 O; m7 d* O( U4 c( I Sub RefreshBtn_Click(s As Object, e As EventArgs) + C0 _6 B; C. v7 n2 L
If lstDirection.SelectedIndex = 0, ~% R6 b5 G! O7 w0 R! U o
DataList1.RepeatDirection = RepeatDirection.Horizontal# g: `% C3 i+ m8 H% e4 g
Else
1 o3 h) ~% B) i7 R& X$ x DataList1.RepeatDirection = RepeatDirection.Vertical
* l5 m x0 i" [: K4 c E3 T- l End If
) W! z+ [3 M4 e1 F If lstLayout.SelectedIndex = 0! O1 { |# x$ Z! A9 z
DataList1.RepeatLayout = RepeatLayout.Table
$ H+ g% [, \* ?- t: x3 F/ w3 j Else7 \' f8 u+ ?3 ?5 k) G* e7 F
DataList1.RepeatLayout = RepeatLayout.Flow }% j$ f& d9 x) Z8 w9 s: {
End If
q& l- J/ l( V' T/ ? If chkBorder.Checked And DataList1.RepeatLayout = RepeatLayout.Table Then- F# L! \' Y! f9 r- A( a4 G9 N! h
DataList1.BorderWidth = Unit.Pixel(1)
7 h$ _0 g4 r6 O1 {/ ` Else 8 z' b3 ~' V' ?: T2 ^: Q$ t$ R/ z
DataList1.BorderWidth = Unit.Pixel(0)8 q' g' G6 P. o& n/ Q+ C( V2 O, j
End If$ P, o/ Q! C9 U( f+ R, Q; P- p0 B
0 b9 P$ x b! f& t& o+ c If chkGridLines.Checked And DataList1.RepeatLayout = RepeatLayout.Table then( m* ]- f( |/ v0 h& U
DataList1.GridLines = GridLines.Both
: y- Z$ w) W+ U. _+ N! k Else- o( `4 O3 V4 ^3 K. s
DataList1.GridLines = GridLines.None
" B& i3 C0 t/ \- Z! U* |: L End If
2 c0 ]" M. B. {( b0 J DataList1.RepeatColumns=lstColsPerLine.SelectedIndex + 1
) W( O1 [# n& g2 O+ t& I, S End Sub
0 V6 O: S" ~( ~9 U, }( a8 l6 Y9 F</script> @6 C+ {7 B% e; ^9 ^, N+ j' E: A
<head>
+ o9 d. S7 D9 ~, q# Y, Z<title>
4 ]# I5 \: u& ^# t/ y: i数据列表实验
: W' z- b! B6 u</title>
+ D' k8 E! U G/ O m</head>- x& v \0 {7 A' _# Z3 p
<body>0 r" J; H" A* V" T1 m
<center>
) P/ Q% ?) x' q5 H$ B <h2>5 l$ u0 D7 C' i0 p2 D- w7 ] s
数据列表属性方法实验
. N% n5 i5 d! @# k! ` </h2>
5 T0 K; [1 D8 P <form runat=server>
3 ]% o( @% G) b2 E <font face="Verdana" size="-1">
' m. b$ j6 \- P# N/ ?! } <asp:DataList id="DataList1" runat="server"5 z# H: Z" L# y# p! o& ]
BorderColor="black"
3 Y1 z" _- }$ k8 V: G1 \ CellPadding="3"
4 g5 Z: a# ~4 t/ x p2 R$ b Font-Name="Verdana"
0 V# B+ O, u [3 V2 u- H) @ Font-Size="8pt"0 O) X8 s$ j t6 i
HeaderStyle-BackColor="#aaaadd"
+ b& n! u- P1 D& |: g AlternatingItemStyle-BackColor="#ccccff"
6 e% J8 g1 e! Y, L: x$ J8 K SelectedItemStyle-BackColor="#ffccff": N( X, Q- H* f% p, c7 Z
OnItemCommand="DataList1_ItemCommand"8 L7 T: r- \, k
>
# {" v* U4 c4 L <template name="HeaderTemplate">2 o" W( b* n5 T( R4 A
<h><center>内容</center></h>: h# \- r- C* L/ `! F3 h
</template>
! x5 k! k% G+ J; \; n6 d <template name="ItemTemplate">
/ |, \& W% f% h5 b. S <asp:LinkButton id="DetailBtn" runat="server" Text="详细" CommandName="select" />3 E7 ? y& c' \ F' ]
<%# DataBinder.Eval(Container.DataItem, "Content") %>
# S6 K, t3 g8 p4 ~% C* S </template>
. y9 \; x9 X4 G! j& A6 W <template name="SelectedItemTemplate">
3 s# z5 t! {9 B' {4 R8 | N <%# DataBinder.Eval(Container.DataItem, "Content") %>已经被选中1 a7 w% A: A/ R9 D( |' C' x
</template>0 K( E# e# o8 }0 v' X" Z
</asp:DataList># i; X, R# Y' m* E# U
<p>
& U, c _7 s% q0 @ <hr>* g7 K$ _% h9 S1 @
显示方向:( @+ k9 C* H9 s# Z
<asp:DropDownList id=lstDirection runat="server">+ F* G+ D6 t& x/ p" \( b* D8 q2 Z
<asp:ListItem>横向</asp:ListItem>9 V: x% j: T( q
<asp:ListItem>纵向</asp:ListItem>9 s$ n, V- {0 D; ^& S! ~
</asp:DropDownList>
8 t8 j3 V- t' U1 D9 G) N 布局类型:
* u. a& U& l8 X& {- H! A: z! U <asp:DropDownList id=lstLayout runat="server">
' A( k- e: [: }* G0 p <asp:ListItem>表方式</asp:ListItem>
9 J) c% W% H) _+ d% Y- h# w <asp:ListItem>流方式</asp:ListItem>6 I8 S! Y/ {: h/ g, d2 I/ o' O
</asp:DropDownList>
; c; A5 m) [$ h- I5 u5 ` 一行列数:9 x2 |/ {1 c/ g S: t0 H# |2 W
<asp:DropDownList id=lstColsPerLine runat="server">
) p: {, a3 t$ e B4 P2 W3 y <asp:ListItem>1列</asp:ListItem>/ i4 H+ t, S; r# O
<asp:ListItem>2列</asp:ListItem>+ r% m: S- G, L' W
<asp:ListItem>3列</asp:ListItem>
( W6 h! Q: |% i b7 G z' p <asp:ListItem>4列</asp:ListItem>. r( ]4 O6 [* N Z" O0 {
<asp:ListItem>5列</asp:ListItem>: M5 Q% K$ j& a* x5 X
</asp:DropDownList>
\# K9 G, U& }3 z0 w! S( g 边框显示:
1 S: t5 P6 H1 h <asp:CheckBox id=chkBorder runat="server" />" v. e) y6 }, D+ W' N
网格显示:8 ?# D A2 {5 U! \" z+ I. d
<asp:CheckBox id=chkGridLines runat="server" />
1 S3 r& j6 d |% Q- \1 \( K. D <p>
P7 k( u4 D. ]0 V8 W, B' @
7 ]+ m$ r' }: F B7 E; G' D <asp:Button id=RefreshBtn Text="刷新界面" OnClick="RefreshBtn_Click" runat="server"/>! n, `* p6 f/ p- Q' H" L
: Q* B: v2 V) c/ P2 o! A9 H </font>
4 F! V `! {3 E! D& h </form>
- X5 g& G- h. [. D- w2 U. J </center>; a0 }, S5 p' o
</body>
0 [0 j7 S8 N" Y0 k% j</html>
6 A6 O* |. o# F E' d( I( W2.开始时的界面显示如下,(方向为横向,表方式,一行一列,无边框及网格)
" x0 n& A2 \4 N% Q) `0 ^$ ]$ U4 s& `/ H4 h' A4 ~! A
3.当选择显示方向为横向,表方式,一行含5列,显示边框和网格时,界面显示如下:
# M* C2 s. w/ e! F4 [' q+ T9 E& p' D* D
1 H- h! c7 {. p5 \9 _8 p
6 V( h7 X. N4 J/ T( b8 H, f
4 O: q# d& H% d0 z0 J' W4 l( e9 ^; E5 o0 f
4 B1 X P1 L! F4 s3 [9 ^/ I
, L6 ?9 G7 f+ r$ i7 w8 j4.选择纵向显示,表方式,一行含5列,无边框,无网格时,界面显示如下: b/ n; K9 b+ Z
- N) e/ E9 l% A+ e/ V6 Z4 w" E
5.当在步骤4的基础上选择了第5项数据项时,界面显示如下:; A! L4 D1 k8 w
1 s% m3 Y: @: ~6 d2 o0 K
接下来,我们讨论一下一种比较有实际意义的应用,即对选中数据项的修改的实现。
' M/ s: b- L) |" J& `首先是对模板EditItemTemplate的定义,通常做法是排列可以进行修改的内容,然后定义一个修改确认键和一个修改取消键。# |, X4 |/ H" b3 K
然后应定义数据列表支持的三种消息处理函数即OnEditCommand、OnUpdateCommand、OnCancelCommand(编辑事件处理、修改事件处理、撤消修改事件处理)! l$ H( E7 }- s9 m. s! F
编辑事件处理:通常设置数据列表的EditItemIndex属性为选中的数据项索引,然后重载数据列表。/ B4 N3 g% F. I. [, U
Protected Sub DataList_EditCommand(Source As Object, e As DataListCommandEventArgs)
) t/ O Z/ j, r6 ^8 m# P) ?8 V9 x DataList1.EditItemIndex = CType(e.Item.ItemIndex, Integer); v i# P4 n* i% Z& Q, `
‘重新加载并绑定数据
3 s9 @5 t/ ]) q' A1 p BindList()
; g c7 A7 ^! gEnd Sub9 O* \1 _. O6 q, |" F, U
取消修改事件处理:通常设置数据列表的EditItemIndex为-1,表示没有数据项需要修改,然后重载数据列表
$ h$ V* z% R# Z% l1 s/ xProtected Sub DataList_CancelCommand(Source As Object, e As DataListCommandEventArgs)0 \, E7 y$ s# U: N6 p; l
DataList1.EditItemIndex = -1
# u! \. L; V1 w/ C+ i3 I BindList()3 _1 Q% t; Q" A- H% v
End Sub
1 a% ^6 \7 s- g5 x+ r修改事件处理:通常先修改数据源的数据,然后设置数据列表的EditItemIndex为-1,最后重载数据列表。
' ~) H7 j% i) B7 _1 RSub DataList_UpdateCommand(Source As Object, e As DataListCommandEventArgs)
7 l6 Y3 ?( p; h: N: q- Q0 O' A‘修改数据源数据,应根据具体情况而变. \' S B: S. u* Q0 _0 l* B; H9 I! T/ g
ModifySource()
3 r' f0 y) @2 vDataList.EditItemIndex=-1( b6 U: }6 _1 l b) i
BindList
- V; s& v$ u( P+ J, k+ `/ uEnd Sub B: ^' N; u; Q3 V
例子:显示一个关于书籍修改的实例。一条书籍记录包含序号、书名、价格信息。初始化数据时,我们设置序号为1-6,书名为“书名”+序号,价格为1.11*序号。, h: \9 D' F' w! W }
1.源程序(FormDataList01.aspx)4 U O9 X( f" \+ B* j- N) E G' ~% \# n
<<!--源文件:form\ServerControl\FormDataList01.aspx-->
* w2 n5 m1 l5 x- C! @/ y2 u i<%@ Import Namespace="System.Data" %>" f& d. H; f- z/ W% r, i
<html>
# s6 y/ b- Z& B- d5 ?0 l- R; `$ k <script language="VB" runat="server">
+ T8 b. f- B* c- H6 ` dim Book As DataTable
- J, Y. Z. `2 c" j. W7 u dim BookView As DataView
; ?! j C9 {' b0 T: O" W '设置数据源,并绑定
; C7 o. q8 p" v Sub BindList()
- B) }' S, \7 v$ v: K( M6 C9 p1 ] DataList1.DataSource= BookView
8 i! O6 b% z' i# n! v DataList1.DataBind& W8 z2 ^5 B+ x+ V& V
End Sub1 V/ ]2 d3 z0 @* u7 P" ?
Sub Page_Load(s As Object, e As EventArgs)
# [+ a/ ?0 P. V( o2 u% n Dim dr As DataRow
$ x; Z1 \; t% ?2 a6 f5 T/ h'如果没有连接变量session_book,定义数据表Book,并载入实验数据
0 H0 b1 q2 g; H2 |- ~8 n8 nif session("session_Book") = Nothing then
7 Q+ |& O& o7 S; F Book = New DataTable()
" R5 _0 f3 {2 e4 u& g4 M* @; n Book.Columns.Add(new DataColumn("num", GetType(string)))
3 r2 `0 P: h) i, Z: ~* z Book.Columns.Add(new DataColumn("name", GetType(String)))
6 t' N0 M% [3 n2 z6 E. z Book.Columns.Add(new DataColumn("price", GetType(String)))
% P' R* l' @# t$ y5 @$ c: k' X session("session_Book") = Book
5 V4 l; @2 s' n3 v8 p '载入部分测试数据
& T; g1 z% h# O7 |$ Y For i = 1 To 6/ @/ u/ T6 F+ P, J. f3 i
dr = Book.NewRow()
- @# Y# A- ~5 d$ v4 Y dr(0)=i.ToString- N8 S' d8 v5 B! Y! f+ P" o! t% k2 f
dr(1) = "书名 " & i.ToString! G2 Y, m/ ]$ f8 ^! g; l
dr(2) = ( 1.11* i).ToString
2 U! d) \9 @, X% i/ y8 L Book.Rows.Add(dr)
! `% F3 R" e) q i' `3 k Next
' L0 b3 M2 r# z; c$ I '有session_book变量,直接引用' A: A" k3 g8 v. _1 e0 I/ t: S
Else6 [7 v3 R N. [
Book = session("session_Book")
. i2 j& c |! J. L end if
; O' c* y' W4 ]0 W7 ~5 a+ V( A6 t U2 | '产生数据视图,并按num字段排序
/ ^; h( j, q# v9 C# z BookView = New DataView(Book) B3 B: q7 U& ~2 o! J+ G {' l# b
BookView.Sort="num"0 W j1 n. _+ E) _
'初次需绑定数据源
1 c/ x' p& f1 x: l if Not IsPostBack then ) C; N2 ~+ k& W
BindList
+ L' v, b2 S7 _+ x V0 B% f; S: l& R End If
4 L% G' H1 r9 \ h/ m s End Sub
5 Z4 d0 Q/ @; U% d3 Y! l '编辑处理函数$ q# G" t6 s& ]6 Y2 q% g5 G+ R
Sub DataList_EditCommand(sender As Object, e As DataListCommandEventArgs)- R& Q$ l! t: e+ J# A
DataList1.EditItemIndex = e.Item.ItemIndex1 m- L! @' H+ J0 U' I: n
BindList ?4 F% |2 w2 n
End Sub
: s0 Z9 L7 x: o1 I, }: W5 C) ]( {4 S '取消处理函数
$ L: |0 X" G3 u% l- k; h1 r Sub DataList_CancelCommand(sender As Object, e As DataListCommandEventArgs)! S: }( G% x4 B( R
DataList1.EditItemIndex = -1( Q0 B, D9 S l: z" t$ f
BindList
' | w. _" e3 |- y P End Sub
9 B/ x) A4 s. W% ^! @( n '更新处理函数8 v4 t* ?0 q* b7 c
Sub DataList_UpdateCommand(sender As Object, e As DataListCommandEventArgs)
, C9 [5 W' i% z9 J' v4 c( T Dim lbl1 As Label = e.Item.FindControl("lblNum")8 a& G0 C( x) z5 k
Dim txt2 As TextBox = e.Item.FindControl("txtBook")2 k( m3 n! [# F/ j
Dim txt3 As TextBox = e.Item.FindControl("txtPrice")9 [& \" g6 m* F, |& x6 D
1 D# v) y/ B) T5 s
dim strNum as String
: z( Y* ? F: S" G, K+ x; n" f9 F( k* T dim strBook as String
8 `% u( H6 q+ H t& w+ K9 f dim strPrice as String1 f$ c3 ]% V+ ^. g) g
strNum=lbl1.text
- Q [* x! w/ I( b+ w strBook=txt2.text% Q+ W; |- ]& K m7 W
strPrice=txt3.text( D( _/ h/ c. c( j, A) ^2 V
'用先删除再插入的方式,实现数据的更新操作
! S' g! Q! t% ?& h BookView.RowFilter = "num='" & strNum & "'"
! F: {1 H$ x5 G) H* E8 u$ R If BookView.Count > 0 Then2 c5 A7 {- o, k
BookView.Delete(0)( N( p0 z4 R6 `4 ^) f, i
End If
, [6 z8 w+ j$ v6 z6 d BookView.RowFilter = ""
5 e: _6 J5 r- Mdim dr as DataRow=Book.NewRow()
Y% d0 U. n3 {! t dr(0) = strNum$ W& X0 z* m7 ?& @
dr(1) = strBook7 S' Y! k% D* |
dr(2) = strPrice) z4 P9 v+ p. c4 }. p4 y% _0 s
Book.Rows.Add(dr)
y( w% i: b$ _7 F DataList1.EditItemIndex = -1
9 |- w5 r1 F! n BindList$ X" [( g4 s: k
End Sub+ i( ], c7 v+ u
</script>
3 F! D6 h3 b! h% B& u<head>% Z- _. }/ O. U' o/ J9 F d) C
<title>" }+ B( Y u3 S' C2 ]1 f
数据列表修改实验. R) y6 x; N" Q: p3 R4 {' S4 Q. a
</title>
+ }5 w3 k# Q" g# N$ s# g</head>
" m/ R2 f) H4 \7 a' F( n<body>$ F7 g5 ?% y& N( h0 J. {) P* [# A6 l
<center>' Z, Z- A" C. E- @( d7 R: Z& k
<h2>数据列表修改实验</h2>
0 T& R# E# n) x. ] <hr>" H v4 V# `) {* D1 |
<p></p>
+ _4 z) T* m: N9 l% Y <form runat=server>% I7 n% ?: Z: P7 Q
<font face="Verdana" size="-1">; f$ A/ U5 F' E: r
<!--编辑时显示绿色,并定义编辑、修改、取消时的处理函数-->/ P& T9 F' Z- i& ^7 Q7 F. L& O
<asp:DataList id="DataList1" runat="server"
) G. I. L( U" \" Z0 Z/ O BorderColor="black"
( ~' N, a6 V4 g; P+ ^- A6 R BorderWidth="1"
9 V: G& r/ W f1 e! ~ GridLines="Both"# I4 S! u, N/ k8 e
CellPadding="3"7 J/ }, y& [- L: B) e
CellSpacing="0"
7 l8 U, s# i: | Font-Name="Verdana"
+ @; E; X' z+ D6 ~ Font-Size="8pt"
) l- _) ^; d) p( p! T) | Width="150px"
! N4 m+ d# ^* _. o) }5 u( v HeaderStyle-BackColor="#aaaadd"5 G; i! f% E, A% X$ U
AlternatingItemStyle-BackColor="Gainsboro"9 X4 `% f2 N W4 j% T6 v
EditItemStyle-BackColor="green"( I/ q4 ]! C4 q0 R- E- i1 A4 w: i
OnEditCommand="DataList_EditCommand"
) _) ]& l$ t, h3 N* F" l OnUpdateCommand="DataList_UpdateCommand"* F/ H L) X8 L( c) K2 ?1 l
OnCancelCommand="DataList_CancelCommand") q& K4 M+ |' i6 p2 v" q
>
8 Y O+ D3 l3 x <template name="HeaderTemplate">
2 s u. K( V: y5 ^2 d) S% F <center><h>书籍序号</h></center>! P4 o7 Y0 o0 v2 O0 w0 R
</template>4 r5 @; L- D7 q& U
<template name="ItemTemplate">; d1 N! T7 B3 r9 ?
<asp:LinkButton id="button1" runat="server" Text="详细" CommandName="edit" />9 h9 `' o8 i/ \
<%# Container.DataItem("name") %>% ]# t2 c$ B$ Z
</template># ~% T% d- [( _) D2 S
<template name="EditItemTemplate">. b2 z- i% o5 L2 P/ d8 }7 F5 Q
书籍: 序号1 [9 r2 ^2 X; u& ~2 D
<asp:Label id="lblNum" runat="server" Text='<%# Container.DataItem("num") %>' /><br>
/ t1 S8 t5 }2 O0 I 书名:
2 D* G! T& q0 o$ J6 u9 W; | <asp:TextBox id="txtBook" runat="server" Text='<%# Container.DataItem("name") %>' /><br>0 E% p2 ^# \5 ]6 a
价格:7 {4 q8 N+ Y8 f! t5 d* G
<asp:TextBox id="txtPrice" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "price") %>' />
1 n! j& n# {( u. I <br>
0 o+ |% r: Y! i& \- l3 e$ D) G<center>. s3 f' P# T( w! G! B1 f
<asp:Button id="button2" runat="server" Text="修 改" CommandName="update" />6 T/ k! O! I3 ~ u( Z
<asp:Button id="button3" runat="server" Text="撤 消" CommandName="cancel" />0 R# O/ E o9 L5 t% H/ U: S
</center>' d! G8 N: J! `$ u
</template>3 @; m0 T/ q3 m( i2 w5 \
</asp:DataList>
: U" H( f- h3 _7 V+ g/ K </font>: u% H% R) B q$ ^8 o1 V2 |# p4 ~
</form>6 m# F7 R" R, o, S+ ]- Q' w
</center>
1 @1 Y8 x8 S1 X' E! S+ g2 o</body># i" t' R5 H. s$ O* V, `) Q# ~$ t& W
</html>, M) a; ^0 Z$ W' k
2.准备对第2项进行修改,此时的画面如下:
7 @' O% V [, m, B* U6 x* U& r: g1 _. a" X/ h
3.把序号为2的书籍的价格改为9.99以后,重新进入其编辑状态后,它的输出画面如下:
( E5 I; j2 C" p8 s% H" `2.2.15 数据表格DataGrid
/ @1 M; }8 k- X) u8 E数据表格服务器端控件以表格形式显示数据内容,同时还支持数据项的选择、排序、分页和修改。缺省情况下,数据表格为数据源中每一个域绑定一个列,并且根据数据源中每一个域中数据的出现次序把数据填入数据表格中的每一个列中。数据源的域名将成为数据表格的列名,数据源的域值以文本标识形式填入数据表格中。/ u* }" m/ [7 A6 x* N
通过直接操作表格的Columns集合,可以控制数据表格各个列的次序、表现方式以及显示内容。缺省的列为Bound型列,它以文本标识的形式显示数据内容。此外,还有许多类型的列类型可供用户选择。
2 S; a2 N0 {5 C4 {列类型的定义有两种方式:显视的用户定义列类型和自动产生的列类型(AutoGenerateColumns)。当两种列类型定义方式一起使用时,先用用户定义列类型产生列的类型定义,接着剩下的再使用自动列定义规则产生出其他的列类型定义。请注意自动定义产生的列定义不会加入Columns集合。
. p6 p8 I& S; v列类型介绍:; |, D# @. e" A
1)bound column ,列可以进行排序和填入内容。这是大多数列缺省用法。
0 f9 Q% @* D6 N2 O' y 两个重要的属性为:HeaderText指定列的表头显示3 N9 y- ~* F6 c) D' y
DataField指定对应数据源的域
# Q* ^2 ]+ ~% z5 Y2)hyperlink column,列内容以hyperlink控件方式表现出来。它主要用于从数据表格的一个数据项跳转到另外的一个页面,做出更详尽的解释或显示。- @ [$ k: j! [
重要的属性有:
+ M! i/ H- f6 o, M. pHeaderText指定列表头的显示# S1 z! n7 m7 y, z' ^
DataNavigateUrlField指定对应数据源的域作为跳转时的参数
6 @+ D; Q4 ]* d N, c4 [: MDataNavigateUrlFormatString指定跳转时的url格式, b- g& c& H, ^: ~; l
DataTextField指定数据源的域作为显示列内容来源
1 ~3 l! x& g6 b: W+ Z+ ?3 V- \3)button column,把一行数据的用户处理交给数据表格所定义的事件处理函数。通常用于对某一行数据进行某种操作,例如,加入一行或者是删去一行数据等等。3 W }$ c. D# x
重要的属性有:1 g" @1 G: x2 k! b
HeaderText指定列表头的显示- W) E* C2 \- z2 ?% U# m
Text指定按钮上显示的文字& E( [4 D! X6 s- v+ {
CommandName指定产生的激活命令名
4 G1 j/ i5 d& z& J- U4)Template column,列内容以自定义控件组成的模板方式显示出来。通常用作用户需要自定义显示格式的时候。
# `3 X9 w4 [9 I2 \6 b: `' w( k5)Edit Command column,当数据表格的数据项发生编辑、修改、取消修改时,相应处理函数的入口显示。它通常结合数据表格的EditItemIndex属性来使用,当某行数据需要编辑、修改、取消操作时,通过它进入相应的处理函数。例如,当需要对某行数据进行修改(update)时,通过它进入修改的处理步骤中。9 f3 m; V0 D6 W0 @ b
其他重要列属性介绍:* h( X" P) Y# p& o: g1 h. f
1)Visible属性,控制定义的列是否出现在显示的数据列表中。
) @! J; _% S1 r, K% V2 i2 p2)AllowSorting属性,是否可以进行列排序。当AollowSorting=true时,可以以点击列的列表头的方式,把数据以该列次序进行排序。缺省的(即载入数据后)的排序方式,实际上是以数据在数据源中的排列次序进行排序的。 A3 o9 C5 R/ ^# }
3)AllowPage属性,是否以分页方式显示数据。当对有大量数据的数据源进行显示时,可以以例如10行一页的方式来显示数据,同时显示一个下页/前页的按钮,按下按钮可以以向前或向后的方式浏览整个数据源的数据。当AllowPage=true时,即以分页方式进行显示。可以通过设定CurrentPageIndex属性来直接跳转到相应的数据页。
& p, z5 k6 s- a; t+ p; ?例子:演示以上各种类型的列定义的用法
9 R6 ?4 t, @/ Q2 x6 t, B. ~5 R, ^1.源程序(FormDataGrid.aspx)
7 e0 P6 x' \6 r* p2 N# d2 B. b<!--源文件:form\ServerControl\FormDataGrid.aspx-->& F& [% J0 y% N" i5 g7 l* B+ X
<%@ Import Namespace="System.Data" %>
2 u8 P( ^$ Q& r2 [& S; T# S% `<html>
* ~& p$ Z5 ~# g J+ O: I<script language="VB" runat="server">
% p* X& f: p: g! B( C" i) n" F8 b dim Order as DataTable( R2 Z* X5 W/ ]. U2 q# z& \
dim OrderView as DataView1 n$ B4 P" m% w- W5 C9 h
'对数据表格1创建数据表,并返回数据视图- T* f) N9 D) K9 F1 y8 R
Function LoadData() As ICollection
c+ W9 @6 v$ {. M# @ ! z4 }; O; j2 J: G, ^
Dim dt As DataTable' ~( [6 E0 Q+ s Z! C6 C
Dim dr As DataRow- y k- X; Y! O8 p3 m
Dim i As Integer: h; y* U* Q2 {; I, i
'创建数据表
2 o d1 l0 D" ?4 H/ ^, @( g dt = New DataTable+ e' V1 a" a/ L5 G: e* y
dt.Columns.Add(New DataColumn("Num", GetType(Integer)))
# E# i5 W% }, p dt.Columns.Add(New DataColumn("Name", GetType(String)))
- e2 o7 j4 ~" E3 O- ? dt.Columns.Add(New DataColumn("DtTm", GetType(DateTime)))) G. \2 I$ z) w: U. |
dt.Columns.Add(New DataColumn("Assembly", GetType(Boolean)))
& \# E1 T' ^$ `- x/ p7 G7 ]/ s dt.Columns.Add(new DataColumn("Price", GetType(Double)))3 H% S7 P) o( g9 E8 m, c) ~
'载入数据" }1 y9 l4 X: l- ?' q" W/ A
For i = 1 To 63 h: _3 `3 m: }* Y4 a: f* N
dr = dt.NewRow(). C6 I( \ x; _ v/ q: {+ x
dr(0) = i( v' D9 F2 s3 H9 J2 ^$ ]( s, p! j
dr(1) = "书名 " + i.ToString()
( Z0 @+ z, R( p( ] dr(2) = DateTime.Now.ToShortTimeString
4 h3 U6 q5 }5 p If (i Mod 2 <> 0) Then, _' A& e( B0 V; Y7 A( o
dr(3) = True7 i6 x4 e( Z i
Else6 v. f+ a! d% e; J/ {8 v
dr(3) = False! N8 w, A3 k) @1 U% u. O
End If
2 j3 P2 K$ t( j# r; g" l- D# j dr(4) = 1.11 * i
0 ^4 ?2 \4 g* Z! y% k '把产生的数据加入数据表中! f, x) p# z) p- E4 K! X
dt.Rows.Add(dr); p1 z5 a. {2 i# C0 ~4 J
Next5 s' b4 O, J! J8 K X0 l
% s! p& a) Q0 L0 a% E& m! c f
LoadData = New DataView(dt)/ Z/ D$ S& R' H" h; v. R
2 t( L( d: X/ x% ? End Function
, D( @4 k8 ]1 p! } '页面初始化,分别对DataGrid1和DataGrid2绑定数据源( K. ?- |7 g& S
Sub Page_Load(sender As Object, e As EventArgs) # A( M! _8 E2 S1 U% q' R q8 o2 o
) ]! A1 ~! c1 h& Z4 v If Session("session_order") = Nothing Then
2 U% p: _" n! w0 y; }: \& J Order = New DataTable()& {) T1 P0 ~! B6 j$ a9 [
Order.Columns.Add(new DataColumn("Name", GetType(string)))
, G, n e$ L, Z6 h1 w9 H Order.Columns.Add(new DataColumn("Price", GetType(string)))
( Y/ s! F S5 _# o Session("session_order") = Order$ n% M1 z$ W) W+ T" |% f* B1 v
Else
) }& W* k, Q% A5 i2 s, V$ O Order = Session("session_order"), c- {* o4 ?- e5 e4 v8 g
End If
1 I9 Z1 i& d% Y; d9 s OrderView = New DataView(Order)
4 x# [- f" a; l1 u. e DataGrid2.DataSource = OrderView! @+ J/ }9 i5 i5 }4 K' E
DataGrid2.DataBind+ J9 R8 T3 M/ X/ P! G) [
If Not IsPostBack Then
9 ]6 r" G0 U! q7 u [) o1 vDataGrid1.DataSource = LoadData()
# F5 j% v2 Q( }" R) K# h DataGrid1.DataBind$ w9 k( u2 B) i* x& O) d2 F
End If2 o) o0 C; [& N9 _
End Sub
2 V9 H- E; X% a6 _1 }$ ^ '对ButtonColumns的处理函数集合
) V3 M8 Q/ g7 j6 A Sub Grid_Command(sender As Object, e As DataGridCommandEventArgs) $ f( E8 p" @0 i J' Q* i9 Y3 }
: P. l6 [; f& J, J% g4 G/ f" J
Dim dr As DataRow = order.NewRow()
. R0 k L6 d1 T1 l ' _% |6 x: `) u5 \
Dim Cell1 As TableCell = e.Item.Cells(3)
; i* ~8 ?% j0 e0 } Dim Cell2 As TableCell = e.Item.Cells(6)
" w# C/ u9 j" [; d) M5 l Dim name As String = Cell1.Text2 P5 ]8 z2 x2 x5 J7 z! n
Dim price As String = Cell2.Text
. S0 y$ I( H' @0 ^" n0 b- P! N
" ^$ S* t9 k, Y& m, s If e.CommandSource.CommandName = "Add" Then
) U7 q" N) e0 G$ f$ X* r dr(0) = name
9 m# W! w! |7 v; m: q: m dr(1) = price
: W$ {& g& T- A order.Rows.Add(dr)
, W4 \2 u$ P F6 h Else
5 z7 W+ A; W( N OrderView.RowFilter = "name='" & name & "'"( z; v% i, P# x5 }
If OrderView.Count > 0 Then
. m/ |/ Q: ?/ B2 E. s+ ]* R. H OrderView.Delete(0)
; d; }" b1 r. |; {1 @( f End If& k# d. @6 T+ d# w4 G# d* K) k
OrderView.RowFilter = ""
3 u4 f) C+ J' X9 S End If& }. I+ e; w* w, x4 b
DataGrid2.DataBind()
; \3 K: P0 c7 Z+ l r7 K- z- `. `8 z3 W% j End Sub7 M& b/ W! _6 x8 R6 z& |! _8 c
</script>7 v4 w' @" a( Y5 t d$ ^! @8 Z
<head>
# @( ?. s! J/ `/ P1 j<title>
" J( L( F9 w6 g4 ~% p6 J" l* s0 h5 N数据表格实验
5 T: z: r3 n/ W</title>" E+ h/ F4 y; l, M; O1 L
</head>3 Q: {0 o, c: w- k2 g, d
<body>0 ?2 I5 I- _. R1 S! I
<center>
- @. y4 a. }& [7 h/ ` <h2>数据表格列类型实验</h2>: p* P0 s6 V: A: w; U
<hr>
) n; R+ J5 {* k4 N9 J8 o8 L W <p></p>
. q- x/ h$ [( y; i- p# o <form runat=server>
5 G) j, J* H" t) d5 v) Z <h3><b>图书清单</b></h3>, q8 ]" F0 a y5 \! A3 \# {
<ASP:DataGrid id="DataGrid1" runat="server"0 i z; p2 [, \# \6 ~1 v& ]9 \
BorderColor="black"" M( g8 b2 U$ f k" l) S
BorderWidth="1"2 {) s5 i- M& G' b/ {: t
GridLines="Both"
. O, [6 |2 z/ X7 R# | CellPadding="3"
) {7 s: S3 C. \& D; M. n CellSpacing="0"% g, M& g- M' a8 [
Font-Name="Verdana"
/ N& S6 w% J; r' p) P Font-Size="8pt"" c5 M6 ~& y+ S$ ~
HeaderStyle-BackColor="#aaaadd"2 W' |5 e3 y$ O+ O- {* p8 D5 {
AutoGenerateColumns="false"' J( N% [- m) Z
OnItemCommand="Grid_Command">: J2 D t4 C& A
<property name="Columns">. l1 T" o" r% e4 k7 U
<!-- 2个ButtonColumn示例-->
, Z& Q, l$ @4 y. n2 t9 Z' O <asp:ButtonColumn HeaderText="操作" Text="订购" CommandName="Add" />
! b7 `! p( f6 V C; i# ^# b5 Y <asp:ButtonColumn HeaderText="操作" Text="退订" CommandName="Remove" />
1 @- B9 f( j5 g. O <!-- HyperLinkColumn示例 -->
5 ?' h a4 `/ X1 ]" y! [' t <asp:HyperLinkColumn
7 t R) h# V" T- e2 m HeaderText="链接"+ Y( M/ U9 L3 u5 _! B7 n
DataNavigateUrlField="Num" n, {/ h, t5 p- U" s. s
DataNavigateUrlFormatString="FormDataGrid01.aspx?id={0}"" f. _' F# \1 l( q* S5 ~+ z
DataTextField="Num"% q1 c+ t, s. w' X; |' i5 S
Target="_new"; R6 {0 k2 Y/ V# V2 H3 [2 M5 |: U
/>% l" k/ y/ u8 Z2 g8 Y6 `8 z( X9 e8 H0 z7 @: |
<!-- 2个标准BoundColumn示例 -->1 }5 Q9 L4 Q4 Q4 n! P: J: {- Q
<asp:BoundColumn HeaderText="书 名" DataField="Name" />- q, M& o6 q& i
<asp:BoundColumn HeaderText="入库时间" DataField="DtTm"/>
, m+ V. R* k4 x. r& h/ g <! -- 1个TemplateColumn示例 ,以CheckBox来表示布尔型数据 -->
8 a1 m: C( _- C; J, w; `' F <asp:TemplateColumn HeaderText="合 集">" }3 r0 ?% }' h5 P' |
<template name="ItemTemplate">
- x) ~, p6 X: Y7 [4 f0 _# h <asp:CheckBox ID=Chk1 Checked='<%# DataBinder.Eval(Container.DataItem, "Assembly") %>' Enabled="false" runat="server" />
: C( \0 z8 d1 c% _9 h/ h9 f </template>5 k7 c' y+ X' \7 o( T# Z
</asp:TemplateColumn>
! K1 w- M! m+ T
) u9 S! c0 | q3 f- b9 ` <asp:BoundColumn HeaderText="价 格" DataField="Price" DataFormatString="{0:c}" ItemStyle-HorizontalAlign="right" />0 {" N9 w p" K1 n6 X
</property>( c" q% j3 _, {8 Q: B2 R
</asp:DataGrid>4 w" M. o; p9 N
<hr>
{0 P: p8 M- f! e, {5 [ x8 ^ <h3><b>订购清单</b></h3>) V" }/ C2 s: t7 g: y
<ASP:DataGrid id="DataGrid2" runat="server"
% |, j4 P& @# U# w BorderColor="black"
$ L, R/ r& Y |# V& ~# ?7 g2 w BorderWidth="1"
T) V9 ^ L' x, D) h% F9 n2 u8 ~ CellPadding="3"8 X& D; F, P' [1 A3 i- X
Font-Name="Verdana"
& E2 \6 H& Q0 p- L6 |6 A Font-Size="8pt"
/ w, ]$ G x: W HeaderStyle-BackColor="#aaaadd"4 {4 c6 \! y6 L# N4 t! E
/>, C. B9 ^2 B; Q
+ Y; X( t5 C. D </form>
- H8 i3 ]# s' P! _! C( |# d</center>
) H6 m9 m+ g$ ~) e. @</body>, g* v \; U& a$ T
</html>
6 Y6 F3 ~+ s0 m+ h文件FormDataGrid01.aspx的内容:1 I: a; s, z/ {3 P( R- }- ]0 G
<!--源文件:form\ServerControl\FormDataGrid01.aspx-->+ T* ?* H% l5 c+ C
<html>
4 J" N, i7 Y' O7 \ U f<head>
. T4 ^/ `, b# g# Q/ q1 F<title>
7 }$ I: H; i& L1 H6 h; G3 y) f5 u数据表格链接测试实验" _! C& H4 |* [1 \ Z, ]; f
</title>* c5 H; p1 ]. T B
<script language="VB" runat="server">
( X0 f" ^1 L; s) t0 D/ e Dim num As String
9 n4 @8 J4 Q5 h6 K/ c7 y Sub Page_Load(sender As Object, e As EventArgs) ( n8 N' {; K& E! \2 Y h
num=Request.QueryString("id")
8 Y* q9 q& W$ l. g End Sub
+ d" A: Q! |: h3 ~3 n</script>; v$ l9 m% H- |9 V
</head># i. F$ ?3 W6 F( h! G" E |# c
<body bgcolor=#ccccff>
0 E+ D- g* T& C, U2 P6 p) d<center>" E; G' B3 m- v9 C( q9 U' E
<h2>数据表格链接测试结果画面</h2>
& a: }9 f6 ?+ F# q9 @ o& R <hr>) m$ u- T3 _' j- y/ y+ x: c
<p></p>; ^$ w! z7 m: A6 ^& g7 E' k8 w
<h4>您选择的是 第<u> <%= num %></u>本藏书</h4>
) I( S( k6 _$ o6 H) Z0 u. W</body>
$ K; E7 o& |' E# Z) e</html>
( z9 C6 g# W1 V7 n2.开始时画面:" ]' Z9 H8 M5 V0 F% p i0 q
- q1 J3 P+ n1 |( s
3.当选择订购了第一本和第三本后的画面如下:
6 |4 r5 \: L" |; n1 S7 X- R" Z' B8 u5 {" y$ B0 F1 E
4.当选择退订第三本书后的画面如下:
2 S* D" z# Z+ X: y8 D, b
9 F$ p/ i. Z) R* p5.当点击连接第六项时的画面如下:7 Y5 K1 R* P! D9 ~. }( G" s% H
2.2.16 小结0 u, j3 @! Z) N- ]* p
本章主要讲述了几个服务器端的控件、它们的校验、取值方法等,从中我们可以看到asp.net中各种控件功能是非常强大的,如上面的例子所示,我们甚至可以用一个简单的语句就可以验证输入的合法性。对取值,我们也有简单的方法,对比于用html所写的代码,我们觉得用asp.net所写的是简单了很多。8 _) j7 _! W9 V% ]4 A
第三章 自定义控件
' P4 S/ ~' Y+ R- U0 y! X4 C7 Iasp.net中提供的增加内嵌服务器控件的功能,使你能够多次的轻松增加你所定义的各种控件。事实上,对于表单等各种控件,可以不用更改或者稍微更改一下就可以多次使用的。在通常情况下,我们把一个用作服务器控件的web表单统称为用户控件,我们用一个.ascx为后缀的文件保存起来,这样的保存使得它不被当作一个web表单来运行,当我们在一个.aspx文件中使用它时,我们用Register方法来进行调用,假设我们有一个文件名为saidy.ascx的文件,我们用下面的语句来调用它:2 @6 ^4 ]! t8 B" Q
<%@ Register TagPrefix="Acme" TagName="Message" Src="saidy.ascx" %>$ K5 [, D# U# L2 o7 h. e
上面的TagPrefix标记为用户控件确定个唯一的名字空间,TagName为用户控件确定一个唯一的名称,你也可以用其它的名字代替“Message“,Src为确定所包含的文件名称和路径。这样,我们就可以用下面的语句来调用它了:7 f7 h1 s( x8 R
<Acme:Message runat="server"/>
1 F( W6 j8 p" v& B下面我们来看看具体的应用
6 i: V8 w# r" h! n& Z. ^2.3.1 小页面控件
6 ?' \+ x, [+ C. r7 @3 H# l我们建立两个简单文件来说明这个控件的使用方法:con01.aspx、con01.ascx,在con01.ascx文件里我们只有一句话:: y1 V8 _( W3 k# f& I- @: S, p4 ^+ K6 B* ]7 {
<a href="http://www.yesky.com">欢迎访问天极网站</a>8 V5 K1 T/ ^' Q2 x# t
然后我们在文件con01.aspx里面进行注册:
! ]/ C& J- S- V0 [/ I8 O4 ?<%@ Register TagPrefix="saidy" TagName="info" Src="con01.ascx" %>
5 p) D. I* ^; u页面上的应用我们用这句话来表达:' ^' s8 Y4 `8 _7 H5 s
<saidy:info runat="server"/># a1 J5 O# U! \; ]5 Z3 A' s6 R
con01.aspx文件的完整代码如下:- a9 S0 a: G3 n$ q& D$ ?/ z
<!--源文件:form\CustomControl\con01.aspx-->
- J: R* j4 ?5 L% z* X<!--注册小页面控件-->7 _# c: O2 b* D9 L! {
<%@ Register TagPrefix="saidy" TagName="info" Src="con01.ascx" %>2 {& G( W- m5 a- E5 ^, l+ x
<html>; X( h( X4 @* d# p
<body>
1 e( U: F9 `6 h- |* P8 Z<BR><BR><BR>
- w' ?$ l* c/ t4 _! t% t<CENTER>) k* ~3 g _! P) ~- ]
调用结果1 _# z5 {" V8 S/ }0 h0 M
<BR><BR>9 Z% O5 ^, S+ C+ G* z3 A& v& p! y
<saidy:info runat="server"/>
( [: s* n8 ^2 C0 |</CENTER>
' Q% A) { H, M; I<BR><BR>
/ C# P1 g, c( ?0 W& x! q' u6 H</body>
" p/ J a- ^* y; G2 Q$ e</html>
( `& f/ S# d, Y5 r) l9 Y下面我们访问con01.aspx,显示如下:, ]+ t/ R( [6 x5 ~& N% T
2.3.2 代码和模板的分离. ]% _& O9 W8 I0 ~' x
在编制asp.net程序时,我们会使用模板(Template)。那么什么是模板呢?相信大家都使用过WORD,当我们在新建一个WORD文件的时候,我们可以建立模板。通过使用模板,我们就固定了文档的风格,这样就可以在模板上完善我们的内容。所以我们使用模板一个好处是:文字录入和编排界面是分开的。而且模板可以重复使用。好了,通过上面的介绍,我们对模板就有了一定的认识。 我们在编制.NET程序时,使用模板将对主程序代码大大简化。模板的定义是使用<template>和</template>标示符的。文件保存为.ascx文件。下面的代码是一个典型的模板的定义。
8 f6 Y+ {) I/ X; U# g9 J <template name="itemtemplate">3 h S. C% V! |* n! Y8 B9 ?, I1 h: ?
<table cellpadding=10 style="font: 10pt verdana">0 O8 W# j9 _- I' a
<tr>6 ~5 Z4 J$ e/ K% f- J
<td valign="top">
' v f6 W4 J' ^% E3 ` M4 t- U4 L6 ? <b>所在系: </b><%# DataBinder.Eval(Container.DataItem, "dept") %><br>+ p4 y4 ]0 k5 {3 w# i
<b>姓名: </b><%# DataBinder.Eval(Container.DataItem, "name") %><br>
1 @* S! c8 ]2 n } <b>性别: </b><%# DataBinder.Eval(Container.DataItem, "sex") %><br>+ Q8 I% M9 p! }. ]
<b>年级: </b><%# DataBinder.Eval(Container.DataItem, "grade") %>9 @. ?% L4 g& F x1 ]: j% u& {
</td>
# U9 u: n1 Q) ]- n </tr>
7 i0 w' h- P. @6 B! `! I4 C2 ~</table>
: S" |) w2 X- B </template>
2 S% f* S8 J% k0 B% t7 X9 y. k! Z0 [在这一模板中,我们使用了数据绑定控件,关于数据绑定控件,请参阅其它章节。同时我们还定义了数据的显示方式。那么在主程序中如何调用呢?请看下面的代码:' T$ i: O$ O0 A9 b7 I5 j/ Q. k j2 Z
1.<%@ Register TagPrefix="Acme" TagName="StuList" Src="form32.ascx" %>
1 s% z4 w( b4 J% C5 o3 K2.<html>
! ?- R4 ~& M+ H! f4 J4 R& {0 r3.<body style="font: 10pt verdana">
+ d- m% e1 ^" ^4.<b><center><h3>模板示例</h3></center></b>
, r" r; w* S% \' Y6 E5.<form runat="server">
* j; F7 ?0 H' V- W! u6.<Acme: StuList runat="server"/>3 I6 i; s9 I0 L* R% i2 L
7.</form>
: u! u2 y/ d E) S. o, a8.</body>; @2 {+ h/ F k8 d2 \) R+ Z
9.</html>
; I( j+ @: v- F& h; u0 R% r: ~其实,模板也属于自定义控件(User Control),所以我们在使用时,要先注册(Register)。对主程序的第一行代码,TagPrefix定义了一个不重复的名字空间(Name Space)。TagName为自定义控件定义了一个名称。然后,我们就要指明使用的模板的文件名。注册完自定义控件后,我们就可以把此控件认为是服务器端控件。要使用服务器端控件,我们要做什么工作呢?对了,要使用runat=”server”属性了。请参考第7行代码。$ f3 k7 b. P. u, {
好了,现在我们就看一个完整的例子!这个例子包含了两个文件,一个主程序文件(template.aspx),另一个是用户自定义控件文件(template.ascx)。先看template.aspx文件。% `0 @ L/ w# ^# k7 e
<!--源文件:form\CustomControl\template.aspx-->
5 D5 Z9 t4 }0 N/ m! l5 K <%@ Register TagPrefix="Acme" TagName="stuList" Src="zy.ascx" %>
# ^) I' H! k9 J4 Y- B <html>5 L" X8 y7 \, n0 Z2 ^' ^
<body style="font: 10pt verdana">
& B+ [! r- L" j3 z <b><center><h3>模板示例</h3></center></b>
, v- B' R2 V' R" R <form runat="server"># d3 ^2 h) |% c( b
<Acme:stuList runat="server"/>1 E# N& ?: ^: F& n
</form>9 D- i: y& R1 i/ y% `- z
</body>
* I3 {' t4 a {: r2 r3 G; T</html>
8 |+ d& @# L4 w8 ?+ D# j现在我们再来看template.ascx:6 I( Y7 ]% j$ F1 y7 _% q
<!--源文件:form\CustomControl\template.ascx-->
) r" N m4 k( X# {<%@ Import Namespace="System.Data" %>) ?' j) D$ k( D0 Y
<%@ Import Namespace="System.Data.SQL" %>: \+ Q' D% d7 [2 B
<script language="VB" runat="server">
M; k- P- X2 O" B1 w Sub Page_Load(Src As Object, E As EventArgs)+ I- s0 M, a" O3 n) U8 r
If Not (Page.IsPostBack)
0 U0 o: E* a1 h1 ?- o Dim DS As DataSet
; s6 ?1 [$ H$ j" Z: M Dim MyConnection As SQLConnection j9 s$ H- f p% W. C' h
Dim MyCommand As SQLDataSetCommand
0 P/ J, ]" ?4 B. F2 t MyConnection = New SQLConnection("server='iceberg';uid=sa;pwd=;database=info")
! k2 `3 _) U9 p MyCommand = New SQLDataSetCommand("select * from infor where dept='" & Category.SelectedItem.Value & "'", MyConnection)
% I) l/ B$ T Q) g DS = New DataSet()
( F6 T) n( b6 S MyCommand.FillDataSet(DS, "infor")
. J) _1 x3 ~ O- z2 G: }* k MyDataList.DataSource = DS.Tables("infor").DefaultView
. P3 Q. E- T: r MyDataList.DataBind()( ^2 |- k G- o0 E' D
End If
" {2 w) W1 { _: x# ` End Sub7 @1 e) Q; ^, E
Sub Category_Select(Sender As Object, E As EventArgs)' {5 Z( f5 l: p! `
Dim DS As DataSet
7 M4 G! w9 g# q0 I) d; O$ n Y5 ]$ M' y Dim MyConnection As SQLConnection
) l/ | j C8 m4 Q+ j7 o6 J u Dim MyCommand As SQLDataSetCommand
: w6 `# b/ X$ b9 w: y A5 _ MyConnection = New SQLConnection("server='iceberg';uid=sa;pwd=;database=info")4 }% m! c/ B0 ?+ q
MyCommand = New SQLDataSetCommand("select * from infor where dept='" & Category.SelectedItem.Value & "'", MyConnection)! J6 ~4 f' O \" f
DS = New DataSet()6 a. y/ d% O8 Q' B
MyCommand.FillDataSet(DS, "infor")
. Y \8 D( q* I. u MyDataList.DataSource = DS.Tables("infor").DefaultView
8 S( ^% e$ e/ c' |3 ` MyDataList.DataBind()/ \, y8 P+ c2 `& ~/ A0 h* ^7 V, C
End Sub
2 x0 ]9 i: x$ q</script>1 b3 v/ t) `/ d. W7 g
<table style="font: 10pt verdana">0 x U9 w% ~3 E
<center>
. @# P. l5 Q4 [: ?/ y7 z( p<tr>4 @3 Y; G. I8 @7 E/ ?4 o3 r
<center><td><b>请选择系名:</b></td></center> * J2 P1 l, U& m! D" Y& |/ F& X0 y
<td style="padding-left:15">
- k$ t, f* s9 E, z8 ]<center> <ASP:DropDownList AutoPostBack="true" id="Category" OnSelectedIndexChanged="Category_Select" runat="server">0 y) J0 a4 B# H* }5 v
<ASP:ListItem value="信息系">信息系</ASP:ListItem>7 F# H5 @/ r: t( u" a- n! e7 Y
<ASP:ListItem value="工程系">工程系</ASP:ListItem>+ N1 \; C: r- N) ^
<ASP:ListItem value="英语系">英语系</ASP:ListItem>
: Z" R5 L5 h# ~( w8 U2 k% V+ l </ASP:DropDownList></center>4 M! L5 d& C, L. `5 E) d! E% I
7 x2 U& F) v* M) P( D</td>
7 g3 k7 Y [3 E; G </tr>/ G9 m: n" d, I+ N# y
</table>
2 Z+ h+ c* p9 q/ J' X! f<ASP:DataList id="MyDataList" BorderWidth="0" RepeatColumns="2" runat="server">8 ?/ I. Z1 D8 W6 h j
<template name="itemtemplate">8 V( L- u& z; [( y
<table cellpadding=10 style="font: 10pt verdana">) C& c1 t5 [! ^4 U) t/ z; ?
<tr>6 v1 o( Q: K: j' Q% Q' G
<td valign="top">/ D; S3 B2 a9 D% V
<b>所在系: </b><%# DataBinder.Eval(Container.DataItem, "dept") %><br>
8 f8 k+ Q. H1 r# t; J <b>姓名: </b><%# DataBinder.Eval(Container.DataItem, "name") %><br>0 @+ b- k: i" D" g7 ?8 i
<b>性别: </b><%# DataBinder.Eval(Container.DataItem, "sex") %><br>4 Q' k, A+ X2 ^! S
<b>年级: </b><%# DataBinder.Eval(Container.DataItem, "grade") %>9 T ^5 S2 v% x. c5 e0 p+ n
</td>
' p3 o2 t. ?- x1 S% f- O </tr># T/ i3 Z1 Y! H* K
</center> " _7 j, }" m; W8 j, M" t, n
</table>
- s& {/ p( W0 t/ L </template>3 @- I! E# Q1 Z- ]
</ASP:DataList>3 J4 x+ }+ ~5 Y, |7 p8 M
运行的效果图如下:
/ g, H7 \: E2 n: ?8 j这样,一个完整的例子就做好了!实现了代码和模板的分离。试一下吧!* f5 e: l6 ]% `+ N1 G1 k
2.3.3 自定义控件
2 W% j* S7 B( k4 @! M在asp.net中,除了我们应用的服务端控件之外,我们还可以创建自己的服务端控件,这样的控件叫Pagelet。我们来介绍如何创建一个Pagelet,这个Pagelet的功能是在被访问时返回一个消息。
2 m4 |3 S" N; k( s: Y我们创建一个Pagelet,用来返回一个消息在客户端的浏览器上:
; L2 o) a- v. O. {2 \. j qWelcome.ascx:
: i; T$ v" H1 Q% c7 b<!--源文件:form\CustomControl\welcome.ascx-->& X0 z# ^' U: R
欢迎来到我这里啊!!!
( G% |4 e- ?0 c& [0 p就这么简单,当然你也可以让它复杂一点。当一个Pagelet被创建后,我们就可以通过下面的记录指示来调用它:( e" P8 n) |2 N5 b* o
<% @ Register TagPrefix="wmessage" TagName="wname" Src="Welcome.ascx" %>8 H( e; p4 k; A# X
TagPrefix为Pagelet指定一个唯一的名字空间,TagName是Pagelet的唯一名字,当然你也可以换成其他的不是”wname“的名称如:TagName="saidy"。Src属性是指指向Pagelet的虚拟路径。
k: E( z8 v3 P" g. d' a$ x' t2 ?一旦我们注册了Pagelet,我们就可以向用普通的空件一样来应用它:
$ C3 v8 Q( B8 B( s5 B2 D<wmessage:wname runat="server"/>
( \" E+ M: ?5 X7 u1 \! I, @7 Q下面的例子示范了自定义的控件的应用(welcome.aspx):
& M: ~; J& w/ H! k2 p* I9 D<!--源文件:form\CustomControl\welcome.aspx-->2 d! E/ t2 |8 o7 N) T
<%@ Register TagPrefix="wmessage" TagName="wname" Src="Welcome.ascx" %>
) U; ]- S; u/ o<html>, {6 \, }% J. q3 y
<title>自定义的控件</title>
! E3 O) P% E7 H3 m6 s5 k" ^<h3>.NET->Pagelet</h3>1 T1 U9 F. s. d0 {+ M3 o
<wmessage:wname runat="server"/>
' O' F3 C8 r1 a+ g. ] B( q- Z2 E</body>' k7 P; t1 G+ k# ^, {2 h) P! [
</html>
/ o. Z2 \8 r* T6 X! @) G) f% ^客户端的访问如下:
/ u7 Q! R) z4 {, F: G3 J5 n$ }/ b% q. G: U7 m( D
2.3.4 组合控件
5 c8 V$ y+ [! q: t1.定义; D5 B$ s$ g4 W# M! n
以类组合形式把已有的控件编译后形成自己定制的控件。实际上组合控件在效果上与利用内置控件形成的用户自定义控件一样,不同处在于,用户自定义控件含有一个.ascx的纯文本控制文件,而组合控件则利用编译后的代码。/ d0 j7 t1 `& Z* T5 G0 `
2.步骤
! l& x [4 V2 A( X, e1.)重新定义从Control继承来的CreateChildControls方法。, |/ ]3 K# `2 P, v/ L4 e$ u1 m7 q
2.)如果组合控件要保持于页面上,须 |