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 控件使用的所有属性和方法，因此我们所做的只是添加属性和方法，以在用户单击按钮时显示一个确认对话框。现在我们需要一个属性，即 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" οnclick="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，您可以找到一些服务器控件，它们有的可以自动将焦点添加到文本框，有的可以在两个下拉列表之间传递条目，有的可以向下拉列表中添加或删除条目，还有的可以在一系列下拉列表中显示父子关系的数据，等等。最大的好处是，这些控件是免费的，并包括完整的源代码。