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="https://img01.yuandaxia.cn/Content/img/tutorials/asp.net/" >

   <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>

在浏览器上运行此页面时,View Source选项显示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="https://img01.yuandaxia.cn/Content/img/tutorials/asp.net/" >

   <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>标签包含存储视图状态和验证信息的隐藏字段.