ASP.NET服務器控件發送腳本(4)

     發送ASP.net服務器Web控件的HTML屬性
  
  　　如上所述，有兩種方法可以通過服務器控件發送客戶端腳本：
  
  　　　通過使用客戶端腳本塊
  
  　　　通過 HTML 元素屬性
  
  　　在上面我們探討了如何使用 Page 類的 ReGISterStartupScript() 和 RegisterClientScriptBlock() 方法向 ASP.NET Web 頁面添加客戶端腳本塊。在最后這一節，我們了解如何將 HTML 元素屬性添加到服務器控件的 HTML 元素。
  
  　　在開始之前，請注意這種方法通常只適用于從 System.Web.UI.WebControls.WebControl 類導出的服務器控件，因為從這個類導出的控件會發送某些 HTML 元素。不發送 HTML 元素的服務器控件（如上一節中的 PopupGreeting 服務器控件），則不必寫出 HTML 元素屬性，因為這些控件運行時不會寫出 HTML 元素。
  
  　　WebControl 類包含一個將 HTML 元素屬性添加到由 Web 控件發出的 HTML 元素的方法。該方法稱為 AddAttributesToRender()，它只有一個輸入參數，即 HtmlTextWriter 的實例。要向 Web 控件添加 HTML 屬性，您可以使用 HtmlTextWriter 的以下兩個方法之一：
  
  
  AddAttribute()
  AddStyleAttribute()
  
  　　AddAttribute()方法用于將title、class、style和onclick等HTML屬性添加到HTML元素。AddStyleAttribute() 用于將樣式設置添加到 HTML 元素，如 background-color、color 和 font-size 等。
  
  　　AddAttribute() 有幾個重載窗體，但在代碼中，我們將使用以下窗體：AddAttribute(HtmlTextWriterAttribute, value)。第一個參數，即 HtmlTextWriterAttribute，應該是 HtmlTextWriterAttribute 枚舉的成員。該枚舉包含像 Align、Bgcolor、Class 和 Onclick 等項。您可以在 .NET Framework Class Library，HtmlTextWriterAttribute Enumeration 中找到完整的列表。value 輸入參數用于指定分配給特定 HTML 屬性的值。最后，如果您想添加一個 HtmlTextWriterAttribute 枚舉中未定義的 HTML 屬性，可以使用 AddAttribute() 方法的替代形式 AddAttribute(attributeName, value)，其中的 attributeName 和 value 均為字符串。
  
  　　為了運用該信息，我們創建一個作為確認按鈕的服務器 Web 控件。確認按鈕是一種提交按鈕，當用戶單擊此按鈕時，將顯示一個彈出式對話框，詢問用戶是否確定要繼續操作。用戶可以單擊“取消”，不提交窗體。此項功能對用于刪除信息的按鈕特別有用，因為最終用戶（或網站管理員）可能會在無意中單擊鼠標刪除數據庫中的條目，如果沒有機會取消，將是非常令人煩惱的事。
  
  　　為了減少工作量，我們從 System.Web.UI.WebControls.Button 類中導出 ConfirmButton Web 控件，因為這個類本身已完成了涉及呈現提交按鈕的所有繁重工作。在導出的類中，我們只需添加一個屬性，這樣用戶可以指定確認消息，然后覆蓋按鈕的 AddAttributesToRender() 方法，并添加一個屬性以處理客戶端事件 onclick。
  
  　　首先，在 Visual Studio .NET 中創建一個新的 Web Control Library（Web 控件庫）項目，或者在 ClientSideControls 項目中添加一個新的 Web Custom Control（Web 自定義控件）。ConfirmButton 類的完整源代碼如下所示：
  
  
  using System;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using System.ComponentModel;
  
  namespace ClientSideControls
  {
  /// ＜summary＞
  /// ConfirmButton 的摘要描述。
  /// ＜/summary＞
  [DefaultProperty("Text"),
  ToolboxData("＜{0}:ConfirmButton runat=server＞＜/{0}:ConfirmButton＞")]
  public class ConfirmButton : Button
  {
  [Bindable(true),
  Category("Appearance"),
  DefaultValue("")]
  public string PopupMessage
  {
  get
  {
  // 檢查 ViewState 中是否存在該項目
  object popupMessage = this.ViewState["PopupMessage"];
  if (popupMessage != null)
  return this.ViewState["PopupMessage"].ToString();
  else
  return "Are you sure you want to continue?";
  }
  
  set
  {
  // 指定 ViewState 變量
  ViewState["PopupMessage"] = value;
  }
  }
  
  
  protected override void AddAttributesToRender(HtmlTextWriter writer)
  {
  base.AddAttributesToRender(writer);
  
  string script = @"return confirm(""%%POPUP_MESSAGE%%"");";
  script = script.Replace("%%POPUP_MESSAGE%%",
  this.PopupMessage.Replace("\"", "\\\""));
  
  writer.AddAttribute(HtmlTextWriterAttribute.Onclick, script);
  }
  }
  }
  
  　　首先要注意的是，ConfirmButton 類是從 Button 類導出的。由于 Button 類已包含 Button Web 控件使用的所有屬性和方法，因此我們所做的只是添加屬性和方法，以在用戶單擊按鈕時顯示一個確認對話框?，F在我們需要一個屬性，即 PopupMessage，它是要在確認彈出式對話框中顯示的消息。默認情況下，這條消息是“Are you sure you want to continue?”（您確定要繼續嗎？）如果使用 ConfirmButton 來確認刪除，可能需要將該消息更改為“This action will permanently delete the selected item. Are you sure you want to do this?”（此操作將永久刪除所選項。您確定要繼續嗎？）
  
  　　我們只需覆蓋一個方法，即 AddAttributesToRender()。在此方法中，我們只要構建當觸發 ＜input＞ 元素的 onclick 事件時要執行的客戶端 JavaScript，然后通過傳入的 HtmlTextWriter 對象的 AddAttribute() 方法添加這段 JavaScript。關于這個方法，有一點要注意，必須將 PopupMessage 屬性值中的所有雙引號實例替換為轉義雙引號（即 \"）。另外還要注意，默認情況下，AddAttribute() 會對第二個參數中的字符進行 HTML 編碼。也就是說，ASP.NET Web 頁面中如果包含 PopupMessage 屬性被設置為“Do you want to continue?”（要繼續嗎？）的 ConfirmButton，該頁面將發送以下 HTML 標記：
  
  ＜input type="submit" name="ConfirmButton1"
  value="Click Me!" id="ConfirmButton1" onclick="return confirm
  ("Do you want to continue?");" /＞
  
  　　如果您不熟悉 JavaScript 的 confirm(string) 函數，那么請您注意，該函數只接受一個字符串參數，并顯示一個帶有特定字符串的模式對話框。該對話框中包含兩個按鈕：“確定”和“取消”。如果單擊“確定”，confirm() 函數返回 True，否則返回 False。請注意，onclick 事件將返回 confirm() 函數調用的結果。當通過單擊提交按鈕來提交表單時，如果提交按鈕的 onclick 事件返回 False，則表單未被提交。因此，只有在用戶確認后，可以使用 confirm() 函數提交表單。有關 confirm() 的詳細信息，請參閱 ASP Warrior 網站中的 Javascript Confirm Form Submission。
  
  
  
  圖3：操作中的 ConfirmButton
  
  　　ConfirmButton 在按鈕的 onclick 事件處理程序中使用了內嵌的 JavaScript，還可以在 ConfirmButton 的 OnPreRender() 方法的客戶端腳本塊中創建一個函數，然后調整 onclick 屬性以調用該函數。
  
  　　小結
  
  　　在本文中，我們探討了兩種通過 ASP.NET 服務器控件插入客戶端腳本的方法。第一種方法是使用 Page 類的 RegisterStartupScript() 和 RegisterClientScriptBlock() 方法插入客戶端腳本塊。第二種方法是向 HTML 元素的屬性添加客戶端腳本。后者通過覆蓋 Web 服務器控件的 AddAttributesToRender() 方法，并使用 HtmlTextWriter 的 AddAttribute() 方法來完成。
  
  　　我們還在文中介紹了兩個簡單的服務器控件，它們都利用了客戶端腳本來改進其功能。PopupGreeting 控件在頁面首次加載時顯示一個模式彈出式對話框，ConfirmButton Web 控件在用戶單擊按鈕提交表單時，提示用戶進行確認。
  
  　　您可以在自己的服務器控件中插入客戶端腳本，這將顯著改善用戶體驗。本文提供的兩個服務器控件相對比較簡單，在可用性和獨創性上沒有什么突出之處。MetaBuilders.com 中展示了很多利用從 ASP.NET 服務器控件中插入客戶端腳本而實現的功能，這些功能會給您留下深刻印象。在 MetaBuilders.com，您可以找到一些服務器控件，它們有的可以自動將焦點添加到文本框，有的可以在兩個下拉列表之間傳遞條目，有的可以向下拉列表中添加或刪除條目，還有的可以在一系列下拉列表中顯示父子關系的數據，等等。最大的好處是，這些控件是免費的，并包括完整的源代碼。
  
  

原文轉自：http://www.kjueaiud.com