客户端处理 javascript 控件_glumtree-优快云博客

ASP.NET 的核心是服务器端处理。然而，这种方式存在一些缺点。主要问题是：任何处理开始之前，都必须回传到服务器。甚至对于通过本地高速网络连接到服务器的 Intranet应用程序，也是如此。这将常常给用户带来显而易见的，无法接受的延迟体验。对于那些经过高速宽带连接的Internet应用程序而言，这种延迟似乎变得更加漫长。

客户端处理可为用户行为提供及时响应，因此能够显著改善用户体验。它们可使用诸如JavaScript或者VBScript这样的脚本语言来实现。

某些ASP.NET服务器控件使用客户端脚本，来提供用户行为响应，而不需要回传到服务器。典型的如，验证控件下载脚本到浏览器，那么，无效数据将在浏览器中被捕捉和

标记，而不需要回传到服务器。然而，在这些情况下，客户端脚本由ASP.NET提供，而开发人员则不用编写或管理脚本。

如同您所了解的，从ASP.NET服务器控件调用客户端代码是可能的。另外，ASP.NET服务器控件中的Button控件包含一个OnClientClick属性，该属性允许您指定客户端脚本，并且当按钮被单击时执行脚本。

常规的HTML控件和HTML服务器控件包含许多事件，当它们被引发时，则可执行脚本。脚本包含在内容文件的脚本块，或者包含在控件声明的属性内。如前文所述，HTML按钮控件的onclick和onserverclick属性，就可以用来处理单击事件。表3-6列出了HTML控件可以使用的一些常用事件。

表3-6 常用的HTML事件

事件	说明
onblur	当控件失去焦点时触发
onfocus	当控件接收焦点时触发
onclick	当控件被单击时触发
onchange	当控件的值发生修改时触发
onkeydown	当用户按键时触发
onkeypress	当用户按文字或数字键时触发
onkeyup	当用户松开键时触发
onmouseover	当鼠标指针移动到控件上时触发
onserverclick	当控件被单击时抛出一个ServerClick事件

为了解客户端脚本如何工作，需要新建一个名为ClientSideProcessing的网站。在内容文件的源视图中，将下面的脚本块添加到</head>关闭标签和<body>打开标签之间：

function ButtonTest( )

{

alert("Button clicked - client side processing");

}

function DoChange( )

{

document.getElementById("btnSave").disabled=false;

}

</script>

在打开的<script>标签中，使用language属性指定编程语言，当前情况使用的是JavaScript。在该示例中，实现了两个不同的函数。ButtonTest函数调用alert方法弹出一个对话框。DoChange函数启用了一个Save按钮。程序实现了一个场景，即首先将Save

按钮指定为不可用，一直到用户修改了某些数据，才启用Save按钮。

提示：学习JavaScript超出了本书的范围。可阅读O’Reilly出版的，由David Flanagan所著的《JavaScript权威指南（第四版）》（JavaScript: The Definitive Guide, Fourth Edition）。

向窗体添加以下控件：一个HTML按钮、两个ASP.NET按钮、一个HTML输入文本框和一个ASP.NET的TextBox。如示例3-5所示，您可以将控件拖到窗体上，然后重命名控件，并且设置属性。两个HTML控件都包含ID和runat属性，它们则成为了服务器控件。btnServer控件设置了OnClientClick属性，同时，btnSave控件的Enabled属性被设置为false。

示例3-5：Default.aspx中的控件进行客户端处理

<h1>Client-Side Processing</h1>

<input id="btnHTML" runat=server type="button"

value="HTML Button"

οnclick="javascript:ButtonTest( );"

onserverclick="btnHTML_ServerClick"/>

<asp:Button ID="btnServer" runat="server"

Text="ASP.NET Button"

OnClientClick="javascript:ButtonTest( );" />

<br />

<input id="txtHTML" type="text" runat="server"

οnchange="javascript:DoChange( );" /><br />

<br />

<asp:TextBox ID="TextBox1" runat="server"

οnchange="javascript:DoChange( );"></asp:TextBox>

<br />

<asp:Button ID="btnSave" runat="server"

Text="Save" Enabled=false />

在设计视图中，双击“btnHTML”控件，以便在代码隐藏文件中创建事件处理程序。接着添加以下高亮显示的代码：

protected void btnHTML_ServerClick(object sender, EventArgs e)

{

txtHTML.Value = "An HTML server control";

}

在设计视图中，双击“btnServer”来为按钮创建事件处理程序，接着在代码隐藏文件中添加以下高亮显示的代码：

protected void btnServer_Click(object sender, EventArgs e)

{

txtHTML.Value = "An ASP.NET server control";

}

此时运行页面。初始情况下，Save按钮不可用（灰色）。单击“HTML”按钮将触发JavaScript函数ButtonTest，即弹出对话框“Button clicked - client side processing.”。一旦在对话框中单击了确定按钮，服务器端代码则开始执行。即在HTML输入框中创建一个“An HTML server control.”字符串。同样，单击ASP.NET服务器按钮将弹出相同的对话框，并在HTML输入框中创建“An HTML server control.”字符串。修改任一文本框中的内容，都将启用Save按钮。

从ASP.NET服务器控件调用客户端脚本，本质上是一个非正式特性，它不同于使用Button.OnClientClick属性。它实际利用了一个有利条件来工作，即控件声明的任何属性，只要ASP.NET无法识别，就会不加修改地传递给浏览器。

可在浏览器中查看页面源文件。上面代码段中，ASP.NET的TextBox在浏览器中输出为：

<input name="TextBox1" type="text" id="TextBox1"

οnchange="javascript:DoChange( );" />

既然HTML输入控件的onchange是有效事件，那么JavaScript函数就会正确执行。