将 JavaScript 与 ASP.NET 2.0 配合使用
2007-06-30 09:09
453 查看
将 JavaScript 与 ASP.NET 2.0 配合使用
发布日期: 2006-6-13 | 更新日期: 2006-6-13适用于:
ASP.NET 2.0
Visual Web Developer 2005 Express Edition
摘要:学习如何将 JavaScript 与 ASP.NET 2.0 应用程序配合使用。
简介
Web 开发人员一直在通过将服务器端处理和客户端处理结合使用来解决浏览器的限制。客户端的工作逻辑和应用程序进程可使基于浏览器的应用程序看起来响应更及时且更“快速”。过去,对于客户端开发来说,大多数开发人员使用 JavaScript,并将此编程语言混合到了他们知名的 Microsoft Active Server 页面与服务器端 Microsoft Visual Basic Scripting Edition 或 Microsoft JScript 代码中。现在,有了 Microsoft ASP.NET 及其提供的新模型,Web 开发人员往往想知道如何在他们的 ASP.NET 页面中正确使用 JavaScript 函数。
在先前的一篇 MSDN 文章中,我曾经介绍过如何在 ASP.NET 1.x 应用程序中有效地使用 JavaScript。不过,在 ASP.NET 2.0 简介中,您会发现完成此项任务的方法已发生了改变。因此,重新回顾一下如何更好地创建使用 JavaScript 的 ASP.NET 应用程序是很重要的。本文将介绍一些现在可用的以前 JavaScript 函数的使用方法。完成该任务有多种方法,本文将介绍各种可能的方法。本文还将通过一些简短的示例介绍一些在 ASP.NET 页面中对 JavaScript 的一些较为常见的使用方法。
将 JavaScript 添加到服务器控件
将 JavaScript 添加到位于 ASP.NET 页面中的某个特定服务器控件是非常简单的。我们以按钮服务器控件为例。如果您使用任一 Microsoft Visual Studio 2005 将 Button HTML 服务器控件(HtmlInputButton 类)拖放到某个页面中,并将其作为服务器控件运行,则应具有以下代码结构:<input id="Button1" type="button" value="button" runat="server" />
这是一个普通按钮,可通过 ASP.NET 页面的代码分离或服务器端脚本以编程方式对其进行控制。例如,要在生成页面时指定按钮文本,只需在该元素变成 HTML 服务器控件(右键单击该控件,然后选择 Run As Server Control(作为服务器控件运行))后使用该按钮的 value 属性即可。
protected void Page_Load(object sender, EventArgs e)
这段代码只是在页面上提供了一个按钮,该按钮的文本为日期和时间。
<body onload="document.forms[0]['TextBox1'].focus();">
[/code]
通过使用该构造代码,当页面被加载后,包含 ID TextBox1 的元素将获得焦点,从而使终端用户能够开始直接输入文本,而无需通过鼠标来定位焦点。
ASP.NET 2.0 通过添加 Focus() 方法使得该任务变得非常简单。现在,您可以通过下面的代码来完成对 TextBox 控件的焦点设置:
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 事件内部嵌入以下代码。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) |
在 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 所示。
图 3. 活动的翻转按钮
对于所有此类 JavaScript 来说,最值得高兴的就是,对服务器端事件的普通回发将正常工作。在本例中单击 ImageButton 将产生一个回发,其中更改了标签服务器控件的 text 属性。
Page.ClientScript.RegisterStartupScript 与 Page.ClientScript.RegisterClientScriptBlock 之间的区别
我们已为您介绍了两种不同的可用来将 JavaScript 函数嵌入 ASP.NET 页面的方法,那么,二者之间有何不同呢?主要区别在于,RegisterStartupScript 方法是将 JavaScript 嵌入到 ASP.NET 页面的底部,恰好位于关闭元素 </form> 的前面。RegisterClientScriptBlock 方法是将 JavaScript 嵌入到页面中开启元素 <form> 的紧后面。那么,这有何不同呢?正如我们将要看到的,这有很大的不同。
就此列举一例,以下是在页面加载到浏览器时,将焦点置于该页面上的一个文本框中的方法 - 使用利用了 RegisterStartupScript 方法的 Visual Basic:
Page.ClientScript.RegisterStartupScript(Me.GetType(), "Testing", _ "document.forms[0]['TextBox1'].focus();", True)
由于在浏览器运行到页面底部并执行此小段 JavaScript 时,就已生成了页面上的文本框,并已将其放到了页面中,因此,此方法运行正常。但是,如果不按照上述方法,而编写如下代码(使用 RegisterClientScriptBlock 方法):
Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "Testing", _ "document.forms[0]['TextBox1'].focus();", True)
文本框控件将不会获得焦点,且会在页面上生成一个 JavaScript 错误(如图 4 所示)。
图 4. 执行 JavaScript 时出错
出错的原因在于,浏览器将先遇到 JavaScript,而后文本框才会出现在页面中。因此,JavaScript 将无法找到 TextBox1。
将 JavaScript 放到单独的文件 (.js) 中
强烈建议将 JavaScript 函数放到单独的文件中(.js 文件)。一旦它们位于单独的文件中,并且是某个项目的一部分,即可使用某些曾经介绍过的方法将该文件导入到页面中。例如,可通过以下代码将 .js 文件包括到 ASP.NET 页面中:
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", "MyJavaScriptFile.js");
一旦将 .js 文件导入到了 ASP.NET 页面中,即可像以前一样调用任何 JavaScript 函数。如果要管理 JavaScript 函数,并将它们与其他 ASP.NET 页面的逻辑分离,这是个不错的方法。也可使用该方法很容易地在多个 ASP.NET 页面中使用相同的 JavaScript 函数。
结论
本文简要介绍了在 ASP.NET 页面中使用 JavaScript 的一些常见方法以及对 JavaScript 的一些较为常见的使用方法。需要注意的一些较为重要的提示是,要将 JavaScript 放到单独的 .js 文件中,并使用 RegisterStartupScript 和 RegisterClientScriptBlock 方法将 JavaScript 嵌入到页面中。使用 HtmlGenericControl 的功能将控件特定的 JavaScript 部署到 ASP.NET 页面中也是相当容易的。关于作者
Bill Evjen 是 .NET 技术的积极拥护者,也是针对 .NET 的基于社团的学习创始人。自从 .NET 于 2000 年发布以来,他一直积极地致力于 .NET 方面的工作。同一年,Bill 创建了“圣路易斯 .NET 用户组”(http://www.stlnet.org) - 世界上最先创建的 .NET 用户组之一。Bill 也是“国际 .NET 联盟”(http://www.ineta.org) 的创始人,该联盟在全球拥有 400,000 多名成员。
以美国密苏里州圣路易斯为基地,Bill 是大家拥戴的 ASP.NET 和 XML Web 服务方面的作者和代言人。他所编写或参与合著的书籍达 10 余种,包括《Professional ASP.NET 2.0》、《Professional C# 2005》、《Professional VB 2005》、《XML Web Services for ASP.NET》以及《Web Services Enhancements: Understanding the WSE for Enterprise Applications, Visual Basic .NET Bible, and ASP.NET Professional Secrets》(均由 Wiley 出版发行)。除了书籍编写之外,Bill 还参与了很多会议的演讲,包括 DevConnections、VSLive 和 TechEd。
Bill 是 Lipper(一家归 Reuters 所有的公司)的技术架构师。他毕业于位于华盛顿州贝灵汉的西华盛顿大学,具有俄语学位。当不在计算机前忙于工作时,通常会在位于芬兰 Toivakka 的避暑别墅中找到他。您可通过 evjen@yahoo.com 与 Bill 取得联系。目前,其个人网络日志位于 http://www.geekswithblogs.net/evjen。
转到原英文页面
相关文章推荐
- 转自msdn magzine----将 JavaScript 与 ASP.NET 2.0 配合使用
- 将 JavaScript 与 ASP.NET 2.0 配合使用
- 将 JavaScript 与 ASP.NET 2.0 配合使用
- 将 JavaScript 与 ASP.NET 2.0 配合使用
- JavaScript 与 ASP.NET 2.0 配合使用
- 将 JavaScript 与 ASP.NET 2.0 配合使用
- 将 JavaScript 与 ASP.NET 2.0 配合使用
- 将 JavaScript 与 ASP.NET 2.0 配合使用
- 将 JavaScript 与 ASP.NET 2.0 配合使用
- 将 JavaScript 与 ASP.NET 2.0 配合使用
- 将 JavaScript 与 ASP.NET 2.0 配合使用(转)
- 将 JavaScript 与 ASP.NET 2.0 配合使用
- 将 JavaScript 与 ASP.NET 2.0 配合使用
- 将 JavaScript 与 ASP.NET 2.0 配合使用 (ZT)
- 将 JavaScript 与 ASP.NET 2.0 配合使用
- 将 JavaScript 与 ASP.NET 2.0 配合使用
- 转自msdn magzine----将 JavaScript 与 ASP.NET 2.0 配合使用
- 将 JavaScript 与 ASP.NET 2.0 配合使用 Z
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(十二) 代码重构使用反射工厂解耦(一)缓存切换
- ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型