asp.net|javascript
将 JavaScript 添加到服务器控件
将 JavaScript 添加到位于 ASP.NET 页面中的某个特定服务器控件是非常简单的。我们以按钮服务器控件为例。如果您使用任一 Microsoft Visual Studio 2005 将 Button HTML 服务器控件(HtmlInputButton 类)拖放到某个页面中,并将其作为服务器控件运行,则应具有以下代码结构:
这是一个普通按钮,可通过 ASP.NET 页面的代码分离或服务器端脚本以编程方式对其进行控制。例如,要在生成页面时指定按钮文本,只需在该元素变成 HTML 服务器控件(右键单击该控件,然后选择 Run As Server Control(作为服务器控件运行))后使用该按钮的 value 属性即可。
Visual Basic
Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Button1.Value = DateTime.Now.ToString()End Sub
C#
protected void Page_Load(object sender, EventArgs e){ Button1.Value = DateTime.Now.ToString();}
这段代码只是在页面上提供了一个按钮,该按钮的文本为日期和时间。
图 1. 在按钮上显示日期和时间
需要特别注意的是,此处的 ASP.NET 页面是从生成该页面的服务器来获取时间的。因此,如果 Web 服务器位于美国中央时区 (CST -6 GMT) 的某个位置,则无论请求此页面的人位于何处,他们都将获得相同的时间。
如果想要此按钮显示查看该页面的人所在时区的时间,又该如何呢?完成此项任务的最简单方法就是在客户端使用 JavaScript。
就此列举一例,我们要将终端用户(Web 页面的查看者)的计算机时间置于一个按钮 Web 服务器控件上。以下代码显示了如何完成该任务:
Visual Basic
<% Page Language="VB" %>使用 JavaScript
C#
<% Page Language="C#" %>使用 JavaScript
在此小段代码中,要注意按钮的一些属性在被发送到客户端浏览器之前是如何指定给服务器端的。本例中,按钮上文本的字体被更改为具有特定大小的粗体 Verdana。客户端接收到按钮的 HTML 代码后,客户端 JavaScript 即会将该按钮的文本更改为终端用户计算机上的当前时间。针对整个页面生成的 HTML 代码如下:
使用 JavaScript
单击该按钮仍会出现一个回发(通过 Response.Write 命令查看),当重新呈现此页面时,按钮控件上会显示新时间。结果如图 2 所示。
图 2. 单击日期按钮
在本例中,我们通过 onload 属性将一些 JavaScript 直接置于页面的 元素中。对于 onload 属性的值,我们特意指向了第一个
C#
<% Page Language="C#" %>使用 JavaScript
使用服务器控件的 attribute 属性将附加的 JavaScript 添加到控件特定的控件是一种很好的方式。本例中,通过将 Attribute.Add 属性与脚本关键字和脚本本身(两者均表示为字符串值)配合使用添加了 JavaScript。
返回页首执行简单的按钮翻转
一谈到 Web 页面上的按钮,Web 开发人员想要为按钮赋予的较为常见的功能就是翻转效果。翻转效果就是当终端用户将其鼠标置于 Web 页面的某个按钮上时(并不单击该按钮),该按钮的颜色和形状将发生改变。对于具有多个按钮的 Web 页面而言,该功能尤为有用,从使用角度而言这是很有用的,会在终端用户单击按钮之前通知其要对该按钮执行单击操作了。
在服务器控件出现之前,该操作很容易实现,现在,尽管有了服务器控件,也不是那么困难。执行类似操作的代码如下:
Visual Basic
<% Page Language="VB" %>使用 JavaScript
C#
<% Page Language="C#" %>使用 JavaScript
这次我们不通过 元素将 JavaScript 指定给服务器控件,而是使用控件的 onmouseover 和 onmouseout 事件。对于每个事件,我们均指定一个 JavaScript 值。onmouseover 事件表示终端用户将其鼠标置于控件上方的操作,而 onmouseout 表示终端用户将其鼠标从控件上方移开的操作。在本例中,我们希望当鼠标置于按钮上方时会显示一张图像,而在当加载页面后与当将鼠标从按钮移开后会显示原始图像。
如果您正在直接使用该类控件,而不是像我们在 元素中使用 JavaScript 时那样在 form 中指定控件,您可以使用 this 关键字,其后紧跟您试图更改的属性。
返回页首设置控件焦点
ASP.NET 2.0 现在包括了为其中的一个 HTML 表单元素设置(光标的)焦点的功能。在 ASP.NET 2.0 之前,您必须亲自使用 JavaScript 来完成同样的任务。例如,如果您的 ASP.NET 1.x 页面中有多个文本框,则可通过在页面的 标记中使用以下代码来使页面在加载后将焦点设置为第一个 TextBox 控件。
通过使用该构造代码,当页面被加载后,包含 ID TextBox1 的元素将获得焦点,从而使终端用户能够开始直接输入文本,而无需通过鼠标来定位焦点。
ASP.NET 2.0 通过添加 Focus() 方法使得该任务变得非常简单。现在,您可以通过下面的代码来完成对 TextBox 控件的焦点设置:
Visual Basic
Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) TextBox1.Focus()End Sub
C#
protected void Page_Load(object sender, EventArgs e){ TextBox1.Focus(); }
浏览器加载使用此方法的页面后,光标即已经被置于了文本框的内部,等待您开始键入文本。因此,您不必将鼠标移到相应的位置即可开始在表单中输入信息。Focus() 方法使您可以动态地将终端用户的光标置于指定的表单元素中(不仅仅是 TextBox 控件,而可以是从 WebControl 类派生而来的任何服务器控件)。
返回页首使用较大的 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 事件内部嵌入以下代码。
Visual Basic
Page.ClientScript.RegisterStartupScript(Me.GetType(), "MyScript", _ "function AlertHello() { alert('你好,ASP.NET'); }", True)Button1.Attributes("onclick") = "AlertHello()"Button2.Attributes("onclick") = "AlertHello()"
C#
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()、关键字及包含的脚本,然后是一个值为 True 的布尔值(以便 .NET 自动使用 标记将脚本嵌入 ASP.NET 页面中)。
在 Page_Load 事件中使用该代码会在浏览器中生成以下 HTML 代码(为简明起见,已删除了一些 HTML 代码):
使用 JavaScript