| 适用于： Microsoft® ASP.NET 前提条件：本文假设读者熟悉 ASP.NET。 难度： 2 摘要：尽管从技术角度讲，ASP.NET 服务器控件的所有功能都可以在服务器端执行，但通常情况下通过添加客户端脚本可以大大增强服务器控件的可用性。本文将探讨服务器控件发送客户端脚本的两种方法，还将构建两个使用这些技术的服务器控件： 下载 InjectingClientSideScript.msi。 目录简介 尽管从技术角度讲，Microsoft® ASP.NET 服务器控件的所有功能都可以在服务器端执行，但通常情况下通过添加客户端脚本可以大大增强服务器控件的可用性。例如，ASP.NET 验证 Web 控件可以在服务器端执行所有的验证检查。但是，对于高版本浏览器，验证 Web 控件也会发送客户端脚本，以在客户端进行验证。这就是说，这些浏览器的用户可以获得响应效果更好的动态体验。 在开发 ASP.NET 服务器控件时，您不妨问问自己，如何才能通过使用客户端脚本来增强可用性。一旦找到可行的方案，其他要做的就是增强服务器控件的功能，以使其发送合适的客户端脚本。 ASP.NET 服务器控件可以发送两种客户端脚本：
客户端脚本块通常是用 JavaScript 编写的，其中通常包含在发生特定的客户端事件时执行的函数。客户端 HTML 属性提供将客户端事件与客户端脚本联系在一起的方法。例如，以下的 HTML 页面中包含了客户端脚本块，脚本块中包含了名为 <html>
<body>
<form>
<script language="JavaScript">
<!--
function doClick() {
alert("You clicked me!");
}
// -->
</script>
<input type="button" onclick="doClick()" value="Click Me!" />
</form>
</body>
</html>
图 1 是单击“Click Me!”按钮时 HTML 页面的屏幕快照。
图 1：单击“Click Me!”按钮时显示的弹出式对话框 对于以上 HTML 页面中的客户端脚本，有几点值得注意。首先，客户端脚本块包含在 HTML 注释（ 如果您对客户端脚本不是很熟悉，alert(string) 函数的作用就是显示一个模式弹出式对话框，对话框中包含的消息由 string 参数指定。所有 HTML 元素都有若干个可以绑定一段客户端 JavaScript 代码的客户端属性（例如， 在本文中，我们将学习如何在 ASP.NET 服务器控件中发送客户端脚本块和 HTML 元素属性。我们首先讨论如何使用 System.Web.UI.Page 类包含的两个方法可以将客户端脚本代码发送到由 ASP.NET Web 页面提供的 HTML 中：
这两个方法都接受两个字符串作为输入。第二个参数 script 是要插入到页面中的客户端脚本，包括 这两个方法唯一的不同之处在于从“何处”发送脚本块。 为什么会有两种不同的方法来发送客户端脚本？要更好地了解这一点，我们必须首先了解，客户端脚本可以分为两类：一类是在加载页面后立即运行的代码，一类是在发生某些客户端事件时才运行的代码。前者的常见示例是将焦点设置到文本框的客户端代码。例如，当您访问 Google 时，在页面加载后就会执行一小段客户端代码，以自动将焦点设置到搜索文本框。 以下是后一类代码（为响应客户端事件而运行的代码）的示例。具体而言，在该示例中，单击按钮时将显示一个弹出式对话框： <html>
<body>
<form>
<script language="JavaScript">
<!--
function displayPopup() {
alert("Hello, world.");
}
// -->
</script>
<input type="button" value="Click Me!" onclick="displayPopup()" />
</form>
</body>
</html>
在这段代码中，
<input type="text" id="myTextBox" />
<script language="JavaScript">
<!--
document.getElementById("myTextBox").focus();
// -->
</script>
相反，以下 HTML 不会将焦点设置到文本框，因为文本框是在脚本块“之后”定义的： <script language="JavaScript">
<!--
document.getElementById("myTextBox").focus();
// -->
</script>
<input type="text" id="myTextBox" />
因此，
除
如上所述，在使用 要了解如何使用这两个方法，可以看一看 ASP.NET 验证 Web 控件，如 RequiredFieldValidator、RegularExpressionValidator 等等。这些控件都会用到一个常用的验证 JavaScript 文件 ( 接下来要考虑的是，如果一个 ASP.NET Web 页面中包含多个验证 Web 控件，会出现什么情况呢？所有这些 Web 控件都要使用相同的关键字发送相同的脚本块。如果使用这个关键字调用两次 这时就应该使用 因此，每次构建客户端脚本时，应该首先调用 请记住， this.Page.RegisterClientScriptBlock(key, script); 通常，添加客户端脚本块这个任务会使用 让我们创建一个只显示客户端弹出式对话框的 ASP.NET 服务器控件。此示例将说明构建一个发送客户端脚本的控件是很容易的。 首先，在 Microsoft® Visual Studio® .NET 中创建一个新的 Web Control Library（Web 控件库）项目。这将创建一个只有一个类的新项目，这个类从 大多数内置的 ASP.NET 服务器控件都会发送一个 HTML 元素。例如，TextBox Web 控件发送一个 既然我们要创建的服务器控件不可见（它只是发送一个显示弹出式控件的客户端脚本块），这个控件最好从 这个控件只需要两个属性：
除了这两种属性之外，我们需要覆盖 using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
namespace ClientSideScript
{
/// <summary>
/// WebCustomControl1 的摘要描述。
/// </summary>
[DefaultProperty("Text"),
ToolboxData("<{0}:PopupGreeting runat=server></{0}:PopupGreeting>")]
public class PopupGreeting : System.Web.UI.Control
{
[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 "Welcome to my Web site!";
}
set
{
// 指定 ViewState 变量
ViewState["PopupMessage"] = value;
}
}
[Bindable(true),
Category("Appearance"),
DefaultValue("")]
public bool Enabled
{
get
{
// 检查 ViewState 中是否存在该项目
object enabled = this.ViewState["Enabled"];
if (enabled != null)
return (bool) this.ViewState["Enabled"];
else
return true;
}
set
{
// 指定 ViewState 变量
ViewState["Enabled"] = value;
}
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
string scriptKey = "intoPopupMessage:" + this.UniqueID;
if (!Page.IsStartupScriptRegistered(scriptKey) && this.Enabled &&
!Page.IsPostBack)
{
string scriptBlock =
@"<script language=""JavaScript"">
<!--
alert(""%%POPUP_MESSAGE%%"");
// -->
</script>";
scriptBlock = scriptBlock.Replace("%%POPUP_MESSAGE%%", this.PopupMessage);
Page.RegisterStartupScript(scriptKey, scriptBlock);
}
}
}
}
请记住下面两件事：首先， 在注册脚本块之前，代码首先检查三个条件：
如果满足这三个条件，则脚本被指定，并且 PopupGreeting 代码可以从本文结尾处提供的下载中获得。该下载包括名为 ClientSideControlsAndTester 的 Visual Studio .NET 解决方案，其中包含两个项目：
ClientSideControls 项目编译后的程序集名为 图 2 显示了 PopupGreeting 控件添加到 Toolbox（工具箱）并添加到设计器后，Visual Studio .NET 的屏幕快照。Toolbox（工具箱）中的 PopupGreeting 控件用红色线圈出，设计器中的 PopupGreeting 输出用蓝色线圈出，在屏幕快照右侧的“Properties”（属性）窗格中可以查看 PopupGreeting 的属性。
图 2：PopupGreeting 服务器控件已添加到 ASP.NET Web 窗体页面 发送 ASP.NET 服务器 Web 控件的 HTML 属性如上所述，有两种方法可以通过服务器控件发送客户端脚本：
在上一节中，我们探讨了如何使用 在开始之前，请注意这种方法通常只适用于从
为了运用该信息，我们创建一个作为确认按钮的服务器 Web 控件。确认按钮是一种提交按钮，当用户单击此按钮时，将显示一个弹出式对话框，询问用户是否确定要继续操作。用户可以单击“取消”，不提交窗体。此项功能对用于删除信息的按钮特别有用，因为最终用户（或网站管理员）可能会在无意中单击鼠标删除数据库中的条目，如果没有机会取消，将是非常令人烦恼的事。 为了减少工作量，我们从 首先，在 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);
}
}
}
首先要注意的是， 我们只需覆盖一个方法，即 <input type="submit" name="ConfirmButton1" value="Click Me!" id="ConfirmButton1" onclick="return confirm ("Do you want to continue?");" /> 如果您不熟悉 JavaScript 的
图 3：操作中的 ConfirmButton ConfirmButton 在按钮的 在本文中，我们探讨了两种通过 ASP.NET 服务器控件插入客户端脚本的方法。第一种方法是使用 Page 类的 我们还在文中介绍了两个简单的服务器控件，它们都利用了客户端脚本来改进其功能。PopupGreeting 控件在页面首次加载时显示一个模式弹出式对话框，ConfirmButton Web 控件在用户单击按钮提交表单时，提示用户进行确认。 您可以在自己的服务器控件中插入客户端脚本，这将显著改善用户体验。本文提供的两个服务器控件相对比较简单，在可用性和独创性上没有什么突出之处。MetaBuilders.com 中展示了很多利用从 ASP.NET 服务器控件中插入客户端脚本而实现的功能，这些功能会给您留下深刻印象。在 MetaBuilders.com，您可以找到一些服务器控件，它们有的可以自动将焦点添加到文本框，有的可以在两个下拉列表之间传递条目，有的可以向下拉列表中添加或删除条目，还有的可以在一系列下拉列表中显示父子关系的数据，等等。最大的好处是，这些控件是免费的，并包括完整的源代码。 祝大家编程快乐！ 作者简介Scott Mitchell 著有五本关于 ASP/ASP.NET 的书籍，是 4GuysFromRolla.com 网站的创始人，过去五年来一直从事 Microsoft Web 技术方面的研究。Scott 是 ASP 和 ASP.NET 社区非常活跃的一名成员，十分热爱 ASP 和 ASP.NET 技术，并非常愿意帮助其他人了解这些令人振奋的技术。有关 DataGrid、DataList 和 Repeater 控件的详细信息，请参阅 Scott 的著作《ASP.NET Data Web Controls Kick Start》（ISBN 为 0672325012）。 推荐链接：
|
文章来源于领测软件测试网 https://www.ltesting.net/
