2011年2月20日 星期日

4-11 Web Form的其他重要屬性與方法

透過這一章的介紹,讀者應已完整的了解整個Web From的架構,以及在程式設計時所需注意之處。Web Form物件是整個ASP.NET程式設計的主角,在命名空間上的物件層級是System.Web.UI.Page


何謂命名空間(Namespace)
其實Namespace翻譯成『命名空間』本身就相當值得商榷,但是這個翻譯是.NET Framework SDK中統一的說法,因此我們也順著這個方式來稱呼它。
所謂的命名空間實際上就是物件的階層,在物件導向程式設計概念中,因為物件可以被繼承,而物件在設計時是由基底物件開始,一層一層的繼承下來,因此物件會有階層的架構。例如,我們的Web From物件的層級就是System.Web.UI.Page,而Web From上面的Web控制項則是System.Web.UI.WebControls。透過命名空間這個方式,開發人員比較容易知道物件歸屬的層級以及物件之間的繼層關係。


Web From即是Page物件,而該物件的重要屬性如下:

4-10 Try…End Try錯誤處理程序

        在過去ASP時代,程式碼中只有On Error可用來捕捉或處理錯誤,而ASP.NET中,除了On Error可用之外,還可以利用Try …End Try來進行錯誤處理。

        Try…End Try』這個新玩意兒,看起來好像很有學問的樣子,其實用起來相當的簡單,基本的指令架構如下:
Try
   [ tryStatements ]
[ Catch [ exception [ As type ] ] [ When expression ] 
   [ catchStatements ] ]
[ Exit Try ]
...
[ Finally
   [ finallyStatements ] ]
End Try

        上面是『Try…Catch…Finally』在.NET Framework中完整的定義,對於程式設計師,它的內涵就是:
Try
   可能發生錯誤的程式
[ Catch [ exception [ As type ] ] [ When expression ]
   發生錯誤時,要執行的指令
[ Exit Try ]若下了Exit Try 指令,則跳出Try…End Try結構
[ Catch [ exception [ As type ] ] [ When expression ]
   Catch 可以有很多個,程式會依照 When 後面的expression來決定執行哪一個Catch敘述
[ Finally
   只要一進入Try敘述中,不管有沒有錯誤或從Try敘述中的哪一部份離開都執行的程式
End Try

底下是實例:

4-9 Web Form 中的執行與單步執行偵錯

        當您在Web From上面佈置好了控制項,並且撰寫好相關的程式之後,就可以開始執行該Web應用程式。Visual Basic.NET提供了一個相當好的偵錯環境,您可以在需要時設定中斷點,以利程式的執行。

        您在程式設計環境中,可以在需要中斷的程式碼位置,以滑鼠游標按下視窗最左邊的位置,將會出現一個『紅點』,如下圖所示:

        這樣,當您按下[F5]或是建置執行這個方案時,依舊會跳出Browser執行視窗:


        因為我們將中斷點設定在第26行的『Calendar1_SelectionChanged』事件中,因此當您在Calendar控制項上,點下某個日期之後,就會發現瀏覽器中的顯示內容停留在上面這個畫面。

        系統會跳回Visual Basic.NET環境,這時您會看到如下圖的畫面:

        程式暫停在上面這個位置,這時您可以單步執行或是繼續執行此程式。另外,在左下角的『自動變數』視窗中,還會有目前記憶體內程式執行中使用到的變數之現行值,以方便您追蹤偵錯。

        您甚至可以在右下角的命令視窗中,輸入指令讓Visual Basic.NET來執行,動態的改變記憶體內變數的值,如下圖所示:
        這些功能都是過去ASP開發環境中所沒有的,因此,若您利用Visual Basic.NET來開發ASP.NET應用程式,將會如虎添翼,不僅增加開發的效率,更讓整個過程比起過去ASP時代輕鬆了不少。

4-8 在Web Form中佈置與使用Web控制項

        接下來我們要看ASP.NET中的重頭戲了,那就是Web From上面的Web控制項。這是物件導向網頁設計不可或缺的重要議題,先前我們其實已經使用過很多次Web控制項來建構網頁了。

        我們開啟一般的Web應用程式專案之後,畫面上會是底下這樣,您可按下滑鼠右鍵選擇『屬性』,將屬性頁視窗叫出來,將頁面從GridLayout改為FlowLayout
        Web From提供這兩種方式來決定物件的擺置方式,如果是採FlowLayout,則頁面上的HTML碼會是比較單純的設定,在指定物件時,不會利用Style指令來進行設定(比較像一般的網頁配置方式)。反之,若是採用GridLayout,則會將每一個物件預設為使用Style格式來指定物件在Web From上面佈置的位置(比較像Windows程式設計)

        如果是以FlowLayout方式來佈置物件,則HTML碼會是:

FlowLayout方式來佈置物件
<form id="Form1" method="post" runat="server">
   <FONT face="新細明體">
   <asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
   <asp:Button id="Button1" runat="server" Text="Button" ></asp:Button>
   </FONT>
</form>




        注意當您拖曳Button放在TextBox物件後面時,FlowLayout模式將會把物件緊連著上個物件佈置,這是由於HTML碼本身就是以這樣連接著的方式來呈現網頁。

        若使用GridLayout方式來佈置物件,HTML碼則是:
GridLayout方式來佈置物件
<form id="Form1" method="post" runat="server">
   <FONT face="新細明體">
   <asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
   <asp:Button id="Button1" runat="server" Text="Button" style="Z-INDEX: 101; LEFT: 146px; POSITION: absolute; TOP: 56px"></asp:Button>
   </FONT>
</form>


        注意上面的HTML碼中的Style部分,因為HTML碼的不同,所以在畫面呈現上也有不同:

4-7 Response物件

        如果您曾經撰寫過VB程式,比較起來,Response.write就像過去VB時代的Print指令,能夠在表單上顯示一段文字,卻無法任意的輸出在某個物件上或將文字顯示在我們需要的特定位置,因此,才會需要有Label物件的產生。

        您可以在Web From上面佈置Label物件,這樣當您使用『Label.Text=”要顯示的文字』時,文字就會呈現在網頁上您佈置Label物件的位置。

        但是這樣,我們ASP.NET中的Response物件又用來幹麻呢?和Request物件一樣,Response物件也被擴充來進行其他更複雜的任務。諸如直接在網頁上輸出圖檔或二進位元格式的資料(Response.BinaryWrite)、將文字檔的內容整個輸出至網頁(Response.WriteFile)檔案網頁上檔案的輸出、增加Http Header的處理(AppendHeader)、附加IIS Log項目(AppendToLog)…等,這些都是高階ASP.NET程式設計會探討的部分,我們在後面會詳細的說明。

4-6 Request物件

        在物件化的Web應用程式設計概念下,我們越來越少透過Request.form(“物件名稱”)之類的程式碼取得Submit回來的值,因此request物件的應用越來越偏向伺服器端資訊的取得,而非過去ASP參數接收的功能。


        但是我們依舊來看一下Request.Form(“變數名稱”)這樣的語法在ASP.NET上的應用。

        我們建立一個Web應用程式,在Web From上面佈置一個TextBox和一個Button

4-5 Web Form物件

        經過前面四節摧殘,現在終於可以鬆了一口氣,開始進入ASP.NET程式設計的重點 Web Form 物件』。

        前面提過,『之所以在要花四節的篇幅來介紹整個ASPX運作流程,是因為進入高階的ASP.NET Web應用程式設計領域,得需要瞭解整個ASPX的運作概念,才能夠精準的掌握程式設計的流程,善用Web控制項,並且流利的操作Web Form物件,否則在撰寫Web應用程式的時候,很有可能會循著過去ASP的習慣,把ASP.NET當成ASP來用,這樣將失去ASP.NET的價值,且容易背離Web Form的物件導向程式設計精神。』

        上面這段敘述中,提到了一個在ASP時代和ASP.NET時代相當不同程式設計理念,在ASP中,基本上是以VB Script的程式語言架構來開發,因此實在沒什麼物件導向的架構(也沒有此需要),而且也實在很不容易實作出來。

        但是ASP.NET則是標準的物件導向程式設計架構,我們先看一個空白的Web Form網頁就可以知道。

4-5-1 Web Form網頁的物件導向架構

        當您建立一個Web Form網頁時,標準的空白Web Form頁面會像下面這樣:

4-4 單一的〈Form〉Tag

        在正常情況下, ASP.NET網頁中應該只有單一的一個<Form>標記。而且,在一般的情況下,永遠不要在ASP.NET網頁的HTML碼中手動加入<Form>標記。

        一般而言,ASP.NET網頁的HTML碼應該是這樣:

4-3 Code Behind技術剖析

        事實上Code Behind不是什麼了不得的技術,其實我們在過去ASP程式撰寫時偶爾也會突發奇想的來這麼一下子,我們看下面的網頁片段:
0001:<!--# include file="functions.inc"-->
0002:<html>
0003:
0004:<head>
0005:<meta http-equiv="Content-Type" content="text/html; charset=big5">
0006:<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
0007:<meta name="ProgId" content="FrontPage.Editor.Document">
0008:<title>新網頁1</title>
0009:</head>
0010:<body>
0011:<form method="POST" action="--WEBBOT-SELF--">
0012:  <p><input type="text" name="T1" size="20"></p>
0013:  <p><input type="submit" value="提交" name="B1"><input type="reset" value="重新設定" name="B2"></p>
0014:</form>
0015:</body>
0016:</html>

        我們有時候會利用#includeASP網頁中讀入一段程式,並且執行它,這種感覺就有點像是Code Behind程式碼,我們把ASP程式碼和網頁分開,主要的目的也是方便管理。

        Code Behind 程式碼有那麼一點這樣的感覺。

        可是,當我們試圖發揮這樣的精隨的時候,ASP開始技窮了,我們看下面這段ASP程式碼: 

4-2 Web Form運作概念

        所以透過上面的描述,您會發現,整個Web Form的運作過程大致如下圖:

        我們在上一節的說明中也會發現,Web Form網頁在做Submit動作的時候,一律回傳給自己,而且整個Web Form網頁中永遠只有一個<Form>標記,這是為了Web Form這樣的機制能夠正常的運作而設計的,我們後面會再詳談這樣的技術。

        注意畫面中的步驟三,在這個階段,我們透過.NET Framework來執行我們的ASPX網頁,這時Code Behind程式碼就登場了,所有我們的程式設計,都集中在這一部份,舉凡Web Form的運作,控制項的事件處理、網頁畫面上的調整與呈現都在這裡搞定,我們接下來看看Code Behind部分。

4-1 ASPX和 ASP

        我們前面曾經介紹過ASPASP.NET的不同,這一節我們則將焦點放在『*.ASP檔案』和『*.ASPX檔案』的不同處上。由於我們透過Visual Basic.NET來撰寫程式,因此我們所討論的內容都是以Code-Behind為基本架構。

        首先,我們再回顧第二章中所談過的登入介面做例子,您會發現ASPXASP檔案有著些許的不同:

ASPX
ASP
網頁部分
 在網頁HTML碼部分,除了HTML指令之外,還有<asp:TextBox>…</asp:TextBox >之類的非標準的HTML標記,以及runat="server"標記,這些標記是給.NET Framework看的
在網頁HTML碼部分,僅有單純的HTML指令。
程式部分
ASPX第一行定義了Code Behind程式碼的位置()
程式碼以<%…%>的方式包含並夾雜在ASP網頁裡面。
程式語言
Web Form『物件』為基本架構,使得網頁物件在伺服器端執行時可以有屬性、事件、方法等物件導向特性。
ASP撰寫的網頁,在伺服器端部分的執行運作沒有物件導向特性,僅可用Java Script撰寫Client端事件。

        Code Behind架構下,ASPX檔案的程式碼實際上放置在*.aspx.vb中,而ASPX網頁的第一行,定義了程式碼檔案的位置,當IIS(嚴格說起來是.NET Framework)在執行ASPX網頁時,會先從ASPX網頁的第一行找到程式碼檔案的位置,如下:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="login.aspx.vb" Inherits="AspxDemo.login"%>