教學研究CH05-HTML-Server-控件123

第5章HTMLServer控件XKQ,2012第5章HTMLServer控件5.1案例：個人信息顯示頁面5.2理論知識5.3總結(jié)5.4習題5.5實訓5.1案例：個人信息顯示頁面5.1案例：個人信息顯示頁面<h4>請?zhí)顚憘€人信息</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">

請輸入內(nèi)容后單擊“提交”<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標記的關(guān)系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標記的關(guān)系幾乎所有的HTML標記都可以轉(zhuǎn)化為HTMLServer控件，只需在標記中加入Runat="Server"5.2.1HTMLServer控件與HTML標記的關(guān)系HtmlAnchor控件<a>標記HtmlButtton控件<button>標記HtmlForm控件<form>標記HtmlImage控件<img>標記HtmlInputButton控件<inputtype=button>標記<inputtype=submit>標記<inputtype=reset>標記5.2.1HTMLServer控件與HTML標記的關(guān)系HtmlInputHidden控件<inputtype=hidden>標記HtmlInputImage控件<inputtype=image>標記HtmlInputCheckBox控件<inputtype=checkbox>標記HtmlControl控件<inputtype=text><inputtype=submit><inputtype=file>……HtmlInputFile控件<inputtype=file>標記5.2.1HTMLServer控件與HTML標記的關(guān)系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網(wǎng)頁只能有一個HTMLForm控件，所有的ASP.NET控件必須包含在一個服務器端HTMLForm控件中。

HtmlForm控件<form>標記<formrunat="server"id="…"method="post/get"action="…">其他控件或HTML標記</form>5.2.3HTMLForm控件常用屬性Enctype

獲取或設(shè)置將窗體的數(shù)據(jù)發(fā)送到服務器時瀏覽器使用的編碼類型。默認值為application/x-www-form-urlencoded

Method

獲取或設(shè)置一個值，該值指示瀏覽器將窗體數(shù)據(jù)發(fā)送到服務器進行處理的方式。默認值為postget請求的數(shù)據(jù)會附在URL之后（就是把數(shù)據(jù)放置在HTTP協(xié)議頭中），get可以包含的數(shù)據(jù)量較少，安全性也較低。5.2.4HTMLButton控件HtmlButton控件<button

>標記<buttomrunat="server"id="…"onserverclick="…">文字或圖片</button>5.2.4HTMLButton控件常用屬性CausesValidation獲取或設(shè)置一個值，該值指示在單擊HtmlButton

控件時是否執(zhí)行驗證。如果在單擊HtmlButton

控件時執(zhí)行驗證，則為true；否則為false。默認值為true。默認情況下，在單擊HtmlButton

控件時執(zhí)行頁驗證。頁驗證確定頁上與驗證控件關(guān)聯(lián)的輸入控件是否均通過該驗證控件所指定的驗證規(guī)則。5.2.4HTMLButton控件常用屬性O(shè)nServerClick當該按鈕被點擊時被執(zhí)行的過程的名稱。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

屬性獲取或設(shè)置在單擊HtmlInputButton

控件時是否執(zhí)行驗證。Type

獲取HtmlInputControl

的類型。Value按鈕上顯示的文本內(nèi)容。5.2.5HTMLInputButton控件常用屬性O(shè)nServerClick當該按鈕被點擊時被執(zhí)行的過程的名稱。<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獲取或設(shè)置HtmlInputImage

控件相對于網(wǎng)頁上其他元素的對齊方式。Alt獲取或設(shè)置當圖像不可用或尚未下載時瀏覽器顯示的替換文本。Src獲取或設(shè)置圖像文件的位置。Border獲取或設(shè)置HtmlInputImage

控件的邊框?qū)挾取?.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（不含）的隨機數(shù)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控件允許輸入的最大字符數(shù)ValueHTMLInputText控件文本框中的內(nèi)容TypeHTMLInputText控件的類型5.2.8HTMLInputCheckBox控件<inputrunat=“server”id=“…”type=“checkbox”value=“…”onserverchange=“…”checked=“True/False”>HtmlInputCheckBox控件<inputtype=checkbox>標記5.2.8HTMLInputCheckBox控件常用屬性CheckedHTMLInputCheckBox控件是否被選中。Onserverchange當checked屬性改變時觸發(fā)的事件。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="網(wǎng)絡(luò)"/>網(wǎng)絡(luò)

<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

控件關(guān)聯(lián)的組的名稱。Value與HtmlInputRadioButton

控件關(guān)聯(lián)的值。Onserverchange當checked屬性改變時觸發(fā)的事件。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數(shù)據(jù)源中要綁定到控件中各項的ListItem.Value

屬性的字段。Datatextfield數(shù)據(jù)源中要綁定到控件中各項的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文本框?qū)挾萊ows文本框高度Value輸入的文本內(nèi)容onServerChange指定內(nèi)容改變時的事件處理過程5.2.12HTMLInputHidden控件不會在客戶端瀏覽器顯示，但是每次頁面提交時此控件和其他服務器控件一同被提交到服務器端。<inputrunat=“server”id=“…”type=“hidden”value=“…”>HtmlInputCheckBox控件<inputtype=hidden>標記5.2.13HTMLAnchor控件<arunat=“server”id=“…”href=“要連接的URL地址name=“保存在瀏覽器收藏夾中的標簽名”onserverclick=”處理serverclick事件的過程”target=“打開鏈接網(wǎng)頁的窗口”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像素為當年為的邊框?qū)挾菻eight、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指定是否執(zhí)行驗證控件。默認為true5.2.16HTMLInputReset控件<inputtype=“reset”runat=“server”id=“…”

onserverclick=“…”/>HTMLInputReset控件<inputtype=reset>標記5.2.16HTMLInputReset控件常用屬性Value按鈕文本CausesValidation指定是否執(zhí)行驗證控件。默認為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單元格內(nèi)容和單元格邊框之間的間距（以像素為單位）。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>