Download
1 / 78
780 likes | 909 Views
第三章 ASP.NET網頁程式的開發流程. 在本章中，我們將介紹開發 ASP.NET 網頁程式的流程，並從無到有，實際開發一個完整的 ASP.NET 網站。藉由此範例，讀者能夠迅速了解開發 ASP.NET 網站的順序，有利於之後的範例練習。. 第三章 ASP.NET網頁程式的開發流程. 繼上一章熟悉 VWD 的環境後，在本章中，我們將透過一個完整的實例，實際示範開發 ASP.NET 網頁的完整流程，並釐清 ASP.NET 網頁程式與傳統 ASP 在設計與執行上有何不同。除此之外，我們還會觀察 ASP.NET 執行後回傳的 HTML ，藉以了解控制項被如何進行處理。.
E N D
第三章 ASP.NET網頁程式的開發流程 在本章中，我們將介紹開發ASP.NET網頁程式的流程，並從無到有，實際開發一個完整的ASP.NET網站。藉由此範例，讀者能夠迅速了解開發ASP.NET網站的順序，有利於之後的範例練習。
第三章 ASP.NET網頁程式的開發流程 • 繼上一章熟悉VWD的環境後，在本章中，我們將透過一個完整的實例，實際示範開發ASP.NET網頁的完整流程，並釐清ASP.NET網頁程式與傳統ASP在設計與執行上有何不同。除此之外，我們還會觀察ASP.NET執行後回傳的HTML，藉以了解控制項被如何進行處理。
大綱 • 3.1 開發ASP.NET網頁程式的流程 • 3.2 第一個ASP.NET完整程式 • 3.2.1 問題分析 • 3.2.2 設計網站地圖與設計流程圖 • 3.2.3 設計使用者介面 • 3.2.4 編輯程式碼 • 3.2.5 執行程式 • 3.2.6 測試與修改 • 3.3 讀取舊網站 • 3.4 原始檔說明 • 3.5 ASP.NET的新型態網頁程式開發觀念 • 3.6 本章回顧
3.1 開發ASP.NET網頁程式的流程 • VWD的出現，使得開發ASP.NET網頁程式和開發一般視窗程式（如VB.NET視窗程式）的過程越來越相似，最大的差別在於 • (1)使用的是【Web Form】而非Windows Form； • (2)執行時必須同時考量到瀏覽器端與伺服器端； • (3)介面設計必須使用【絕對定位】較能隨心所欲配置元件。 • VWD為了達成上述幾點功能，背後隱含了一些特別的技術 • 例如絕對定位實際上搭配的是CSS，因為單純的HTML無法達到此功能，但這些背後隱含的技巧並非本書的重點，我們只會在必要時提醒讀者。 • 依照上述幾點小差異，我們可以將一個ASP.NET網頁程式的開發流程分為五個階段如下。
3.1 開發ASP.NET網頁程式的流程 • 第一階段：分析問題階段（Problem Analysis） • 不同的問題的解決方式當然不同，首先，您應該要先確定所遭遇的問題是否可以使用電腦來解決，以及是否適合使用電腦來解決。 • 例如：要完全精算預測樂透開獎的六個號碼，是無法用電腦來解決的。 • 要統計樂透開獎的歷史號碼則可以很容易利用電腦來解決（前提是您擁有記錄歷史號碼的資料庫或檔案）。 • 而若不統計，只是直接顯示每一期的歷史號碼，則可能簡單到完全不用撰寫程式，只要設定相關元件的資料來源連結即可。
3.1 開發ASP.NET網頁程式的流程 • 第二階段：設計網站地圖與流程圖/演算法（Web Map and Flowchart/Algorithm Design） • 傳統網站程式通常不只一個，您應該思考網站將使用哪些動態網頁與靜態網頁，以及其中的關聯性為何？也就是設計網站地圖，並且規劃網頁必須傳送那些資訊給目標網頁。 • 而對於ASP.NET的Web Form網頁而言，它的目標動態網頁將是網頁本身，故通常網站地圖較為單純，但有時我們仍可能會建立多個網頁，並透過網頁轉向或超鏈結方式進行連結，此時，您仍需要設計網站地圖。
3.1 開發ASP.NET網頁程式的流程 • 針對單一網頁而言，若採用ASP.NET來撰寫程式，則您應該針對每一個元件的事件進行規劃，有哪些元件的哪些事件需要被處理，而該事件的處理程序將提供何種功能，並將該功能使用流程圖或演算法來描述。 • 流程圖是一種使用圖形符號來解決問題的順序表達方式 • 而演算法則是類似程式語言的一種使用文字表達解決問題的步驟。 • 因此，在此階段中，您尚不需思考要用VB.NET還是C#語法來實作ASP.NET。 • 網頁程式相對於視窗程式來說，通常功能較為簡單，流程圖也較為簡單，傳統的動態網頁設計，您必須同時考量到哪些程式應該在伺服器端執行，而哪些程式交給客戶端執行。 • 而VWD提供了一些特殊元件（例如日曆控制項），它在實際運作時，是在客戶端執行，因此省去了開發JavaScript程式的困擾。 • 故您可以暫時假設面對的就是伺服器網頁，並採用事件驅動方式來設計網頁即可。
3.1 開發ASP.NET網頁程式的流程 • 第三階段：設計使用者介面（User Interface Design） • 使用者介面關係著一個網頁程式的被接受度，目前有越來越多型態的Web-Based應用程式出現，例如Web Mail，它的介面已經與一般視窗應用程式非常類似，所幸，VWD讓我們在設計網頁介面時，可以和設計視窗程式般方便，只要透過工具箱所提供的各種控制項，我們可以很快速地設計出使用者介面的雛形。
3.1 開發ASP.NET網頁程式的流程 • 第四階段：撰寫程式碼（Coding） • 既然我們已經擁有解決問題的流程圖或演算法，並且將使用者介面的雛形完成了，接下來的動作就是針對使用者介面中的每一個物件，撰寫事件處理程序，也就是程式碼。所以本階段實際上就是使用VB.NET語法來實踐流程圖或演算法的過程。 • （我們將於第4章與第5章詳細說明VB.NET的語法） • 在撰寫程式時，您應該善用註解，以便幫助日後維護程式的人更容易了解程式每一區塊的意義。 • 根據經驗，當經過一段時日之後，就連自己也常常容易忘記當初設計程式時為何要如此構思，而這些註解則可以幫助您找回記憶。 • 若程式較複雜，且日後很可能重複使用，您也應該善用物件導向的特性，開發特定的類別以供使用。 • 但本書屬於初學者閱讀之書籍，我們並不會介紹如何開發VB.NET的類別，只會使用內附類別庫的現有類別（例如Math類別）。
3.1 開發ASP.NET網頁程式的流程 • 第五階段：驗證程式正確性（Verification） • 程式撰寫完畢後，接著就是將程式編譯並執行。程式在編譯時，編譯器會替您找出所有不合語法（Syntax）的程式碼，此時您應該加以修正使得能夠通過編譯器的編譯。 • 編譯成功並不代表程式就是正確的，它仍可能出現語意或邏輯上的錯誤，也就是該程式根本無法解決您所想要解決的問題。而我們又如何能夠得知程式是否出現這些錯誤呢？ • 這就是程式的測試與驗證的問題，對於簡單的問題，把所有可能的狀況都測試一次，自然是最保險的驗證方式。 • 因此，執行的過程中，可能包含了跨網頁的測試。甚至可能需要開啟多個瀏覽器程式來觀察（例如聊天室程式）。
3.1 開發ASP.NET網頁程式的流程 • 除此之外，有時候網頁程式同時包含伺服器端與客戶端程式，甚至有些客戶端的JavaScript程式在網頁一被瀏覽器載入時就自動執行，此時可能不容易找出問題是出在客戶端程式還是伺服器端程式，而您可以藉由觀察伺服器端的輸出來檢查是否有不符合設計的部分 • 觀察伺服器端的輸出則可以透過在瀏覽器中執行快顯功能表的【檢視原始碼】來觀看。 • 而若您撰寫的程式只牽涉到伺服器端，問題就比較單純，或者您的客戶端程式也是使用VWD提供的元件構成，通常也比較不會出現問題。
3.1 開發ASP.NET網頁程式的流程 • 上述步驟中，有時候會分項交給專人負責 • 例如介面的設計（元件的配置）可能交給具有美工背景的人員來完成，而撰寫程式則交由程式設計師來開發。在此種情況下，使用程式碼隱藏模式將ASP.NET網頁分為.aspx與.aspx.vb兩個檔案較為適合。 • 但本書都以單一檔案模式來開發ASP.NET網頁，讀者可同時學習如何配置介面元件以及撰寫事件程序。以下是開發ASP.NET網頁程式的流程圖。 圖3-1 ASP.NET網頁程式的開發流程圖
3.2 第一個ASP.NET完整程式 • 我們透過一個簡單的範例來說明如何設計一個ASP.NET程式，並且與上一節的五個階段相呼應。
3.2.1 問題分析 • 假設現在我們希望設計一個程式，由使用者輸入一串文字，並且將輸入的文字與某些字串相連然後顯示。 • 明顯地這個問題可以很容易使用電腦來解決。使用者的要求如下： • (1) 可以輸入姓名。 • (2) 輸出某些文字。 • (3) 輸出的文字包含原有的字串以及輸入的字串。
3.2.2 設計網站地圖與設計流程圖 • 在這個題目要求下，我們只需要使用單一個.aspx網頁即可，因此網站地圖非常簡單，如下圖，若您強制想要使用兩個網頁（一個用來輸入的HTML網頁、一個用來輸出的程式網頁）也可以，但通常使用ASP.NET以Web Form範本設計網頁時，只需要使用單一個網頁。 • 同時由於題目過於簡單，所以我們只需要繪製流程圖即可（如圖）。 圖3-2 網站地圖 圖3-3 設計程式運作的流程圖
3.2.3 設計使用者介面 • 我們將使用者介面設計如下圖。 • (1) 使用者可以在輸入區輸入文字。 • (2) 按下【顯示】鈕之後，輸入字串的串接結果會出現在顯示結果區。 • (3) 網頁標題會出現該程式的用途。
3.2.3 設計使用者介面 • 下面是程式的執行結果範例（一般來說，在實際進行專案開發前，通常會事先製作一些假的預期結果交由客戶評斷是否符合要求）。
3.2.3 設計使用者介面 • 我們所設計的使用者介面一共必須使用下列6個ASP.NET的物件。
3.2.3 設計使用者介面 • 【實作範例3-1 Part1】： • 編輯使用者介面 • 註：範例3-1共有5個Part，請一股作氣完成。 • 編輯使用者介面一共有兩項重要的工作： • (1) 配置各控制項物件的位置。 • (2) 設定物件的屬性值。 • 建立新網站，並設定網頁標題
3.2.3 設計使用者介面 • 產生控制項 • 切換到【設計】分頁，然後參閱第2章，開啟工具箱的【標準】頁籤，在網頁中加入2個標籤（Label）控制項、1個按鈕（Button）控制項及1個文字方塊（TextBox）控制項（共四個控制項），然後將各控制項皆設定為【絕對定位】，並移動到適當位置，結果如圖。 • （必要時，可以選取多個控制項，然後執行【格式／對齊／某方向】指令來進行位置的對齊）
設定屬性 • 依據使用者介面的規劃，我們需要設定下列物件的屬性。（Page已經設定、而form1沒有屬性需要設定）
3.2.3 設計使用者介面 • 設定按鈕物件的屬性
3.2.3 設計使用者介面 • 設定標籤物件的屬性
3.2.3 設計使用者介面 • 設定文字方塊物件的屬性
3.2.4 編輯程式碼 • 我們已經將介面設計完畢，並且也已經完成流程圖的設計。現在我們將流程圖轉換為Button1物件的Click事件程序的程式碼。 • 【實作範例3-1 Part2】： • 延續Part1的實作，編輯事件程序的程式碼。 • 撰寫Command1_Click事件程序
3.2.4 編輯程式碼 【註】：如果您在輸入程式碼的過程中，發現突然出現下拉式選單，這代表智慧型程式編輯器開始發生作用，您可以藉由它的幫助，選取所需要的屬性（也可以不加理會）。
3.2.4 編輯程式碼 • 【程式碼解說】 • 我們在【原始檔】分頁中，產生了1個事件程序，名稱是Button1_Click()。其中Button1是物件名稱，Click是事件名稱，代表「被按下」的事件。 • 當您於執行階段時，真的按下了【顯示】鈕就會執行Button1_Click()事件程序，該程序內會設定Label2標籤的文字。
3.2.5 執行程式 • 我們的程式已經撰寫完畢，接著就是執行程式（執行前會自動編譯），看看到底我們的程式提供了怎麼樣的功能。 • 【實作範例3-1 Part3】： • 延續Part 2實作，執行Part2所撰寫的程式。
3.2.5 執行程式 • 執行程式： • Step1:為了要讓ch03.aspx被編譯，並以伺服器方式傳送結果給客戶端瀏覽器，因此，我們按下【在瀏覽器中檢視】快捷鈕 。
3.2.5 執行程式 • Step2:由於我們在之前的編輯並未存過檔，而ASP.NET在編譯時會讀取原始碼檔案，因此它會提示我們存檔，按下【是】鈕進行存檔。
3.2.5 執行程式 • Step3:此時會先進行編譯，然後執行編譯後的檔案，檔案執行後會產生HTML格式碼，並透過HTTP協定送給客戶端瀏覽器。 • 由於VWD提供了虛擬Web網站伺服器（稱之為ASP.NET 程式開發伺服器），因此，此時會啟動Web網站伺服器（您可以在桌面右下方看到ASP.NET程式開發伺服器的執行狀況） • 它會產生一個URL用以代表ASP.NET網站，其中localhost代表的是本地端主機（因我們仍在開發中，故暫時沒有實際的IP可對應），其後加上一個通訊埠號（本例為49651），以及虛擬網站的目錄。 【註】ASP.NET 程式開發伺服器會自動尋找沒有使用的埠號當作通訊埠號，因此，即使您已安裝了IIS等其他各類Web伺服器，也不會互相影響。
3.2.5 執行程式 • Step4:最後系統會自動開啟瀏覽器，讀取由ASP.NET程式開發伺服器送出的HTML格式碼網頁，並將其網頁效果顯示於瀏覽器中， • 您首先看到的網頁應該與VWD【設計】分頁的介面類似，不過[Label2]並不會顯示，因為它實際上是一個空字串。 • （若欲回到VWD開發環境，直接按下瀏覽器的關閉鈕即可。） • 而網頁標題文字則是Page物件設定的Title屬性值。
3.2.5 執行程式 • Step5: 測試執行結果。
3.2.5 執行程式 • 結束程式： • 假設您覺得已經成功測試了，想要返回在VWD IDE整合開發環境，則只要按下瀏覽器的右上角的 關閉鈕即可。
3.2.6 測試與修改 • 我們所撰寫的ASP.NET程式既然可以編譯後執行，代表語法上已經沒有錯誤，但是並不保證所有的語意都是正確的，也就是執行結果是否完全是我們所想像的樣子決定了一個程式是否宣告完成。 • 這種測試的工作一定要做，否則無法算是一個完整的程式設計。 • 【實作範例3-1 Part4】： • 測試與修改程式 • 其實讀者如果好奇一點，到處亂按執行結果的瀏覽器網頁時，就會發現一個現象。當我們沒有輸入任何文字就直接按下【顯示】鈕，則會顯示『耶！也會寫程式了』，這並不符合我們的預期結果。
3.2.6 測試與修改 • Step1:修正程式碼。 • 為了改善這個現象，我們必須重新修改Button1_Click()事件程序的程式碼。在此之前，請先關閉瀏覽器，然後做下列動作。
3.2.6 測試與修改 • Step2:重新測試。 • 重新執行後，您會發現，若未輸入文字就直接按下【顯示】鈕，則會出現警告訊息。
3.3 讀取舊網站 • 通常網頁開發無法一次就完成，此時我們會先將相關檔案存檔，日後再繼續工作。要開啟已經存在的舊網站，只要依照下列範例操作即可。 • 本書範例檔配置方式 • 本書使用ASPNET目錄來存放範例檔，並且所有的ASP.NET網頁都採用單一檔案模式開發，也就是不含.aspx.vb檔的模式。而為了配合章節安排，若該章只有一個範例，則使用單一目錄作為網站，例如第二章、第三章分別位於ASPNET\ch02與ASPNET\ch03。若該章有多個範例，則以該章之下的獨立子目錄作為網站目錄，例如範例4-1使用ASPNET\ch04\ch04_01\。 圖3-3 本書範例檔案配置
3.3 讀取舊網站 • 最後階段之維護與更新 • 在圖3-1中，當網頁功能完成後，網站會進入最後階段，有時會有一些必要的維護與更新。例如某些使用者使用一段時間後，覺得網頁元件配置順序應該更動，比較容易操作等等，此時，要調整的大部分為介面，並不需要更動程式碼。而若是使用一段時間後，被使用者反應某部分程式出現錯誤，則必須進行程式碼的修改。 • 在範例3-1的前面步驟中，我們已經完成了介面的配置以及程式的功能。但若與之前規劃的介面相比（或者使用者實際使用後的反應），按鈕有些過小（其中的文字無法完整顯示），文字方塊也太過於右邊。 • 此時，我們可以讀取舊網站ch03，並進行介面的微調。當我們進行介面的微調時，並不會更動<script>程式碼，因此網頁功能不受影響。 • 【實作範例3-1 Part5】： • 開啟舊網站（Part 4所儲存的網站）並進行介面微調。
