教学研究CH HTML Server 控件

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,教学研究CH HTML Server 控件,第5章 HTML Server 控件,5.1 案例：个人信息显示页面,5.2 理论知识,5.3 总结,5.4 习题,5.5 实训,5.1 案例：个人信息显示页面,5.1 案例：个人信息显示页面,请填写个人信息,姓名：,密码：,性别：,男,女,爱好：,音乐,计算机,5.1 案例：个人信息显示页面,简介：,请输入内容后单击“提交,相片：,5.1 案例：个人信息显示页面,Partial Class _Default,Dim strMessage As String = ,strMessage = ,姓名：,strMessage &= ,密码：,If sex1.Checked Then,strMessage &= ,性别：,ElseIf sex2.checked Then,strMessage &= ,性别：,End If,5.1 案例：个人信息显示页面,If love1.Checked Then,strMessage &= ,爱好,1,：,End If,If love2.Checked Then,strMessage &= ,爱好,2,：,End If,strMessage &= ,简介：,message.InnerHtml = strMessage,5.1 案例：个人信息显示页面,Dim up, As String,up = Path.Get(up),If up Then,= Server.MapPath(images/) & up,up(),MyImage.Src = images/ & up,End If,End Sub,End Class,5.2 理论知识,5.2.1 HTML Server控件与HTML标记的关系,5.2.2 向页面添加HTML Server控件,5.2.3 HTMLForm控件,5.2.4 HTMLButton控件,5.2.5 HTMLInputButton控件,5.2.6 HTMLInputImage控件,5.2.7 HTMLInputText控件,5.2 理论知识,5.2.8 HTMLInputCheckBox控件,5.2.9 HTMLInputRadioButton控件,5.2.10 HTMLSelect控件,5.2.11 HTMLTextArea控件,5.2.12 HTMLInputHidden控件,5.2.13 HTMLInputAnchor控件,5.2.14 HTMLImage控件,5.2.15 HTMLInputSubmit控件,5.2 理论知识,5.2.16 HTMLInputReset控件,5.2.17 HTMLTable控件,5.2.18 HTMLTableRow控件,5.2.19 HTMLTableCell控件,5.2.20 HTMLGenericControl控件,5.2.1 HTML Server控件与HTML标记的关系,几乎所有的HTML标记都可以转化为HTML Server控件，只需在标记中参加,Runat=Server,5.2.1 HTML Server控件与HTML标记的关系,HtmlAnchor控件,标记,HtmlButtton控件,标记,HtmlForm控件,标记,HtmlImage控件,标记,HtmlInputButton控件,标记,标记,标记,5.2.1 HTML Server控件与HTML标记的关系,HtmlInputHidden控件,标记,HtmlInputImage控件,标记,HtmlInputCheckBox控件,标记,HtmlControl控件,HtmlInputFile控件,标记,5.2.1 HTML Server控件与HTML标记的关系,HtmlTable控件,标记,HtmlTableCell控件,、标记,HtmlInputText控件,标记,标记,HtmlSelect控件,标记,HtmlTableRow控件,标记,HtmlTextArea控件,标记,5.2.2 向页面添加HTML Server控件,1 声明方法,2 VS .Net工具箱,5.2.3 HTMLForm控件,一个ASP.NET网页只能有一个HTMLForm控件，所有的ASP.NET控件必须包含在一个效劳器端HTMLForm控件中。,HtmlForm控件,标记,其他控件或HTML标记,5.2.3 HTMLForm控件,常用属性,Enctype,获取或设置将窗体的数据发送到效劳器时浏览器使用的编码类型。默认值为application/x-,Method,获取或设置一个值，该值指示浏览器将窗体数据发送到效劳器进展处理的方式。默认值为 post,get请求的数据会附在URL之后就是把数据放置在HTTP协议头中， get 可以包含的数据量较少，平安性也较低。,5.2.4 HTMLButton控件,HtmlButton控件,标记,文字或图片 ,5.2.4 HTMLButton控件,常用属性,CausesValidation,获取或设置一个值，该值指示在单击 HtmlButton 控件时是否执行验证。,如果在单击 HtmlButton 控件时执行验证，那么为 true；否那么为 false。 默认值为 true。,默认情况下，在单击 HtmlButton 控件时执行页验证。,页验证确定页上与验证控件关联的输入控件是否均通过该验证控件所指定的验证规那么。,5.2.4 HTMLButton控件,常用属性,OnServerClick,当该按钮被点击时被执行的过程的名称。,5.2.4 HTMLButton控件,Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs),Response.Redirect(),End Sub,5.2.4 HTMLButton控件,例,5-1,腾讯,5.2.5 HTMLInputButton控件,HtmlInputButton控件,标记,5.2.5 HTMLInputButton控件,常用属性,CausesValidation 属性,获取或设置在单击 HtmlInputButton 控件时是否执行验证。,Type,获取,HtmlInputControl,的类型。,Value,按钮上显示的文本内容。,5.2.5 HTMLInputButton控件,常用属性,OnServerClick,当该按钮被点击时被执行的过程的名称。,Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs),Response.Redirect(),End Sub,例,5-2,5.2.6 HTMLInputImage控件,HtmlInputImage控件,标记,5.2.6 HTMLInputImage控件,常用属性,Align,获取或设置 HtmlInputImage 控件相对于网页上其他元素的对齐方式。,Alt,获取或设置当图像不可用或尚未下载时浏览器显示的替换文本。,Src,获取或设置图像文件的位置。,Border,获取或设置,HtmlInputImage,控件的边框宽度。,5.2.6 HTMLInputImage控件,Protected Sub,Button1_ServerClick,(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.ServerClick,changeima(),End Sub,Sub changeima(),Dim rnd As New Random,Dim i As Integer,i = rnd.Next(1, 4),im,.Src = images/ & i.ToString & .jpg,End Sub,Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load,If Not IsPostBack Then,changeima(),End If,End Sub,rnd.Next(1, 4),返回从1含到4不含的随机数,5.2.7 HTMLInputText控件,HtmlInputText控件,标记,标记,5.2.7 HTMLInputText控件,常用属性,Size,HTMLInputText控件宽度义字符为单位,Maxlength,HTMLInputText控件允许输入的最大字符数,Value,HTMLInputText控件文本框中的内容,Type,HTMLInputText控件的类型,5.2.8 HTMLInputCheckBox控件,HtmlInputCheckBox控件,标记,5.2.8 HTMLInputCheckBox控件,常用属性,Checked,HTMLInputCheckBox控件是否被选中。,Onserverchange,当checked属性改变时触发的事件。,5.2.8 HTMLInputCheckBox控件,您的兴趣是（可复选）：,电影,音乐,计算机,网络,5.2.8 HTMLInputCheckBox控件,Protected Sub ShowHobby(ByVal sender As Object, ByVal e As System.EventArgs) Handles buttonOK.ServerClick,Dim MyHobby As String,If Hobby1.Checked Then MyHobby &= Hobby1.Value & ,、,If Hobby2.Checked Then MyHobby &= Hobby2.Value & ,、,If Hobby3.Checked Then MyHobby &= Hobby3.Value & ,、,If Hobby4.Checked Then MyHobby &= Hobby4.Value & ,、,If MyHobby.Length 0 Then MyHobby = Left(MyHobby, MyHobby.Length - 1),span1.InnerText = MyHobby,End Sub,5.2.9 HTMLInputRadioButton控件,HtmlInputRadioButton控件,标记,5.2.9 HTMLInputRadioButton控件,常用属性,Checked,是否选择了 HtmlInputRadioButton 控件。,Name,HtmlInputRadioButton 控件关联的组的名称。,Value,与 HtmlInputRadioButton 控件关联的值。,Onserverchange,当checked属性改变时触发的事件。,5.2.9 HTMLInputRadioButton控件,您最喜欢的水果是：,草莓,香蕉,凤梨,5.2.9 HTMLInputRadioButton控件,Protected Sub ShowFruit(ByVal sender As Object, ByVal e As System.EventArgs) Handles submit1.ServerClick,If Fruit1.Checked Then span1.InnerText = Fruit1.Value,If Fruit2.Checked Then span1.InnerText = Fruit2.Value,If Fruit3.Checked Then span1.InnerText = Fruit3.Value,End Sub,5.2.10 HTMLSelect控件,列表框选项,HtmlSelect控件,标记,5.2.10 HTMLSelect控件,常用属性,Multiple,是否可以同时选择多个项。,Size,控件的高度以行为单位。,Value,选定项的值。,Visible,控件是否可见。,Selectindex,选定项的序号索引。,5.2.10 HTMLSelect控件,常用属性,Items,一个集合，包含了在,HtmlSelect,控件中列出的项。,Datasource,要绑定到控件的信息源。,Datavaluefield,数据源中要绑定到控件中各项的 属性的字段。,Datatextfield,数据源中要绑定到控件中各项的 属性的字段。,列表项的值,列表项的文本,5.2.10 HTMLSelect控件,旅游地点：,5.2.10 HTMLSelect控件,Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load,If Not Page.IsPostBack Then,Dim myData As New ArrayList,myData.Add(北海公园),myData.Add(长城),myData.Add(中山公园),myData.Add(故宫),selectList.DataSource = myData,selectList.DataBind(),End If,End Sub,Protected Sub selectList_ServerChange(ByVal sender As Object, ByVal e As System.EventArgs) Handles selectList.ServerChange,span1.InnerText = 你选择了去 & selectList.Items(selectList.SelectedIndex).Text,End Sub,5.2.11 HTMLTextArea控件,HtmlTextArea控件,标记,5.2.11 HTMLTextArea控件,常用属性,Cols,文本框宽度,Rows,文本框高度,Value,输入的文本内容,onServerChange,指定内容改变时的事件处理过程,5.2.12 HTMLInputHidden控件,不会在客户端浏览器显示，但是每次页面提交时此控件和其他效劳器控件一同被提交到效劳器端。,HtmlInputCheckBox控件,标记,5.2.13 HTMLAnchor控件,超链接文字,HtmlAnchor控件,标记,5.2.13 HTMLAnchor控件,5.2.13 HTMLAnchor控件,Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load,Link1.InnerText = ,搜索引擎,Link1.HRef = ,Link1.Title = Yahoo!,雅虎,Link1.Target = _blank,End Sub,5.2.14 HTMLImage控件,HtmlImage控件,标记,5.2.14 HTMLImage控件,常用属性,Align,对齐方式,Src,图像文件,Alt,替换文本,Border,像素为当年为的边框宽度,Height、Width,像素或百分比为单位的高度和宽度,5.2.14 HTMLImage控件,选择照片：,海洋,1,海洋,2,沙漠,5.2.14 HTMLImage控件,Protected Sub ShowPhoto(ByVal sender As Object, ByVal e As System.EventArgs) Handles Submit1.ServerClick,Photo.Src = images/ & PhotoName.Value,End Sub,5.2.15 HTMLInputSubmit控件,HTMLInputSubmit控件,标记,5.2.15 HTMLInputSubmit控件,常用属性,Value,按钮文本,CausesValidation,指定是否执行验证控件。默认为true,5.2.16 HTMLInputReset控件,HTMLInputReset控件,标记,5.2.16 HTMLInputReset控件,常用属性,Value,按钮文本,CausesValidation,指定是否执行验证控件。默认为true,5.2.17 HTMLTable控件,HTMLTable控件,标记,5.2.17 HTMLTable控件,常用属性,Align,对齐方式,Bgcolor,背风光,Cellpadding,单元格内容和单元格边框之间的间距以像素为单位。,Cellspacing,相邻单元格之间的间距以像素为单位。,5.2.17 HTMLTable控件,第一行第一列,第一行第二列,第二行第一列,第二行第二列,第三行第一列,第三行第二列,5.2.17 HTMLTable控件,Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load,table1.BgColor = #FFEEDD,table1.Border = 1,table1.BorderColor = red,table1.CellPadding = 5,table1.CellSpacing = 0,End Sub,5.2.18 HTMLTableRow控件,HTMLTableRow控件,标记,5.2.18 HTMLTableRow控件,常用属性,Align,水平对齐方式。,Left,Center,Right,Valign,垂直对齐方式 。,Top,Middle,Bottom,5.2.18 HTMLTableRow控件,第一行第一列,第一行第二列,第二行第一列,第二行第二列,第三行第一列,第三行第二列,5.2.18 HTMLTableRow控件,Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load,Row1.BgColor = #FFEEDD,Row1.Height = 70,Row1.VAlign = top,Row2.BorderColor = #FFBBCC,End Sub,5.2.19 HTMLTableCell控件,HTMLTableCell控件,标记,5.2.19 HTMLTableCell控件,常用属性,Colspan,单元格占用的列数,Nowrap,文本是否自动继续在下一行显示,5.2.19 HTMLTableCell控件,第一行第一列,第一行第二列,第二行第一列,第二行第二列,5.2.19 HTMLTableCell控件,Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load,MyCell.ColSpan = 2,MyCell.InnerText = ,这是第三行,MyCell.Align = center,MyCell.BgColor = #FFEEDD,End Sub,5.2.20 HTMLGenericControl控件,不易归类的HTML Server控件。,内容,内容,内容,内容,5.2.20 HTMLGenericControl控件,Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load,Span1.InnerHtml = ,这是动态加入的文字,End Sub,5.2.20 HTMLGenericControl控件,5.3 总结,介绍了HTML Server控件及其使用方法。,介绍了每种控件的根本功能和使用方法。,给出了大量实例。,5.4 习题,P106-107,5.5 实训,P107 保存用户信息,END,谢谢！,