市場營銷HTML服務(wù)器控件

1、課程名稱：.NET應(yīng)用開發(fā) 第十章 服務(wù)器控件PAGE -10.2 HTML服務(wù)器控件TOC o 1-2 h z t 標題 3,3 HYPERLINK l _Toc145212053 1.目標概述 2分鐘 PAGEREF _Toc145212053 h 2 HYPERLINK l _Toc145212054 2.回顧 5分鐘 PAGEREF _Toc145212054 h 2 HYPERLINK l _Toc145212055 3.課程知識點講解 PAGEREF _Toc145212055 h 2 HYPERLINK l _Toc145212056 3.1.HTML服務(wù)器控件簡介 45分鐘 P

2、AGEREF _Toc145212056 h 2 HYPERLINK l _Toc145212057 3.2.HtmlForm控件 20分鐘 PAGEREF _Toc145212057 h 5 HYPERLINK l _Toc145212058 3.3.HtmlInputFile控件 15分鐘 PAGEREF _Toc145212058 h 5 HYPERLINK l _Toc145212059 4.小結(jié) 3分鐘 PAGEREF _Toc145212059 h 6 HYPERLINK l _Toc145212060 5.考核點 PAGEREF _Toc145212060 h 7 HYPERLI

3、NK l _Toc145212061 6.作業(yè)答案 PAGEREF _Toc145212061 h 7 HYPERLINK l _Toc145212062 7.擴展練習(xí) PAGEREF _Toc145212062 h 8 HYPERLINK l _Toc145212063 8.學(xué)生問題匯總 PAGEREF _Toc145212063 h 8 HYPERLINK l _Toc145212064 9.教學(xué)后記 PAGEREF _Toc145212064 h 8本節(jié)目標本節(jié)中將講述如下主要內(nèi)容：HTML服務(wù)器控件簡介HTML服務(wù)器控件的公共屬性HTML服務(wù)器控件的公共事件HtmlForm控件Html

4、InputFile控件通過教學(xué)使學(xué)生熟悉HTML服務(wù)器控件及其應(yīng)用。本節(jié)重點HTML服務(wù)器控件的公共屬性HTML服務(wù)器控件的公共事件HtmlForm、HtmlInputFile控件 本節(jié)難點 授課課時2課時 教法建議目標概述 2分鐘本節(jié)主要講述HTML服務(wù)器控件及其應(yīng)用?；仡?5分鐘回顧上一節(jié)的相關(guān)知識。課程知識點講解HTML服務(wù)器控件簡介 45分鐘引入：主題：（1）HTML服務(wù)器控件的概述HTML 服務(wù)器控件提供以下功能： 可在服務(wù)器上使用熟悉的面向?qū)ο蠹夹g(shù)對其進行編程的對象模型。每個服務(wù)器控件都公開一些屬性，這些屬性使您得以在服務(wù)器代碼中通過編程操作該控件的 HTML 屬性。 提供一組事件

5、，您可以為其編寫事件處理程序，方法與在基于客戶端的窗體中大致相同，所不同的是事件處理是在服務(wù)器代碼中完成的。 在客戶端腳本中處理事件的能力。 自動維護控件狀態(tài)。在窗體到服務(wù)器往返期間，用戶在 HTML 服務(wù)器控件中輸入的值將在頁發(fā)送回瀏覽器時自動維護。 可與 HYPERLINK ms-help:/MS.VSCC.2003/MS.MSDNQTR.2003FEB.2052/vbcon/html/vboriwebformsvalidation.htm 驗證控件進行交互，便于您驗證用戶是否在控件輸入了適當?shù)男畔ⅰ?可實現(xiàn)數(shù)據(jù)綁定，將將數(shù)據(jù)綁定到一個或多個控件屬性。 支持自定義屬性?？梢詫⑷魏涡枰膶傩?/p>

6、添加到 HTML 服務(wù)器控件，頁框架將讀取并在客戶端顯示它們而不更改其任何功能。這將允許開發(fā)人員向控件添加瀏覽器特定的屬性。（2）HTML元素到服務(wù)器的轉(zhuǎn)換1手動編碼轉(zhuǎn)換通過添加 RUNAT=SERVER 屬性，HTML 元素即可轉(zhuǎn)換為服務(wù)器控件。如果要在代碼中作為成員引用該控件，則還應(yīng)當為控件分配 ID 屬性。2使用Visual Studio .NET進行轉(zhuǎn)換（3）HTML服務(wù)器控件HTML元素控件類型用途HtmlAnchor允許以編程方式訪問HTML錨元素。注：公開ServerClick事件HtmlButton允許以編程方式訪問HTML按鈕元素。此元素由HTML4.0規(guī)范定義，且只能被IE

7、4.0以上版本支持。注：公開ServerClick事件HtmlForm允許以編程方式訪問HTML表單元素。充當其他服務(wù)器控件的容器，任何要參與回傳的控件都應(yīng)包含在HtmlForm控件中。HtmlImage允許以編程方式訪問HTML圖像元素。HtmlInputButton允許以編程方式訪問button、submit和reset輸入類型的HTML輸入元素。注：公開ServerClick事件HtmlInputCheckBox允許以編程方式訪問CheckBox輸入類型的HTML輸入元素。注：公開ServerChange事件HtmlInputFile允許以編程方式訪問file輸入類型的HTML輸入元素。

8、HtmlInputHidden允許以編程方式訪問Hidden輸入類型的HTML輸入元素。注：公開ServerChange事件HtmlInputImage允許以編程方式訪問用于image輸入類型的HTML輸入元素。注：公開ServerClick事件HtmlInputRadioButton允許以編程方式訪問用于radio輸入類型的HTML輸入元素。HtmlSelect允許以編程方式訪問HTML的選擇元素注：公開ServerChange事件HtmlTable允許以編程方式訪問HTML的表元素注：HtmlTable控件不支持某些表的子元素（如、等。和HtmlTableCell允許以編程方式訪問HTML

9、表的單元格HtmlTableRow允許以編程方式訪問HTML表的行HtmlTextArea允許以編程方式訪問HTML文本區(qū)域注：公開ServerChange事件、等HtmlGenericControl允許以編程方式訪問未被HTML控件類明確表示的HTML元素。（4）HTML服務(wù)器控件的公共屬性HTML服務(wù)器控件具有一些公共屬性，下面將分別討論。1全部HTML服務(wù)器控件的公共屬性Attributes屬性：Attributes集合包含控件標記定義里的所有屬性的名稱/值對，如下代碼演示了Attributes屬性的用法。示例講解示例10.2.1Attributes屬性演示。示例10.2.2TagNam

10、e屬性演示。2所有 HTML 輸入控件共享的屬性HTML 輸入控件映射到標準 HTML 輸入元素。它們包含 type 屬性，該屬性定義它們在 Web 頁中呈現(xiàn)的輸入控件的類型。HtmlInputText、HtmlInputButton、HtmlInputCheckBox、HtmlInputImage、HtmlInputHidden、HtmlInputFile 和 HtmlInputRadioButton 控件共享下列屬性。3所有 HTML 容器控件共享的屬性HTML 容器控件映射到 HTML 元素，這些元素需要具有開始和結(jié)束標記，如 、 和 元素。HtmlTableCell、HtmlTable

11、、HtmlTableRow、HtmlButton、HtmlForm、HtmlAnchor、HtmlGenericControl、HtmlSelect 和 HtmlTextArea 控件共享下列屬性。（5）HTML服務(wù)器控件的公共事件HTML控件可以處理服務(wù)器端事件和HTML元素映射的客戶端事件，HTML服務(wù)器控件可以映射的客戶端事件有兩個：ServerClick事件：HtmlAnchor、HtmlButton、HtmlInputButton、HtmlInputImage控件可以將客戶端的Click事件映射到服務(wù)器端，使得當這4類控件被點擊時，就會觸發(fā)服務(wù)器端的ServerClick事件。Ser

12、verChange事件：HtmlInputCheckBox、HtmlInputHidden、HtmlInputRadioButton、HtmlInputText、HtmlSelect、HtmlTextArea控件可以在其值發(fā)生變化時，通過映射觸發(fā)服務(wù)器端的ServerChange事件。當這些事件被觸發(fā)時，客戶端和服務(wù)器之間將進行一次數(shù)據(jù)交換，下面以一個示例演示如何處理由客戶端映射服務(wù)器端的事件。示例講解示例10.2.3 HTML服務(wù)器控件客戶端事件觸發(fā)服務(wù)器事件示例。HtmlForm控件 20分鐘引入：主題：可以使用 HtmlForm 控件對 HTML 元素進行編程。如果要利用回傳服務(wù)，則所有

13、 Web 窗體控件都必須嵌套在 HtmlForm 控件開始和結(jié)束標記之間。如果沒有正確結(jié)束標記，ASP.NET 將無法識別該元素。該元素將被忽略或者將發(fā)生編譯錯誤。HtmlForm控件以下標簽構(gòu)成：form id=標識符 method=POST | GET action=目標頁面的URL runat=server 其他控件，輸入表單等示例講解示例10.2.4 HTML Form控件使用示例HtmlInputFile控件 15分鐘引入：主題：HtmlInputFile控件用于將文件從客戶端上傳到服務(wù)器中，HtmlInputFile控件對應(yīng)于Html元素標簽。該標簽將在頁面上顯示一個文本框和一個用

14、于查找文件的瀏覽按鈕。用戶可以通過點擊該按鈕來打開選擇文件對話框來選擇文件，選中的文件將顯示在文本框中。HtmlInputFile控件由以下標簽表示：input type=file id=標識符 maxlength=MaxFilePathLength size=WidthOfFilepathTextbox!文件路徑框的大小- postedfile=uploadedfile runat=server 示例講解示例10.2.5 HtmlInputFile使用示例。小結(jié) 3分鐘本節(jié)學(xué)習(xí)了以下主要內(nèi)容：1HTML服務(wù)器控件簡介HTML 服務(wù)器控件是 HTML 元素的一種演變，通過將 HTML 元素轉(zhuǎn)換

15、為 HTML 服務(wù)器控件，就使得HTML元素組件可以在服務(wù)器上以組件的方式出現(xiàn)，并可以通過組件的方式對其編程來創(chuàng)建Web頁面。頁面上的任意 HTML 元素都可以轉(zhuǎn)換為 HTML 服務(wù)器控件，轉(zhuǎn)換是一個只涉及幾個屬性的簡單過程。通過添加 RUNAT=SERVER 屬性，HTML 元素即可轉(zhuǎn)換為服務(wù)器控件。如果要在代碼中作為成員引用該控件，則還應(yīng)當為控件分配 ID 屬性。HTML服務(wù)器控件均屬于System.Web.UI.HtmlControls命名空間，是從HtmlControl類派生出來的。HTML服務(wù)器控件具有一些公共屬性：Attributes屬性：包含控件標記定義里的所有屬性的名稱/值對；

16、Disabled屬性：Disabled屬性用于表示該控件是否被禁用；Style屬性：獲取指定控件的Css樣式；TagName屬性：獲取HTML控件的類型；Visible屬性：用于表示控件在頁面上是否可見HTML服務(wù)器控件的公共事件ServerClick事件：將客戶端的Click事件映射到服務(wù)器端ServerChange事件：可以在其值發(fā)生變化時，通過映射觸發(fā)服務(wù)器端的相應(yīng)方法。2HtmlForm控件可以使用 HtmlForm 控件對 HTML 元素進行編程。如果要利用回傳服務(wù)，則所有 Web 窗體控件都必須嵌套在 HtmlForm 控件開始和結(jié)束標記之間。Form控件由以下標簽構(gòu)成：form

17、id=標識符 method=POST | GET action=目標頁面的URL runat=server 3HtmlInputFile控件HtmlInputFile控件用于將文件從客戶端上傳到服務(wù)器中，HtmlInputFile控件對應(yīng)于Html元素標簽。該標簽將在頁面上顯示一個文本框和一個用于查找文件的瀏覽按鈕。用戶可以通過點擊該按鈕來打開選擇文件對話框來選擇文件，選中的文件將顯示在文本框中。HtmlInputFile控件由以下標簽表示考核點考核點1：HTML服務(wù)器控件考核點2：HtmlForm、HtmlInputFile控件作業(yè)答案 1：請簡述如何將Html元素轉(zhuǎn)換為HTML服務(wù)器控件？答： 2：Html服務(wù)器控件具有哪些公共屬性，各有何用途？答： 3：Html服務(wù)器控件可以將哪幾個客戶端事件映射到服務(wù)器端？各有何用途，試舉例說明。答：4：請創(chuàng)建如圖10.2.10所示的注冊頁面RegisterU