1、.,第4章 HTML控件,.,內(nèi)容摘要,HTML控件是ASP.NET所提供的在服務(wù)器端執(zhí)行的組件，可以產(chǎn)生標(biāo)準(zhǔn)的HTML文件。一般說來，標(biāo)準(zhǔn)的HTML標(biāo)簽無法動態(tài)控制其屬性、使用方法、接收事件，必須使用其他的程序語言來控制標(biāo)簽，這對于使用ASP程序設(shè)計來說很不方便，而且會使ASP程序比較雜亂。ASP.NET在這方面開發(fā)了新的技術(shù)，即將HTML標(biāo)簽對象化，使程序（如Visual Basic.NET、C#等）可以直接控制HTML標(biāo)簽，對象化后的HTML標(biāo)簽稱之為HTML控件。,.,學(xué)習(xí)目標(biāo),了解HTML的語法 掌握HTML控件的公共屬性 熟悉HTML控件的屬性 掌握HTML各控件的使用方法,.,4

2、.1 HTML控件簡介,ASP.NET為動態(tài)網(wǎng)頁程序設(shè)計帶來了許多新的技術(shù)，這些技術(shù)其中之一就是將所有的HTML標(biāo)記對象化，讓程序可以直接控制；對象化之后的HTML標(biāo)記稱為HTML控件。 可以使用如C#或者VB.NET等語言來撰寫控制HTML控件的程序，ASP.NET把HTML標(biāo)記對象化，可以讓網(wǎng)頁對象的互動、程序的寫作及維護(hù)變的更輕松容易，也讓執(zhí)行的效率明顯的改善不少。,.,4.1.1 HTML控件介紹,控件是一個可重用的組件或者對象，有自己的屬性和方法，可以響應(yīng)事件?？丶幕緦傩远x自身的顯示外觀。在ASP.NET中，控件是組成ASP.NET頁面內(nèi)容的主要元素，增強和擴展了Web頁面的功

3、能和處理能力，規(guī)范了Web頁面的代碼，簡化了Web頁面的設(shè)計難度和設(shè)計過程。 根據(jù)控件定義及作用，ASP.NET中的控件可分為HTML控件，Web服務(wù)器控件，驗證控件和用戶自定義控件。 HTML控件又包括HTML常用服務(wù)器控件和與表單有關(guān)的控件。常用HTML控件和與表單有關(guān)的控件詳見表4-1。,.,4.1.1 HTML控件介紹,表4-1 常用HTML控件與表單控件,.,4.1.2 HTML控件的語法,本節(jié)中的主題描述如何使用Visual Web Developer工具箱的HTML選項卡上的ASP.NET Web服務(wù)器控件。默認(rèn)情況下，服務(wù)器無法使用ASP.NET網(wǎng)頁上的HTML元素；這些元素被

4、視為傳遞給瀏覽器的不透明文本。但是，通過將 HTML 元素轉(zhuǎn)換成HTML服務(wù)器控件，可以將其公開為可以在基于服務(wù)器的代碼中進(jìn)行編程的元素。 HTML控件由HTML標(biāo)記衍生而來，由于HTML標(biāo)記的屬性只能靜態(tài)地設(shè)置，一般在程序執(zhí)行過程中不能被修改，很不靈活。為了彌補這一不足。ASP.NET特別提供HTML控件，這種控件即允許在程序中設(shè)置其屬性，也允許在程序的執(zhí)行過程中動態(tài)地讀取及修改其屬性，從而可以產(chǎn)生動態(tài)的網(wǎng)頁。,.,4.1.2 HTML控件的語法,下面來看一個HTML標(biāo)記和HTML控件比較的例子 客戶端 服務(wù)器端 比較這兩個語句，可以看出聲明一個HTML服務(wù)器按鈕控件和聲明一個HTML普通按

5、鈕控件有以下幾點不同： 服務(wù)器按鈕控件用id屬性代替了普通按鈕控件的name屬性。 服務(wù)器按鈕控件用 OnServerClick屬性代替了普通按鈕控件的OnClick屬性。 服務(wù)器按鈕控件多用了一個屬性runatserver。,.,4.1.2 HTML控件的語法,ID屬性是標(biāo)識服務(wù)器控件的惟一標(biāo)志，通過ID可以像引用一個對象一樣來直接在服務(wù)器端引用服務(wù)器控件。ID屬性表示程序以本屬性來控制對象，所以任何對象的名稱不可重復(fù)，不管是否為同一種類。 用OnServerClick屬性代替OnClick屬性是為了表明響應(yīng)按鈕的單擊事件是在服務(wù)器端進(jìn)行處理，而不是客戶端。多出的runat=server屬性

6、是說明該控件為服務(wù)器控件，這時區(qū)別HTML控件是服務(wù)器控件還是普通控件的惟一方法。,.,4.2 HTML控件的公共屬性,所有的HTML控件都根據(jù)控件在表單中的用途可分為HTML輸入控件和HTML容器控件。各個HTML控件都有自身的屬性，并且各個HTML控件之間又存在著很多共同的屬性。在HTML的所有控件中都包含Attributes、Disabled、Style、TagName、Visible等屬性；HTML輸入控件除共享所有HTML控件共享屬性外還共享Name、Value和Type屬性；HTML容器控件除共享所有HTML控件共享屬性外還共享InnerHtml和Value屬性。,.,4.2.1

7、Attributes屬性,HtmlControl.Attributes屬性位于命名空間System.Web.UI.HtmlControls下，用于獲取在 ASP.NET頁內(nèi)的服務(wù)器控件標(biāo)記上表示的所有屬性（Attribute）名稱和值對的集合。 使用該屬性可以用編程方式訪問HTML服務(wù)器控件的特性。所有Html服務(wù)器控件都將其特性存儲在Control.ViewState中。語法如下： BrowsableAttribute(false) public AttributeCollection Attributes get; ,.,4.2.2 Disabled屬性,HtmlControl.Disab

8、led屬性位于命名空間System.Web.UI.HtmlControls下，用于獲取或者設(shè)置一個值，該值指示 HTML 服務(wù)器控件是否被禁用。語法如下： 屬性值：如果該控件被禁用，則為true；否則為false。默認(rèn)值為false。,.,4.2.3 InnerHtml屬性,HtmlControl.InnerHtml屬性位于命名空間System.Web.UI.HtmlControls下，用于獲取或者設(shè)置位于指定的HTML服務(wù)器控件的開始標(biāo)記和結(jié)束標(biāo)記之間的內(nèi)容。 InnerHtml屬性自動對進(jìn)出HTML實體的特殊字符進(jìn)行編碼。HTML實體允許顯示特殊字符（例如 屬性值：HTML服務(wù)器控件的開始

9、標(biāo)記和結(jié)束標(biāo)記之間的HTML內(nèi)容。,.,4.2.4 InnerText屬性,HtmlContainerControl.InnerText屬性位于命名空間System.Web.UI.HtmlControls下，用于獲取或者設(shè)置指定HTML服務(wù)器控件的開始標(biāo)記和結(jié)束標(biāo)記之間的文本。與InnerHtml屬性不同，InnerText屬性不會對自動進(jìn)出HTML實體的特殊字符進(jìn)行編碼。語法如下： 屬性值：HTML服務(wù)器控件的開始標(biāo)記和結(jié)束標(biāo)記之間的文本。,.,4.2.5 Style屬性,HtmlControl.Style 屬性屬性位于命名空間System.Web.UI.HtmlControls下，用于獲取

10、應(yīng)用于ASP.NET文件中指定的HTML服務(wù)器控件的所有級聯(lián)樣式表（CSS）屬性（Property）的集合。語法如下： BrowsableAttribute(false) public CssStyleCollection Style get; 屬性值：包含HTML服務(wù)器控件的樣式屬性 (Property)。,.,4.2.6 Value屬性,HtmlInputControl.Value屬性位于命名空間System.Web.UI.HtmlControls下，用于獲取或者設(shè)置與HtmlInputControl控件關(guān)聯(lián)的值。語法如下： 屬性值：與HtmlInputControl控件關(guān)聯(lián)的值。,.,4

11、.3 HTML控件及其屬性,默認(rèn)情況下，ASP.NET文件中的HTML元素作為文本進(jìn)行處理，并且不能在服務(wù)器端代碼中引用這些元素。若要使這些元素能以編程方式進(jìn)行訪問，可以通過添加runat=server屬性表明應(yīng)將HTML元素作為服務(wù)器控件進(jìn)行處理。還可以設(shè)置元素的id屬性，使開發(fā)人員可以通過編程方式引用控件。然后可以通過設(shè)置屬性（Attribute）來聲明服務(wù)器控件實例上的屬性（Property）參數(shù)和事件綁定。,.,4.3.1 HtmlAnchor控件,使用HtmlAnchor控件以編程方式控制HTML元素。使用HTML元素可以創(chuàng)建允許移到頁上的其他位置或者其他網(wǎng)頁的超鏈接。HtmlAnc

12、hor 控件必須使用帶有開始和結(jié)束標(biāo)記的正確格式?？梢酝ㄟ^將文本放置在開始和結(jié)束標(biāo)記之間來指定控件標(biāo)題。此服務(wù)器控件通常用于動態(tài)修改元素的屬性（Attribute）和屬性（Property），顯示來自數(shù)據(jù)源的超鏈接以及控制事件以動態(tài)生成HtmlAnchor控件。,.,4.3.1 HtmlAnchor控件,格式如下： 超級鏈接文字 ,.,4.3.2 HtmlForm控件,使用HtmlForm控件可以對HTML元素進(jìn)行編程。若要利用回發(fā)服務(wù)，則所有 Web窗體控件（無論HTML 件、Web控件、用戶控件還是自定義控件）都必須嵌套在HtmlForm控件的格式良好的開始標(biāo)記和結(jié)束標(biāo)記之間。如果沒有正確

13、結(jié)束標(biāo)記，ASP.NET將無法識別該元素。該元素將被忽略或者將發(fā)生編譯錯誤，具體取決于該元素的構(gòu)成方式。,.,4.3.2 HtmlForm控件,格式如下: 其他控件 ,.,4.3.3 HtmlButton控件,使用HtmlButton控件可以對HTML元素進(jìn)行編程?？梢詾镠tmlButton控件的ServerClick事件提供自定義代碼，以指定在單擊該控件時執(zhí)行的操作。HtmlButton控件將JavaScript呈現(xiàn)到客戶端瀏覽器?？蛻舳藶g覽器必須啟用了JavaScript，此控件才能正常運行。 HtmlButton控件必須寫在窗體控件 之內(nèi)，這是因為Button控件可以決定數(shù)據(jù)的上傳，而只

14、有被控件所包圍起來的數(shù)據(jù)輸入控件，其數(shù)據(jù)才會被上傳。,.,4.3.3 HtmlButton控件,格式如下： 按鈕上的文字、圖形或者控件 ,.,4.3.4 HtmlTable、HtmlTableRow和HtmlTableCell控件,若要創(chuàng)建表，首先應(yīng)在頁上的窗體中聲明一個HtmlTable 控件。然后，將HtmlTableRow對象放置在HtmlTable控件的開始和結(jié)束標(biāo)記之間（對于表中所需的每一行放置一個對象）。定義表中的行之后，聲明位于每個HtmlTableRow對象的開始和結(jié)束標(biāo)記之間的HtmlTableCell對象以創(chuàng)建該行的單元格。,.,4.3.4 HtmlTable、HtmlTa

15、bleRow和HtmlTableCell控件,1HtmlTable控件 使用HtmlTable控件對HTML元素進(jìn)行編程。HtmlTable控件由一些行組成（由HtmlTableRow對象表示），這些行存儲在表的Rows集合中。每行均由存儲在行的Cells集合中的單元格（由HtmlTableCell對象表示）組成。HtmlTable控件允許自定義表的外觀。通過設(shè)置BgColor、Border、BorderColor、Height和Width屬性，可以分別指定表的背景色、邊框?qū)挾?、邊框顏色、表高度和表寬度。通過設(shè)置CellSpacing和CellPadding屬性，還可以控制單元格間的間距以及單

16、元格內(nèi)容與單元格邊框間的間距。,.,4.3.4 HtmlTable、HtmlTableRow和HtmlTableCell控件,格式如下： ,.,4.3.4 HtmlTable、HtmlTableRow和HtmlTableCell控件,2HtmlTableRow 控件 使用HtmlTableRow 類對HTML元素進(jìn)行編程。元素表示表中的行。HtmlTableRow類使可以控制表中各個獨立行的外觀。通過設(shè)置BgColor、BorderColor和Height 屬性，可以分別控制行的背景色、邊框顏色和高度。通過設(shè)置Align和VAlign屬性，分別控制行中單元格內(nèi)容的水平和垂直對齊方式。表中的每行

17、都包含一個Cells集合，該集合對于該行中的每個單元格都包含一個HtmlTableCell。HtmlTableRow屬性。,.,4.3.4 HtmlTable、HtmlTableRow和HtmlTableCell控件,格式如下： EnableViewState=False|True Id=被程序代碼所控制的名稱 runat=server cellcontent cellcontent cellcontent ,.,4.3.4 HtmlTable、HtmlTableRow和HtmlTableCell控件,3HtmlTableCell控件 使用HtmlTableCell類對和HTML元素進(jìn)行編程。

18、元素表示數(shù)據(jù)單元格，而元素表示標(biāo)題單元格。HtmlTableCell類可以控制各個獨立單元格的外觀。通過設(shè)置BgColor、BorderColor、Height和Width屬性，可以分別控制單元格的背景色、邊框顏色、高度和寬度。,.,4.3.4 HtmlTable、HtmlTableRow和HtmlTableCell控件,格式如下： CellContent ,.,4.3.5 表單輸入控件,1HTMLInputText控件 HtmlInputText控件用來控制和元素。在HTML中，這兩個元素用來建立文本域和密碼域。 格式如下： ,.,4.3.5 表單輸入控件,2HTMLInputImage控件 使用HtmlInputImage控件可以對HTML元素進(jìn)行編程?？梢詫⒋丝丶cHtmlInputText、HtmlTex