[翻译]在 ASP.NET 2.0 中高效率地使用 JavaScript Part 1

Published: 17 Sep 2008
by Satheesh Babu

摘要

.NET Framework 2.0 引入了许多新特性，使得可以简易地在 ASP.NET 页面中使用 JavaScript。 Framework 中的 ClientScriptManager 类有许多新方法，帮助开发者高效地使用这些特性。在这个系列文章的第一部分，Satheesh 讲解 ClientScriptManager 类的频繁使用的重载方法的通用场景（common scenarios） 。他先概览 ClientScriptManager 类，然后结合相关源代码、插图、用法说明来探讨它的三个方法：RegisterClientScriptBlock, RegisterStartupScript, 和 RegisterOnSubmitStatement。

文章目录
简介
ClientScriptManager 类
RegisterClientScriptBlock() 方法
RegisterStartupScript() 方法
RegisterOnSubmitStatement() 方法
结语


简介
[回到顶部]

JavaScript 是用在 Web 应用程序的功能强大（versatile）的脚本语言（scripting languages ）的一种。尽管我们可以在服务器端（server side）用 C# 语言完成所有事情，但我们仍然偏爱用 JavaScript 做某些任务，如验证等。在 ASP.NET 1.x ， .Net 框架对 ASP.NET 页面动态地结合(hook) JavaScript 功能没有太多支持。这个弊端在 ASP.NET 2.0 的发布得到解决，提供开发者许多特性来运用 ClientScriptManager 类动态地嵌入 JavaScript 脚本块。我将这篇文章分做两部分，Part 1 结合例子介绍 ClientScriptManager 类的 3 个不同的方法，而 Part 2 将通过一些 ASP.NET 的 JavaScript 技巧来探讨剩下的方法 。

ClientScriptManager 类
[回到顶部]

我们通常以 <Script> 标签添加 JavaScript 函数到页面。某些情况下我们需要从 codebehind 类中动态地添加脚本，在 .NET Framework 1.x 版本中，没有库类可以帮助我们有效地处理这种情况。这个缺点被 .NET Framework 2.0 引入一个新类 ClientScriptManager 解决了。这个类可以用来从 codebehind 类管理和增加脚本块到 asp.net 页面。

Things we should know about ClientScriptManager Class

关于 ClientScriptManager 类，我们应该了解的东西

ClientScriptManager 类
 
Page 对象的 ClientScript 属性是 ClientScriptManager 类的实例，通过它我们可以动态地添加脚本嵌入到 HTML 输出中。

该类用关键字 key 和类型 type 唯一识别脚本，相同关键字和类型的脚本被看作重复（duplicates），相同的脚本应该避免。这样当我们在用户控件添加脚本时，可以避免混乱发生。例如，方法 IsClientScriptBlockRegistered() 可以用来检测脚本被 RegisterClientScriptBlock() 重复注册。

类 ClientScriptManager 有一系列有用的方法，可用来注入 JavaScript 函数到 HTML 输出中。我们可以依情况选择这些方法来解决我们的需求。

这部分文章将讨论下面 3 个方法的用法：
1. RegisterClientScriptBlock() 方法
2. RegisterStartupScript() 方法
3. RegisterOnSubmitStatement() 方法

RegisterClientScriptBlock()  方法
[回到顶部]

.NET Framework 1.x 中的Page.RegisterStartUpScript() 和 Page.RegisterClientScriptBlock() 方法已经废弃，这两个方法已经封装在 ClientScriptManager 类中，方法 RegisterClientScriptBlock()允许您将 Javascript 函数插入到页面的顶部，当首次访问此页面时运行（浏览器加载页面的时候）。ClientScriptManager 类还有有一个 IsClientScriptBlockRegistered() 方法，当脚本块已经用同样的 key 注册时返回 true, 这样，我们可以防止脚本重复注册。


该方法有两个重载

Listing 1 - RegisterClientScriptBlock Overloads

ClientScriptManager.RegisterClientScriptBlock (Type typeofscript, String key,
String script)
ClientScriptManager.RegisterClientScriptBlock (Type typeofscript, String key,
String script, Boolean addScriptTags)


将下面代码放在 page load 或 button click 里面，在页面加载或随后的 postback 时执行。

Listing 2 - 1st overload

ClientScriptManager script = Page.ClientScript;
if (!script.IsClientScriptBlockRegistered(this.GetType(), "Alert"))
{
    script.RegisterClientScriptBlock(this.GetType(), "Alert",
        "<script type=text/javascript>alert('hi')</script>");
}

Listing 3 - 2nd overload

ClientScriptManager script = Page.ClientScript;
if (!script.IsClientScriptBlockRegistered(this.GetType(), "Alert"))
{
    script.RegisterClientScriptBlock(this.GetType(), "Alert", "alert('hi')",true);
}

Figure 1 - RegisterClientScriptBlock Output

正如我前面所说，页面加载时这些方法内的脚本会执行，所以在控件实际呈现之前，我们可以看见 alert 弹出框。


RegisterStartupScript() 方法
[回到顶部]

这节里，我们看看 ClientScriptManager 类的 RegisterStartupScript() 方法。RegisterStartupScript()方法和RegisterClientScriptBlock()方法都会注入 Jscript 代码，在随后的 postback 执行。但实际的区别是后者（原文为former，疑为有误）会在 form 起始标签之后控件之前注入脚本，而RegisterStartupScript() 方法会在控件之后 form 结束标签之前注入脚本。这意味着使用 RegisterClientScriptBlock() 方法注入的脚本，不能访问页面的控件；然而，使用 RegisterStartupScript()方法则可以。

下面的标记(Listing 4 and 5) 展示 ASP.NET 执行 RegisterClientScriptBlock() 和 RegisterStartupScript() 方法后的 html 输入块。

Listing 4 - RegisterClientScriptBlock Output

<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJMjgzMDgzOTgzZGQfI8LfDKmcT0TXZj8jwrxqI6TOIA==" />
</div>
<script type=text/javascript>alert('hi')</script>


从上面的 HTML 代码段，我们可以看到脚本嵌入到页面的控件之前，而在 form 开始标签之后。

Listing 5 - RegisterStartupScript Output

<script type="text/javascript">
<!--
alert(document.getElementById('txtName').value)// -->
</script>
</form>
</body>


从上面的 HTML 代码段(Listing 5)，我们可以看到脚本块嵌入到页面控件之后，而在 form 结束标签之前，这样如我前面所说，使得脚本可以访问页面控件。


重载

这个方法有两个重载

Listing 6 - RegisterClientScriptBlock Overloads

ClientScriptManager.RegisterClientScriptBlock (Type typeofscript, String key,
String script)
ClientScriptManager.RegisterClientScriptBlock (Type typeofscript, String key,
String script, Boolean addScriptTags)

用法

将下面代码放在 page load 或 button click 里，使代码在加载或随后的 postback 时执行。就像 RegisterClientScriptBlock()方法，这个方法同样有一个叫做 IsStartupScriptRegistered()的方法，可以检测脚本重复注册。参考下面 RegisterStartupScript()方法实现的代码。

Listing 7 - 1st overload

ClientScriptManager script = Page.ClientScript;
txtName.Text = "Welcome to AspAlliance!!!";
if (!script.IsStartupScriptRegistered (this.GetType(), "Alert"))
{
    script.RegisterStartupScript (this.GetType(), "Alert",
        "<script type=text/javascript>alert(document.getElementById('txtName').value)</script>");
}

Listing 8 - 2nd overload

ClientScriptManager script = Page.ClientScript;
txtName.Text = "Welcome to AspAlliance!!!";
if (!script.IsStartupScriptRegistered (this.GetType(), "Alert"))
{
    script.RegisterStartupScript (this.GetType(), "Alert",
        "alert(document.getElementById('txtName').value)",true);
}


当上面代码执行时，我们得到类似于"Figure 2 - RegisterStartupScript Output" 的输出。

Figure 2 - RegisterStartupScript Output


这里，页面的控件呈现之后，脚本块就执行，并且与 RegisterClientScriptBlock() 相反，页面的控件对脚本块可见，参看上面的例子。这样使用 RegisterStartupScript() 方法注册脚本，我们可以访问页面的控件。


RegisterOnSubmitStatement() 方法
[回到顶部]

这节将讨论 ClientScriptManager 类的 RegisterOnSubmitStatement()方法的实现。有时我们在提交表单到服务器之前有验证的需求。例如，某个输入域，存储数据到数据库之前，我们可能需要得到客户的确认，不能通过验证方法判断有效性 。此时，这个方法可以派上用场，提供确认对话框。这个方法注册的脚本在页面提交的时候执行。

Listing 9 - 语法

public void RegisterOnSubmitStatement (
    Type type,
    string key,
    string script
)

用法

将下面代码放于 page load 中，使页面表单每次提交之时都执行脚本。

Listing 10 - RegisterOnSubmitStatement

if (!script.IsClientScriptBlockRegistered(this.GetType(), "SubmitScript"))
{
    script.RegisterOnSubmitStatement(this.GetType(), "SubmitScript",
    "alert('Submit Clicked')");
}


考虑下面代码：

Listing 10 - RegisterOnSubmitStatement Example

protected void Page_Load(object sender, EventArgs e)
{    
  ClientScriptManager script = Page.ClientScript;
  if (!script.IsClientScriptBlockRegistered(this.GetType(), "SubmitScript"))
    {
        script.RegisterOnSubmitStatement(this.GetType(), "SubmitScript", "return
        confirm('Are you sure to continue')");
    }
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
    Response.Write("Form is Submitted.");
}


执行上面代码会生成一个 webform， 点击提交会产生一个像下面图片的确认框

Figure 3 - RegisterOnSubmitStatement Output 1

点击 Cancel 不会触发 submit 点击事件，而点击 OK 则会，输出如 Figure 4

Figure 4 - RegisterOnSubmitStatement Output 2


结语
[回到首页]

这样，我们通过这篇文章，我们掌握了 .NET Framework 2.0 提供的非常实用的的一个特性子集。基于业务需求要处理一些 JavaScript 代码块，或在 HTML 输出中简易地编程来添加 JavaScript 代码块，这些方法提供了良好的灵活性。在下载小节下载关联这篇文章的源代码，看看实际效果。这篇文章的 Part 2 将讨论 ClientScriptManager 类的其它方法和一些 JavaScript 技巧。

Happy Coding!!


参考

ClientScriptManager Class

Downloads

[下载源代码]


原文：Using JavaScript Effectively in ASP.NET 2.0 - Part 1
http://aspalliance.com/1701_Using_JavaScript_Effectively_in_ASPNET_20__Part_1.all