開發(fā)基于ajax和控件技術(shù)的web應(yīng)用系統(tǒng)tp02

1、第二章第二章我的控件我做主（一）我的控件我做主（一） 回顧與作業(yè)點評ASP.NET 運行時是怎樣的運行時是怎樣的?實現(xiàn)圖片實現(xiàn)圖片數(shù)字數(shù)字水印的兩種方式和實現(xiàn)思路？水印的兩種方式和實現(xiàn)思路？預(yù)習(xí)檢查用戶控件的擴展名是什么用戶控件的擴展名是什么？Render() 方法有什么作用方法有什么作用？本章任務(wù)實現(xiàn)登錄功能的用戶控件實現(xiàn)登錄功能的用戶控件 實現(xiàn)實現(xiàn) “編輯推薦編輯推薦”和和“熱賣排行熱賣排行”功能功能 實現(xiàn)自定義擴展文本框控件實現(xiàn)自定義擴展文本框控件 本章目標掌握用戶控件的創(chuàng)建、使用掌握用戶控件的創(chuàng)建、使用掌握暴露用戶控件的屬性掌握暴露用戶控件的屬性掌握自定義控件的概念掌握自定義控件的概念

2、了解服務(wù)器控件的生命周期、呈現(xiàn)過程了解服務(wù)器控件的生命周期、呈現(xiàn)過程會從服務(wù)器控件派生自定義控件會從服務(wù)器控件派生自定義控件 搜狐首頁搜狐首頁搜狐新聞頁搜狐新聞頁頁面內(nèi)容的重用用戶控件用戶控件支持頁面代碼的重用支持頁面代碼的重用用戶控件用戶控件是一種組合控件是一種組合控件封裝獨立的功能封裝獨立的功能像頁面一樣方便的編輯像頁面一樣方便的編輯像控件一樣使用拖拽方式使用像控件一樣使用拖拽方式使用后綴名為后綴名為.ascx作用作用頁面代碼的重用頁面代碼的重用 母版頁提供整個頁面級的風(fēng)格控制和代碼重用；母版頁提供整個頁面級的風(fēng)格控制和代碼重用； 用戶控件提供小范圍的風(fēng)格控制和更靈活的代碼重用用戶控件提供

3、小范圍的風(fēng)格控制和更靈活的代碼重用 什么是用戶控件創(chuàng)建和使用用戶控件的步驟創(chuàng)建和使用用戶控件的步驟1、新建用戶控件新建用戶控件2、在用戶控件上放置相關(guān)的在用戶控件上放置相關(guān)的 Web 控件控件3、編寫用戶控件的后臺代碼編寫用戶控件的后臺代碼4、在其他頁面使用用戶控件在其他頁面使用用戶控件創(chuàng)建用戶控件演示示例演示示例1：登錄的用戶控件：登錄的用戶控件Control指令指令后臺代碼后臺代碼類似于類似于Page指令指令 public partial class UserControls_UserLogin : System.Web.UI.UserControl protected void Page

4、_Load(object sender, EventArgs e) .也有也有Page_Load事件事件 用戶控件的關(guān)鍵代碼在頁面中注冊和使用在頁面中注冊和使用在頁面中注冊控件在頁面中注冊控件 將用戶控件放入頁面指定位置即可將用戶控件放入頁面指定位置即可 使用用戶控件在在web.config 中注冊中注冊 在頁面中使用控件在頁面中使用控件 使用用戶控件的另外一種方式在頁面中使用在頁面中使用 練習(xí)實現(xiàn)登錄功能的用戶控件 需求說明需求說明將將“第三波書店第三波書店”中用戶登錄的功能使用用戶控件中用戶登錄的功能使用用戶控件技術(shù)實現(xiàn)技術(shù)實現(xiàn) 分別使用兩種方式注冊用戶控件分別使用兩種方式注冊用戶控件完成

5、時間：完成時間：20分鐘分鐘共性問題集中講解n常見調(diào)試問題及解決辦法常見調(diào)試問題及解決辦法n代碼規(guī)范問題代碼規(guī)范問題共性問題集中講解共性問題集中講解如何在使用用戶控件時，可自定義設(shè)置顯示？如何在使用用戶控件時，可自定義設(shè)置顯示？可配置的用戶控件用戶控件是一個類用戶控件是一個類給用戶控件定義給用戶控件定義“標題標題”，“顯示數(shù)量顯示數(shù)量”屬性屬性在使用頁面中設(shè)置屬性在使用頁面中設(shè)置屬性可配置的用戶控件演示示例演示示例2：可配置界面的書籍排行：可配置界面的書籍排行用戶控件關(guān)鍵代碼用戶控件關(guān)鍵代碼暴露用戶控件的屬性 private string title = ;/標題標題 private int

6、num = 4;/個數(shù)個數(shù) public string Title get. set . public int Num get. set . 默認值默認值 公開的屬性公開的屬性 protected void Page_Load(object sender, EventArgs e) if (!Page.IsPostBack) this.lblTitle.Text = this.Title; this.rptRankings.DataSource=new BookManager().GetRankings(this.Num); this.rptRankings.DataBind(); 配置屬性配

7、置屬性練習(xí)實現(xiàn)“編輯推薦”版塊功能 需求說明需求說明實現(xiàn)實現(xiàn)“第三波書店第三波書店”首頁中首頁中“編輯推薦編輯推薦”版塊功能版塊功能使用用戶控件技術(shù)實現(xiàn)，版塊標題可配置使用用戶控件技術(shù)實現(xiàn)，版塊標題可配置顯示效果類似顯示效果類似“書籍排行榜書籍排行榜” 完成時間：完成時間：20分鐘分鐘共性問題集中講解n常見調(diào)試問題及解決辦法常見調(diào)試問題及解決辦法n代碼規(guī)范問題代碼規(guī)范問題共性問題集中講解共性問題集中講解用戶控件可以包含其他用戶控件用戶控件可以包含其他用戶控件可以像頁面一樣，在用戶控件中使用其他用戶控件可以像頁面一樣，在用戶控件中使用其他用戶控件但用戶控件中不可包含自己，也不能循環(huán)嵌套但用戶控件

8、中不可包含自己，也不能循環(huán)嵌套用戶控件用戶控件1用戶控件用戶控件2用戶控件用戶控件1注意事項2-1用戶控件不可以單獨訪問用戶控件不可以單獨訪問后綴名后綴名.ascx是被禁止直接訪問的類型是被禁止直接訪問的類型 注意事項2-2用戶控件與頁面的區(qū)別用戶控件與頁面的區(qū)別用戶控件與Page比比 較較 用戶控件用戶控件 頁頁 面面 擴展名擴展名 ascx aspx 指令指令 Control Page 繼承繼承 System.Web.UI.UserControl System.Web.UI.Page 包含包含 可包含控件和其他用戶控件，也可可包含控件和其他用戶控件，也可以被其他用戶控件和頁面包含以被其他用

9、戶控件和頁面包含 可以包含控件和所有用戶控件，可以包含控件和所有用戶控件，但是不可以被其他頁面包含但是不可以被其他頁面包含 標簽標簽 不能包含不能包含、等等HTML標簽標簽 可包含所有可包含所有HTML標簽標簽 直接直接訪問訪問 不可以不可以 可以可以 用戶控件編碼使用哪個標記？用戶控件編碼使用哪個標記？用戶控件和母版頁分別在哪種情況下使用？用戶控件和母版頁分別在哪種情況下使用？可否在用戶控件中訪問外部頁面的控件？為什可否在用戶控件中訪問外部頁面的控件？為什么？么？用戶控件與Page小結(jié)如何把用戶控件應(yīng)用到其他項目中？如何把用戶控件應(yīng)用到其他項目中？用戶控件的問題需要部署的文件需要部署的文件源

10、代碼，如源代碼，如ascx 文件文件、cs文件文件(dll)資源文件，如資源文件，如JavaScript、圖片、樣式表圖片、樣式表 部署用戶控件是一件麻煩的事情，因此部署用戶控件是一件麻煩的事情，因此用戶控件適合在單個項目中使用用戶控件適合在單個項目中使用 部署部署自定義控件自定義控件是一件簡單的事情，一般只需要部署一個是一件簡單的事情，一般只需要部署一個DLL ASP.NET 自定義控件自定義控件(Custom Control)是是編譯編譯的服務(wù)器端控件的服務(wù)器端控件，它將，它將用戶界面用戶界面和和其它功能其它功能都都封裝封裝到可復(fù)用的包中到可復(fù)用的包中(dll)我們使用過的自定義控件我們使

11、用過的自定義控件驗證碼控件驗證碼控件FCKeditor(非常復(fù)雜）非常復(fù)雜）什么是自定義控件自定義控件和用戶控件的區(qū)別自定義控件和用戶控件的區(qū)別用戶控件與Page比比 較較 用戶控件用戶控件 自定義控件自定義控件 部署部署部署大量文件，麻煩部署大量文件，麻煩一般部署一般部署dll，簡單，簡單代碼組成代碼組成 分為前置頁面和后置代碼分為前置頁面和后置代碼 全部是代碼，一次編譯為全部是代碼，一次編譯為dll開發(fā)環(huán)境開發(fā)環(huán)境不會出現(xiàn)在工具箱中不會出現(xiàn)在工具箱中，有限的有限的設(shè)置時支持設(shè)置時支持會出現(xiàn)在工具箱中會出現(xiàn)在工具箱中，很強的很強的設(shè)置時支持設(shè)置時支持基類基類System.Web.UI. Us

12、erControl或其它用戶控件或其它用戶控件System.Web.UI. Control等等或其它自定義控件或其它自定義控件開發(fā)方式開發(fā)方式拖拽實現(xiàn)頁面拖拽實現(xiàn)頁面+編碼實現(xiàn)事件編碼實現(xiàn)事件相應(yīng)相應(yīng)全部編碼實現(xiàn)全部編碼實現(xiàn)自定義控件和用戶控件操作演示：開發(fā)第一個自定義控件操作演示：開發(fā)第一個自定義控件關(guān)鍵代碼展示DefaultProperty(Text)ToolboxData()public class FirstServerControl: WebControl Bindable(true) Category(Appearance) DefaultValue() Localizable(t

13、rue) public string Text get. set. protected override void RenderContents(HtmlTextWriter output) output.Write(Text); 屬性屬性 呈現(xiàn)呈現(xiàn)頁面內(nèi)容頁面內(nèi)容特性，提供設(shè)計時支特性，提供設(shè)計時支持持特性，提供設(shè)計時支特性，提供設(shè)計時支持持自定義控件出現(xiàn)在工具箱中自定義控件出現(xiàn)在工具箱中在頁面中使用自定義控件在頁面中使用自定義控件用戶控件與Page使用自定義控件 在在web.config 中注冊自定義控件中注冊自定義控件回顧：ASP.NET 頁生命周期 Init LoadControl e

14、vents 驗證驗證Unload Render RequestResponse頁面初始化頁面初始化頁面被加載頁面被加載服務(wù)器控件服務(wù)器控件進行驗證進行驗證控件事件控件事件頁面顯示頁面顯示頁面卸載頁面卸載用戶控件與Page服務(wù)器控件生命周期Web Forms 中頁面是通過控件呈現(xiàn)出來的中頁面是通過控件呈現(xiàn)出來的用戶控件與Page頁面和控件的關(guān)系頁面頁面用戶控件用戶控件1服務(wù)器控件服務(wù)器控件1用戶控件用戶控件2服務(wù)器控件服務(wù)器控件2服務(wù)器控件服務(wù)器控件n服務(wù)器控件服務(wù)器控件2服務(wù)器控件服務(wù)器控件21服務(wù)器控件服務(wù)器控件22用戶控件與Page服務(wù)器控件呈現(xiàn)protected virtual void

15、 Render(HtmlTextWriter writer) /呈現(xiàn)自身的內(nèi)容呈現(xiàn)自身的內(nèi)容 RenderChildren(writer); protected virtual void RenderChildren(HtmlTextWriter writer) foreach(Control c in Controls) c.RenderControl(writer); public virtual void RenderControl(HtmlTextWriter writer) if(Visible) Render(writer); 遞歸的方式呈現(xiàn)所有控件遞歸的方式呈現(xiàn)所有控件3個方法在

16、所有控件基個方法在所有控件基類類Control 類中定義類中定義回顧：Web控件System.Web.UI.Control System.Object HtmlControl WebControl DataSourceControl CompositeControl Button Label CheckBox BaseDataList BaseDataBoundControl Web控件關(guān)系圖控件關(guān)系圖用戶控件與Page自定義控件基類的選擇實現(xiàn)自定義控件基類的選擇實現(xiàn)自定義控件基類的選擇繼承自繼承自 System.Web.UI.Control最靈活的方式最靈活的方式繼承自繼承自 System.

17、Web.UI.WebControls. WebControl需要生成可視化的需要生成可視化的HTML元素元素繼承自現(xiàn)有控件，如繼承自現(xiàn)有控件，如TextBox、Button等等擴展現(xiàn)有控件的功能擴展現(xiàn)有控件的功能控件的呈現(xiàn)方法protected override void Render(HtmlTextWriter writer) this.RenderBeginTag(writer);/呈現(xiàn)開始標記呈現(xiàn)開始標記 this.RenderContents(writer); /呈現(xiàn)內(nèi)容呈現(xiàn)內(nèi)容 this.RenderEndTag(writer); /呈現(xiàn)結(jié)束標記呈現(xiàn)結(jié)束標記 protected i

18、nternal virtual void Render(HtmlTextWriter writer) this.RenderChildren(writer); Control 類類Render() 的定義的定義繼承繼承Control 可以重寫可以重寫Render( )方法方法WebControl 類類Render() 的定義的定義繼承繼承WebControl 可以重寫可以重寫Render( )和和RenderContents()繼承自現(xiàn)有控件也可以重寫繼承自現(xiàn)有控件也可以重寫Render( )方法方法用戶控件與Page文本框控件如何實現(xiàn)以下功能的擴展文本框控件？如何實現(xiàn)以下功能的擴展文本框控件

19、？提供輸入大寫字母和貨幣兩種驗證模式提供輸入大寫字母和貨幣兩種驗證模式驗證非零正整數(shù)，在驗證非零正整數(shù)，在TextBox 后輸出后輸出“元元”驗證輸入大寫字母，在驗證輸入大寫字母，在TextBox后輸出后輸出“！”輸入錯誤，提示，清空輸入框輸入錯誤，提示，清空輸入框用戶控件與Page文本框控件實現(xiàn)擴展文本框控件的基本思路實現(xiàn)擴展文本框控件的基本思路繼承繼承TextBox 控件控件使用腳本實現(xiàn)客戶端驗證使用腳本實現(xiàn)客戶端驗證輸出錯誤，提示，清空輸入框輸出錯誤，提示，清空輸入框定義屬性提供兩種驗證模式定義屬性提供兩種驗證模式演示示例演示示例3：擴展文本框控件：擴展文本框控件用戶控件與Page在自定

20、義控件中使用腳本1、創(chuàng)建腳本文件并實現(xiàn)相關(guān)代碼創(chuàng)建腳本文件并實現(xiàn)相關(guān)代碼2、嵌入資源嵌入資源3、定義元數(shù)據(jù)文件定義元數(shù)據(jù)文件4、注冊腳本注冊腳本assembly: WebResource(BookShopControls.js.Validate.js, text/javascript)namespace BookShopControlsprotected override void OnPreRender(EventArgs e) base.OnPreRender(e); Page.ClientScript.RegisterClientScriptResource( this.GetType(

21、), BookShopControls.js.Validate.js);用戶控件與Page實現(xiàn)控件的屬性控件的屬性控件的屬性控件的呈現(xiàn)控件的呈現(xiàn)控件的客戶端屬性控件的客戶端屬性private validateType _validateType;public validateType ValidateType set this._validateType = value; get return this._validateType; public enum validateType NoZeroInteger = 1, /非零正整數(shù)非零正整數(shù) BigChar = 2 /只能輸入大寫字母只能輸入

22、大寫字母protected override void Render(HtmlTextWriter writer) base.Render(writer);/輸出文本框輸出文本框 if (this.ValidateType = validateType.NoZeroInteger) writer.Write(元元); else if (this.ValidateType = validateType.BigChar) writer.Write(!); protected override void AddAttributesToRender( HtmlTextWriter writer) ba

23、se.AddAttributesToRender(writer);/保留父類的屬性保留父類的屬性 if (this.ValidateType = validateType.NoZeroInteger | this.ValidateType = validateType.BigChar) writer.AddAttribute(HtmlTextWriterAttribute.Onchange, checkNoZeroInteger(this, + this.ValidateType + );設(shè)計時設(shè)計時支持支持即控件使用時在即控件使用時在Visual Studio 中可中可視化配置能力的支持視化配置能力的支持常用的設(shè)計時屬性常用的設(shè)計時屬性用戶控件與Page自定義控件設(shè)計時支持屬性名稱屬性名稱應(yīng)用位置應(yīng)用位置 說說 明明Browsable 屬性、事件屬性、事件 是否應(yīng)該顯示在屬性窗口中是否應(yīng)該顯示在屬性窗口中 Category 屬性、事件屬性、事件在屬性窗口中進行分組顯示時的類別在屬性窗口中進行分組顯示時的類別 Description 屬性、事件屬性、事件文字說明文字說明 DesignOn