版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第5章HTMLServer控件XKQ,2012第5章HTMLServer控件5.1案例：个人信息显示页面5.2理论知识5.3总结5.4习题5.5实训5.1案例：个人信息显示页面5.1案例：个人信息显示页面<h4>请填写个人信息</h4><formid="form1"runat="server"><div>
姓名：<inputid="username"type="text"runat="server"/><br/>
密码：<inputid="password"type="password"runat="server"/><br/>
性别：<inputid="sex1"type="radio"value="男"name="sex"runat="server"/>男
<inputid="sex2"type="radio"value="女"name="sex"runat="server"/>女<br/>
爱好：<inputid="love1"type="checkbox"value="音乐"runat="server"/>音乐
<inputid="love2"type="checkbox"value="计算机"runat="server"/>计算机<br/>
5.1案例：个人信息显示页面简介：<textareaid="introduction"cols="40"rows="2"runat="server"/><br/><br/><divid="message"runat="server">
请输入内容后单击“提交”<br/>
相片：<inputid="upfile"type="file"runat="server"/></div><inputtype="submit"value="提交"onserverclick="EnterClick"runat="server"id="Submit1"/><inputtype="reset"value="重置"runat="server"id="Reset1"/><br/><imgid="MyImage"runat="server"src=""/></div></form>5.1案例：个人信息显示页面ImportsSystem.IOPartialClass_DefaultInheritsSystem.Web.UI.PageProtectedSubEnterClick(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesSubmit1.ServerClickDimstrMessageAsString=""strMessage="姓名："&username.ValuestrMessage&="<br/>密码："&password.ValueIfsex1.CheckedThenstrMessage&="<br/>性别："&sex1.ValueElseIfsex2.checkedThenstrMessage&="<br/>性别："&sex1.ValueEndIf
5.1案例：个人信息显示页面
Iflove1.CheckedThenstrMessage&="<br/>爱好1："&love1.ValueEndIfIflove2.CheckedThenstrMessage&="<br/>爱好2："&love2.ValueEndIfstrMessage&="<br/>简介："&introduction.Valuemessage.InnerHtml=strMessage5.1案例：个人信息显示页面Dimupfilename,filepathAsStringupfilename=Path.GetFileName(upfile.PostedFile.FileName)Ifupfilename.Trim<>""Thenfilepath=Server.MapPath("images/")&upfilenameupfile.PostedFile.SaveAs(filepath)MyImage.Src="images/"&upfilenameEndIfEndSubEndClass5.2理论知识5.2.1HTMLServer控件与HTML标记的关系5.2.2向页面添加HTMLServer控件5.2.3HTMLForm控件5.2.4HTMLButton控件5.2.5HTMLInputButton控件5.2.6HTMLInputImage控件5.2.7HTMLInputText控件5.2理论知识5.2.8HTMLInputCheckBox控件5.2.9HTMLInputRadioButton控件5.2.10HTMLSelect控件5.2.11HTMLTextArea控件5.2.12HTMLInputHidden控件5.2.13HTMLInputAnchor控件5.2.14HTMLImage控件5.2.15HTMLInputSubmit控件5.2理论知识5.2.16HTMLInputReset控件5.2.17HTMLTable控件5.2.18HTMLTableRow控件5.2.19HTMLTableCell控件5.2.20HTMLGenericControl控件5.2.1HTMLServer控件与HTML标记的关系几乎所有的HTML标记都可以转化为HTMLServer控件，只需在标记中加入Runat="Server"5.2.1HTMLServer控件与HTML标记的关系HtmlAnchor控件<a>标记HtmlButtton控件<button>标记HtmlForm控件<form>标记HtmlImage控件<img>标记HtmlInputButton控件<inputtype=button>标记<inputtype=submit>标记<inputtype=reset>标记5.2.1HTMLServer控件与HTML标记的关系HtmlInputHidden控件<inputtype=hidden>标记HtmlInputImage控件<inputtype=image>标记HtmlInputCheckBox控件<inputtype=checkbox>标记HtmlControl控件<inputtype=text><inputtype=submit><inputtype=file>……HtmlInputFile控件<inputtype=file>标记5.2.1HTMLServer控件与HTML标记的关系HtmlTable控件<table>标记HtmlTableCell控件<td>、<th>标记HtmlInputText控件<inputtype=text>标记<inputtype=password>标记HtmlSelect控件<select>标记HtmlTableRow控件<tr>标记HtmlTextArea控件<textarea>标记5.2.2向页面添加HTMLServer控件1声明方法<控件名Runat="server"
Id="..."
Type="控件类型"
OnServerClick="…"></控件名>2VS.Net工具箱5.2.3HTMLForm控件一个ASP.NET网页只能有一个HTMLForm控件，所有的ASP.NET控件必须包含在一个服务器端HTMLForm控件中。
HtmlForm控件<form>标记<formrunat="server"id="…"method="post/get"action="…">其他控件或HTML标记</form>5.2.3HTMLForm控件常用属性Enctype
获取或设置将窗体的数据发送到服务器时浏览器使用的编码类型。默认值为application/x-www-form-urlencoded
Method
获取或设置一个值，该值指示浏览器将窗体数据发送到服务器进行处理的方式。默认值为postget请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），get可以包含的数据量较少，安全性也较低。5.2.4HTMLButton控件HtmlButton控件<button
>标记<buttomrunat="server"id="…"onserverclick="…">文字或图片</button>5.2.4HTMLButton控件常用属性CausesValidation获取或设置一个值，该值指示在单击HtmlButton
控件时是否执行验证。如果在单击HtmlButton
控件时执行验证，则为true；否则为false。默认值为true。默认情况下，在单击HtmlButton
控件时执行页验证。页验证确定页上与验证控件关联的输入控件是否均通过该验证控件所指定的验证规则。5.2.4HTMLButton控件常用属性OnServerClick当该按钮被点击时被执行的过程的名称。5.2.4HTMLButton控件<scriptlanguage="VB"runat="server">
SubButton1_Click(ByValsenderAsObject,ByValeAsEventArgs)Response.Redirect("")EndSub</script>5.2.4HTMLButton控件<htmlxmlns="/1999/xhtml"><headrunat="server"><title>例5-1</title></head><body><formid="form1"runat="server">
<buttonid="Button1"runat="server"onserverclick="Button1_Click">腾讯</button>
</form></body></html>5.2.5HTMLInputButton控件HtmlInputButton控件<InputType="button"
>标记<inputrunat="server"id="…"type="Button"onserverclick="…">5.2.5HTMLInputButton控件常用属性CausesValidation
属性获取或设置在单击HtmlInputButton
控件时是否执行验证。Type
获取HtmlInputControl
的类型。Value按钮上显示的文本内容。5.2.5HTMLInputButton控件常用属性OnServerClick当该按钮被点击时被执行的过程的名称。<scriptlanguage="VB"runat="server">SubButton1_Click(ByValsenderAsObject,ByValeAsEventArgs)Response.Redirect("")EndSub</script><htmlxmlns="/1999/xhtml"><headrunat="server"><title>例5-2</title></head><body><formid="form1"runat="server"><inputtype="button"runat="server"id="Button1"onserverclick="Button1_Click"value="进入百度搜索"/></form></body></html>5.2.6HTMLInputImage控件<inputrunat="server"id="…"type="image"onserverclick
="…"src
="…"Align="Top/Middle/Bottom/Left/Right"alt="…"width="n">HtmlInputImage控件<inputtype=image>标记5.2.6HTMLInputImage控件常用属性Align获取或设置HtmlInputImage
控件相对于网页上其他元素的对齐方式。Alt获取或设置当图像不可用或尚未下载时浏览器显示的替换文本。Src获取或设置图像文件的位置。Border获取或设置HtmlInputImage
控件的边框宽度。5.2.6HTMLInputImage控件<formid="form1"runat="server"><div><inputtype="image"runat="server"id="im"src=""/><inputtype="button"runat="server"id="Button1"value="换一张图片"/></div></form>ProtectedSubButton1_ServerClick(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesButton1.ServerClickchangeima()EndSubSubchangeima()DimrndAsNewRandomDimiAsInteger
i=rnd.Next(1,4)
im.Src="images/"&i.ToString&".jpg"EndSubProtectedSubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesMe.LoadIfNotIsPostBackThenchangeima()EndIfEndSubrnd.Next(1,4)返回从1（含）到4（不含）的随机数5.2.7HTMLInputText控件HtmlInputText控件<inputtype=text>标记<inputtype=password>标记<inputrunat=“server”id=“…”type="text/Password"size=“n”maxlenght=“n”value=“…”onserverchange=“…”>5.2.7HTMLInputText控件常用属性SizeHTMLInputText控件宽度（义字符为单位）MaxlengthHTMLInputText控件允许输入的最大字符数ValueHTMLInputText控件文本框中的内容TypeHTMLInputText控件的类型5.2.8HTMLInputCheckBox控件<inputrunat=“server”id=“…”type=“checkbox”value=“…”onserverchange=“…”checked=“True/False”>HtmlInputCheckBox控件<inputtype=checkbox>标记5.2.8HTMLInputCheckBox控件常用属性CheckedHTMLInputCheckBox控件是否被选中。Onserverchange当checked属性改变时触发的事件。5.2.8HTMLInputCheckBox控件<formid="form1"runat="server">
您的兴趣是（可复选）：
<inputtype="checkbox"runat="server"id="Hobby1"value="电影"/>电影
<inputtype="checkbox"runat="server"id="Hobby2"value="音乐"/>音乐
<inputtype="checkbox"runat="server"id="Hobby3"value="计算机"/>计算机
<inputtype="checkbox"runat="server"id="Hobby4"value="网络"/>网络
<inputtype="button"runat="server"id="buttonOK"value="确定"onserverclick="ShowHobby"/><br/><spanrunat="server"id="span1"style="color:Red"/></form>5.2.8HTMLInputCheckBox控件ProtectedSubShowHobby(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesbuttonOK.ServerClickDimMyHobbyAsStringIfHobby1.CheckedThenMyHobby&=Hobby1.Value&"、"IfHobby2.CheckedThenMyHobby&=Hobby2.Value&"、"IfHobby3.CheckedThenMyHobby&=Hobby3.Value&"、"IfHobby4.CheckedThenMyHobby&=Hobby4.Value&"、"IfMyHobby.Length>0ThenMyHobby=Left(MyHobby,MyHobby.Length-1)span1.InnerText=MyHobbyEndSub5.2.9HTMLInputRadioButton控件<inputrunat=“server”id=“…”type=“radio”value=“…”onserverchange=“…”checked=“True/False”>HtmlInputRadioButton控件<inputtype=radio>标记5.2.9HTMLInputRadioButton控件常用属性Checked是否选择了HtmlInputRadioButton
控件。NameHtmlInputRadioButton
控件关联的组的名称。Value与HtmlInputRadioButton
控件关联的值。Onserverchange当checked属性改变时触发的事件。5.2.9HTMLInputRadioButton控件<formid="form1"runat="server">
您最喜欢的水果是：
<inputtype="radio"runat="server"id="Fruit1"name="Fruit"value="草莓"/>草莓
<inputtype="radio"runat="server"id="Fruit2"name="Fruit"value="香蕉"/>香蕉
<inputtype="radio"runat="server"id="Fruit3"name="Fruit"value="凤梨"/>凤梨
<inputtype="submit"runat="server"id="submit1"value="确定"onserverclick="ShowFruit"/><br/><spanrunat="server"id="span1"style="color:Red"/></form>5.2.9HTMLInputRadioButton控件ProtectedSubShowFruit(ByValsenderAsObject,ByValeAsSystem.EventArgs)Handlessubmit1.ServerClickIfFruit1.CheckedThenspan1.InnerText=Fruit1.ValueIfFruit2.CheckedThenspan1.InnerText=Fruit2.ValueIfFruit3.CheckedThenspan1.InnerText=Fruit3.ValueEndSub5.2.10HTMLSelect控件<select
runat=“server”id=“…”datasource=“<%#...%>”datamember=“…”datatextfield=“…”datavaluefield=“…”multiple=“True/False”size=“n”onserverchange=“…”><optionvalue=“…”>列表框选项</option></select>HtmlSelect控件<select>标记5.2.10HTMLSelect控件常用属性Multiple是否可以同时选择多个项。Size控件的高度（以行为单位）。Value选定项的值。Visible控件是否可见。Selectindex选定项的序号索引。5.2.10HTMLSelect控件常用属性Items一个集合，包含了在HtmlSelect
控件中列出的项。Datasource要绑定到控件的信息源。Datavaluefield数据源中要绑定到控件中各项的ListItem.Value
属性的字段。Datatextfield数据源中要绑定到控件中各项的ListItem.Text
属性的字段。列表项的值列表项的文本5.2.10HTMLSelect控件
<formid="form1"runat="server">
旅游地点：
<selectrunat="server"id="selectList"/><inputtype="button"runat="server"id="Button1"value="确定"/><br/><spanrunat="server"id="span1"style="color:Red"/></form>5.2.10HTMLSelect控件ProtectedSubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesMe.LoadIfNotPage.IsPostBackThenDimmyDataAsNewArrayListmyData.Add("北海公园")myData.Add("长城")myData.Add("中山公园")myData.Add("故宫")selectList.DataSource=myDataselectList.DataBind()EndIfEndSubProtectedSubselectList_ServerChange(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesselectList.ServerChangespan1.InnerText="你选择了去"&selectList.Items(selectList.SelectedIndex).TextEndSub5.2.11HTMLTextArea控件<textarearunat=“server”id=“…”cols=“n”rows=“n”value=“…”onserverchange=“…”>HtmlTextArea控件<textarea>标记5.2.11HTMLTextArea控件常用属性Cols文本框宽度Rows文本框高度Value输入的文本内容onServerChange指定内容改变时的事件处理过程5.2.12HTMLInputHidden控件不会在客户端浏览器显示，但是每次页面提交时此控件和其他服务器控件一同被提交到服务器端。<inputrunat=“server”id=“…”type=“hidden”value=“…”>HtmlInputCheckBox控件<inputtype=hidden>标记5.2.13HTMLAnchor控件<arunat=“server”id=“…”href=“要连接的URL地址name=“保存在浏览器收藏夹中的标签名”onserverclick=”处理serverclick事件的过程”target=“打开链接网页的窗口”title=“显示的标题>超链接文字</a>HtmlAnchor控件<a>标记5.2.13HTMLAnchor控件<formid="form1"runat="server"><arunat="server"id="Link1"/></form>5.2.13HTMLAnchor控件ProtectedSubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesMe.LoadLink1.InnerText="搜索引擎"Link1.HRef=""Link1.Title="Yahoo!雅虎"Link1.Target="_blank"EndSub5.2.14HTMLImage控件<imagerunat=“server”id=“…”align=“…”border=“n”src=“…”alt=“…”height=“n”width=“n”/>HtmlImage控件<image>标记5.2.14HTMLImage控件常用属性Align对齐方式Src图像文件Alt替换文本Border像素为当年为的边框宽度Height、Width像素或百分比为单位的高度和宽度5.2.14HTMLImage控件<formid="form1"runat="server"><imgrunat="server"id="Photo"src="images/1.jpg"alt="1.jpg"/><br/>
选择照片：
<selectrunat="server"id="PhotoName"><optionvalue="1.jpg">海洋1</option><optionvalue="2.jpg">海洋2</option><optionvalue="3.jpg">沙漠</option></select><inputtype="submit"id="Submit1"runat="server"value="确定"onserverclick="ShowPhoto"/></form>5.2.14HTMLImage控件ProtectedSubShowPhoto(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesSubmit1.ServerClickPhoto.Src="images/"&PhotoName.ValueEndSub5.2.15HTMLInputSubmit控件<inputtype=“submit”runat=“server”id=“…”
onserverclick=“…”/>HTMLInputSubmit控件<inputtype=submit>标记5.2.15HTMLInputSubmit控件常用属性Value按钮文本CausesValidation指定是否执行验证控件。默认为true5.2.16HTMLInputReset控件<inputtype=“reset”runat=“server”id=“…”
onserverclick=“…”/>HTMLInputReset控件<inputtype=reset>标记5.2.16HTMLInputReset控件常用属性Value按钮文本CausesValidation指定是否执行验证控件。默认为true5.2.17HTMLTable控件<tablerunat=“server”id=“…”align=“…”bgcolor=“…”border=“n”bordercolor=“…”cellpadding=“n”cellspacing=“n”height=“n”width=“n”><tr><td>…</td>…</tr>…</table>HTMLTable控件<table>标记5.2.17HTMLTable控件常用属性Align对齐方式Bgcolor背景色Cellpadding单元格内容和单元格边框之间的间距（以像素为单位）。Cellspacing相邻单元格之间的间距（以像素为单位）。5.2.17HTMLTable控件<formid="form1"runat="server"><tablerunat="server"id="table1"><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr><tr><td>第三行第一列</td><td>第三行第二列</td></tr></table></form>5.2.17HTMLTable控件ProtectedSubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)HandlesMe.Loadtable1.BgColor="#FFEEDD"table1.Border="1"table1.BorderColor="red"table1.CellPadding="5"table1.CellSpacing="0"EndSub5.2.18HTMLTableRow控件<trrunat=“server”id=“…”align=“…”bgcolor=“…”border=“n”bordercolor=“…”cellpadding=“n”cellspacing=“n”height=“n”valign=“…”><td>…</td>…</tr>HTMLTableRow控件<tr>标记5.2.18HTMLTableRow控件常用属性Align水平对齐方式。Left,Center,Right
Valign垂直对齐方式。Top,Middle,Bottom
5.2.18HTMLTableRow控件<formid="form1"runat="server"><tableborder="1"cellpadding="2"><trrunat="server"id="Row1"><td>第一行第一列</td><td>第一行第二列</td></tr><trrunat="server"id="Row2"><td>第二行第一列</td><td>第二行第二列</td></tr><trrunat="server"id="Row3"><td>第三行第一列</td><td>第三行第二列</td></tr>
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年房屋租赁合同范本3
- 2025无固定期限劳动合同范本
- 年会会议合同范本
- 房顶更换简易合同范本
- 第12讲 二次函数图像与性质 4考点+16题型 2025年中考数学一轮复习讲练测（广东专用）
- 2025年劳动合同终止后如何顺利领取失业保险金
- 语言学导论知到课后答案智慧树章节测试答案2025年春内江师范学院
- 2025年度砂石料供应合同范本
- 2025授权软件开发合同
- 卤菜机构学员签合同（2025年版）
- 河南郑州大学第二附属医院招聘笔试真题2024
- GB/T 45315-2025基于LTE-V2X直连通信的车载信息交互系统技术要求及试验方法
- 《中国脑卒中防治报告(2023)》
- 吉林省吉林市2024-2025学年高三下学期3月三模试题 政治 含答案
- 湖北省圆创教育教研中心2025届高三三月联合测评物理试题及答案
- 《项脊轩志》公开课课件【一等奖】
- 慢性支气管炎临床诊疗指南
- 社区工作者经典备考题库（必背300题）
- 《我不能失信》PPT【名师课件】
- 幼儿园大班绘本：《没有牙齿的大老虎》 PPT课件
- 轮胎式装载机检测报告
评论
0/150
提交评论