ASP.NET 客户端
ASP.NET 客户端编码有两个方面:
客户端脚本:它在浏览器上运行,进而加快页面的执行速度。例如,客户端数据验证可以捕获无效数据并相应地警告用户,而无需往返服务器。
客户端源代码:ASP.NET 页面生成此代码。例如,ASP.NET 页面的 HTML 源代码包含许多隐藏字段和自动注入的 JavaScript 代码块,这些代码块保存视图状态等信息或执行其他工作以使页面正常工作。
客户端脚本
所有 ASP.NET 服务器控件都允许调用使用 JavaScript 或 VBScript 编写的客户端代码。某些 ASP.NET 服务器控件使用客户端脚本向用户提供响应,而无需回发到服务器。例如,验证控件。
除了这些脚本之外,Button 控件还有一个 OnClientClick 属性,它允许在单击按钮时执行客户端脚本。
传统和服务器 HTML 控件具有以下可以在引发时执行脚本的事件:
事件 |
说明 |
onblur |
当控件失去焦点时 |
onfocus |
当控件获得焦点时 |
onclick |
点击控件时 |
onchange |
当控件的值发生变化时 |
onkeydown |
当用户按下某个键时 |
onkeyup |
当用户按下字母数字键时 |
onkeyup |
当用户释放按键时 |
onmouseover |
当用户将鼠标指针移到控件上时 |
onserverclick |
当控件被点击时,它会引发控件的 ServerClick 事件 |
客户端源代码
我们已经讨论过,ASP.NET 页面通常写在两个文件中:
内容文件或标记文件 (.aspx)
代码隐藏文件
内容文件包含构成页面结构的 HTML 或 ASP.NET 控件标记和文字。代码隐藏文件包含类定义。在运行时,内容文件被解析并转换为页面类。
这个类与代码文件中的类定义和系统生成的代码一起构成可执行代码(程序集),用于处理所有发布的数据、生成响应并将其发送回客户端。
考虑简单的页面:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="clientside._Default" %>
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>
Untitled Page
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Click" />
</div>
<hr />
<h3> <asp:Label ID="Msg" runat="server" Text=""> </asp:Label> </h3>
</form>
</body>
</html>
当该页面在浏览器上运行时,查看源选项显示由 ASP.Net 运行时发送到浏览器的 HTML 页面:
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>
Untitled Page
</title>
</head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUKMTU5MTA2ODYwOWRk31NudGDgvhhA7joJum9Qn5RxU2M=" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
value="/wEWAwKpjZj0DALs0bLrBgKM54rGBhHsyM61rraxE+KnBTCS8cd1QDJ/"/>
</div>
<div>
<input name="TextBox1" type="text" id="TextBox1" />
<input type="submit" name="Button1" value="Click" id="Button1" />
</div>
<hr />
<h3><span id="Msg"></span></h3>
</form>
</body>
</html>
如果你正确地阅读代码,你可以看到前两个 <div> 标签包含存储视图状态和验证信息的隐藏字段。