極客書

ASP.NET - Client Side

ASP.NET客戶端編碼有兩個方面：

  • 客戶端腳本：它在瀏覽器上運行，從而加快頁面的執行速度。例如，客戶端數據驗證，它可以捕獲無效數據並相應地警告用戶，而不必往返於伺服器。

  • 客戶端原始碼：ASP.NET頁生成此項。例如，ASP.NET頁面的HTML原始碼包含許多隱藏欄位和自動注入的JavaScript代碼塊，這些代碼塊保存視圖狀態等信息或執行其他任務以使頁面正常工作。

Client Side Scripts

所有ASP.NET伺服器控制項都允許調用使用JavaScript或VBScript編寫的客戶端代碼。一些ASP.NET伺服器控制項使用客戶端腳本向用戶提供響應，而不發回伺服器。例如，驗證控制項。

除了這些腳本之外，Button控制項還有一個OnClientClick屬性，它允許在單擊按鈕時執行客戶端腳本。

傳統和伺服器HTML控制項具有以下事件，可以在引發時執行腳本：

Event Description
onblur When the control loses focus
onfocus When the control receives focus
onclick When the control is clicked
onchange When the value of the control changes
onkeydown When the user presses a key
onkeypress When the user presses an alphanumeric key
onkeyup When the user releases a key
onmouseover When the user moves the mouse pointer over the control
onserverclick It raises the ServerClick event of the control, when the control is clicked

Client Side Source Code

我們已經討論過，ASP.NET頁面通常用兩個文件編寫：

  • The content file or the markup file ( .aspx)
  • 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>標記包含存儲視圖狀態和驗證信息的隱藏欄位。