客户端（Client Side）

优质

小牛编辑

133浏览

2023-12-01

ASP.NET客户端编码有两个方面:

Client side scripts :它在浏览器上运行，从而加快页面的执行速度。例如，客户端数据验证可以捕获无效数据并相应地警告用户而无需往返服务器。
Client side source code :ASP.NET页面生成此Client side source code 。例如，ASP.NET页面的HTML源代码包含许多隐藏字段和自动注入的JavaScript代码块，这些代码保存视图状态或其他作业以使页面工作。

客户端脚本

所有ASP.NET服务器控件都允许调用使用JavaScript或VBScript编写的客户端代码。某些ASP.NET服务器控件使用客户端脚本来向用户提供响应，而不会回发到服务器。例如，验证控件。

除了这些脚本之外，Button控件还有一个属性OnClientClick，它允许在单击按钮时执行客户端脚本。

传统和服务器HTML控件具有以下事件，可以在引发脚本时执行它们:

事件	描述
onblur	当控件失去焦点时
onfocus	当控件获得焦点时
onclick	单击控件时
onchange	当控件的值发生变化时
onkeydown	当用户按下某个键时
onkeypress	当用户按下字母数字键时
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>

如果正确浏览代码，可以看到前两个

标记包含存储视图状态和验证信息的隐藏字段。