ASP.NET客戶端

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>標籤包含隱藏的字段,用於存儲視圖狀態和驗證資訊。


上一篇: ASP.NET HTML伺服器 下一篇: ASP.NET基本控件