ASP.NET用戶端 - tw511教學網

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

用戶端指令碼：它執行在瀏覽器上，進而加速頁面的執行。例如，可以捕獲無效資料的用戶端資料驗證，並相應地警告使用者而不進行往返伺服器互動。
用戶端原始碼：ASP.NET頁面生成這個。例如，ASP.NET頁面的HTML原始碼包含許多隱藏的欄位，並自動注入了JavaScript程式碼塊，這些程式碼保留了諸如檢視狀態之類的資訊，或者執行其他工作來使頁面工作。

用戶端指令碼

所有ASP.NET伺服器控制元件都允許呼叫使用JavaScript或VBScript編寫的用戶端程式碼。一些ASP.NET伺服器控制元件使用用戶端指令碼來為使用者提供響應而不回發給伺服器。例如，驗證控制元件。

除了這些指令碼之外，Button控制元件還有一個屬性OnClientClick，它允許在單擊按鈕時執行用戶端指令碼。

傳統和伺服器HTML控制元件具有以下事件，可以在引發時執行指令碼：

編號	事件	描述
1	`onblur`	當控制元件失去焦點時觸發
2	`onfocus`	當控制元件收到焦點時觸發
3	`onclick`	點選控制元件時觸發
4	`onchange`	當控制元件的值改變時觸發
5	`onkeydown`	當使用者按下一個鍵時觸發
6	`onkeypress`	當使用者按下字母數位鍵時
7	`onkeyup`	當使用者釋放一個鍵時
8	`onmouseover`	當使用者將滑鼠指標移到控制元件上時
9	`onserverclick`	當控制元件被點選時，它會引發控制元件的ServerClick事件

用戶端原始碼

我們已經討論和學習過了，ASP.NET頁面一般都是用兩個檔案寫成的：

內容檔案或標記檔案(.aspx)
程式碼隱藏檔案(.cs)

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