熱點推薦:
您现在的位置: 電腦知識網 >> 操作系統 >> Windows服務器 >> 正文

從 ASP.NET 服務器控件插入客戶端腳本

2013-11-11 22:56:04  來源: Windows服務器 

  簡介
  盡管從技術角度講Microsoft? ASPNET 服務器控件的所有功能都可以在服務器端執行但通常情況下通過添加客戶端腳本可以大大增強服務器控件的可用性例如ASPNET 驗證 Web 控件可以在服務器端執行所有的驗證檢查但是對於高版本浏覽器驗證 Web 控件也會發送客戶端腳本以在客戶端進行驗證這就是說這些浏覽器的用戶可以獲得響應效果更好的動態體驗
  
  在開發 ASPNET 服務器控件時您不妨問問自己如何才能通過使用客戶端腳本來增強可用性一旦找到可行的方案其他要做的就是增強服務器控件的功能以使其發送合適的客戶端腳本
  
  ASPNET 服務器控件可以發送兩種客戶端腳本
  
  客戶端腳本塊
  客戶端 HTML 屬性
  客戶端腳本塊通常是用 JavaScript 編寫的其中通常包含在發生特定的客戶端事件時執行的函數客戶端 HTML 屬性提供將客戶端事件與客戶端腳本聯系在一起的方法例如以下的 HTML 頁面中包含了客戶端腳本塊腳本塊中包含了名為 doClick() 的函數該頁面同時還包含一個按鈕(通過 HTML 元素創建)這個按鈕的 onclick 屬性與 doClick() 函數綁定也就是說只要用戶單擊該按鈕就開始執行 doClick() 函數中的客戶端代碼在本示例中將顯示一個彈出式對話框(圖
  
 

  
是單擊Click Me!按鈕時 HTML 頁面的屏幕快照

  對於以上 HTML 頁面中的客戶端腳本有幾點值得注意首先客戶端腳本塊包含在 HTML 注釋()中之所以這樣是因為如果不將腳本塊放入 HTML 注釋中那些不能識別腳本的舊式浏覽器就會顯示 
  
  
  在這段代碼中 標記中的 onclick=displayPopup() 用於指明在單擊按鈕時JavaScript 函數 displayPopup() 應該運行
  
  RegisterStartupScript() 方法可用於添加要在加載頁面後運行的腳本塊通過這種方法添加的腳本塊位於 Web 窗體的結尾處因為必須在腳本運行前定義腳本要修改的 HTML 元素也就是說如果您要使用客戶端腳本將焦點設置到文本框必須確保文本框的 HTML 標記位於設置該文本框的焦點的腳本之前例如下面的 HTML 將顯示一個文本框並將焦點設置到該文本框
  
  相反以下 HTML 不會將焦點設置到文本框因為文本框是在腳本塊之後定義的
  
  因此RegisterStartupScript() 方法將 ; scriptBlock = scriptBlockReplace(%%POPUP_MESSAGE%% thisPopupMessage); PageRegisterStartupScript(scriptKey scriptBlock); } } } }
  
  請記住下面兩件事首先Enabled 和 PopupMessage 屬性保存在 ViewState 中這樣在回傳時這些值可以始終保持一致 其次在 OnPreRender() 方法中用於腳本塊的關鍵字是文本 intoPopupMessage: 加上控件的 UniqueID 屬性如果使用一個硬編碼的關鍵字則當頁面中有多個控件時只有第一個控件能夠注冊其腳本塊因此只顯示一個彈出式對話框通過在腳本塊關鍵字中使用 UniqueID就能保證該控件的每個實例都能獲取其腳本塊
  
  在注冊腳本塊之前代碼首先檢查三個條件
  
  沒有使用同一關鍵字注冊的腳本這當然是不可能的因為每個控件實例都應該有一個 UniqueID 屬性值但是不妨先練習使用 IsStartupScriptRegistered() 方法然後再花時間創建和注冊啟動腳本
  控件的 Enabled 屬性為 True
  頁面沒有被回傳這段代碼只允許彈出式對話框在第一次加載頁面時顯示而不是在每次回傳頁面時都顯示我們還可以增添更為靈活的功能即為該控件添加一個布爾屬性以允許用戶指定是否在回傳時也生成彈出式對話框
  如果滿足這三個條件則腳本被指定並且 PopupMessage 屬性值被插入到腳本中適當的位置最後調用 Page 屬性的 RegisterStartupScript() 方法傳入關鍵字及腳本代碼
  
  PopupGreeting 代碼可以從本文結尾處提供的下載中獲得該下載包括名為 ClientSideControlsAndTester 的 Visual Studio NET 解決方案其中包含兩個項目
  
  ClientSideControls包含 PopupGreeting 服務器控件
  ClientSideTester包括一個為測試 ClientSideControls 而設計的 ASPNET Web 應用程序
  ClientSideControls 項目編譯後的程序集名為 ClientSideControlsdll要在您自己的 ASPNET Web 應用程序中使用 PopupGreeting 服務器控件請將 ClientSideControlsdll 文件添加到您的 Web 應用程序的引用中然後在設計器中右鍵單擊 Toolbox(工具箱)並選擇Add/Remove Items (添加/刪除項)再次選擇 ClientSideControlsdll 文件這樣就向 Toolbox(工具箱)中添加了名為 PopupGreeting 的新項然後您可以從 Toolbox(工具箱)將該控件拖到設計器中
  
  圖 顯示了 PopupGreeting 控件添加到 Toolbox(工具箱)並添加到設計器後Visual Studio NET 的屏幕快照Toolbox(工具箱)中的 PopupGreeting 控件用紅色線圈出設計器中的 PopupGreeting 輸出用藍色線圈出在屏幕快照右側的Properties(屬性)窗格中可以查看 PopupGreeting 的屬性
  
 

  
PopupGreeting 服務器控件已添加到 ASPNET Web 窗體頁面

  發送 ASPNET 服務器 Web 控件的 HTML 屬性
  如上所述有兩種方法可以通過服務器控件發送客戶端腳本
  
  通過使用客戶端腳本塊
  通過 HTML 元素屬性
  在上一節中我們探討了如何使用 Page 類的 RegisterStartupScript() 和 RegisterClientScriptBlock() 方法向 ASPNET Web 頁面添加客戶端腳本塊在最後這一節我們了解如何將 HTML 元素屬性添加到服務器控件的 HTML 元素
  
  在開始之前請注意這種方法通常只適用於從 SystemWebUIWebControlsWebControl 類導出的服務器控件因為從這個類導出的控件會發送某些 HTML 元素不發送 HTML 元素的服務器控件(如上一節中的 PopupGreeting 服務器控件)則不必寫出 HTML 元素屬性因為這些控件運行時不會寫出 HTML 元素
  
  WebControl 類包含一個將 HTML 元素屬性添加到由 Web 控件發出的 HTML 元素的方法該方法稱為 AddAttributesToRender()它只有一個輸入參數即 HtmlTextWriter 的實例要向 Web 控件添加 HTML 屬性您可以使用 HtmlTextWriter 的以下兩個方法之一
  
  AddAttribute()
  AddStyleAttribute()
  AddAttribute() 方法用於將 titleclassstyle 和 onclick 等 HTML 屬性添加到 HTML 元素AddStyleAttribute() 用於將樣式設置添加到 HTML 元素如 backgroundcolorcolor 和 fontsize 等
  
  AddAttribute() 有幾個重載窗體但在代碼中我們將使用以下窗體AddAttribute(HtmlTextWriterAttribute value)第一個參數即 HtmlTextWriterAttribute應該是 HtmlTextWriterAttribute 枚舉的成員該枚舉包含像 AlignBgcolorClass 和 Onclick 等項您可以在 NET Framework Class LibraryHtmlTextWriterAttribute Enumeration 中找到完整的列表value 輸入參數用於指定分配給特定 HTML 屬性的值最後如果您想添加一個 HtmlTextWriterAttribute 枚舉中未定義的 HTML 屬性可以使用 AddAttribute() 方法的替代形式 AddAttribute(attributeName value)其中的 attributeName 和 value 均為字符串
  
  為了運用該信息我們創建一個作為確認按鈕的服務器 Web 控件確認按鈕是一種提交按鈕當用戶單擊此按鈕時將顯示一個彈出式對話框詢問用戶是否確定要繼續操作用戶可以單擊取消不提交窗體此項功能對用於刪除信息的按鈕特別有用因為最終用戶(或網站管理員)可能會在無意中單擊鼠標刪除數據庫中的條目如果沒有機會取消將是非常令人煩惱的事
  
  為了減少工作量我們從 SystemWebUIWebControlsButton 類中導出 ConfirmButton Web 控件因為這個類本身已完成了涉及呈現提交按鈕的所有繁重工作在導出的類中我們只需添加一個屬性這樣用戶可以指定確認消息然後覆蓋按鈕的 AddAttributesToRender() 方法並添加一個屬性以處理客戶端事件 onclick
  
  首先在 Visual Studio NET 中創建一個新的 Web Control Library(Web 控件庫)項目或者在 ClientSideControls 項目中添加一個新的 Web Custom Control(Web 自定義控件)ConfirmButton 類的完整源代碼如下所示
  
  using System; using SystemWebUI; using SystemWebUIWebControls; using SystemComponentModel; namespace ClientSideControls { /// /// ConfirmButton 的摘要描述 /// [DefaultProperty(Text) ToolboxData(<{0}:ConfirmButton runat=server>)] public class ConfirmButton : Button { [Bindable(true) Category(Appearance) DefaultValue()] public string PopupMessage { get { // 檢查 ViewState 中是否存在該項目 object popupMessage = thisViewState[PopupMessage]; if (popupMessage != null) return thisViewState[PopupMessage]ToString(); else return Are you sure you want to continue?; } set { // 指定 ViewState 變量 ViewState[PopupMessage] = value; } } protected override void AddAttributesToRender(HtmlTextWriter writer) { baseAddAttributesToRender(writer); string script = @return confirm(%%POP
From:http://tw.wingwit.com/Article/os/fwq/201311/10272.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.