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> 標籤包含儲存檢視狀態和驗證資訊的隱藏欄位。

列印頁面