ASP.NET - 客户端

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

客户端脚本：它在浏览器上运行，从而加快页面执行速度。例如，客户端数据验证可以捕获无效数据并相应地警告用户，而无需往返服务器。
客户端源代码：ASP.NET 页面生成此代码。例如，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>

如果您正确地查看代码，您会发现前两个 <div> 标签包含存储视图状态和验证信息的隐藏字段。

打印页面