WEB服务器控件.docx

一、WEB服务器控件

1、常用的WEB服务器控件

分类

名称

说明

文字控件

Label

标签

TextBox

文本框

选择控件

Checkbox

复选框

Checkboxlist

复选框列表

Radiobutton

单选按钮

Radiobuttonlist

单选按钮列表

Dropdownlist

下拉列表框

Listbox

列表框

按钮

Button

按钮

Image

图像控件

Imagebutton

图像按钮

超链接

Hyperlink

超链接控件

Linkbutton

超链接按钮控件

2、WEB控件的公有属性

属性

说明

AccessKey

获取或设置控件的键盘快捷键

BackColor

获取或设置控件的背景色

BorderColor

获取或设置控件的边框颜色

BorderWidth

控件的边框宽度

BorderStyle

控件的边框样式

CssClass

分配给控件的样式表类

Enable

控件是否有效

Font

控件的字体

ForeColor

控件的前景色

Height

控件的高度

Width

控件的宽度

Visible

控件是否可见

ToolTip

获取或设置当用户将鼠标指针停放在控件上时显示的文本

3、通过编程设置WEB服务器控件的属性

如label1.Text=”您好”;

TextBox1.TextMode=TextBoxMode.SingleLine;

二、文字控件

Label用于显示文字，其最常用的属性是Text,用于显示的文字内容。

TextBox控件用于输入文字信息，WEB用于文本输入工作的只有TextBox控件，通过设置控件的TextMode属性来区分文本，密码，多行文本输入方式。

注意：

文本框内容是字符串类型，如果要做计算，需要作类型转换。

如convert.tosingle转成单精度，或single.parse（）

TextBox主要成员

成员

说明

AutoPostBack

文本框内容发生变化，并且输入焦点离开文本框（TAB,ENTER），是否自动将文本框内容发回服务器。

Text

文本框中内容

TextMode

SingleLine单行输入模式，默认

MultiLine多行

Pasword密码输入

Columns

以字符为单位指明文本框的显示宽度

Rows

当TextMode为MultiLine时，指明文本框的行数

MaxLength

在单行文本方式下，文本框可以输入的字符数

Wrap

当TextMode为MultiLine时,是否自动换行，默认为TRUE

ReadOnly

输入框为只读，默认为FALSE

DataBind

将数据源绑定到被调用的服务器控件及其所有子控件上

TextChanged

当文本框内容发生变化时，触动。

文字控件案例一（5_3）:

制作登录界面

控件类型

ID

属性设置

说明

Label

Label1

Text=用户名

用于显示静态文本

Label

Label2

Text=密码

用于显示静态文本

Label

LblMessage

Text=””

用于显示提示文本或登录信息

TexBox

TxtUserName

TextMode=SingleLine

用于输入用户名

TexBox

TxtPassWord

TextMode=Password

用于输入密码

Button

BtnSumit

Text=提交

向服务器发送登录信息

Button

BtnRest

Text=重置

清除文本框内容

protectedvoidBtnRest_Click（objectsender,EventArgse）

{

TxtUserName.Text="";

TxtPassWord.Text="";

LblMessage.Text="";

}

protectedvoidBtnSumit_Click（objectsender,EventArgse）

{

if（（TxtUserName.Text.Trim（）!

=""）&&（TxtPassWord.Text.Trim（）!

=""））

{

LblMessage.Text="用户名:

"+TxtUserName.Text+":

"+"密码"+TxtPassWord.Text;

}

elseif（TxtUserName.Text.Trim（）==""）

{

LblMessage.Text="请输入用户名";

}

else

{

LblMessage.Text="请输入密码";

}

}

}

文本控件案例二（5_1）:

显示日期

protectedvoidPage_Load（objectsender,EventArgse）

{

DateTimenow=DateTime.Now;

this.lbltime1.Text=now.ToString（）;

this.lbltime2.Text=now.ToShortDateString（）;

this.lbltime3.Text=now.ToLongDateString（）;

this.lbltime4.Text=now.ToLongTimeString（）;

this.lbltime5.Text=now.ToShortTimeString（）;

}

文本控件案例三（5_2）:

显示金额

protectedvoidButton1_Click（objectsender,EventArgse）

{

intmoney=Convert.ToInt32（TextBox1.Text）;

Label1.Text=money.ToString（"C"）;

Label2.Text=money.ToString（"$#,###.00"）;

}

练习:

制作页面,完成阶乘运算。

三、选择控件

选择控件包含CheckBoxCheckBoxListDropDownListListBoxRadioButtonRadioButtonList等控件

1、RadioButton

是多选一的控件，因此该控件还有一个专门的GroupName属性，同一组别的RadioButton控件的GroupName属性必须相同。

控件的主要成员

成员

说明

Checked

是否选中该控件

GroupName

获取或设置单选钮所属的组名

Text

文本标签

TextAlign

文本标签的对齐方式，文本出现在左边还是右边。

CheckedChanged

当checked的值在向服务器发送期间更改时发生

选择控件案例一（5_4）：

单选按钮应用

添加两个单选按钮控件，Text的值分别设为“男”，“女”，GroupName的值为sex。

protectedvoidButton1_Click（objectsender,EventArgse）

{

if（RadioButton1.Checked==true）Label1.Text="性别:

"+RadioButton1.Text;

if（RadioButton2.Checked==true）Label1.Text="性别：

"+RadioButton2.Text;

}

练习：

完成选择系单选设计功能。

2、CheckBox控件

属性和RadioButton一样。

选择控件案例二（5_5）：

复选控件应用

添加三个复选按钮，Text的值按照以上图中设置。

protectedvoidPage_Load（objectsender,EventArgse）

{

Label1.Text="";

}

protectedvoidButton1_Click（objectsender,EventArgse）

{

stringstr1="你的选择是:

";

if（CheckBox1.Checked）str1+=CheckBox1.Text+"";

if（CheckBox2.Checked）str1+=CheckBox2.Text+"";

if（CheckBox3.Checked）str1+=CheckBox3.Text;

Label1.Text=str1;

}

练习：

完成选择课程复选功能设计

3、CheckBoxList和RadioButtonList控件

主要成员

成员

说明

Items属性

获取列表项控件的集合，有以下常用属性和方法

Count属性：

集合中对象数

Add方法：

将ListItem追加到集合的末尾

Clear方法：

从集合中移除所有的ListItem对象

Remove方法：

从集合中移除指定ListItem对象

RepeatColumns属性

设置控件中显示的列数

RepeatDirection属性

水平还是垂直显示

SelectedIndex属性

选定项的索引序号

SelectedValue属性

选定项的值

选择控件案例三（5_6）：

单选复选组应用

IsPostBack!

=true判断页面是否首次加载或刷新。

因为每次在执行button_click时，都会先执行page_load，如果不想执行，则用IsPostBack!

=true

protectedvoidPage_Load（objectsender,EventArgse）

{

if（IsPostBack!

=true）

{

string[]player=newstring[3]{"姚明","科比","邓肯"};

string[]team=newstring[3]{"小牛","太阳","火箭"};

RadioButtonList1.DataSource=player;

RadioButtonList1.DataBind（）;

CheckBoxList1.DataSource=team;

CheckBoxList1.DataBind（）;

}

}

protectedvoidButton1_Click（objectsender,EventArgse）

{

Label1.Text="你最喜欢的球员是";

Label1.Text+=RadioButtonList1.SelectedValue;

inti=0;

strings="";

for（i=0;i<=CheckBoxList1.Items.Count-1;i++）

{

if（CheckBoxList1.Items[i].Selected）

{

s+=CheckBoxList1.Items[i].Value+"、";

}

}

if（s==""）

s="您没有选择你喜欢的球队";

else

s=",你喜欢的球队是：

"+s.Substring（0,s.Length-1）;

Label3.Text=Label1.Text+s;}

练习：

用单选按钮列表控件及复选框列表控件完成系别及课程选择。

也可以通过以下语句对控件进行初始化:

if（IsPostBack!

=true）

{

RadioButtonList1.Items.Add（"星期一"）;

RadioButtonList1.Items.Add（"星期二"）;

RadioButtonList1.Items.Add（"星期三"）;

CheckBoxList1.Items.Add（"一"）;

CheckBoxList1.Items.Add（"二"）;

CheckBoxList1.Items.Add（"三"）;

}

或者

ArrayListzy1=newArrayList（）;

zy1.Add（"星期一"）;

zy1.Add（"星期二"）;

zy1.Add（"星期三"）;

RadioButtonList1.DataSource=zy1;

RadioButtonList1.DataBind（）;

ArrayListzy2=newArrayList（）;

zy2.Add（"一"）;

zy2.Add（"二"）;

zy2.Add（"三"）;

CheckBoxList1.DataSource=zy2;

CheckBoxList1.DataBind（）;

总结:

CheckBoxList1.DataSource数据源

CheckBoxList1.DataBind（）数据源绑定控件

CheckBoxList1.Items.Count列表框中包含项数

CheckBoxList1.SelectedIndex选中项的索引值,选中项的索引为-1，即没有选中项

CheckBoxList1.SelectedValue选定项的值

CheckBoxList1.Items.Add（）在列表框中加入某项；

CheckBoxList1.Items.Remove（）在列表框中清除某一项

CheckBoxList11.Items.Clear（）在列表框中清除所有项；

CheckBoxList1.Items[i].Text第i项的文本

CheckBoxList1.Items[i].Selected第i项是否选中

CheckBoxList1.Items[i]第i项

选择控件案例四（5_7）：

动态加载控件

IsPostBack页面是否首次加载或刷新。

protectedvoidPage_Load（objectsender,EventArgse）

{

if（!

this.IsPostBack）

{

stringhobbys="旅游,运动,阅读,登山,音乐,泡吧,喝酒,品茶,下厨,模型";

foreach（stringhobbyinhobbys.Split（newchar[]{','}））

{ListItemitem=newListItem（）;//checkboxlist中每一项的类型

item.Text=hobby;

item.Value=hobby;

this.cdlhobby.Items.Add（item）;

continue;

}}

}

protectedvoidButton1_Click（objectsender,EventArgse）

{

this.Label1.Text="你选择的爱好是:

";

foreach（ListItemiteminthis.cdlhobby.Items）

{

if（item.Selected==true）

{

this.Label1.Text+=item.Text+",";

}

}

}

4、DropDownList控件

是一种多选一的控件，该控件功能与RadioButton控件相似。

在使用时需要和子控件listItem配合。

DropDownList控件的主要成员

成员

说明

DataSource

获取或设置填充列表控件项的数据源

DataBind方法

将数据源绑定到控件

Items

获取列表控件项的集合

SelectedIndex

选定项的索引，默认值为0,该值选定列表项的第一项。

SelectedItem

选定项

SelectedValue

选定项的值

若要判断控件哪个选项被选中，有以下两种方式

（1）使用控件的SelectedIndex属性

该属性表示被选择项的索引编号，从“0”开始计算；其值若为“-1”，表示没有任何项被选择。

（2）使用控件的SelectedItem属性

通过该属性的Text、Value属性可以获取该项的文本或值。

SelectedItem.Text

选择控件案例五（5_8）

protectedvoidPage_Load（objectsender,EventArgse）

{

string[]zy=newstring[3]{"教师","学生","工人"};

if（IsPostBack!

=true）

{

DropDownList1.DataSource=zy;

DropDownList1.DataBind（）;

}

}

protectedvoidButton1_Click（objectsender,EventArgse）

{

Label1.Text=DropDownList1.SelectedItem.Text;

//Label1.Text=DropDownList1.SelectedValue;

//Label1.Text=DropDownList1.SelectedIndex.ToString（）;

}

练习：

用下拉列表选择系别，用arraylist初始化。

选项的初始化也可以使用下面的代码

if（IsPostBack!

=true）

{

DropDownList1.Items.Add（"教师"）;

DropDownList1.Items.Add（"学生"）;

DropDownList1.Items.Add（"工人"）;

}

5、ListBox控件

该控件是一种可单选/多选设置的控件，该控件功能灵活，既可以设置成单选方式，也可以设置成多选方式。

主要成员

成员

说明

rows

控件中显示的行数

selectedindex

选定项的最小索引

selecteditem

索引最小的选定项

selectedvalue

选定项的值

selectionmode

列表框的选择模式

选择控件案例六（5_11）

protectedvoidPage_Load（objectsender,EventArgse）

{

Button1.Text="提交";

Label1.Text="";

ListBox1.SelectionMode=ListSelectionMode.Multiple;

if（IsPostBack!

=true）

{

ArrayListsz=newArrayList（）;

sz.Add（"高数"）;

sz.Add（"英语"）;

sz.Add（"大学语文"）;

sz.Add（"ASP.NET"）;

ListBox1.DataSource=sz;

ListBox1.DataBind（）;

}

}

protectedvoidButton1_Click（objectsender,EventArgse）

{

Label1.Text="你选择的是：

"+ListBox1.SelectedValue;

}

分析结果：

想要显示所有选定的项，程序应该怎样改？

练习：

判定是否选了高数课程，如果是，显示本学期不能开此课程。

总结：

ListBox1.DataSource数据源

ListBox1.DataBind（）数据源绑定控件

ListBox1.Items.Count列表框中包含项数

ListBox1.SelectedIndex==-1选中项的索引为-1，即没有选中项

ListBox1.SelectedValue选定项的值

ListBox1.SelectionMode设定控件的选择模式：

Multiple表示可多选，Single表示只能单选。

ListBox1.Items.Add（）在列表框中加入某项；

ListBox1.Items.Remove（）在列表框中清除某一项

ListBox1.Items.Clear（）在列表框中清除所有项；

ListBox1.Items[i].Text第i项的文本

ListBox1.Items[i].Selected第i项是否选中

ListBox1.Items[i]第i项。

例ListBox2.Items.Remove（ListBox2.Items[i]）移除第i项。

选择控件案例六（5_9）

usingSystem.Collections;

protectedvoidPage_Load（objectsender,EventArgse）

{

if（IsPostBack!

=true）

{

ArrayListcity=newArrayList（）;

city.Add（"北京"）;

city.Add（"上海"）;

city.Add（"天津"）;

city.Add（"重庆"）;

city.Add（"沈阳"）;

ListBox1.DataSource=city;

ListBox1.DataBind（）;

}

}

protectedvoidButton1_Click（objectsender,EventArgse）

{

if（ListBox1.Items.Count>0）

{

inti;

for（i=0;i<=ListBox1.Items.Count-1;i++）

ListBox2.Items.Add（ListBox1.Items[i].Text）;

ListBox1.Items.Clear（）;

}

}

protectedvoidButton4_Click（objectsender,EventArgse）

{

inti;

for（i=0;i<=ListBox2.Items.Count-1;i++）

ListBox1.Items.Add（ListBox2.Items[i].Text）;

ListBox2.Items.Clear（）;

}

protectedvoidButton2_Click（objectsender,EventA