2022年WEB服务器控 .pdf

《2022年WEB服务器控 .pdf》由会员分享，可在线阅读，更多相关《2022年WEB服务器控 .pdf（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、WEB 服务器控件编写一个 WEB 控件至少要包含三个元素:ASP:XXX指明是哪一类控件,ID 指明控件的标识符,Runat 指明是在服务器端运行的。如:   一、WEB 服务器控件1、 常用的 WEB 服务器控件分类名称说明文字控件Label 标签TextBox 文本框选择控件Checkbox 复选框Checkboxlist 复选框列表Radiobutton 单选按钮Radiobuttonlist 单选按钮列表Dropdownlist 下拉列表框Listbox 列表框按钮Button 按钮Image 图像控件Imagebutton 图像按钮超链接Hyperlink 超链接控件Li

2、nkbutton 超链接按钮控件2、WEB 控件的公有属性属性说明AccessKey 获取或设置控件的键盘快捷键BackColor 获取或设置控件的背景色BorderColor 获取或设置控件的边框颜色BorderWidth 控件的边框宽度BorderStyle 控件的边框样式CssClass 分配给控件的样式表类Enable 控件是否有效Font 控件的字体ForeColor 控件的前景色Height 控件的高度Width 控件的宽度Visible 控件是否可见ToolTip 获取或设置当用户将鼠标指针停放在控件上时显示的文本3、通过编程设置WEB 服务器控件的属性如 label1.Text

3、=” 您好 ” ; TextBox1.TextMode=TextBoxMode.SingleLine; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 25 页 - - - - - - - - - 二、文字控件Label 用于显示文字，其最常用的属性是Text, 用于显示的文字内容。 TextBox控件用于输入文字信息， WEB 用于文本输入工作的只有TextBox 控件，通过设置控件的TextMode 属性来区分文本，密码，多行文本输入方式。注意：文本框内容是字符串类型

4、，如果要做计算，需要作类型转换。如convert.tosingle转成单精度，或single.parse() TextBox 主要成员成员说明AutoPostBack 文本框内容发生变化，并且输入焦点离开文本框（TAB,ENTER ） ，是否自动将文本框内容发回服务器。Text 文本框中内容TextMode SingleLine 单行输入模式，默认 MultiLine 多行Password密码输入Columns 以字符为单位指明文本框的显示宽度Rows 当 TextMode 为 MultiLine 时，指明文本框的行数MaxLength 在单行文本方式下，文本框可以输入的字符数Wrap 当 T

5、extMode 为 MultiLine 时 ,是否自动换行，默认为TRUE ReadOnly 输入框为只读，默认为FALSE DataBind() 将数据源绑定到被调用的服务器控件及其所有子控件上TextChanged() 当文本框内容发生变化时，触动。文字控件案例一 (5_3):制作登录界面控件类型ID 属性设置说明Label Label1 Text=用户名用于显示静态文本Label Label2 Text=密码用于显示静态文本Label LblMessage Text=”用于显示提示文本或登录信息TexBox TxtUserName TextMode=SingleLine 用于输入用户名T

6、exBox TxtPassWord TextMode=Password 用于输入密码Button BtnSumit Text=提交向服务器发送登录信息Button BtnRest Text=重置清除文本框内容名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 25 页 - - - - - - - - - protectedvoid BtnRest_Click(object sender, EventArgs e) TxtUserName.Text = ; TxtPassWor

7、d.Text = ; LblMessage.Text = ; protectedvoid BtnSumit_Click(object sender, EventArgs e) if (TxtUserName.Text.Trim() != ) & (TxtPassWord.Text.Trim() != ) LblMessage.Text = 用户名 : + TxtUserName.Text + 密码 + :+TxtPassWord.Text; elseif (TxtUserName.Text.Trim() = ) LblMessage.Text = 请输入用户名 ; else LblMessag

8、e.Text = 请输入密码 ; 文本控件案例二 (5_1):显示日期protectedvoid Page_Load( object sender, EventArgs e) DateTime now = DateTime.Now; this .lbltime1.Text = now.ToString(); this .lbltime2.Text = now.ToShortDateString(); this .lbltime3.Text = now.ToLongDateString(); this .lbltime4.Text = now.ToLongTimeString(); this .

9、lbltime5.Text = now.ToShortTimeString(); 文本控件案例三 (5_2):显示金额protectedvoid Button1_Click(object sender, EventArgs e) int money = Convert .ToInt32(TextBox1.Text); Label1.Text = money.ToString(C); Label2.Text = money.ToString($#,#.00); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - -

10、- - - - - 第 3 页，共 25 页 - - - - - - - - - 练习: 制作页面 , 完成阶乘运算。三、选择控件选 择 控 件 包 含CheckBox CheckBoxList DropDownList ListBox RadioButton RadioButtonList等控件1、RadioButton 是多选一的控件， 因此该控件还有一个专门的GroupName属性，同一组别的RadioButton控件的 GroupName属性必须相同。控件的主要成员成员说明Checked 是否选中该控件GroupName 获取或设置单选钮所属的组名Text 文本标签TextAlign

11、文本标签的对齐方式，文本出现在左边还是右边。CheckedChanged 当 checked 的值在向服务器发送期间更改时发生选择控件案例一（5_4） ：单选按钮应用添加两个单选按钮控件，Text 的值分别设为“男”，“女”，GroupName 的值为 sex。protectedvoid Button1_Click(object sender, EventArgs e) if (RadioButton1.Checked = true ) Label1.Text = 性别 : + RadioButton1.Text; if (RadioButton2.Checked = true ) Label

12、1.Text = 性别： + RadioButton2.Text; 练习：完成选择系单选设计功能。2、CheckBox 控件属性和 RadioButton一样。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 25 页 - - - - - - - - - 选择控件案例二（5_5） ：复选控件应用添加三个复选按钮，Text 的值按照以上图中设置。protectedvoid Page_Load( object sender, EventArgs e) Label1.Text =

13、 ; protectedvoid Button1_Click(object sender, EventArgs e) string str1 = 你的选择是 : ; if (CheckBox1.Checked) str1 += CheckBox1.Text + ; if (CheckBox2.Checked) str1 += CheckBox2.Text + ; if (CheckBox3.Checked) str1 += CheckBox3.Text ; Label1.Text = str1; 练习：完成选择课程复选功能设计3、CheckBoxList 和RadioButtonList控件主

14、要成员成员说明Items 属性获取列表项控件的集合，有以下常用属性和方法Count属性：集合中对象数Add方法：将 ListItem追加到集合的末尾Clear 方法：从集合中移除所有的ListItem对象Remove 方法：从集合中移除指定ListItem对象RepeatColumns属性设置控件中显示的列数RepeatDirection属性水平还是垂直显示名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 25 页 - - - - - - - - - SelectedInd

15、ex属性选定项的索引序号SelectedValue属性选定项的值选择控件案例三（5_6） ：单选复选组应用IsPostBack != true判断页面是否首次加载或刷新。因为每次在执行button_click时，都会先执行page_load ，如果不想执行，则用IsPostBack != trueprotectedvoid Page_Load( object sender, EventArgs e) if (IsPostBack != true ) string player = new string3 姚明 , 科比 , 邓肯 ; string team=new string3 小牛 , 太

16、阳 , 火箭 ; RadioButtonList1.DataSource = player; RadioButtonList1.DataBind(); CheckBoxList1.DataSource = team; CheckBoxList1.DataBind(); protectedvoid Button1_Click(object sender, EventArgs e) Label1.Text = 你最喜欢的球员是 ; Label1.Text += RadioButtonList1.SelectedValue;int i = 0; string s = ; for (i = 0; i

17、0) int i; for (i = 0; i = ListBox1.Items.Count - 1; i+) ListBox2.Items.Add(ListBox1.Itemsi.Text); ListBox1.Items.Clear(); protectedvoid Button4_Click(object sender, EventArgs e) int i; for (i = 0; i 0 & ListBox1.SelectedIndex = -1) else for (i = 0; i 0 & ListBox2.SelectedIndex = -1) else for (i = 0;

18、 i = ListBox2.Items.Count - 1; i+) if (ListBox2.Itemsi.Selected) ListBox1.Items.Add(ListBox2.Itemsi.Text); ListBox2.Items.Remove(ListBox2.Itemsi); ( 一班 ) 选择控件案例七（ 5_10）控件的联动protectedvoid Page_Load( object sender, EventArgs e) /DropDownList1.AutoPostBack = true; if (IsPostBack != true ) string zy = n

19、ew string2 临汾 , 吕梁 ; DropDownList1.DataSource = zy; DropDownList1.DataBind(); DropDownList1.SelectedIndex = 0; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 25 页 - - - - - - - - - protectedvoid DropDownList1_SelectedIndexChanged(object sender, EventArgs e) Ar

20、rayList sz = new ArrayList(); if (DropDownList1.Items0.Selected) sz.Add(霍州 ); sz.Add(候马 ); if (DropDownList1.Items1.Selected) sz.Add(吕梁 ); sz.Add(中阳 ); ListBox1.DataSource = sz; ListBox1.DataBind(); 注意：AutoPostBack是用在一个控件中的值变换会带来另一个控件值变换时，需要设置为true, 它的AutoPostBack属性默认为 False, 如果不把属性改为True, 他的 Select

21、edIndexChanged()事件中的代码就不会执行练习：设置系和专业联动，添加按钮及标签，显示选定结果。四、按钮控件1、 Button 2、ImageButton 从功能上看和 Button 控件一样 , 但是该控件是用图片作为按钮的表面。有两个属性：ImageUrl ：设置图片所在位置ToolTip ：鼠标定们图片后显示的文字按钮控件案例一（5_12）名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 25 页 - - - - - - - - - protectedv

22、oid Page_Load( object sender, EventArgs e) ImageButton1.ImageUrl = images/tx.png; ImageButton1.ToolTip = 请选择腾讯 ; ImageButton2.ImageUrl = images/wy.png; ImageButton2.ToolTip = 请选择网易 ; ImageButton3.ImageUrl = images/xl.gif; ImageButton3.ToolTip = 请选择新浪 ; protectedvoid ImageButton1_Click(object sender,

23、 ImageClickEventArgs e) Response.Redirect(http:/); protectedvoid ImageButton2_Click(object sender, ImageClickEventArgs e) Response.Redirect(http:/); protectedvoid ImageButton3_Click(object sender, ImageClickEventArgs e) Response.Redirect(http:/); 3、image 属性 ImageUrl ：设置图片所在位置按钮控件案例一（5_13）protectedvo

24、id Page_Load( object sender, EventArgs e) if (IsPostBack != true ) DropDownList1.Items.Add(images/tx.png); DropDownList1.Items.Add(images/wy.png); DropDownList1.Items.Add(images/xl.gif); Image1.ImageUrl = images/xl.gif; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第

25、15 页，共 25 页 - - - - - - - - - DropDownList1.AutoPostBack = true ; protectedvoid DropDownList1_SelectedIndexChanged(object sender, EventArgs e) Image1.ImageUrl = DropDownList1.SelectedValue; 思考： IsPostBack != true在事件中的作用，如果去掉该判断语句，会出现什么问题？应用二五、超链接控件1、HyperLink 属性：Text 设置文本标题NavigateUrl设置控件链接到的url Ima

26、geUrl 设置控件显示的图像路径该控件创建一个可以跳转到其他页的链接，该链接既可以显示为文本，也可以显示为图像。若显示文本，则设置Text属性，若显示图像，则设置ImageUrl 属性。如果同时设置二者，则ImageUrl 属性优先；如果图像不可用，则显示文本。2、LinkButton 控件具有和 Button相同的属性超链接控件案例一（5_14）protectedvoid Page_Load( object sender, EventArgs e) HyperLink1.Text = 网易 ; HyperLink1.NavigateUrl = http:/; HyperLink1.Imag

27、eUrl = imags/4.jpg; LinkButton1.Text = 网易 ; protectedvoid LinkButton1_Click(object sender, EventArgs e) Response.Redirect(http:/); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 25 页 - - - - - - - - - 六、页面显示控制控件1、 panel 利用该控件，可以将页面中的相关控件分组管理并进行显示隐藏。显示控件案例一（5_1

28、5）2、 table 控件显示控件案例二（5_16）Table由 Rows集合组成 ,而 Rows由若干个 TableRow 组成 ,每个 TableRow 由 Cells 集合组成 ,而 Cells 由若干个TableCell组成 .protectedvoid Page_Load( object sender, EventArgs e) int i; if (IsPostBack = false ) select1.Items.Clear(); select2.Items.Clear(); for (i = 1; i = 10; i+) select1.Items.Add(i.ToStrin

29、g(); select2.Items.Add(i.ToString(); Table1.Rows.Clear(); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 25 页 - - - - - - - - - protectedvoid Button1_Click(object sender, EventArgs e) int i, j; int m = Convert .ToInt32(select1.Text); int n = Convert .ToInt32(s

30、elect2.Text); for (i = 0; i = m - 1; i+) TableRow tr = new TableRow(); for (j = 0; j n; j+) TableCell td = new TableCell (); td.Text= 第 + (i + 1) + 行第 + (j + 1) + 列; tr.Cells.Add(td); Table1.Rows.Add(tr); 七、WEB 验证控件网页可供用户输入信息。 为避免用户输入一些不规范的信息，就必须要在网页程序中加入检查功能，这种功能就是表单验证功能。在.NET 中有专门的表单验证控件用于表单信息的验证。

31、1、验证控件RequiredFieldValidator 验证是否已输入数据CompareValidator 将用户输入的数据与另一个数据进行比较RangeValidator 验证输入的数据是否在指定的范名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 18 页，共 25 页 - - - - - - - - - 围内RegularExpressionValidator 验证输入的数据是否符合指定的格式规范2、验证控件的通用属性和方法ComtrolToValidate 要验证控件的 ID

32、 Text 验证失败时要显示的信息Errormessage 未通过验证时要显示的信息。Display 错误信息的显示方式。有三种取值：none 不在网页中显示出错信息；static 在网页中保留出错信息显示的位置；dynamic 在网页中不保留出错信息显示的位置。3、可以使用验证控件的控件并非所有的 WEB 服务器控件都能使用验证控件，可以使用验证控件的表单控件如下：控件名称可验证的属性TextBox Text ListBox SelectedItem.Value DropdownList SelectedItem.Value 名师资料总结 - - -精品资料欢迎下载 - - - - - -

33、- - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共 25 页 - - - - - - - - - RadioButtonList SelectedItem.Value 在一个网页程序中可以利用上述的几种验证控件对表单数据信息进行验证， 如果一个网页中所有验证控件都通过了验证，那么该网页自身的 Page对象的 IsValid 属性将会是 true；反之，如果网页 Page对象的 IsValid 属性是 false值，则说明网页中至少有一个验证控件未能验证通过。RequiredFieldValidator 控件案例 (5_17) 此控件用于对

34、用户必须填写的关键性输入域进行验证。在页面中添加一个按钮、一个标签、一个RequiredFieldValidator控件，设置它的ControlToVAlidate 为 TextBox1，Text 为“请输入姓名” 。（一班）RangeValidator控件案例（ 5_18）此控件限制用户输入指定范围内的数据。添加 RangeValidator控件，并按如下要求设置属性。属性设置值属性设置值ControlToValidate TextBox1 MaximunValue 100 ErrorMessage 成 绩 必 须 在0100之间Type Integer MinimumValue 0 名师资

35、料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 20 页，共 25 页 - - - - - - - - - CompareValidator 控件对两个控件进行比较，或者用于控件和常量之间的比较。常用属性有：ControlToValidate：要验证的控件 ID ControlToCompare：要比较的控件 ID ValueToCompare ：要比较的常数值Operator：两个控件内容比较时，采用的比较运算符类型Type：字符串，整型，双精度，日期，货币CompareValidato

36、r 控件案例 (5_19)验证密码必须相等添加 CompareValidator控件，并按如下要求设置属性。属性设置值属性设置值 Text 两次输入的密码必须相同ControlToValidate TextBox1 ControlToCompare TextBox2 Type String 思考：如何对日期型数据进行验证？如何对常量进行验证？注意：如果输入控件内容为空，则不作任何验证。针对这种情况， 应先用 RequiredFieldValidator验证是否有数据输入，如果有的话，再用CompareValidator控件验证。RegularExpressionValidator控件用于对输入

37、信息的格式进行验证，如电子邮件地址，网址，身份证号码等，该控件最重要的属性是ValidationExpression，通过灵活地编排该控件的验证规则，就能够验名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 21 页，共 25 页 - - - - - - - - - 证各种各样的数据。对于属性中已有的规则可以直接选取，对于没有的规则需要进行设置，书写规则 (正则表达式 )要求如下：d 表示只能输入数字，如 d6 表示必须输入 6 个数字。w 表示可以输入任何字符，包括大小写字母，数字和

38、下画线。只匹配 符号中的一个字符。如 0-9表示 09 的单个字符。 匹配字符个数限制， 如0-92,5 要求是 0-9 之间的数字， 最少2 个，最多 5 个。| 二选一，如 a-c|A-C + 要求符合要求的字符至少有1 个如1-9+要求是 1-9 之间的字符，个数至少是1 个。*要求符合要求的字符至少有0 个如1-9* 要求是 1-9 之间的字符，个数至少是0 个。. 要求空格以外的任何字符如.3 表示空格以外的任意3 个字符。 匹配一些特殊字符，如 、 （） 、|、*等符号。如(0-93,4) 要求第一个字符是 (， 然后是 3 或 4 个 0-9 的数字字符，最后一个是 )字符。如身

39、份证号： d18|d15 邮编： d6 RegularExpressionValidator控件案例 (5_20) 使用上述控件对电子邮件地址进行验证。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 22 页，共 25 页 - - - - - - - - - 练习：限制电话号码为（0358）* 思考：如果限定输入的是一个确定的值，应该如何设置？Validationsummary控件用于显示网页中未通过验证的控件的信息。常用属性有 : Showsummary：是否显示摘要信息。默认为t

40、rue. Showmessagebox ：是否利用弹出警告窗口显示摘要信息。默认为 false. 一般二者居其一即可。案例见 5_21 （二班）八、WEB 增强控件1、 Calendar 属性含义CellPadding 单元格内的空白CellSpacing 单元格之间的间距FirstDayOfWeek 首先显示一周中的哪一天PrevMonthText 上一个月按钮的文字NextMonthText 下一个月按钮的文字ShowGridLine 是否显示网格线Calendar 控件案例 (5_22) 属性含义CellPadding 3 CellSpacing 0 FirstDayOfWeek Mon

41、day PrevMonthText 上个月NextMonthText 下个月ShowGridLine true 2、 AdRotator 控件该控件用于制作广告条，在每次打开或重新加载网页时在页面上放置一幅新的广告，显名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 23 页，共 25 页 - - - - - - - - - 示的广告取决于该控件的配置文件。配置文件是一个XML 格式的文件，包含显示图像和链接信息显示频率。AdRotatorr 控件案例 (5_23) 在网页中加入AdR

42、otator 控件，并设置该控件的AdvertisementFile 属性值为XML 文件。XML 配置文件内容如下： images/TX.PNG http:/ Capital on line Good 60 images/wy.png http:/ Sina on line Better 80 images/XL.GIF http:/ Sina on line Best 70 注意 : 1、大小写不等价2、图像路径前不能有空格练习：用户名称：文本框（必须输入）用户密码：文本框（必须输入）确认密码：文本框（必须输入，并且输入密码必须一致）性别：单选按钮列表身份证号：文本框（15 位或 18 位）电子邮件：文本框（格式限定）联系电话：文本框（格式限定）所在系部：下位列表所在专业：下位列表（联动）名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 24 页，共 25 页 - - - - - - - - - 提交：按钮输出结果：文本框名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 25 页，共 25 页 - - - - - - - - -