WEB服务器控件

WEBWEB 服务器控件服务器控件 编写一个 WEB 控件至少要包含三个元素 ASP XXX 指明是哪一类控件 ID 指明控件的标 识符 Ruant 指明是在服务器端运行的 如 一 一 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文本框中内容 TextModeSingleLine 单行输入模式 默认 MultiLine 多行 Pasword 密码输入 Columns以字符为单位指明文本框的显示宽度 Rows当 TextMode 为 MultiLine 时 指明文本框的行数 MaxLength在单行文本方式下 文本框可以输入的字符数 Wrap当 TextMode 为 MultiLine 时 是否自动换行 默认为 TRUE ReadOnly输入框为只读 默认为 FALSE DataBind将数据源绑定到被调用的服务器控件及其所有子控件上 TextChanged当文本框内容发生变化时 触动 文字控件案例一文字控件案例一 5 3 制作登录界面制作登录界面 控件类型ID属性设置说明 LabelLabel1Text 用户名用于显示静态文本 LabelLabel2Text 密码用于显示静态文本 LabelLblMessageText 用于显示提示文本或 登录信息 TexBoxTxtUserNameTextMode SingleLine用于输入用户名 TexBoxTxtPassWordTextMode Password用于输入密码 ButtonBtnSumitText 提交向服务器发送登录信 息 ButtonBtnRestText 重置清除文本框内容 protected void BtnRest Click object sender EventArgs e TxtUserName Text TxtPassWord Text LblMessage Text protected void BtnSumit Click object sender EventArgs e if TxtUserName Text Trim else if TxtUserName Text Trim LblMessage Text 请输入用户名 else LblMessage Text 请输入密码 文本控件案例二文本控件案例二 5 1 显示日期显示日期 protected void 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 lbltime5 Text now ToShortTimeString 文本控件案例三文本控件案例三 5 2 显示金额显示金额 protected void Button1 Click object sender EventArgs e int money Convert ToInt32 TextBox1 Text Label1 Text money ToString C Label2 Text money ToString 00 练习练习 制作页面制作页面 完成阶乘运算 完成阶乘运算 三 三 选择控件选择控件 选择控件包含 CheckBox CheckBoxList DropDownList ListBox RadioButton RadioButtonList 等控件 1 RadioButtonRadioButton 是多选一的控件 因此该控件还有一个专门的 GroupName 属性 同一组别的 RadioButton 控件的 GroupName 属性必须相同 控件的主要成员 成员说明 Checked是否选中该控件 GroupName获取或设置单选钮所属的组名 Text文本标签 TextAlign文本标签的对齐方式 文本出现在左边还是右边 CheckedChanged当 checked 的值在向服务器发送期间更改时发生 选择控件案例一 选择控件案例一 5 4 单选按钮应用 单选按钮应用 添加两个单选按钮控件 Text的值分别设为 男 女 GroupName的值为sex protected void Button1 Click object sender EventArgs e if RadioButton1 Checked true Label1 Text 性别 RadioButton1 Text if RadioButton2 Checked true Label1 Text 性别 RadioButton2 Text 练习 完成选择系单选设计功能 练习 完成选择系单选设计功能 2 CheckBoxCheckBox 控件控件 属性和属性和 RadioButton 一样 选择控件案例二 选择控件案例二 5 5 复选控件应用 复选控件应用 添加三个复选按钮 Text 的值按照以上图中设置 protected void Page Load object sender EventArgs e Label1 Text protected void 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 CheckBoxListCheckBoxList和和RadioButtonListRadioButtonList控件控件 主要成员 成员说明 获取列表项控件的集合 有以下常用属性和 方法 Count属性 集合中对象数 Add方法 将ListItem追加到集合的末尾 Clear方法 从集合中移除所有的ListItem 对象 Items属性 Remove方法 从集合中移除指定ListItem对 象 RepeatColumns属性设置控件中显示的列数 RepeatDirection属性水平还是垂直显示 SelectedIndex属性选定项的索引序号 SelectedValue属性选定项的值 选择控件案例三 选择控件案例三 5 6 单选复选组应用 单选复选组应用 IsPostBack true 判断页面是否首次加载或刷新 因为每次在执行判断页面是否首次加载或刷新 因为每次在执行 button clickbutton click 时 都会先执行时 都会先执行 page loadpage load 如果不想执行 则用 如果不想执行 则用 IsPostBack true protected void Page Load object sender EventArgs e if IsPostBack true string player new string 3 姚明 科比 邓肯 string team new string 3 小牛 太阳 火箭 RadioButtonList1 DataSource player RadioButtonList1 DataBind CheckBoxList1 DataSource team CheckBoxList1 DataBind protected void Button1 Click object sender EventArgs e Label1 Text 你最喜欢的球员是 Label1 Text RadioButtonList1 SelectedValue SelectedValue int i 0 string s for i 0 i 0 int i for i 0 i ListBox1 Items Count 1 i ListBox2 Items Add ListBox1 Items i Text ListBox1 Items Clear protected void Button4 Click object sender EventArgs e int i for i 0 i 0 i 0 i ListBox2 Items Count 1 i if ListBox2 Items i Selected ListBox1 Items Add ListBox2 Items i Text ListBox2 Items Remove ListBox2 Items i 选择控件案例七 选择控件案例七 5 10 控件的联动 控件的联动 protected void Page Load object sender EventArgs e DropDownList1 AutoPostBack DropDownList1 AutoPostBack true true if IsPostBack true string zy new string 2 临汾 吕梁 DropDownList1 DataSource zy DropDownList1 DataBind DropDownList1 SelectedIndex 0 protected void DropDownList1 SelectedIndexChanged object sender EventArgs e ArrayList sz new ArrayList if DropDownList1 Items 0 Selected sz Add 霍州 sz Add 候马 if DropDownList1 Items 1 Selected sz Add 吕梁 sz Add 中阳 ListBox1 DataSource sz ListBox1 DataBind 注意 注意 AutoPostBackAutoPostBack 是用在一个控件中的值变换会带来另一个控件值变换时 需要设置为true 它的 AutoPostBack属性默认为False 如果不把属性改为True 他的SelectedIndexChanged 事件中的 代码就不会执行 四 四 按钮控件按钮控件 1 Button 2 ImageButton 从功能上看和Button控件一样 但是该控件是用图片作为按钮的表面 有两个属性 ImageUrl 设置图片所在位置 按钮控件案例一 按钮控件案例一 5 125 12 protected void 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 请选择新浪 protected void ImageButton1 Click object sender ImageClickEventArgs e Response Redirect protected void ImageButton2 Click object sender ImageClickEventArgs e Response Redirect protected void ImageButton3 Click object sender ImageClickEventArgs e Response Redirect 3 image 属性ImageUrl 设置图片所在位置 按钮控件案例一 按钮控件案例一 5 135 13 protected void 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 DropDownList1 AutoPostBack true protected void DropDownList1 SelectedIndexChanged object sender EventArgs e Image1 ImageUrl DropDownList1 SelectedValue 思考 思考 IsPostBackIsPostBack truetrue 在事件中的作用 如果去掉该判断语句 会出现什么问题 在事件中的作用 如果去掉该判断语句 会出现什么问题 应用二应用二 五 五 超链接控件超链接控件 1 1 HyperLinkHyperLink 属性 Text 设置文本标题 NavigateUrl设置控件链接到的url ImageUrl设置控件显示的图像路径 该控件创建一个可以跳转到其他页的链接 该链接既可以显示为文本 也可以显示为 图像 若显示文本 则设置Text属性 若显示图像 则设置ImageUrl属性 如果同时设置 二者 则ImageUrl属性优先 如果图像不可用 则显示文本 2 LinkButton 控件具有和Button相同的属性 超链接控件案例一 超链接控件案例一 5 14 protected void Page Load object sender EventArgs e HyperLink1 Text 网易 HyperLink1 NavigateUrl HyperLink1 ImageUrl imags 4 jpg LinkButton1 Text 网易 protected void LinkButton1 Click object s