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

第三章

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

ASP.NET網(wǎng)頁程式的開發(fā)流程繼上一章熟悉VWD的環(huán)境後，在本章中，我們將透過一個(gè)完整的實(shí)例，實(shí)際示範(fàn)開發(fā)ASP.NET網(wǎng)頁的完整流程，並釐清ASP.NET網(wǎng)頁程式與傳統(tǒng)ASP在設(shè)計(jì)與執(zhí)行上有何不同。除此之外，我們還會(huì)觀察ASP.NET執(zhí)行後回傳的HTML，藉以了解控制項(xiàng)被如何進(jìn)行處理。2大綱3.1 開發(fā)ASP.NET網(wǎng)頁程式的流程3.2 第一個(gè)ASP.NET完整程式3.2.1 問題分析3.2.2 設(shè)計(jì)網(wǎng)站地圖與設(shè)計(jì)流程圖3.2.3 設(shè)計(jì)使用者介面3.2.4 編輯程式碼3.2.5 執(zhí)行程式3.2.6 測(cè)試與修改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è)計(jì)使用者介面〔UserInterfaceDesign〕使用者介面關(guān)係著一個(gè)網(wǎng)頁程式的被接受度，目前有越來越多型態(tài)的Web-Based應(yīng)用程式出現(xiàn)，例如WebMail，它的介面已經(jīng)與一般視窗應(yīng)用程式非常類似，所幸，VWD讓我們?cè)谠O(shè)計(jì)網(wǎng)頁介面時(shí)，可以和設(shè)計(jì)視窗程式般方便，只要透過工具箱所提供的各種控制項(xiàng)，我們可以很快速地設(shè)計(jì)出使用者介面的雛形。83.1 開發(fā)ASP.NET網(wǎng)頁程式的流程第四階段：撰寫程式碼〔Coding〕既然我們已經(jīng)擁有解決問題的流程圖或演算法，並且將使用者介面的雛形完成了，接下來的動(dòng)作就是針對(duì)使用者介面中的每一個(gè)物件，撰寫事件處理程序，也就是程式碼。所以本階段實(shí)際上就是使用VB.NET語法來實(shí)踐流程圖或演算法的過程?！参覀儗㈧兜?章與第5章詳細(xì)說明VB.NET的語法〕在撰寫程式時(shí)，您應(yīng)該善用註解，以便幫助日後維護(hù)程式的人更容易了解程式每一區(qū)塊的意義。根據(jù)經(jīng)驗(yàn)，當(dāng)經(jīng)過一段時(shí)日之後，就連自己也常常容易忘記當(dāng)初設(shè)計(jì)程式時(shí)為何要如此構(gòu)思，而這些註解則可以幫助您找回記憶。假設(shè)程式較複雜，且日後很可能重複使用，您也應(yīng)該善用物件導(dǎo)向的特性，開發(fā)特定的類別以供使用。但本書屬於初學(xué)者閱讀之書籍，我們並不會(huì)介紹如何開發(fā)VB.NET的類別，只會(huì)使用內(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 第一個(gè)ASP.NET完整程式133.2.1 問題分析假設(shè)現(xiàn)在我們希望設(shè)計(jì)一個(gè)程式，由使用者輸入一串文字，並且將輸入的文字與某些字串相連然後顯示。明顯地這個(gè)問題可以很容易使用電腦來解決。使用者的要求如下：(1)可以輸入姓名。(2)輸出某些文字。(3)輸出的文字包含原有的字串以及輸入的字串。143.2.2 設(shè)計(jì)網(wǎng)站地圖與設(shè)計(jì)流程圖圖3-2網(wǎng)站地圖圖3-3設(shè)計(jì)程式運(yùn)作的流程圖153.2.3 設(shè)計(jì)使用者介面我們將使用者介面設(shè)計(jì)如下圖。(1)使用者可以在輸入?yún)^(qū)輸入文字。(2)按下【顯示】鈕之後，輸入字串的串接結(jié)果會(huì)出現(xiàn)在顯示結(jié)果區(qū)。(3)網(wǎng)頁標(biāo)題會(huì)出現(xiàn)該程式的用途。163.2.3 設(shè)計(jì)使用者介面下面是程式的執(zhí)行結(jié)果範(fàn)例〔一般來說，在實(shí)際進(jìn)行專案開發(fā)前，通常會(huì)事先製作一些假的預(yù)期結(jié)果交由客戶評(píng)斷是否符合要求〕。173.2.3 設(shè)計(jì)使用者介面我們所設(shè)計(jì)的使用者介面一共必須使用以下6個(gè)ASP.NET的物件。183.2.3 設(shè)計(jì)使用者介面【實(shí)作範(fàn)例3-1Part1】：編輯使用者介面註：範(fàn)例3-1共有5個(gè)Part，請(qǐng)一股作氣完成。編輯使用者介面一共有兩項(xiàng)重要的工作：(1)配置各控制項(xiàng)物件的位置。(2)設(shè)定物件的屬性值。建立新網(wǎng)站，並設(shè)定網(wǎng)頁標(biāo)題19203.2.3 設(shè)計(jì)使用者介面產(chǎn)生控制項(xiàng)切換到【設(shè)計(jì)】分頁，然後參閱第2章，開啟工具箱的【標(biāo)準(zhǔn)】頁籤，在網(wǎng)頁中參加2個(gè)標(biāo)籤〔Label〕控制項(xiàng)、1個(gè)按鈕〔Button〕控制項(xiàng)及1個(gè)文字方塊〔TextBox〕控制項(xiàng)〔共四個(gè)控制項(xiàng)〕，然後將各控制項(xiàng)皆設(shè)定為【絕對(duì)定位】，並移動(dòng)到適當(dāng)位置，結(jié)果如圖。〔必要時(shí)，可以選取多個(gè)控制項(xiàng)，然後執(zhí)行【格式／對(duì)齊／某方向】指令來進(jìn)行位置的對(duì)齊〕21設(shè)定屬性依據(jù)使用者介面的規(guī)劃，我們需要設(shè)定以下物件的屬性?！睵age已經(jīng)設(shè)定、而form1沒有屬性需要設(shè)定〕223.2.3 設(shè)計(jì)使用者介面設(shè)定按鈕物件的屬性23243.2.3 設(shè)計(jì)使用者介面設(shè)定標(biāo)籤物件的屬性25263.2.3 設(shè)計(jì)使用者介面設(shè)定文字方塊物件的屬性273.2.4 編輯程式碼我們已經(jīng)將介面設(shè)計(jì)完畢，並且也已經(jīng)完成流程圖的設(shè)計(jì)?，F(xiàn)在我們將流程圖轉(zhuǎn)換為Button1物件的Click事件程序的程式碼?！緦?shí)作範(fàn)例3-1Part2】：延續(xù)Part1的實(shí)作，編輯事件程序的程式碼。撰寫Command1_Click事件程序28293.2.4 編輯程式碼303.2.4 編輯程式碼【程式碼解說】我們?cè)凇驹紮n】分頁中，產(chǎn)生了1個(gè)事件程序，名稱是Button1_Click()。其中Button1是物件名稱，Click是事件名稱，代表「被按下」的事件。當(dāng)您於執(zhí)行階段時(shí)，真的按下了【顯示】鈕就會(huì)執(zhí)行Button1_Click()事件程序，該程序內(nèi)會(huì)設(shè)定Label2標(biāo)籤的文字。313.2.5 執(zhí)行程式我們的程式已經(jīng)撰寫完畢，接著就是執(zhí)行程式〔執(zhí)行前會(huì)自動(dòng)編譯〕，看看到底我們的程式提供了怎麼樣的功能?！緦?shí)作範(fàn)例3-1Part3】：延續(xù)Part2實(shí)作，執(zhí)行Part2所撰寫的程式。323.2.5 執(zhí)行程式執(zhí)行程式：Step1:為了要讓ch03.aspx被編譯，並以伺服器方式傳送結(jié)果給客戶端瀏覽器，因此，我們按下【在瀏覽器中檢視】快捷鈕。333.2.5 執(zhí)行程式Step2:由於我們?cè)谥暗木庉媮K未存過檔，而ASP.NET在編譯時(shí)會(huì)讀取原始碼檔案，因此它會(huì)提示我們存檔，按下【是】鈕進(jìn)行存檔。343.2.5 執(zhí)行程式【註】ASP.NET程式開發(fā)伺服器會(huì)自動(dòng)尋找沒有使用的埠號(hào)當(dāng)作通訊埠號(hào)，因此，即使您已安裝了IIS等其他各類Web伺服器，也不會(huì)互相影響。353.2.5 執(zhí)行程式Step4:最後系統(tǒng)會(huì)自動(dòng)開啟瀏覽器，讀取由ASP.NET程式開發(fā)伺服器送出的HTML格式碼網(wǎng)頁，並將其網(wǎng)頁效果顯示於瀏覽器中，您首先看到的網(wǎng)頁應(yīng)該與VWD【設(shè)計(jì)】分頁的介面類似，不過[Label2]並不會(huì)顯示，因?yàn)樗鼘?shí)際上是一個(gè)空字串?！布僭O(shè)欲回到VWD開發(fā)環(huán)境，直接按下瀏覽器的關(guān)閉鈕即可?！扯W(wǎng)頁標(biāo)題文字則是Page物件設(shè)定的Title屬性值。363.2.5 執(zhí)行程式Step5:測(cè)試執(zhí)行結(jié)果。37383.2.5 執(zhí)行程式結(jié)束程式：假設(shè)您覺得已經(jīng)成功測(cè)試了，想要返回在VWDIDE整合開發(fā)環(huán)境，則只要按下瀏覽器的右上角的關(guān)閉鈕即可。393.2.6 測(cè)試與修改我們所撰寫的ASP.NET程式既然可以編譯後執(zhí)行，代表語法上已經(jīng)沒有錯(cuò)誤，但是並不保證所有的語意都是正確的，也就是執(zhí)行結(jié)果是否完全是我們所想像的樣子決定了一個(gè)程式是否宣告完成。這種測(cè)試的工作一定要做，否則無法算是一個(gè)完整的程式設(shè)計(jì)?！緦?shí)作範(fàn)例3-1Part4】：測(cè)試與修改程式其實(shí)讀者如果好奇一點(diǎn)，到處亂按執(zhí)行結(jié)果的瀏覽器網(wǎng)頁時(shí)，就會(huì)發(fā)現(xiàn)一個(gè)現(xiàn)象。當(dāng)我們沒有輸入任何文字就直接按下【顯示】鈕，則會(huì)顯示『耶！也會(huì)寫程式了』，這並不符合我們的預(yù)期結(jié)果。403.2.6 測(cè)試與修改413.2.6 測(cè)試與修改Step1:修正程式碼。為了改善這個(gè)現(xiàn)象，我們必須重新修改Button1_Click()事件程序的程式碼。在此之前，請(qǐng)先關(guān)閉瀏覽器，然後做以下動(dòng)作。。42433.2.6 測(cè)試與修改Step2:重新測(cè)試。重新執(zhí)行後，您會(huì)發(fā)現(xiàn)，假設(shè)未輸入文字就直接按下【顯示】鈕，則會(huì)出現(xiàn)警告訊息。443.3 讀取舊網(wǎng)站圖3-3本書範(fàn)例檔案配置453.3 讀取舊網(wǎng)站最後階段之維護(hù)與更新在圖3-1中，當(dāng)網(wǎng)頁功能完成後，網(wǎng)站會(huì)進(jìn)入最後階段，有時(shí)會(huì)有一些必要的維護(hù)與更新。例如某些使用者使用一段時(shí)間後，覺得網(wǎng)頁元件配置順序應(yīng)該更動(dòng)，比較容易操作等等，此時(shí)，要調(diào)整的大局部為介面，並不需要更動(dòng)程式碼。而假設(shè)是使用一段時(shí)間後，被使用者反應(yīng)某局部程式出現(xiàn)錯(cuò)誤，則必須進(jìn)行程式碼的修改。在範(fàn)例3-1的前面步驟中，我們已經(jīng)完成了介面的配置以及程式的功能。但假設(shè)與之前規(guī)劃的介面相比〔或者使用者實(shí)際使用後的反應(yīng)〕，按鈕有些過小〔其中的文字無法完整顯示〕，文字方塊也太過於右邊。此時(shí)，我們可以讀取舊網(wǎng)站ch03，並進(jìn)行介面的微調(diào)。當(dāng)我們進(jìn)行介面的微調(diào)時(shí)，並不會(huì)更動(dòng)<script>程式碼，因此網(wǎng)頁功能不受影響?！緦?shí)作範(fàn)例3-1Part5】：開啟舊網(wǎng)站〔Part4所儲(chǔ)存的網(wǎng)站〕並進(jìn)行介面微調(diào)。46474849503.3 讀取舊網(wǎng)站513.4 原始檔說明5212345678910111213141516171819<%@PageLanguage="VB"Title="這是一個(gè)簡(jiǎn)單的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="請(qǐng)?jiān)谖淖址綁K中輸入文字後，再按下按鈕。"ElseLabel2.Text="耶！"+TextBox1.Text+"也會(huì)寫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)容，以下我們針對(duì)原始檔內(nèi)的文字分區(qū)逐行說明，假設(shè)讀者擁有HTML的基礎(chǔ)，比較容易了解。假設(shè)不能夠完全了解HTML也無所謂，同樣能夠繼續(xù)往後的學(xué)習(xí)。指示詞(1)第1行是指示詞(directive)，指示詞的語法格式如下：：該行的Language屬性是告知編譯器，本網(wǎng)頁是使用VB語法〔也就是VB2021〕來撰寫。而Title屬性則是代表網(wǎng)頁執(zhí)行時(shí)的網(wǎng)頁標(biāo)題，我們?cè)谇懊娌襟E中，利用屬性窗格設(shè)定了Page物件的Title屬性，故原始檔內(nèi)會(huì)自動(dòng)更換為設(shè)定的值。(2)第3行，是一個(gè)HTML版本的宣告，它使用的是XHTML1.0Transitional版，這一行編譯器不會(huì)加以處理而是直接送給瀏覽器端。<%@指示詞指令屬性1="屬性值"屬性2="屬性值"……%>553.4 原始檔說明ASP.NET程序程式碼(3)第5~14行的<scriptrunat="server">是ASP.NET程序的程式碼所在處。<script>一般的用途在於宣告這是一個(gè)程式所在處，而runat="server"則是代表要由伺服器來執(zhí)行這局部的程式。(4)第7~13行是一個(gè)事件程序，名稱為Button1_Click()，代表Button1被按下(Click)時(shí)要自動(dòng)執(zhí)行的程序。其中它包含兩個(gè)傳入引數(shù)，sender與e，一個(gè)是用來代表產(chǎn)生事件的事件來源，另一個(gè)則是用來代表事件的種類。(5)第8~12行是一個(gè)If…Then…Else條件判斷，可以用來進(jìn)行流程控制，我們?cè)诘?章會(huì)進(jìn)行說明。563.4 原始檔說明(6)第9行是一個(gè)VB敘述，它代表要將Label2的Text屬性設(shè)定為雙引號(hào)內(nèi)的字串。而由於Label2標(biāo)籤控制項(xiàng)的Text屬性就是代表標(biāo)籤文字，因此標(biāo)籤文字在此行執(zhí)行後會(huì)被改變。(7)第11行也是一個(gè)VB敘述，功能同樣是設(shè)定Label2的Text屬性。不過其中我們使用了+號(hào)運(yùn)算子來串接三個(gè)字串。第一個(gè)字串與第三個(gè)字串都是常數(shù)字串而第2個(gè)字串TextBox1.Text代表要TextBox1的Text屬性值由於TextBox1是文字方塊，Text屬性代表方塊中的文字，因此第2個(gè)字串將會(huì)是使用者輸入的文字。573.4 原始檔說明583.4 原始檔說明593.4 原始檔說明而WebForm物件也具有容器性質(zhì)，故可以包含其他控制項(xiàng)，事實(shí)上，WebForm物件在編譯後，不但會(huì)出現(xiàn)<form>標(biāo)籤，並且也會(huì)出現(xiàn)目標(biāo)網(wǎng)頁名稱，而這個(gè)目標(biāo)網(wǎng)頁就是網(wǎng)頁本身(ch03.aspx)，同時(shí)會(huì)出現(xiàn)一些隱藏性質(zhì)的<input="hidden">標(biāo)籤利用此兩種方式，使得設(shè)計(jì)網(wǎng)頁時(shí)可以如同設(shè)計(jì)一般視窗程式。(12)第22~36行的<div>標(biāo)籤只是一個(gè)普通的HTML標(biāo)籤，可以用來代表某一段文字，一般會(huì)搭配CSS樣式表來改變文字的格式。<div>也是WebForm網(wǎng)頁內(nèi)定會(huì)附上的標(biāo)籤。603.4 原始檔說明613.4 原始檔說明(15)第30~32行的<asp:ButtonID="Button1"runat="server">，其中<asp:Button>代表這是一個(gè)按鈕控制項(xiàng)，相關(guān)屬性的意義與上述標(biāo)籤控制項(xiàng)差不多，比較特別的是，它是一個(gè)獨(dú)立標(biāo)籤〔沒有結(jié)束標(biāo)籤〕，因此在末尾出現(xiàn)『/>』符號(hào)。而這樣的標(biāo)籤就無法包含其他的子標(biāo)籤了，因此它不具有容器性質(zhì)。此外，在此標(biāo)籤中，我們可以發(fā)現(xiàn)一個(gè)OnClick="Button1_Click"屬性，它代表著其OnClick事件程序的名稱。(16)第33~35行的<asp:TextBoxID="TextBox1"runat="server">，其中<asp:TextBox>代表這是一個(gè)文字方塊控制項(xiàng)，相關(guān)屬性的意義與上述標(biāo)籤控制項(xiàng)差不多。值得注意的是，雖然它擁有結(jié)尾標(biāo)籤</asp:TextBox>，但並不代表它可以包含其他控制項(xiàng)。本例的起始標(biāo)籤與結(jié)尾標(biāo)籤之間為空，假設(shè)包含某些文字，則這些文字會(huì)變成文字方塊內(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è)使用者在文字方塊中輸入了『陳錦輝』，並且按下【顯示】鈕之後，將會(huì)收到上圖[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