第二章 用Web服务器控件建立表单
主要内容
l 建立智能表单
l 控制页面导航
l 在控件上进行格式化
1 建立智能表单
1.1 Label控件
重要属性是Text。
给Text属性赋值，你可以：第一、声明时赋值；第二、代码中赋值。
Label控件的内容被显示在<span>标记内（可以用浏览器查看源码）。
1.2 TextBox控件
可以用来显示三种HTML标记。分别是：文本输入域、口令输入域和文本区域。
重要的属性有：
l AutoPostBack 若为True，改变文本框的内容之后，将自动发送含有此文本框的表单
l Columns
l MaxLength
l ReadOnly
l Rows
l Text
l TextMode 有效值有三个：
u MultiLine
u Password
u SingleLine
l Wrap
重要的事件
l OnTextChanged
关于“TextMode属性”的三个值？？？
l SingleLine 这是默认值，一般单行输入文本域。
l Password 显示口令输入域
l MultiLine 文本区域TextArea
1.3 Button控件
可以在表单中添加的Button控件有三种（不论哪种按钮，点击时都是【将包含按钮的表单提交给Web服务器】）：
l Button 标准HTML表单按钮
默认情况下，它显示的是提交按钮。（即为<input type=”submit”>标记）
重要属性有：
u Text
u CommandName
u CommandArgument
u CausesValidation 设置表单是否被检验。默认为true。
重要事件：
u Click
u Command
l ImageButton 图像表单按钮
重要属性（只列出与Button不同的）：
l AlternativeText 当不能显示图像时，需要显示的文本
l ImageAlign 对齐方式，取值为：AbsBottom、AbsMiddle、BaseLine、Bottom、Left、Middle、NotSet、Right、TextTop和Top
l ImageURL 图像的URL
重要事件（同Button控件）
|
注意：ImageButton控件的Click事件，其事件参数对象的类型为ImageClickEventArgs，它能够传递鼠标点击位置的x和y坐标 |
l LinkButton 超文本链接
显示为超文本链接，点击时，将含有此按钮的表单中的所有域都提交给服务器。
|
LinkButton控件在不支持JavaScript的浏览器中不起作用（禁用也算）。 |
1.4 RadioButton和RadioButtonList控件
RadioButton可以很方便的改变布局；
而RadioButtonList便于显示来自数据库或集合的按钮列表。
1.4.1 RadioButton控件
添加控件时，设置GroupName属性，可以对按钮进行分组。（同GroupName的按钮属于同组）
而CheckedChanged事件则可以用来判断哪个按钮被选中了。（此事件发生时机为【新的控件被选中时】，相对的若默认按钮被选中时直接提交表单，不会触发此事件）
RadioButton控件也支持AutoPostBack属性。
1.4.2 RadioButtonList
跟布局有关属性：
|
CellPadding |
边框宽度（单位像素数） |
|
CellSpacing |
各按钮间距 |
|
RepeatColumns |
显示时列数 |
|
RepeatDirection |
方向。取值Horizontal和Vertical（默认） |
|
RepeatLayout |
布局。取值Table（默认）和Flow |
数据库有关属性
|
DataSource |
|
|
DataTextField |
指定字段 |
|
DataTextFormatString |
|
|
DataValueField |
作为【单选按钮的值】的数据库字段 |
|
DataMember |
数据源表 |
一般属性
Items
SelectedIndex
SelectedItem
方法
DataBind
事件
SelectedIndexChanged
产生RadioButtonList控件的三种方法：
第一，声明时列出单选按钮
<asp:RadioButtonList ID=”radlFavoriteColor” Runat=”Server”>
<asp:ListItem Text=”红色”/>
<asp:ListItem Text=”蓝色” Selected=”True”/>
<asp:ListItem Text=”黄色” />
</asp:RadioButtonList>
第二，将条目添加到RadioButtonList类的ListItemCollection集合
|
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> Protected Sub page_load(ByVal s As Object, ByVal e As EventArgs) If Not IsPostBack Then radl1.Items.Add("红色的") radl1.Items.Add("绿色") radl1.Items.Add("蓝色") radl1.SelectedIndex = 2 End If End Sub </script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <asp:RadioButtonList ID="radl1" runat="server"></asp:RadioButtonList> </div> </form> </body> </html> |
第三，绑定到一个数据源
|
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> Sub page_load() '定义一个数据源，可以用ArrayList代替 Dim colss As New ArrayList If Not IsPostBack Then ' colss.Add("一种颜色") colss.Add("两种颜色") colss.Add("三种颜色") colss.Add("第五种") '下面开始绑定数据源 radl2.DataSource = colss radl2.DataBind() End If End Sub </script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <asp:RadioButtonList ID="radl2" runat="server" /> </div> </form> </body> </html> |
注意：ArrayList是一个集合，可以把它看做没有固定尺寸的数组。
另外，在将RadioButtonList绑定到数据源时，还可以使用其DataTextFormatString属性对每个选项的文本进行格式化。
<asp:RadioButtonList ID="radl2" DataTextFormatString="这种颜色叫:{0}" runat="server" />
如何判断【当前选中的按钮】？
使用SelectedIndex属性，返回当前选中按钮的索引号。（注意第一项的索引号为0）
或者，利用SelectedItem属性，返回条目。（返回值类型ListItem）
如何【控制布局】？
使用RepeatDirection属性，若为Vertical，表示按钮先纵向，再到下一列显示；若为Horizontal，则先横向，再到下一行。
如果，启动了RadioButtonList控件的AutoPostBack属性，当【选择新的单选按钮时】会引发SelectedIndexChanged事件。
1.5 CheckBox和CheckBoxList复选框
l CheckBox控件
特殊属性：Checked。（为True表示被选中）
事件：CheckedChanged
l CheckBoxList控件
1.6 DropDown控件
包含一个ListItemCollection集合类型的属性Items。
1.7 ListBox控件
特殊属性：
Rows 表示显示的行的个数。默认为4
SelectionMode 决定是否能多选。可能值为Multipe和Single。
2 控制页面导航
内容：
l 如何将HTML表单提交到另一个页面，并且获取表单信息。
l 如何使用Redirect方法自动将用户送到新页面
l 如何用HyperLink控件将页面链接起来。
2.1 将表单提交到另一个页面
|
使用<form>标记的服务器端版本，不能将表单发送到另一个页面。 |
若要“将表单提交到另一个页面”，可以使用标准HTML表单标记。
|
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" method="post" action="Results.aspx"><%--首先修改这里--%> <div> username:<br /> <input name="username" /> <%--注意这里没有使用ASP.NET控件--%> <p> </p> Comments:<br /> <textarea name ="comments" cols="50" rows="10"></textarea><%--注意这里没有使用ASP.NET控件--%> <p></p> <input type="submit" ><%--注意这里没有使用ASP.NET控件--%>
</div> </form> </body> </html> |
注意：<form method="post" action="Results.aspx">。标记的Action属性被设置为新页面Results.aspx，这是表单信息会被发送的地方。
注意：因为表单被发送到另一个页面，你不能使用ASP.NET控件获取此信息。
『你可以使用HTTPRequest类的Params集合来操作』
注意：你还可以使用HTTPRequest类的Form集合获取表单数据。
|
Params和Form集合的差异？？？ Rarams集合还代表了QueryStrings、ServerVaribles和Cookies。 |
|
'在page_Load中获取内容 Sub page_load() lblUserName.Text = Request.Params("Username") lblComments.Text = Request.Params("Comments") End Sub |
2.2 使用Redirect（）方法
在大多数情况下，应该利用视图状态，并且将表单发送回其本身。
问题是：在用户成功地填写表单之后，如何将他传送到新的页面？
传送用户的最好办法是使用Response.Redirect()方法。（可以传送到任何页面或别的网站页面上）
通常，在调用Redirect（）方法之前，会将表单数据保存到文件或数据库表中。
|
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) '在这里,先保存表单信息，这里掠过 Response.Redirect("ThankYou.aspx") End Sub </script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Redirect.aspx</title> </head> <body> <form id="form1" runat="server"> <div> <h1>先加控件</h1> <br /> Username:<br /> <asp:TextBox ID="txtUsername" runat ="server" /> <p /> Comments:<br /> <asp:TextBox ID="txtComments" TextMode="multiLine" runat="server" /> <p /> <asp:Button ID="btnSubmit" Text="Submit!" runat="server" OnClick="btnSubmit_Click" /> </div> </form> </body> </html> |
2.3 使用HyperLink控件
如果使用HyperLink控件，可以将一个asp.net页面链接到另一个页面。
HyperLink控件，可以显示文本或者图像，作为显示。
重要属性：
|
ImageUrl |
显示用图像的URL |
|
NavigateUrl |
目标页面的URL |
|
Target |
链接的目标窗口或框架，可以是：_top、_self、_parent、_search、_blank。 |
|
Text |
链接的文本标签 |
HyperLink控件相对于简单的HTML链接（即<a href />）的优点？？？？
就是可以在代码中操作它的属性。
|
<script runat="server"> Sub page_load() If TimeOfDay > #5:00:00 PM# Then lnkHelpLink.NavigateUrl = "AfterHoursHelp.aspx" lnkHelpLink.Text = "After Hours Help" Else lnkHelpLink.NavigateUrl = "NormalHelp.aspx" lnkHelpLink.Text = "Normal help" End If End Sub </script> |
3 在控件上进行格式化
主要内容：
第一．所有web控件共有的格式化属性
第二．应用“级联样式表（CSS）”
第三．应用“类”到Web控件
3.1 基本Web控件属性
所有Web控件的基类是WebControl。
在WebControl类中定义的【基本Web控件格式化属性简表】
|
AccessKey |
选择控件用的热键。需要按住ALT再加某字母 |
|
TabIndex |
|
|
BackColor |
背景色。可以是名称或RGB值（#FF0000） |
|
BorderStyle |
边框外观。有效值：Dashed、Dotted、Double、Groove、Inset、None、NotSet、Outset、Ridge、Solid。 |
|
BorderWidth |
控件边框宽度（单位像素） |
|
Font-Bold |
|
|
Font-Italic |
|
|
Font-Name |
|
|
Font-Names |
|
|
Font-Overline |
文本上面划线 |
|
Font-Size |
单位像素 |
|
Font-Strikeout |
删除线 |
|
Font-UnderLine |
|
|
ForeColor |
|
|
Height |
|
|
ToolTip |
|
|
Width |
|
注意，一些属性需要IE浏览器支持，还有一些需要依赖于样式表。
|
FontUnit 类型（表示字体的大小） 其中：公开方法
txt1.Font.Size = FontUnit.Parse(ddlFontSize.SelectedItem.Text) |
|
Color结构（在System.Drawing名称空间） 其公开方法
Dim strBackColor As Color = Color.FromName(ddlBackColor.SelectedItem.Text) |
3.2 在Web控件上应用样式表
|
举例：将字符串中每个单词的各字母自动变成大写，可以通过在Label控件的Style属性中设置Text-Transform=Capitalize. <asp:Label ID=”lbl1” Style=”Text-Transform:Capitalize” Text=”this is some Text” Runat=”Server”/> 浏览器中观察源码，会产生一个包含Style属性的<span>标记，如下： <span id=”lbl1” style=”Text-Transform:Capitalize”>this is some Text</span> |
上面的效果，也可以使用CssClass属性（将一个样式单类赋值给Web控件）来实现。
样式单可以定义在页面文件内部。（通过指定控件的CssClass属性。注意此属性值的大小写）
|
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> <%--首先，加入css，添加<style>标记--%> <style type="text/css" > .myClass { text-align:justify; font:50pt Script; } </style> </head> <body> <form id="form1" runat="server"> <div> <%--这里是第二步--%> <asp:Label ID="lbl1" Width="10" CssClass="myClass" Text="this is some text" runat="server" /><%--注意CssClass="myClass"，大小写不一样--%> </div> </form> </body> </html> |
还可以通过代码添加样式（通过使用控件style属性【由WebControl继承而来】，来指定文字样式）
|
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> Protected Sub lbtn1_Click(ByVal sender As Object, ByVal e As System.EventArgs) '第二步，通过IDE，增加LinkButton的Click事件 lbl1.Style("text-transform") = "capitalize" End Sub
Protected Sub lbtn2_Click(ByVal sender As Object, ByVal e As System.EventArgs) lbl1.Style("text-transform") = "lowercase" End Sub </script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <%--第一步，添加控件LinkButton--%> <asp:Label ID="lbl1" Text="This is some text!" runat="server" /><p /> <asp:LinkButton ID="lbtn1" Text="首字母大写" runat="server" OnClick="lbtn1_Click" /><br /> <asp:LinkButton ID="lbtn2" Text="全部小写" runat="server" OnClick="lbtn2_Click" /> </div> </form> </body> </html> |
下面演示“通过控件的CssClass属性，给控件分配不同的样式单类。”
有两个样式单类myClass1和myClass2，用按钮控制分别赋给一个Label
|
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) '第二步，给LinkButton增加事件' Label1.CssClass = "myclass1" End Sub
Protected Sub LinkButton2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Label1.CssClass = "myclass2" End Sub </script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title>
<%--第一步，定义样式单类--%><%--注意位置在<head>标记里--%> <style> .myclass1 { font:72pt 方正粗活意简体; color: blue; } .myclass2 { font:36pt 方正粗活意繁体; color:red; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="Here is some text! 这有一些文字！"></asp:Label><br /> <br /> <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">指定为 myclass1</asp:LinkButton><br /> <asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">指定为 myclass2</asp:LinkButton> </div> </form> </body> </html> |
关于Style类
(前面学的是将样式单应用到控件上)
还可以通过Style类来支持服务器端样式。（即，显示创建Style类的实例，并将它应用于多个控件）
|
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ import Namespace="system.Drawing" %> <script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) '先建立Style类示例' Dim myStyle As New Style ' myStyle.BackColor = Color.Yellow myStyle.ForeColor = Color.Green myStyle.BorderStyle = BorderStyle.Dashed myStyle.BorderWidth = New Unit(4) 'Unit表示长度度量单位' TextBox1.ApplyStyle(myStyle) TextBox2.ApplyStyle(myStyle) TextBox3.ApplyStyle(myStyle)
myStyle.BackColor = Color.Aqua myStyle.ForeColor = Color.DarkGoldenrod Button1.ApplyStyle(myStyle) Button2.ApplyStyle(myStyle)
myStyle.BorderStyle = BorderStyle.Groove myStyle.BorderWidth = New Unit(1) LinkButton1.ApplyStyle(myStyle) LinkButton2.ApplyStyle(myStyle)
myStyle.Font.Name = "hakuyocaoshu7000" myStyle.Font.Size = 73 HyperLink1.ApplyStyle(myStyle) End Sub </script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server">opaoopampgoaasdg</asp:TextBox><br /> <asp:TextBox ID="TextBox2" runat="server">白日依山尽</asp:TextBox><br /> <asp:TextBox ID="TextBox3" runat="server">黄河如海浪Rive Drive hair</asp:TextBox><br /> <p /> <asp:Button ID="Button1" runat="server" Text="Button" /><br /> <asp:Button ID="Button2" runat="server" Text="Button" /><br /> <p /> <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton><br /> <asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton><br /> <p /> <asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink></div> </form> </body> </html> |
注意：ApplyStyle()方法，是将Style类应用于WebControl；还有一个MergeStyle()方法，是将样式合并到WebControl