NET網(wǎng)頁程式的開發(fā)流程

第三章

ASP.NET網(wǎng)頁程式的開發(fā)流程在本章中，我們將介紹開發(fā)ASP.NET網(wǎng)頁程式的流程，並從無到有，實際開發(fā)一個完整的ASP.NET網(wǎng)站。藉由此範(fàn)例，讀者能夠迅速了解開發(fā)ASP.NET網(wǎng)站的順序，有利於之後的範(fàn)例練習(xí)。1第三章

ASP.NET網(wǎng)頁程式的開發(fā)流程繼上一章熟悉VWD的環(huán)境後，在本章中，我們將透過一個完整的實例，實際示範(fàn)開發(fā)ASP.NET網(wǎng)頁的完整流程，並釐清ASP.NET網(wǎng)頁程式與傳統(tǒng)ASP在設(shè)計與執(zhí)行上有何不同。除此之外，我們還會觀察ASP.NET執(zhí)行後回傳的HTML，藉以了解控制項被如何進行處理。2大綱3.1 開發(fā)ASP.NET網(wǎng)頁程式的流程3.2 第一個ASP.NET完整程式3.2.1 問題分析3.2.2 設(shè)計網(wǎng)站地圖與設(shè)計流程圖3.2.3 設(shè)計使用者介面3.2.4 編輯程式碼3.2.5 執(zhí)行程式3.2.6 測試與修改3.3 讀取舊網(wǎng)站3.4 原始檔說明3.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念3.6 本章回顧33.1 開發(fā)ASP.NET網(wǎng)頁程式的流程VWD的出現(xiàn)，使得開發(fā)ASP.NET網(wǎng)頁程式和開發(fā)一般視窗程式〔如VB.NET視窗程式〕的過程越來越相似，最大的差別在於(1)使用的是【W(wǎng)ebForm】而非WindowsForm；(2)執(zhí)行時必須同時考量到瀏覽器端與伺服器端；(3)介面設(shè)計必須使用【絕對定位】較能隨心所欲配置元件。VWD為了達成上述幾點功能，背後隱含了一些特別的技術(shù)例如絕對定位實際上搭配的是CSS，因為單純的HTML無法達到此功能，但這些背後隱含的技巧並非本書的重點，我們只會在必要時提醒讀者。依照上述幾點小差異，我們可以將一個ASP.NET網(wǎng)頁程式的開發(fā)流程分為五個階段如下。43.1 開發(fā)ASP.NET網(wǎng)頁程式的流程第一階段：分析問題階段〔ProblemAnalysis〕不同的問題的解決方式當(dāng)然不同，首先，您應(yīng)該要先確定所遭遇的問題是否可以使用電腦來解決，以及是否適合使用電腦來解決。例如：要完全精算預(yù)測樂透開獎的六個號碼，是無法用電腦來解決的。要統(tǒng)計樂透開獎的歷史號碼則可以很容易利用電腦來解決〔前提是您擁有記錄歷史號碼的資料庫或檔案〕。而假設(shè)不統(tǒng)計，只是直接顯示每一期的歷史號碼，則可能簡單到完全不用撰寫程式，只要設(shè)定相關(guān)元件的資料來源連結(jié)即可。53.1 開發(fā)ASP.NET網(wǎng)頁程式的流程第二階段：設(shè)計網(wǎng)站地圖與流程圖/演算法〔WebMapandFlowchart/AlgorithmDesign〕傳統(tǒng)網(wǎng)站程式通常不只一個，您應(yīng)該思考網(wǎng)站將使用哪些動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁，以及其中的關(guān)聯(lián)性為何？也就是設(shè)計網(wǎng)站地圖，並且規(guī)劃網(wǎng)頁必須傳送那些資訊給目標(biāo)網(wǎng)頁。而對於ASP.NET的WebForm網(wǎng)頁而言，它的目標(biāo)動態(tài)網(wǎng)頁將是網(wǎng)頁本身，故通常網(wǎng)站地圖較為單純，但有時我們?nèi)钥赡軙⒍鄠€網(wǎng)頁，並透過網(wǎng)頁轉(zhuǎn)向或超鏈結(jié)方式進行連結(jié)，此時，您仍需要設(shè)計網(wǎng)站地圖。63.1 開發(fā)ASP.NET網(wǎng)頁程式的流程針對單一網(wǎng)頁而言，假設(shè)採用ASP.NET來撰寫程式，則您應(yīng)該針對每一個元件的事件進行規(guī)劃，有哪些元件的哪些事件需要被處理，而該事件的處理程序?qū)⑻峁┖畏N功能，並將該功能使用流程圖或演算法來描述。流程圖是一種使用圖形符號來解決問題的順序表達方式而演算法則是類似程式語言的一種使用文字表達解決問題的步驟。因此，在此階段中，您尚不需思考要用VB.NET還是C#語法來實作ASP.NET。網(wǎng)頁程式相對於視窗程式來說，通常功能較為簡單，流程圖也較為簡單，傳統(tǒng)的動態(tài)網(wǎng)頁設(shè)計，您必須同時考量到哪些程式應(yīng)該在伺服器端執(zhí)行，而哪些程式交給客戶端執(zhí)行。而VWD提供了一些特殊元件〔例如日曆控制項〕，它在實際運作時，是在客戶端執(zhí)行，因此省去了開發(fā)JavaScript程式的困擾。故您可以暫時假設(shè)面對的就是伺服器網(wǎng)頁，並採用事件驅(qū)動方式來設(shè)計網(wǎng)頁即可。73.1 開發(fā)ASP.NET網(wǎng)頁程式的流程第三階段：設(shè)計使用者介面〔UserInterfaceDesign〕使用者介面關(guān)係著一個網(wǎng)頁程式的被接受度，目前有越來越多型態(tài)的Web-Based應(yīng)用程式出現(xiàn)，例如WebMail，它的介面已經(jīng)與一般視窗應(yīng)用程式非常類似，所幸，VWD讓我們在設(shè)計網(wǎng)頁介面時，可以和設(shè)計視窗程式般方便，只要透過工具箱所提供的各種控制項，我們可以很快速地設(shè)計出使用者介面的雛形。83.1 開發(fā)ASP.NET網(wǎng)頁程式的流程第四階段：撰寫程式碼〔Coding〕既然我們已經(jīng)擁有解決問題的流程圖或演算法，並且將使用者介面的雛形完成了，接下來的動作就是針對使用者介面中的每一個物件，撰寫事件處理程序，也就是程式碼。所以本階段實際上就是使用VB.NET語法來實踐流程圖或演算法的過程?！参覀儗㈧兜?章與第5章詳細說明VB.NET的語法〕在撰寫程式時，您應(yīng)該善用註解，以便幫助日後維護程式的人更容易了解程式每一區(qū)塊的意義。根據(jù)經(jīng)驗，當(dāng)經(jīng)過一段時日之後，就連自己也常常容易忘記當(dāng)初設(shè)計程式時為何要如此構(gòu)思，而這些註解則可以幫助您找回記憶。假設(shè)程式較複雜，且日後很可能重複使用，您也應(yīng)該善用物件導(dǎo)向的特性，開發(fā)特定的類別以供使用。但本書屬於初學(xué)者閱讀之書籍，我們並不會介紹如何開發(fā)VB.NET的類別，只會使用內(nèi)附類別庫的現(xiàn)有類別〔例如Math類別〕。93.1 開發(fā)ASP.NET網(wǎng)頁程式的流程第五階段：驗證程式正確性〔Verification〕程式撰寫完畢後，接著就是將程式編譯並執(zhí)行。程式在編譯時，編譯器會替您找出所有不合語法〔Syntax〕的程式碼，此時您應(yīng)該加以修正使得能夠通過編譯器的編譯。編譯成功並不代表程式就是正確的，它仍可能出現(xiàn)語意或邏輯上的錯誤，也就是該程式根本無法解決您所想要解決的問題。而我們又如何能夠得知程式是否出現(xiàn)這些錯誤呢？這就是程式的測試與驗證的問題，對於簡單的問題，把所有可能的狀況都測試一次，自然是最保險的驗證方式。因此，執(zhí)行的過程中，可能包含了跨網(wǎng)頁的測試。甚至可能需要開啟多個瀏覽器程式來觀察〔例如聊天室程式〕。103.1 開發(fā)ASP.NET網(wǎng)頁程式的流程除此之外，有時候網(wǎng)頁程式同時包含伺服器端與客戶端程式，甚至有些客戶端的JavaScript程式在網(wǎng)頁一被瀏覽器載入時就自動執(zhí)行，此時可能不容易找出問題是出在客戶端程式還是伺服器端程式，而您可以藉由觀察伺服器端的輸出來檢查是否有不符合設(shè)計的局部觀察伺服器端的輸出則可以透過在瀏覽器中執(zhí)行快顯功能表的【檢視原始碼】來觀看。而假設(shè)您撰寫的程式只牽涉到伺服器端，問題就比較單純，或者您的客戶端程式也是使用VWD提供的元件構(gòu)成，通常也比較不會出現(xiàn)問題。113.1 開發(fā)ASP.NET網(wǎng)頁程式的流程上述步驟中，有時候會分項交給專人負責(zé)例如介面的設(shè)計〔元件的配置〕可能交給具有美工背景的人員來完成，而撰寫程式則交由程式設(shè)計師來開發(fā)。在此種情況下，使用程式碼隱藏模式將ASP.NET網(wǎng)頁分為.aspx與.aspx.vb兩個檔案較為適合。但本書都以單一檔案模式來開發(fā)ASP.NET網(wǎng)頁，讀者可同時學(xué)習(xí)如何配置介面元件以及撰寫事件程序。以下是開發(fā)ASP.NET網(wǎng)頁程式的流程圖。圖3-1ASP.NET網(wǎng)頁程式的開發(fā)流程圖123.2 第一個ASP.NET完整程式我們透過一個簡單的範(fàn)例來說明如何設(shè)計一個ASP.NET程式，並且與上一節(jié)的五個階段相呼應(yīng)。133.2.1 問題分析假設(shè)現(xiàn)在我們希望設(shè)計一個程式，由使用者輸入一串文字，並且將輸入的文字與某些字串相連然後顯示。明顯地這個問題可以很容易使用電腦來解決。使用者的要求如下：(1)可以輸入姓名。(2)輸出某些文字。(3)輸出的文字包含原有的字串以及輸入的字串。143.2.2 設(shè)計網(wǎng)站地圖與設(shè)計流程圖在這個題目要求下，我們只需要使用單一個.aspx網(wǎng)頁即可，因此網(wǎng)站地圖非常簡單，如下圖，假設(shè)您強制想要使用兩個網(wǎng)頁〔一個用來輸入的HTML網(wǎng)頁、一個用來輸出的程式網(wǎng)頁〕也可以，但通常使用ASP.NET以WebForm範(fàn)本設(shè)計網(wǎng)頁時，只需要使用單一個網(wǎng)頁。同時由於題目過於簡單，

所以我們只需要繪製流程圖即可〔如圖〕。圖3-2網(wǎng)站地圖圖3-3設(shè)計程式運作的流程圖153.2.3 設(shè)計使用者介面我們將使用者介面設(shè)計如下圖。(1)使用者可以在輸入?yún)^(qū)輸入文字。(2)按下【顯示】鈕之後，輸入字串的串接結(jié)果會出現(xiàn)在顯示結(jié)果區(qū)。(3)網(wǎng)頁標(biāo)題會出現(xiàn)該程式的用途。163.2.3 設(shè)計使用者介面下面是程式的執(zhí)行結(jié)果範(fàn)例〔一般來說，在實際進行專案開發(fā)前，通常會事先製作一些假的預(yù)期結(jié)果交由客戶評斷是否符合要求〕。173.2.3 設(shè)計使用者介面我們所設(shè)計的使用者介面一共必須使用以下6個ASP.NET的物件。183.2.3 設(shè)計使用者介面【實作範(fàn)例3-1Part1】：編輯使用者介面註：範(fàn)例3-1共有5個Part，請一股作氣完成。編輯使用者介面一共有兩項重要的工作：(1)配置各控制項物件的位置。(2)設(shè)定物件的屬性值。建立新網(wǎng)站，並設(shè)定網(wǎng)頁標(biāo)題19203.2.3 設(shè)計使用者介面產(chǎn)生控制項切換到【設(shè)計】分頁，然後參閱第2章，開啟工具箱的【標(biāo)準(zhǔn)】頁籤，在網(wǎng)頁中參加2個標(biāo)籤〔Label〕控制項、1個按鈕〔Button〕控制項及1個文字方塊〔TextBox〕控制項〔共四個控制項〕，然後將各控制項皆設(shè)定為【絕對定位】，並移動到適當(dāng)位置，結(jié)果如圖?！脖匾獣r，可以選取多個控制項，然後執(zhí)行【格式／對齊／某方向】指令來進行位置的對齊〕21設(shè)定屬性依據(jù)使用者介面的規(guī)劃，我們需要設(shè)定以下物件的屬性?！睵age已經(jīng)設(shè)定、而form1沒有屬性需要設(shè)定〕223.2.3 設(shè)計使用者介面設(shè)定按鈕物件的屬性23243.2.3 設(shè)計使用者介面設(shè)定標(biāo)籤物件的屬性25263.2.3 設(shè)計使用者介面設(shè)定文字方塊物件的屬性273.2.4 編輯程式碼我們已經(jīng)將介面設(shè)計完畢，並且也已經(jīng)完成流程圖的設(shè)計?，F(xiàn)在我們將流程圖轉(zhuǎn)換為Button1物件的Click事件程序的程式碼?！緦嵶鞴?fàn)例3-1Part2】：延續(xù)Part1的實作，編輯事件程序的程式碼。撰寫Command1_Click事件程序28293.2.4 編輯程式碼【註】：如果您在輸入程式碼的過程中，發(fā)現(xiàn)突然出現(xiàn)下拉式選單，這代表智慧型程式編輯器開始發(fā)生作用，您可以藉由它的幫助，選取所需要的屬性〔也可以不加理會〕。303.2.4 編輯程式碼【程式碼解說】我們在【原始檔】分頁中，產(chǎn)生了1個事件程序，名稱是Button1_Click()。其中Button1是物件名稱，Click是事件名稱，代表「被按下」的事件。當(dāng)您於執(zhí)行階段時，真的按下了【顯示】鈕就會執(zhí)行Button1_Click()事件程序，該程序內(nèi)會設(shè)定Label2標(biāo)籤的文字。313.2.5 執(zhí)行程式我們的程式已經(jīng)撰寫完畢，接著就是執(zhí)行程式〔執(zhí)行前會自動編譯〕，看看到底我們的程式提供了怎麼樣的功能?！緦嵶鞴?fàn)例3-1Part3】：延續(xù)Part2實作，執(zhí)行Part2所撰寫的程式。323.2.5 執(zhí)行程式執(zhí)行程式：Step1:為了要讓ch03.aspx被編譯，並以伺服器方式傳送結(jié)果給客戶端瀏覽器，因此，我們按下【在瀏覽器中檢視】快捷鈕。333.2.5 執(zhí)行程式Step2:由於我們在之前的編輯並未存過檔，而ASP.NET在編譯時會讀取原始碼檔案，因此它會提示我們存檔，按下【是】鈕進行存檔。343.2.5 執(zhí)行程式Step3:此時會先進行編譯，然後執(zhí)行編譯後的檔案，檔案執(zhí)行後會產(chǎn)生HTML格式碼，並透過HTTP協(xié)定送給客戶端瀏覽器由於VWD提供了虛擬Web網(wǎng)站伺服器〔稱之為ASP.NET程式開發(fā)伺服器〕，因此，此時會啟動Web網(wǎng)站伺服器〔您可以在桌面右下方看到ASP.NET程式開發(fā)伺服器的執(zhí)行狀況〕它會產(chǎn)生一個URL用以代表ASP.NET網(wǎng)站，其中l(wèi)ocalhost代表的是本地端主機〔因我們?nèi)栽陂_發(fā)中，故暫時沒有實際的IP可對應(yīng)〕，其後加上一個通訊埠號〔本例為1920〕，以及虛擬網(wǎng)站的目錄?！驹]】ASP.NET程式開發(fā)伺服器會自動尋找沒有使用的埠號當(dāng)作通訊埠號，因此，即使您已安裝了IIS等其他各類Web伺服器，也不會互相影響。353.2.5 執(zhí)行程式Step4:最後系統(tǒng)會自動開啟瀏覽器，讀取由ASP.NET程式開發(fā)伺服器送出的HTML格式碼網(wǎng)頁，並將其網(wǎng)頁效果顯示於瀏覽器中，您首先看到的網(wǎng)頁應(yīng)該與VWD【設(shè)計】分頁的介面類似，不過[Label2]並不會顯示，因為它實際上是一個空字串?！布僭O(shè)欲回到VWD開發(fā)環(huán)境，直接按下瀏覽器的關(guān)閉鈕即可?！扯W(wǎng)頁標(biāo)題文字則是Page物件設(shè)定的Title屬性值。363.2.5 執(zhí)行程式Step5:測試執(zhí)行結(jié)果。37383.2.5 執(zhí)行程式結(jié)束程式：假設(shè)您覺得已經(jīng)成功測試了，想要返回在VWDIDE整合開發(fā)環(huán)境，則只要按下瀏覽器的右上角的關(guān)閉鈕即可。393.2.6 測試與修改我們所撰寫的ASP.NET程式既然可以編譯後執(zhí)行，代表語法上已經(jīng)沒有錯誤，但是並不保證所有的語意都是正確的，也就是執(zhí)行結(jié)果是否完全是我們所想像的樣子決定了一個程式是否宣告完成。這種測試的工作一定要做，否則無法算是一個完整的程式設(shè)計?！緦嵶鞴?fàn)例3-1Part4】：測試與修改程式其實讀者如果好奇一點，到處亂按執(zhí)行結(jié)果的瀏覽器網(wǎng)頁時，就會發(fā)現(xiàn)一個現(xiàn)象。當(dāng)我們沒有輸入任何文字就直接按下【顯示】鈕，則會顯示『耶！也會寫程式了』，這並不符合我們的預(yù)期結(jié)果。403.2.6 測試與修改413.2.6 測試與修改Step1:修正程式碼。為了改善這個現(xiàn)象，我們必須重新修改Button1_Click()事件程序的程式碼。在此之前，請先關(guān)閉瀏覽器，然後做以下動作。。42433.2.6 測試與修改Step2:重新測試。重新執(zhí)行後，您會發(fā)現(xiàn)，假設(shè)未輸入文字就直接按下【顯示】鈕，則會出現(xiàn)警告訊息。443.3 讀取舊網(wǎng)站通常網(wǎng)頁開發(fā)無法一次就完成，此時我們會先將相關(guān)檔案存檔，日後再繼續(xù)工作。要開啟已經(jīng)存在的舊網(wǎng)站，只要依照以下範(fàn)例操作即可。本書範(fàn)例檔配置方式本書使用ASPNET目錄來存放範(fàn)例檔，並且所有的ASP.NET網(wǎng)頁都採用單一檔案模式開發(fā)，也就是不含.aspx.vb檔的模式。而為了配合章節(jié)安排，假設(shè)該章只有一個範(fàn)例，則使用單一目錄作為網(wǎng)站，例如第二章、第三章分別位於ASPNET\ch02與ASPNET\ch03。假設(shè)該章有多個範(fàn)例，則以該章之下的獨立子目錄作為網(wǎng)站目錄，例如範(fàn)例4-1使用ASPNET\ch04\ch04_01\。圖3-3本書範(fàn)例檔案配置453.3 讀取舊網(wǎng)站最後階段之維護與更新在圖3-1中，當(dāng)網(wǎng)頁功能完成後，網(wǎng)站會進入最後階段，有時會有一些必要的維護與更新。例如某些使用者使用一段時間後，覺得網(wǎng)頁元件配置順序應(yīng)該更動，比較容易操作等等，此時，要調(diào)整的大局部為介面，並不需要更動程式碼。而假設(shè)是使用一段時間後，被使用者反應(yīng)某局部程式出現(xiàn)錯誤，則必須進行程式碼的修改。在範(fàn)例3-1的前面步驟中，我們已經(jīng)完成了介面的配置以及程式的功能。但假設(shè)與之前規(guī)劃的介面相比〔或者使用者實際使用後的反應(yīng)〕，按鈕有些過小〔其中的文字無法完整顯示〕，文字方塊也太過於右邊。此時，我們可以讀取舊網(wǎng)站ch03，並進行介面的微調(diào)。當(dāng)我們進行介面的微調(diào)時，並不會更動<script>程式碼，因此網(wǎng)頁功能不受影響?！緦嵶鞴?fàn)例3-1Part5】：開啟舊網(wǎng)站〔Part4所儲存的網(wǎng)站〕並進行介面微調(diào)。46474849503.3 讀取舊網(wǎng)站【註】當(dāng)我們採用網(wǎng)站開發(fā)／檔案系統(tǒng)模式開發(fā)網(wǎng)頁時，每一個目錄為一個網(wǎng)站單位。假設(shè)要搬移網(wǎng)站，複製該目錄內(nèi)所有檔案到目標(biāo)目錄即可。513.4 原始檔說明由於我們使用的是單一檔案模式開發(fā)ASP.NET網(wǎng)頁，因此原始檔就只有一個檔案ch03.aspx。而其中由上而下可以分為三局部：指示詞、ASP.NET程序程式碼區(qū)、介面格式碼區(qū)。圖3-4單一檔案模式的原始檔內(nèi)容5212345678910111213141516171819<%@PageLanguage="VB"Title="這是一個簡單的ASP.NET網(wǎng)頁程式"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><scriptrunat="server">ProtectedSubButton1_Click(ByValsenderAsObject,ByValeAsSystem.EventArgs)IfTextBox1.Text=""ThenLabel2.Text="請在文字方塊中輸入文字後，再按下按鈕。"ElseLabel2.Text="耶！"+TextBox1.Text+"也會寫ASP.NET網(wǎng)頁程式了。"EndIfEndSub</script><htmlxmlns="/1999/xhtml"><headrunat="server"><title></title></head>533.4 原始檔說明2021222324252627282930313233343536373839<body><formid="form1"runat="server"><div>

<asp:LabelID="Label1"runat="server"style="top:31px;……;position:absolute;height:19px;…506px;"Text="姓名："Font-Size="Large"></asp:Label><asp:LabelID="Label2"runat="server"style="top:84px;……;position:absolute;height:……:358px"Font-Size="Large"></asp:Label><asp:ButtonID="Button1"runat="server"style="top:26px;……;position:absolute;……;"Text="顯示"Font-Size="Large"OnClick="Button1_Click"/><asp:TextBoxID="TextBox1"runat="server"style="top:31px;……;position:absolute;……;right:354px;"Font-Size="Medium"></asp:TextBox></div></form></body></html>543.4 原始檔說明原始檔逐行說明為了讓讀者更了解原始檔的內(nèi)容，以下我們針對原始檔內(nèi)的文字分區(qū)逐行說明，假設(shè)讀者擁有HTML的基礎(chǔ)，比較容易了解。假設(shè)不能夠完全了解HTML也無所謂，同樣能夠繼續(xù)往後的學(xué)習(xí)。指示詞(1)第1行是指示詞(directive)，指示詞的語法格式如下：：該行的Language屬性是告知編譯器，本網(wǎng)頁是使用VB語法〔也就是VB2021〕來撰寫。而Title屬性則是代表網(wǎng)頁執(zhí)行時的網(wǎng)頁標(biāo)題，我們在前面步驟中，利用屬性窗格設(shè)定了Page物件的Title屬性，故原始檔內(nèi)會自動更換為設(shè)定的值。(2)第3行，是一個HTML版本的宣告，它使用的是XHTML1.0Transitional版，這一行編譯器不會加以處理而是直接送給瀏覽器端。<%@指示詞指令屬性1="屬性值"屬性2="屬性值"……%>553.4 原始檔說明ASP.NET程序程式碼(3)第5~14行的<scriptrunat="server">是ASP.NET程序的程式碼所在處。<script>一般的用途在於宣告這是一個程式所在處，而runat="server"則是代表要由伺服器來執(zhí)行這局部的程式。(4)第7~13行是一個事件程序，名稱為Button1_Click()，代表Button1被按下(Click)時要自動執(zhí)行的程序。其中它包含兩個傳入引數(shù)，sender與e，一個是用來代表產(chǎn)生事件的事件來源，另一個則是用來代表事件的種類。(5)第8~12行是一個If…Then…Else條件判斷，可以用來進行流程控制，我們在第4章會進行說明。563.4 原始檔說明(6)第9行是一個VB敘述，它代表要將Label2的Text屬性設(shè)定為雙引號內(nèi)的字串。而由於Label2標(biāo)籤控制項的Text屬性就是代表標(biāo)籤文字，因此標(biāo)籤文字在此行執(zhí)行後會被改變。(7)第11行也是一個VB敘述，功能同樣是設(shè)定Label2的Text屬性。不過其中我們使用了+號運算子來串接三個字串。第一個字串與第三個字串都是常數(shù)字串而第2個字串TextBox1.Text代表要TextBox1的Text屬性值由於TextBox1是文字方塊，Text屬性代表方塊中的文字，因此第2個字串將會是使用者輸入的文字。573.4 原始檔說明介面格式碼(8)第16~39行的<htmlxmlns=":///1999/xhtml">…</html>是負責(zé)介面的格式碼，也就是代表一個網(wǎng)頁的外觀。假設(shè)您了解HTML網(wǎng)頁的話，就會知道<html>是HTML網(wǎng)頁的根標(biāo)籤，它應(yīng)該包含<head>與<body>兩個子標(biāo)籤。(9)第17~19行的<head>標(biāo)籤和一般HTML的標(biāo)籤類似，同樣包含<title>標(biāo)籤用以設(shè)定網(wǎng)頁標(biāo)題〔請注意此時<title>內(nèi)容是空的〕。不過，此處的<head>標(biāo)籤包含了runat="server"屬性，代表這個標(biāo)籤的內(nèi)容需要被伺服器處理而非直接輸出給瀏覽器。事實上，上述程式經(jīng)過伺服器處理後，第17~19行的格式碼會變成下者〔而下者已經(jīng)是單純的HTML標(biāo)籤格式〕<head><title> 這是一個簡單的ASP.NET網(wǎng)頁程式</title></head>583.4 原始檔說明明顯地，我們可以得知，由於runat="server"屬性，使得CLR必須處理<head>標(biāo)籤內(nèi)容，而CLR的處理方式為，將Page物件的Title屬性值，參加到<title>標(biāo)籤中，使得瀏覽器能夠顯示網(wǎng)頁標(biāo)題。其餘則不需要變動。(10)第20~38行的<body>沒有runat="server"屬性，代表這個標(biāo)籤不需要被伺服器處理可以直接輸出給瀏覽器〔但不代表其內(nèi)的標(biāo)籤也不需要被處理〕。而了解HTML網(wǎng)頁的讀者就可以知道，<body>在HTML網(wǎng)頁中代表的是網(wǎng)頁內(nèi)容。(11)第21~37行的<form>標(biāo)籤和一般HTML的<form>標(biāo)籤類似，具有傳送資料的表單功能，但由於此處的<form>標(biāo)籤包含了runat="server"屬性，代表這個標(biāo)籤的內(nèi)容需要被伺服器處理而非直接輸出給瀏覽器。事實上，我們所建立的WebForm網(wǎng)頁，內(nèi)定會附上<form>物件，而<form>物件就是以此標(biāo)籤出現(xiàn)在原始檔中，而其物件名稱則使用id屬性來標(biāo)示〔假設(shè)想要修改物件名稱，請利用屬性窗格來設(shè)定，不要在原始檔中自行更改〕。593.4 原始檔說明而WebForm物件也具有容器性質(zhì)，故可以包含其他控制項，事實上，WebForm物件在編譯後，不但會出現(xiàn)<form>標(biāo)籤，並且也會出現(xiàn)目標(biāo)網(wǎng)頁名稱，而這個目標(biāo)網(wǎng)頁就是網(wǎng)頁本身(ch03.aspx)，同時會出現(xiàn)一些隱藏性質(zhì)的<input="hidden">標(biāo)籤利用此兩種方式，使得設(shè)計網(wǎng)頁時可以如同設(shè)計一般視窗程式。(12)第22~36行的<div>標(biāo)籤只是一個普通的HTML標(biāo)籤，可以用來代表某一段文字，一般會搭配CSS樣式表來改變文字的格式。<div>也是WebForm網(wǎng)頁內(nèi)定會附上的標(biāo)籤。603.4 原始檔說明(13)第24~26行的<asp:LabelID="Label1"runat="server">，其中<asp:Label>代表這是一個標(biāo)籤控制項，ID屬性則是控制項物件的名稱，事實上，大局部的伺服器控制項都以<asp:xxxrunat="server">為其格式，由於同樣出現(xiàn)runat="server"，因此編譯器必須進行處理。而style屬性是用來設(shè)定CSS樣式表，我們將該標(biāo)籤的大小、位置設(shè)定完成後，VWD會將之記錄在此屬性中，以CSS來完成由於篇幅所限，因此，我們使用『…』省略了局部的屬性值。至於Text屬性則是代表標(biāo)籤控制項要顯示的預(yù)設(shè)文字。Font-Size屬性則是字型大小〔此屬性經(jīng)過編譯後，也會被納入style屬性中，變成CSS的型式〕。(14)第27~29行也是一個標(biāo)籤控制項。不過您會發(fā)現(xiàn)，它並沒有記錄Text屬性，這是因為目前預(yù)設(shè)文字為空字串的緣故。613.4 原始檔說明(15)第30~32行的<asp:ButtonID="Button1"runat="server">，其中<asp:Button>代表這是一個按鈕控制項，相關(guān)屬性的意義與上述標(biāo)籤控制項差不多，比較特別的是，它是一個獨立標(biāo)籤〔沒有結(jié)束標(biāo)籤〕，因此在末尾出現(xiàn)『/>』符號。而這樣的標(biāo)籤就無法包含其他的子標(biāo)籤了，因此它不具有容器性質(zhì)。此外，在此標(biāo)籤中，我們可以發(fā)現(xiàn)一個OnClick="Button1_Click"屬性，它代表著其OnClick事件程序的名稱。(16)第33~35行的<asp:TextBoxID="TextBox1"runat="server">，其中<asp:TextBox>代表這是一個文字方塊控制項，相關(guān)屬性的意義與上述標(biāo)籤控制項差不多。值得注意的是，雖然它擁有結(jié)尾標(biāo)籤</asp:TextBox>，但並不代表它可以包含其他控制項。本例的起始標(biāo)籤與結(jié)尾標(biāo)籤之間為空，假設(shè)包含某些文字，則這些文字會變成文字方塊內(nèi)顯示的文字。623.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念以往的動態(tài)網(wǎng)頁開發(fā)〔如傳統(tǒng)ASP、PHP〕，一般是以一個單純的HTML網(wǎng)頁〔當(dāng)然也可能是ASP或PHP網(wǎng)頁〕中包含一個表單<form>，將資料送往目標(biāo)網(wǎng)頁進行處理，而目標(biāo)網(wǎng)頁的網(wǎng)址則利用action屬性註明，它可能與原始網(wǎng)頁相同，也可能是另一個網(wǎng)頁。假設(shè)是同一個網(wǎng)頁，則設(shè)計起來比較複雜，因為您還需要判斷這是第一次讀取網(wǎng)頁還是接收了資料之後才讀取的網(wǎng)頁。在ASP.NET的規(guī)劃中，WebForm表單的目標(biāo)網(wǎng)頁將是網(wǎng)頁本身。不過它具有一套機制，使得判斷是否為第一次讀取並不需要設(shè)計者來操心。同時，ASP.NET充分使用了客戶端與伺服器端的程式分工，使得設(shè)計ASP.NET網(wǎng)頁變成與一般視窗程式更相似，故可以採用事件處理方式來開發(fā)網(wǎng)頁程式。對於本章的範(fàn)例來說，假設(shè)我們已經(jīng)將ch03網(wǎng)站搬移到某一個已安裝.NETFramework的IIS伺服器下運作，則圖3-5是其運作流程。633.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念圖3-5ASP.NETWebForm網(wǎng)頁的執(zhí)行流程643.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念【說明】我們依照時間序來說明範(fàn)例3-1的完整流程如下：(1)使用者在瀏覽器中輸入了ch03.aspx的網(wǎng)址。瀏覽器會送出HTTP請求給IIS伺服器。(2)IIS伺服器收到請求後，得知這是一個.aspx檔案，應(yīng)該交由.NETFramework來處理。(3).NETFramework的編譯器接手處理後，由第一行得知該aspx檔案內(nèi)容的語法為『VB』，故交由vbc.exe進行編譯。(4)編譯完成後，會在伺服器產(chǎn)生暫存的中間碼組件檔〔PE檔〕，當(dāng)中<scriptrunat="server">的程式〔例如事件程序〕已經(jīng)被編譯完成，並放在PE檔中。(5)CLR進行PE檔與類別庫的組合，組合完成後即刻執(zhí)行，並產(chǎn)生HTML格式碼〔其中包含了一個<form>表單，並且action屬性記錄為ch03.aspx〕，然後將HTML格式碼送交給IIS。(6)IIS將HTML格式碼送回給瀏覽器，回覆了上一次瀏覽器的HTTP請求。653.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念(7)瀏覽器收到HTML格式碼後將之解讀為我們看到的網(wǎng)頁格式，例如產(chǎn)生按鈕、產(chǎn)生文字方塊等等。(8)使用者在可輸入的元件中〔例如文字方塊〕輸入資料，然後按下【顯示】鈕。(9)由於【顯示】鈕與文字方塊都被包含在<form>表單中，因此會將這些資料送往<form>-action屬性記載的網(wǎng)頁，也就是ch03.aspx〔仍以HTTP協(xié)定方式送出〕。(10)IIS伺服器收到請求後，得知這是一個.aspx檔案，將資料與檔名交由.NETFramework來處理。(11).NETFramework的編譯器接手處理後，發(fā)現(xiàn)ch03.aspx已經(jīng)有一個編譯完成的中間碼組件檔〔PE檔〕，因此不需要再一次編譯〔此時節(jié)省了編譯的時間〕，可直接交由CLR進行組合與執(zhí)行。(12)CLR透過送來的資料〔如submit按鈕的名稱為Button1〕，可以得知這次要執(zhí)行的是一個事件程序Button1_Click()，因此執(zhí)行事件程序。(13)CLR執(zhí)行事件程序後產(chǎn)生新的HTML格式碼，交給IIS伺服器。(14)IIS伺服器回傳新的HTML格式碼給瀏覽器。663.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念(15)瀏覽器收到新的HTML格式碼後再次解讀為網(wǎng)頁格式。(16)使用者於瀏覽器中看到了執(zhí)行結(jié)果。以上是一個完整的執(zhí)行流程，而其中要達到此功能，最主要的關(guān)鍵在於第(10)步驟，也就是CLR如何能夠依照送來的資料得知要執(zhí)行的是Button1_Click()事件程序？其實並不困難，因為假設(shè)是submit按鈕被按下，則依照回傳的按鈕名稱即可知道要執(zhí)行哪一個事件程序。假設(shè)非submit按鈕被按下，則需要一些技巧，由於JavaScript可以針對每一個元件撰寫客戶端的事件程序，故只要在事件程序中參加傳送表單功能，就可以在其背後自動傳送資料給伺服器，而當(dāng)中可能使用了許多的<inputtype="hidden">標(biāo)籤記錄相關(guān)的資訊，並且由於是隱藏格式，故不會顯示在瀏覽器中，但仍會傳送給伺服器。673.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念在上圖的[2][5]中，我們可以在瀏覽器中，執(zhí)行快顯功能表的【檢視原始碼】指令，觀看這次回送的是哪些HTML格式碼，上圖[2]所接收的HTML格式碼如下〔其中我們省略了一些關(guān)於CSS樣式的描述〕：上圖[2]所接收的HTML格式碼<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"":///TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns=":///1999/xhtml"><head><title> 這是一個簡單的ASP.NET網(wǎng)頁程式</title></head><body>68

<formname="form1"method="post"action="ch03.aspx"id="form1">

<div>

<inputtype="hidden"

name="__VIEWSTATE"id="__VIEWSTATE"

value="/wEPDwUKMTEwNjE1Mzc5OWRkTk0SKEhFUYeyggx3//f1+CO032w="/>

</div>

<div>

<inputtype="hidden"

name="__EVENTVALIDATION"id="__EVENTVALIDATION"

value="/wEWAwLsuYutCAKM54rGBgLs0bLrBmCPorrGmpbZEJQosfxJdPT9vKwD"/>

</div><div>

<spanid="Label1"style="font-size:Large;…position:absolute;…">姓名：</span><spanid="Label2"style="font-size:Large;…position:absolute;…"></span><inputtype="submit"name="Button1"value="顯示"id="Button1"

style="font-size:Large;top:26px;…position:absolute;…"/><inputname="TextBox1"type="text"id="TextBox1"

style="font-size:Medium;…;position:absolute;…;"/></div></form></body></html>693.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念【HTML格式碼說明】(1)HTML格式碼中包含一個<form>表單標(biāo)籤，其目標(biāo)網(wǎng)址為ch03.aspx。故送出表單資料後，網(wǎng)址並不會改變。而<form>表單內(nèi)的所有<input>的資料都會在按鈕按下後被送往目標(biāo)網(wǎng)址進行處理。(2)事實上，HTML格式碼內(nèi)的<form>標(biāo)籤是由WebForm物件所產(chǎn)生，而WebForm會內(nèi)定將其資料傳送目標(biāo)設(shè)定為網(wǎng)頁本身。(3)您可以發(fā)現(xiàn)到有兩個<inputtype="hidden">標(biāo)籤，這是隱藏的輸入欄位，瀏覽器並不會顯示其內(nèi)容，但當(dāng)按鈕按下後也彙將value屬性值與名稱〔name與id〕送往目標(biāo)網(wǎng)址進行處理。而我們完全看不懂value屬性值，但由於上述的所有HTML格式碼，完全是由CLR產(chǎn)生的，故CLR當(dāng)然可以了解這些屬性值的實際意義。而這兩個hidden隱藏輸入欄位的名稱分別是"__VIEWSTATE"與"__EVENTVALIDATION"，它具有特殊意義，我們將於第10.3.1節(jié)說明。703.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念(4)這裡出現(xiàn)了兩個<span>標(biāo)籤，這是CLR執(zhí)行ASP.NET時處理Label標(biāo)籤控制項的結(jié)果，因為<span>標(biāo)籤在HTML中，代表的是一個文字段落〔當(dāng)中可以使用style記載CSS樣式來控制字型大小、位置等等〕。(5)這裡出現(xiàn)了一個<inputtype="submit">標(biāo)籤，這是CLR執(zhí)行ASP.NET時處理Button按鈕控制項的結(jié)果，因為<inputtype="submit">標(biāo)籤在HTML中，代表的是一個送出表單資料的按鈕。(6)這裡出現(xiàn)了一個<inputtype="text">標(biāo)籤，這是CLR執(zhí)行ASP.NET時處理TextBox文字方塊控制項的結(jié)果，因為<inputtype="text">標(biāo)籤在HTML中，代表的是一個文字方塊。713.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念假設(shè)使用者在文字方塊中輸入了『陳錦輝』，並且按下【顯示】鈕之後，將會收到上圖[5]的HTML格式碼如下〔其中我們省略了一些關(guān)於CSS樣式的描述〕：上圖[5]所接收的HTML格式碼<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"":///TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns=":///1999/xhtml"><head><title> 這是一個簡單的ASP.NET網(wǎng)頁程式</title></head><body>72<formname="form1"method="post"action="ch03.aspx"id="form1">

<div>

<inputtype="hidden"

name="__VIEWSTATE"id="__VIEWSTATE"

value="/wEPDwUKMTEwNjE1Mzc5OQ9kFgICBA9kFgICAw8PFgIeBFRleHQF

MeiAtu+8gemZs+mMpui8neS5n+acg+Wvq0FTUC5ORVTntrLpoI