将JavaScript与ASP.NET 2.0配合使用-技术开发专区

将JavaScript与ASP.NET 2.0配合使用

作者：Bill Evjen 编辑：赵雷 2006-06-16 10:50

【IT168 技术文档】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 类）拖放到某个页面中，并将其作为服务器控件运行，则应具有以下代码结构：

这是一个普通按钮，可通过 ASP.NET 页面的代码分离或服务器端脚本以编程方式对其进行控制。例如，要在生成页面时指定按钮文本，只需在该元素变成 HTML 服务器控件（右键单击该控件，然后选择 Run As Server Control（作为服务器控件运行））后使用该按钮的 value 属性即可。

Visual Basic

Protected Sub Page_Load()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" %>

<script runat="server">
    Protected Sub Button1_Click()Sub Button1_Click(ByVal sender As Object, _
      ByVal e As System.EventArgs)
        Response.Write("回发！")
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>使用 JavaScript</title>
</head>
<body onload="javascript:document.forms[0]['Button1'].value=Date();">
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="按钮"
         OnClick="Button1_Click" Font-Bold="True" Font-Names="Verdana"
         Font-Size="Larger" />
    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    ...{
        Response.Write("回发！");
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>使用 JavaScript</title>
</head>
<body onload="javascript:document.forms[0]['Button1'].value=Date();">
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="按钮"
         OnClick="Button1_Click" Font-Bold="True" Font-Names="Verdana"
         Font-Size="Larger" />
    </div>
    </form>
</body>
</html>

在此小段代码中，要注意按钮的一些属性在被发送到客户端浏览器之前是如何指定给服务器端的。本例中，按钮上文本的字体被更改为具有特定大小的粗体 Verdana。客户端接收到按钮的 HTML 代码后，客户端 JavaScript 即会将该按钮的文本更改为终端用户计算机上的当前时间。针对整个页面生成的 HTML 代码如下：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
   使用 JavaScript
</title></head>
<body onload="javascript:document.forms[0]['Button1'].value=Date();">
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
 value="/wEPDwUKMTY3NzE5MjIyMGRkVUxVdzEWBhD7U89t7JKIkQc6Cko=" />
</div>

    <div>
        <input type="submit" name="Button1" value="" id="Button1"
         style="font-size:Larger;font-weight:bold;" />
    </div>

<div>

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

单击该按钮仍会出现一个回发（通过 Response.Write 命令查看），当重新呈现此页面时，按钮控件上会显示新时间。结果如图 2 所示。

图 2. 单击日期按钮

在本例中，我们通过 onload 属性将一些 JavaScript 直接置于页面的 <body> 元素中。对于 onload 属性的值，我们特意指向了第一个 <form> 节（因为在 HTML 中可能会有多个 form）中名为 Button1 的 HTML 元素。

虽然使用此方法来添加一些 JavaScript 以便与 ASP.NET Web 服务器控件配合使用很简单，但是我们也可以很容易地将一个 JavaScript 命令添加到按钮本身，如以下部分代码示例所示：

Visual Basic

<%@ Page Language="VB" %>

<script runat="server">
    Protected Sub Page_Load()Sub Page_Load(ByVal sender As Object, _
      ByVal e As System.EventArgs)
        Button1.Attributes.Add("onclick", _
           "javascript:alert('多加注意！！！')")
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>使用 JavaScript</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button id="Button1" runat="server" Font-Bold="True"
         Font-Names="Verdana" Font-Size="Larger"
         Text="单击我！"></asp:Button>
    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    ...{
        Button1.Attributes.Add("onclick",
           "javascript:alert('多加注意！！！')");
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>使用 JavaScript</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button id="Button1" runat="server" Font-Bold="True"
         Font-Names="Verdana" Font-Size="Larger"
         Text="单击我！"></asp:Button>
    </div>
    </form>
</body>
</html>

使用服务器控件的 attribute 属性将附加的 JavaScript 添加到控件特定的控件是一种很好的方式。本例中，通过将 Attribute.Add 属性与脚本关键字和脚本本身（两者均表示为字符串值）配合使用添加了 JavaScript。

第1页：将 JavaScript 添加到服务器控件第2页：执行简单的按钮翻转第3页：设置控件焦点第4页：使用较大的 JavaScript 函数第5页：结论及作者

关注我们