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

第三章

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

ASP.NET網(wǎng)頁程式的開發(fā)流程繼上一章熟悉VWD的環(huá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)頁程式的流程43.1 開發(fā)ASP.NET網(wǎng)頁程式的流程53.1 開發(fā)ASP.NET網(wǎng)頁程式的流程63.1 開發(fā)ASP.NET網(wǎng)頁程式的流程73.1 開發(fā)ASP.NET網(wǎng)頁程式的流程第三階段：設(shè)計使用者介面〔UserInterfaceDesign〕使用者介面關(guān)係著一個網(wǎng)頁程式的被接受度，目前有越來越多型態(tài)的Web-Based應用程式出現(xiàn)，例如WebMail，它的介面已經(jīng)與一般視窗應用程式非常類似，所幸，VWD讓我們在設(shè)計網(wǎng)頁介面時，可以和設(shè)計視窗程式般方便，只要透過工具箱所提供的各種控制項，我們可以很快速地設(shè)計出使用者介面的雛形。83.1 開發(fā)ASP.NET網(wǎng)頁程式的流程第四階段：撰寫程式碼〔Coding〕既然我們已經(jīng)擁有解決問題的流程圖或演算法，並且將使用者介面的雛形完成了，接下來的動作就是針對使用者介面中的每一個物件，撰寫事件處理程序，也就是程式碼。所以本階段實際上就是使用VB.NET語法來實踐流程圖或演算法的過程。〔我們將於第4章與第5章詳細說明VB.NET的語法〕在撰寫程式時，您應該善用註解，以便幫助日後維護程式的人更容易了解程式每一區(qū)塊的意義。根據(jù)經(jīng)驗，當經(jīng)過一段時日之後，就連自己也常常容易忘記當初設(shè)計程式時為何要如此構(gòu)思，而這些註解則可以幫助您找回記憶。假設(shè)程式較複雜，且日後很可能重複使用，您也應該善用物件導向的特性，開發(fā)特定的類別以供使用。但本書屬於初學者閱讀之書籍，我們並不會介紹如何開發(fā)VB.NET的類別，只會使用內(nèi)附類別庫的現(xiàn)有類別〔例如Math類別〕。93.1 開發(fā)ASP.NET網(wǎng)頁程式的流程103.1 開發(fā)ASP.NET網(wǎng)頁程式的流程113.1 開發(fā)ASP.NET網(wǎng)頁程式的流程圖3-1ASP.NET網(wǎng)頁程式的開發(fā)流程圖123.2 第一個ASP.NET完整程式133.2.1 問題分析假設(shè)現(xiàn)在我們希望設(shè)計一個程式，由使用者輸入一串文字，並且將輸入的文字與某些字串相連然後顯示。明顯地這個問題可以很容易使用電腦來解決。使用者的要求如下：(1)可以輸入姓名。(2)輸出某些文字。(3)輸出的文字包含原有的字串以及輸入的字串。143.2.2 設(shè)計網(wǎng)站地圖與設(shè)計流程圖圖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)頁標題會出現(xiàn)該程式的用途。163.2.3 設(shè)計使用者介面下面是程式的執(zhí)行結(jié)果範例〔一般來說，在實際進行專案開發(fā)前，通常會事先製作一些假的預期結(jié)果交由客戶評斷是否符合要求〕。173.2.3 設(shè)計使用者介面我們所設(shè)計的使用者介面一共必須使用以下6個ASP.NET的物件。183.2.3 設(shè)計使用者介面【實作範例3-1Part1】：編輯使用者介面註：範例3-1共有5個Part，請一股作氣完成。編輯使用者介面一共有兩項重要的工作：(1)配置各控制項物件的位置。(2)設(shè)定物件的屬性值。建立新網(wǎng)站，並設(shè)定網(wǎng)頁標題19203.2.3 設(shè)計使用者介面產(chǎn)生控制項切換到【設(shè)計】分頁，然後參閱第2章，開啟工具箱的【標準】頁籤，在網(wǎng)頁中參加2個標籤〔Label〕控制項、1個按鈕〔Button〕控制項及1個文字方塊〔TextBox〕控制項〔共四個控制項〕，然後將各控制項皆設(shè)定為【絕對定位】，並移動到適當位置，結(jié)果如圖。〔必要時，可以選取多個控制項，然後執(zhí)行【格式／對齊／某方向】指令來進行位置的對齊〕21設(shè)定屬性依據(jù)使用者介面的規(guī)劃，我們需要設(shè)定以下物件的屬性?！睵age已經(jīng)設(shè)定、而form1沒有屬性需要設(shè)定〕223.2.3 設(shè)計使用者介面設(shè)定按鈕物件的屬性23243.2.3 設(shè)計使用者介面設(shè)定標籤物件的屬性25263.2.3 設(shè)計使用者介面設(shè)定文字方塊物件的屬性273.2.4 編輯程式碼我們已經(jīng)將介面設(shè)計完畢，並且也已經(jīng)完成流程圖的設(shè)計?，F(xiàn)在我們將流程圖轉(zhuǎn)換為Button1物件的Click事件程序的程式碼?！緦嵶鞴犂?-1Part2】：延續(xù)Part1的實作，編輯事件程序的程式碼。撰寫Command1_Click事件程序28293.2.4 編輯程式碼303.2.4 編輯程式碼【程式碼解說】我們在【原始檔】分頁中，產(chǎn)生了1個事件程序，名稱是Button1_Click()。其中Button1是物件名稱，Click是事件名稱，代表「被按下」的事件。當您於執(zhí)行階段時，真的按下了【顯示】鈕就會執(zhí)行Button1_Click()事件程序，該程序內(nèi)會設(shè)定Label2標籤的文字。313.2.5 執(zhí)行程式我們的程式已經(jīng)撰寫完畢，接著就是執(zhí)行程式〔執(zhí)行前會自動編譯〕，看看到底我們的程式提供了怎麼樣的功能?！緦嵶鞴犂?-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í)行程式【註】ASP.NET程式開發(fā)伺服器會自動尋找沒有使用的埠號當作通訊埠號，因此，即使您已安裝了IIS等其他各類Web伺服器，也不會互相影響。353.2.5 執(zhí)行程式Step4:最後系統(tǒng)會自動開啟瀏覽器，讀取由ASP.NET程式開發(fā)伺服器送出的HTML格式碼網(wǎng)頁，並將其網(wǎng)頁效果顯示於瀏覽器中，您首先看到的網(wǎng)頁應該與VWD【設(shè)計】分頁的介面類似，不過[Label2]並不會顯示，因為它實際上是一個空字串?！布僭O(shè)欲回到VWD開發(fā)環(huán)境，直接按下瀏覽器的關(guān)閉鈕即可?！扯W(wǎng)頁標題文字則是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è)計?！緦嵶鞴犂?-1Part4】：測試與修改程式其實讀者如果好奇一點，到處亂按執(zhí)行結(jié)果的瀏覽器網(wǎng)頁時，就會發(fā)現(xiàn)一個現(xiàn)象。當我們沒有輸入任何文字就直接按下【顯示】鈕，則會顯示『耶！也會寫程式了』，這並不符合我們的預期結(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)站圖3-3本書範例檔案配置453.3 讀取舊網(wǎng)站最後階段之維護與更新在圖3-1中，當網(wǎng)頁功能完成後，網(wǎng)站會進入最後階段，有時會有一些必要的維護與更新。例如某些使用者使用一段時間後，覺得網(wǎng)頁元件配置順序應該更動，比較容易操作等等，此時，要調(diào)整的大局部為介面，並不需要更動程式碼。而假設(shè)是使用一段時間後，被使用者反應某局部程式出現(xiàn)錯誤，則必須進行程式碼的修改。在範例3-1的前面步驟中，我們已經(jīng)完成了介面的配置以及程式的功能。但假設(shè)與之前規(guī)劃的介面相比〔或者使用者實際使用後的反應〕，按鈕有些過小〔其中的文字無法完整顯示〕，文字方塊也太過於右邊。此時，我們可以讀取舊網(wǎng)站ch03，並進行介面的微調(diào)。當我們進行介面的微調(diào)時，並不會更動<script>程式碼，因此網(wǎng)頁功能不受影響?！緦嵶鞴犂?-1Part5】：開啟舊網(wǎng)站〔Part4所儲存的網(wǎng)站〕並進行介面微調(diào)。46474849503.3 讀取舊網(wǎng)站513.4 原始檔說明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ù)往後的學習。指示詞(1)第1行是指示詞(directive)，指示詞的語法格式如下：：該行的Language屬性是告知編譯器，本網(wǎng)頁是使用VB語法〔也就是VB2021〕來撰寫。而Title屬性則是代表網(wǎng)頁執(zhí)行時的網(wǎng)頁標題，我們在前面步驟中，利用屬性窗格設(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標籤控制項的Text屬性就是代表標籤文字，因此標籤文字在此行執(zhí)行後會被改變。(7)第11行也是一個VB敘述，功能同樣是設(shè)定Label2的Text屬性。不過其中我們使用了+號運算子來串接三個字串。第一個字串與第三個字串都是常數(shù)字串而第2個字串TextBox1.Text代表要TextBox1的Text屬性值由於TextBox1是文字方塊，Text屬性代表方塊中的文字，因此第2個字串將會是使用者輸入的文字。573.4 原始檔說明583.4 原始檔說明593.4 原始檔說明而WebForm物件也具有容器性質(zhì)，故可以包含其他控制項，事實上，WebForm物件在編譯後，不但會出現(xiàn)<form>標籤，並且也會出現(xiàn)目標網(wǎng)頁名稱，而這個目標網(wǎng)頁就是網(wǎng)頁本身(ch03.aspx)，同時會出現(xiàn)一些隱藏性質(zhì)的<input="hidden">標籤利用此兩種方式，使得設(shè)計網(wǎng)頁時可以如同設(shè)計一般視窗程式。(12)第22~36行的<div>標籤只是一個普通的HTML標籤，可以用來代表某一段文字，一般會搭配CSS樣式表來改變文字的格式。<div>也是WebForm網(wǎng)頁內(nèi)定會附上的標籤。603.4 原始檔說明613.4 原始檔說明(15)第30~32行的<asp:ButtonID="Button1"runat="server">，其中<asp:Button>代表這是一個按鈕控制項，相關(guān)屬性的意義與上述標籤控制項差不多，比較特別的是，它是一個獨立標籤〔沒有結(jié)束標籤〕，因此在末尾出現(xiàn)『/>』符號。而這樣的標籤就無法包含其他的子標籤了，因此它不具有容器性質(zhì)。此外，在此標籤中，我們可以發(fā)現(xiàn)一個OnClick="Button1_Click"屬性，它代表著其OnClick事件程序的名稱。(16)第33~35行的<asp:TextBoxID="TextBox1"runat="server">，其中<asp:TextBox>代表這是一個文字方塊控制項，相關(guān)屬性的意義與上述標籤控制項差不多。值得注意的是，雖然它擁有結(jié)尾標籤</asp:TextBox>，但並不代表它可以包含其他控制項。本例的起始標籤與結(jié)尾標籤之間為空，假設(shè)包含某些文字，則這些文字會變成文字方塊內(nèi)顯示的文字。623.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念633.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念圖3-5ASP.NETWebForm網(wǎng)頁的執(zhí)行流程643.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念653.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念663.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念673.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念在上圖的[2][5]中，我們可以在瀏覽器中，執(zhí)行快顯功能表的【檢視原始碼】指令，觀看這次回送的是哪些HTML格式碼，上圖[2]所接收的HTML格式碼如下〔其中我們省略了一些關(guān)於CSS樣式的描述〕：上圖[2]所接收的HTML格式碼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ā)觀念703.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念713.5 ASP.NET的新型態(tài)網(wǎng)頁程式開發(fā)觀念假設(shè)使用者在文字方塊中輸入了『陳錦輝』，並且按下【顯示】鈕之後，將會收到上圖[5]的HTML格式碼如下〔其中我們省略了一些關(guān)於CSS樣式的描述〕：上圖[5]所接收的HTML格式碼72<formname="form1"method="post"action="ch03.aspx"id="form1">

<div>

<inputtype="hidden"

name="__VIEWSTATE"id="__VIEWSTATE"

value="/wEPDwUKMTEwNjE1Mzc5OQ9kFgICBA9kFgICAw8PFgIeBFRleHQF

MeiAtu+8gemZs+mMpui8neS5n+acg+Wvq0FTUC5ORVTntrLpoI

HnqIvlvI/kuobjgIJkZGRHdaBzqGr02n/FftDZT7yYNJOWKg=="/>

</div>

<div>

<inputtype="hidden"

name="__EVENTVALIDATION"id="__EVENTVALIDATION"

value="/wEWAwK7g9mzCAKM54rGBgLs0bLrBohMBnpiKjF/yvoapbFGO/rWnjkE"/>

</div><div><spanid="Label1"style="font-size:Large;…position:absolute;…">姓名：</span><spanid="Label2"style="f