使用较大的 JavaScript 函数

既然我们可以在 HTML 元素内部嵌入部分 JavaScript，甚至可以以动态方式使用 JavaScript 和 Web 服务器控件，那么如何将全部 JavaScript 函数置于您的代码中呢？

可通过多种方法来完成此任务，我们将介绍几种可在 ASP.NET 代码中使用的较为常见的方法。在本文中，我们将介绍如何使用新的 Page.ClientScript 属性。在 ASP.NET 2.0 之前，您需要使用 RegisterStartupScript 和 RegisterClientScriptBlock 方法。现在，这两个方法已被淘汰。在 ASP.NET 1.x 中注册脚本的两种可能方法均需要使用一组关键字/脚本参数。由于涉及到了两个独立的方法，因此极有可能会出现一些关键字名称冲突。Page.ClientScript 属性本身就可以完成所有的脚本注册，从而使您的代码少出错。

Page.ClientScript.RegisterStartupScript() 方法

最初可用的选项之一就是使用一个可实现此功能的 .NET 类来注册脚本块。第一个是 RegisterStartupScript 方法。当您有一个想要在页面加载时启动的 JavaScript 函数时，最好使用该类。就此列举一例，在 Visual Studio 2005 中创建一个包含两个按钮的 ASP.NET 页面。Button1 和 Button2 分别为这两个按钮的 ID。然后，在 Page_Load 事件内部嵌入以下代码。
VB.NET

Page.ClientScript.RegisterStartupScript( Me .GetType(),  " MyScript " , _
    " function AlertHello() { alert('你好，ASP.NET'); } " ,  True )

Button1.Attributes( " onclick " )  =   " AlertHello() "
Button2.Attributes( " onclick " )  =   " AlertHello() "

C#.NET

Page.ClientScript.RegisterStartupScript( this .GetType(),  " MyScript " ,
    " function AlertHello() { alert('你好，ASP.NET'); } " ,  true );

Button1.Attributes[ " onclick " ]  =   " AlertHello() " ;
Button2.Attributes[ " onclick " ]  =   " AlertHello() " ;

RegisterStartupScript 方法的两个可能结构如下：

•	RegisterStartupScript (type, key, script)
•	RegisterStartupScript (type, key, script, script tag specification)

在上例中，您指定了类型 Me.GetType()(---the type of the script to register----)、关键字及包含的脚本，然后是一个值为 True 的布尔值（以便 .NET 自动使用 <script> 标记将脚本嵌入 ASP.NET 页面中）。
应为页面上的所有 JavaScript 指定唯一的关键字，这一点十分重要（这可通过该方法中要求的 key 参数来实现）。如果多个 JavaScript 具有相同的关键字名称，则只会在页面中嵌入第一个 JavaScript。
在 Page_Load 事件中使用该代码会在浏览器中生成以下 HTML 代码（为简明起见，已删除了一些 HTML 代码）：

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >< title >
   使用 JavaScript
</ title ></ head >
< body >
     < form  name ="form1"  method ="post"  action ="Default.aspx"  id ="form1" >
< div >
< input  type ="hidden"  name ="__VIEWSTATE"  id ="__VIEWSTATE"  
 value ="/wEPDwUJMTM4ODA1MjE5D2QWAgIED2QWBAIBDw9kFgIeB29uY2xpY2s
 FDEFsZXJ0SGVsbG8oKWQCAw8PZBYCHwAFDEFsZXJ0SGVsbG8oKWRk+DQIaJpw5
 A7pyhzP8dxf/JGUSbA="   />
</ div >

     < div >
         < input  type ="submit"  name ="Button1"  value ="Button"  
         onclick ="AlertHello();"  id ="Button1"   />
         < input  type ="submit"  name ="Button2"  value ="Button"  
         onclick ="AlertHello();"  id ="Button2"   />
     </ div >
    
< div >

    < input  type ="hidden"  name ="__EVENTVALIDATION"  id ="__EVENTVALIDATION"  
    value ="/wEWAwK4yNWFBwKM54rGBgK7q7GGCHwBEr6DyGutQ/egvNrB3OYhCwM4"   />
</ div >

< script  type ="text/javascript" >
<!--
function AlertHello() { alert('你好，ASP.NET'); }// -->
</ script >
</ form >
</ body >
</ html >

使用该 ASP.NET 页面时，请注意，在页面的底部、表单 (</form>) 的最后，嵌入了一个 JavaScript 函数。

应为页面上的所有 JavaScript 指定唯一的关键字，这一点十分重要（这可通过该方法中要求的 key 参数来实现）。如果多个 JavaScript 具有相同的关键字名称，则只会在页面中嵌入第一个 JavaScript。

Page.ClientScript.RegisterClientScriptBlock() 方法

现在，我们通过使用 Page.ClientScript.RegisterClientScriptBlock 方法来创建一个更好版本的按钮翻转示例。先前的翻转按钮示例有一个问题，即当终端用户的鼠标置于按钮图像上时，必须通过单独的请求从服务器检索翻转图像。较好的翻转按钮情况是，按钮的翻转图像已经下载并存储到了浏览器的高速缓存中，以便当终端用户将鼠标置于按钮上时，会立即显示翻转图像。要完成该任务，我们必须构建一个 JavaScript 函数。以下示例介绍了该 JavaScript 函数以及如何使用 RegisterClientScriptBlock 方法将该函数置于页面中。就本例而言，代码分离只需要一个 Page_Load 事件及一个针对 ImageButton 服务器控件的按钮单击事件。

<% @ Page Language="C#"  %>
< script  runat ="server" >    
protected void Page_Load(object sender, EventArgs e)
{
       Page.RegisterClientScriptBlock("MyScript", _
           "if (document.images) {" +
           "MyButton = new Image;" +
           "MyButtonShaded = new Image;" +
           "MyButton.src = 'button1.gif;" +
           "MyButtonShaded.src = 'button2.gif;" +
           "}" +
           "else {" +
           "MyButton = '';" +
           "MyButtonShaded = '';" +
           "}", true);

       ImageButton1.Attributes.Add("onmouseover",
          "this.src = MyButtonShaded.src;" +
          "window.status='是的！请单击此处！';");
       ImageButton1.Attributes.Add("onmouseout",
          "this.src = MyButton.src;" +
          "window.status='';");
    }
 
  protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
  {
     Label1.Text = "回发！";
  }
</ script >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > 使用 JavaScript </ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
     < p >
        < asp:ImageButton  id ="ImageButton1"  
        onmouseover ="this.src='button2.gif'"  
        onclick ="ImageButton1_Click"  
        onmouseout ="this.src='button1.gif'"  runat ="server"  
        ImageUrl ="button1.gif" ></ asp:ImageButton >
     </ p >
     < p >
        < asp:Label  id ="Label1"  runat ="server"   />
     </ p >
     </ div >
     </ form >
</ body >
</ html >

 使用此代码时，浏览器的 HTML 输出将如下所示：

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  id ="Head1" >< title >
   使用 JavaScript
</ title ></ head >
< body >
     < form  name ="form1"  method ="post"  action ="Default.aspx"  id ="form1" >
< div >
< input  type ="hidden"  name ="__VIEWSTATE"  id ="__VIEWSTATE"  
 value ="/wEPDwUKMTcyMTcwOTQ2NA9kFgICBA9kFgICAQ8PZBYEHgtvbm1
 vdXNlb3ZlcgVCdGhpcy5zcmMgPSBNeUJ1dHRvblNoYWRlZC5zcmM7d2luZ
 G93LnN0YXR1cz0nT2ggWWVzISBDbGljayBoZXJlISc7Hgpvbm1vdXNlb3V
 0BSl0aGlzLnNyYyA9IE15QnV0dG9uLnNyYzt3aW5kb3cuc3RhdHVzPScnO
 2QYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFDEltYWd
 lQnV0dG9uMXDJ4zl4FNylcdE+kep0e5wzi14T"   />
</ div >

< script  type ="text/javascript" >
<!--
if  (document.images) 

{MyButton = new Image;MyButtonShaded = new Image;
MyButton.src = 'button1.gif';MyButtonShaded.src = 'button2.gif';}

else 

{MyButton= '';MyButtonShaded = '';}// -->
</ script >

     < div >
         < p >
             < input  type ="image"  name ="ImageButton1"  id ="ImageButton1"  
             onmouseover ="this.src = MyButtonShaded.src;window.status=
               '是的！请单击此处！';"  
             onmouseout ="this.src = MyButton.src;window.status='';"  
             src ="button1.gif"  style ="border-width:0px;"   />
         </ p >
         < p >
             < span  id ="Label1" ></ span >
         </ p >

     </ div >
    
< div >

    < input  type ="hidden"  name ="__EVENTVALIDATION"  id ="__EVENTVALIDATION"  
    value ="/wEWAgLhoLy4DwLSwpnTCEKaKJJN3KmLU7TP4vwT5VSKMT+M"   />
</ div ></ form >
</ body >
</ html >

对于该输出，请注意：通过使用 RegisterClientScriptBlock，JavaScript 函数紧跟在 HTML 代码中开启元素 <form> 的后面。除了使用 RegisterClientScriptBlock 方法添加了 JavaScript 函数外，我们还添加了一些额外的 JavaScript（只是为了增添点乐趣），以便在终端用户将鼠标置于按钮上时文本会显示在浏览器的状态栏中。如图 3 所示。

对于所有此类 JavaScript 来说，最值得高兴的就是，对服务器端事件的普通回发将正常工作。在本例中单击 ImageButton 将产生一个回发，其中更改了标签服务器控件的 text 属性。