Asp.net 简明教程

ASP.NET - Client Side

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

  1. Client side scripts ：它在浏览器上运行，并依次加快页面的执行速度。例如，客户端数据验证可以捕获无效数据并相应地警告用户，而无需往返于服务器。

  2. Client side source code ：ASP.NET 页面生成此代码。例如，ASP.NET 页面的 HTML 源代码包含许多隐藏字段和自动注入的 JavaScript 代码块，这些代码块保持视图状态等信息或执行其他作业以使页面正常工作。

Client Side Scripts

所有 ASP.NET 服务器控件均允许对使用 JavaScript 或 VBScript 编写的客户端代码进行调用。一些 ASP.NET 服务器控件使用客户端脚本向用户提供响应而无需回发给服务器。例如，验证控件。

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

传统的服务器 HTML 控件具有在引发时可以执行脚本的以下事件：

Event

Description

onblur

当控件失去焦点时

onfocus

当控件收到焦点时

onclick

当控件被单击时

onchange

当控件的值发生变化时

onkeydown

当用户按下某个键时

onkeypress

当用户按下某个字母数字键时

onkeyup

当用户释放某个键时

onmouseover

当用户将鼠标指针移到控件上时

onserverclick

当单击控件时，会引发控件的 ServerClick 事件

Client Side Source Code

我们已经讨论了，通常情况下，ASP.NET 页面会写入两个文件中：

  1. 内容文件或标记文件 (.aspx)

  2. The code-behind file

内容文件包含 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> 标记包含存储视图状态和验证信息的隐藏字段。