WEB服务器控件.docx
- 文档编号:16410655
- 上传时间:2023-07-13
- 格式:DOCX
- 页数:36
- 大小:143.77KB
WEB服务器控件.docx
《WEB服务器控件.docx》由会员分享,可在线阅读,更多相关《WEB服务器控件.docx(36页珍藏版)》请在冰点文库上搜索。
WEB服务器控件
WEB服务器控件
编写一个WEB控件至少要包含三个元素:
ASP:
XXX指明是哪一类控件,ID指明控件的标识符,Ruant指明是在服务器端运行的。
如:
TextBoxID="TextBox1"runat="server">
TextBox>
LabelID="Label1"runat="server"Text="Label">
Label>
ButtonID="Button1"runat="server"Text="Button"/>
一、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,EventArgse
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- WEB 服务器 控件