ASP.NET 的客戶端編碼有兩面向:
客戶端腳本:它在瀏覽器中運行並且依序加速頁面的執行。例如,客戶端資料有效性能夠捕捉無效資料並相應地提醒使用者而不經過在伺服器中回發。
客戶端原始程式碼:ASP.NET 網頁形成了該客戶端原始程式碼。例如,ASP.NET 網頁的HTML 原始碼包含了若干隱藏區域並能自動注入Java 描述語言程式碼,從而保留了資訊像視圖狀態一樣,或者進行其他工作保證網頁正常運作。
所有ASP.NET 伺服器控制項都允許回應透過Java 語言或VBS 語言繪製的編碼。有些ASP.NET 伺服器控制項端使用客戶端腳本進行使用者需求的反應,而並沒有回傳到伺服器。例如,資料有效性控制項。
除了這些腳本,按鈕控制項具有適當的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>
當這個頁面在瀏覽器中運行時,View Source 選項顯示了HTML 網頁並透過ASP.Net 運行時間傳送到瀏覽器:
<!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> 標籤包含了儲存的視圖狀態和有效資料的隱藏域。