第二章 VWD 開發環境簡介

1. 第二章 VWD開發環境簡介 在本章中，我們將介紹本書最重要的ASP.NET網頁程式開發軟體：Visual Web Developer 2010 Express，並且示範如何建立ASP.NET網頁的介面元件（這些元件稱之為控制項）。

2. 大綱 • 2.1 建立新網站 • 2.2 VWD整合開發環境介紹 • 2.2.1 主視窗 • 2.2.2 工具列 • 2.2.3 工具箱（Tool Box） • 2.2.4 方案總管 • 2.2.5 【設計／分割／原始檔】主窗格 • 2.2.6 屬性窗格：設定屬性值 • 2.3 建立與操作Web Form上的控制項 • 2.3.1 建立控制項 • 2.3.2 絕對定位 • 2.3.3 調整控制項的大小 • 2.3.4 刪除控制項 • 2.4 主窗格／原始檔分頁／屬性窗格 • 2.5 本章回顧

3. 2.1 建立新網站 • 假設您已經安裝完成Visual Web Developer 2010（VWD2010），我們現在可以馬上開始建立ASP.NET網頁程式。（安裝VWD2010請見附錄A） • 範例2-1：使用【檔案系統】網站模式建立第一個ASP.NET網頁。 • 學習目標：包含刪除預設網頁、新增網頁及存檔。 • 步驟0：在進行本範例的操作，請先刪除C:\ASPNET\ch02內的所有檔案。因為那是本章範例的最終執行結果。 • 步驟1：執行【開始／所有程式／Microsoft Visual Studio 2010 Express／Microsoft Visual Web Developer 2010 Express】指令，開啟VWD2010，如下圖。 • 步驟2：執行【檔案／新網站】指令。

4. 2.1 建立新網站 • 步驟3：點選範本為【ASP.NET網站】，選擇位置為【檔案系統】，以及要將網站放置的目錄，在本例中，我們以C:\ASPNET\ch02\為存放目錄，最後選擇語言為【Visual Basic】，代表要使用VB.NET語法開發ASP.NET網頁程式，選擇完畢後按下【確定】鈕。

5. 2.1 建立新網站 • 步驟4：此時會正式開啟一個ASP.NET網站，但沒有任何網頁。您可以在方案總管窗格中，看到ch02網站的相關目錄與相關檔案，目前只有一個web.config檔，這是該網站的組態檔，記錄了該網站所使用的.NET Framework版本等資訊。我們欲在該網站中加入第一個ASP.NET網頁，因此在方案總管內，點選網站目錄或空白處按滑鼠右鍵，執行快顯功能表的【加入新項目】指令，如下圖。

6. 2.1 建立新網站 • 步驟5：接著我們選擇要新增的網頁格式為Web Form，然後輸入檔名ch02.aspx，選擇語言為【Visual Basic】，並取消『將程式碼置於個別檔案中』選項，最後按下【新增】鈕，如下圖。

7. 2.1 建立新網站 • 『將程式碼置於個別檔案中』選項 • 若勾選本選項代表要將介面與程式碼分開在兩個檔案，這種開發模型稱之為程式碼後置模型(Code Behind Model)，例如網頁介面存放在ch02.aspx檔案，而程式碼放置在ch02.aspx.vb（使用VB.NET語法）或ch02.aspx.cs（使用C#語法）檔案中。 • 而我們在本範例中取消了這個選項，代表介面與程式碼將同時位於ch02.aspx檔案中。這種模型稱之為內嵌程式碼分割模型(Inline Code Separation Model)或單一檔案模型。 • 單一檔案模型較適合不熟悉VB.NET繼承語法的初學者，因此，本書將以此種模型開發ASP.NET網頁。 • 事實上，除了這兩種撰寫ASP.NET的模型外，ASP.NET為了與傳統ASP相容，也允許使用<% %>的方式撰寫，但本書只在資料繫結時才會採用這種過時的方式。

8. 2.1 建立新網站 • 步驟6：此時新增的ch02.aspx網頁會出現在方案總管中，同時在主窗格中，也會出現該檔案的原始碼。我們在原始碼中的<div>與</div>中輸入文字『這是一個ASP.NET網頁』，然後按下【設計】頁籤。

9. 2.1 建立新網站 • 【刪除檔案】 • 如果想要刪除新增的ch02.aspx，可以點選ch02.aspx按下滑鼠右鍵，執行快顯功能表的【刪除】指令。

10. 2.1 建立新網站 • 步驟7：此時將切換到網頁的介面設計模式，您可以發現在原始檔中輸入的文字顯示在網頁中了。事實上，如果我們在設計模式中加入元件到網頁中，原始碼也會跟著改變。接下來，我們準備關閉VWD結束本範例。由於我們已經改變了ch02.aspx的內容，因此在離開VWD之前，應該要按下全部存檔鈕進行存檔，若未進行存檔就按下右上角的關閉鈕，則會出現一個提示對話框，提醒您進行存檔，如下圖。 • 【註】本章範例具有連續性，在範例2-1建立的ch02網站將會在本章後面的範例中繼續使用。

12. 2.1 建立新網站 • 範例說明： • 在這個範例的步驟3中，我們選擇了【檔案系統】來開發ASP.NET網站。事實上，VWD提供的遠端與本地端網站類型有下列三種： • 1：HTTP：透過HTTP協定，將遠端伺服器（例如IIS）上的檔案下載到本地端，透過VWD來修改與開發網頁，修改完成後，也會回存到伺服器端。 • 2：FTP：透過FTP協定，將遠端伺服器上的檔案下載到本地端，透過VWD來修改與開發網頁，修改完成後，也會回存到伺服器端。 • 3：檔案系統：使用本地端的檔案系統作為虛擬網站，以目錄方式規劃網站，並且透過VWD啟動模擬的Web伺服器（稱之為ASP.NET程式開發伺服器），進行測試，而在瀏覽器的網址列中，會以localhost取代IP/Domain Name，透過HTTP協定讀取模擬的Web伺服器的輸出。換句話說，使用本模式，並不需要額外架設實際的網頁伺服器，特別適合開發階段時使用。在下一章的範例中，我們將執行範例，您會發現瀏覽器的網址列會以localhost取代IP。

13. 2.2 VWD整合開發環境介紹 • VWD是本書最重要的開發環境，因此在進行語法介紹之前，首先我們先來了解VWD的環境與相關操作。在上一個範例中，我們曾開啟VWD整合環境，事實上它是由許多窗格組合而成，如圖2-1。

14. 2.2 VWD整合開發環境介紹 • VWD各窗格簡介 • 除了圖2-1中所出現的主視窗、工具箱、主窗格、方案總管、屬性視窗、工具列之外，還有書籤視窗、類別檢視、文件大綱、物件瀏覽器、、等等。某些子窗格是共用同一窗格的，例如圖2-1的方案總管與資料庫總管是使用同一個窗格（停駐於IDE右上方的窗格），但以頁籤分頁來區隔。 • 除了某些分頁共用同一窗格外，某些子窗格不以頁籤方式共用同一窗格，但仍會銜接在一起，例如【CSS屬性】窗格會銜接在工具箱下方。VWD由上而下，由左而右的各窗格說明如表2-1：

15. 2.2 VWD整合開發環境介紹 【註】 若已調整各窗格的位置後想要恢復原有預設的窗格位置，只要執行【視窗／重設視窗配置】指令即可。

16. 2.2 VWD整合開發環境介紹 • 除了主視窗之外，事實上，其他各種窗格或子窗格都可以在【檢視】功能表中找到對應的開啟視窗指令，例如下圖中，執行【檢視／其他視窗／CSS屬性】指令，則可以開啟【CSS屬性】窗格於工具箱窗格下方。

17. 2.2.1 主視窗 • VWD主視窗包含了標題列、功能表列，如下圖所示： • 標題列 • 在標題列的右方，會出現一般Windows應用程式常見的3種按鈕，最小化鈕、還原鈕或最大化鈕、關閉鈕。 • 在標題列的左方，會出現VWD視窗圖示及目前開發專案／網站的目錄名稱『WebSite1-Visual Web Developer 2010 Express』。 • 功能表列 • 功能表列包含了十一個功能表（某些需先選取控制項才會出現），每個功能表中則包含了不同的指令：

18. 2.2.1 主視窗

19. 2.2.2 工具列 • VWD提供了包含眾多快捷鈕的『工具列』，以對應某個功能表內的常用指令。工具列被分為許多種類，其中格式、標準、HTML原始檔編輯、Web Platform Installer等四個工具列預設會出現在VWD視窗中，而其他的工具列則可以透過【檢視／工具列】指令來選擇開啟或關閉。 • 和大多數的應用軟體一樣，當滑鼠游標移動到VWD工具列的某一個快捷鈕上等待約2秒，就會出現該快捷鈕的名稱，以便我們了解該快捷鈕的用途。在本小節中，我們先介紹最常使用的標準工具列與格式工具列： • 標準工具列：

20. 2.2.2 工具列 • 標準工具列的快捷鈕：

22. 2.2.2 工具列 • 【註】HTML5多了一些關於多媒體播放的標籤，但各家瀏覽器支援的部分並不統一，因此本書都是採用預設格式的XHTML 1.0 Transitional作為輸出的HTML格式。 • 格式工具列： • 格式工具列的相關快捷鈕與Word等編輯軟體類似，可用來設定字型、粗體、斜體等，在此就不多作介紹。

23. 2.2.3 工具箱（Tool Box） • VWD的工具箱提供了許多的工具可做為網頁介面設計之用，而這些工具稱之為『控制項』。事實上，控制項又可以分為VWD提供的伺服器控制項(Server Controls)以及使用者自訂的使用者控制項(User Controls)，本書只會介紹VWD提供的伺服器控制項，並且又可以分為下列幾大類： • 標準控制項： • 包括常見視窗UI的控制項，只不過此處採用的是網頁方式呈現，例如按鈕、清單、影像、方塊、超鏈結、標籤與表格等等，有些控制項內還可以加入其他控制項，此類控制項稱之為容器控制項(Container)。 • 資料控制項： • 此類控制項可連結伺服器端的資料來源，例如XML檔案或資料庫。 • 驗證控制項： • 此類控制項的功能是用來驗證使用者在Web表單中的輸入。其功能可讓設計者驗證特定值或值的範圍。 • 巡覽控制項： • 這類控制項提供了在ASP.NET網頁上建立功能表或網站巡覽的功能。

24. 2.2.3 工具箱（Tool Box） • 登入控制項： • 這類控制項可讓設計者快速建置登入網頁。 • AJAX擴充功能控制項： • 這是ASP.NET3.5版之後新增的控制項，可以用來快速使用AJAX建立網頁，省掉過去許多需自行撰寫JavaScript程式碼的麻煩，在Web 2.0網站中時常使用。 • VWD 2010 Express提供的AJAX控制項為最新的4.0版，這些控制項使用AJAX Template語法，可產生JavaScript的動態資料繫結效果。 • HTML控制項： • 提供許多HTML設計的元件，例如按鈕、表格等等，此類控制項不會由伺服器執行任何程式碼，伺服器只會將其對應的HTML標籤內容回傳給瀏覽器。 • 若只需要製作靜態網頁時，可以使用此類控制項，否則，應該採用標準控制項。

25. 2.2.3 工具箱（Tool Box） • 由於ASP.NET的伺服器控制項眾多，故在此不一一列出，在往後的章節中，每一章都會針對某一類的控制項進行說明。工具箱除了上述介紹的控制項之外，預設還有三類控制項頁籤，如下說明： • WebParts控制項： • 又稱為Web組件控制項，包含網頁組件的多種控制項。可將網站的控制項整合作為集合，並允許使用者直接在瀏覽器中修改 Web 網頁的內容、外觀和行為。 • 動態資料控制項： • 提供了許多控制項，可設計出以資料模型為導向的ASP.NET網站。 • 一般控制項： • 可拖曳介面已有的常用控制項至此處，以便在使用時能夠快速複製相同類型的控制項，因此在預設狀況下，內容為空。

26. 2.2.3 工具箱 • 工具箱標籤預設會出現主窗格的左邊，若不慎關閉了，可以執行【檢視／其他視窗／工具箱】指令開啟。而要展開左邊的工具箱標籤，只需要將滑鼠游標移動到標籤上方，工具箱便會向右展開，其中各類控制項則以頁籤方式垂直分隔。在展開的工具箱右上角有三個按鈕，第一個按鈕為下拉鈕，其功用是選擇工具箱的出現型式，第二個按鈕的功用是固定或隱藏，當按下之後會變成圖釘樣式，此時工具箱被固定住而不會自動向左隱藏，再按一下即可恢復自動隱藏。最右方的按鈕則是關閉工具箱。

27. 2.2.4 方案總管 • 方案總管是VWD開發網頁程式的檔案管理窗格，預設在主窗格的右上方，使用VWD開發ASP.NET網站一般以目錄為最小基本單位，當建立一個空網站後，代表網站的目錄預設至少會包含web.config檔案，然後我們會加入新項目

28. 2.2.4 方案總管 • 假設加入的是Web Form網頁，則會產生預設名稱為Default.aspx的ASP.NET網頁，若採用程式碼後置模型(Code Behind Model)開發網頁程式，則還會多出一個Default.aspx.vb或Default.aspx.cs程式檔。以下是各檔案及目錄的功能敘述。

29. 2.2.4 方案總管 • Defalut.aspx： • 這是預設的網站首頁名稱，也就是當只輸入網址而未輸入檔案名稱時，會自動執行的網頁。若在VWD新增網頁而未命名時，也會以遞增數字方式來命名，例如Defaults2.aspx。 • Defalut.aspx.vb： • 這是依存在Defalut.aspx的Visual Basic『.vb』程式檔，當您使用程式碼後置(Code-Behind)模型開發ASP.NET網頁時，網頁內容與程式碼會分開，而程式碼會存放在此檔案。若使用C#開發ASP.NET網頁，則副檔名將為『.cs』。若使用單一檔案模型開發，則不會出現此檔案。 • web.config： • 這是ASP.NET特殊的網站設定檔，可依照需求設定此檔內容，而此檔為XML格式的檔案。 • 【註】在後面章節中，我們會加入存取資料庫的功能，此時會出現一個App_Data子目錄，用來存放相關資料檔，例如XML檔或資料庫檔案。

30. 2.2.4 方案總管 • 在方案總管視窗上方包含幾個快捷鈕，其中設計工具檢視與檢視程式碼快捷鈕將在主窗格中開啟對應的分頁，分述如下：

31. 2.2.4 方案總管 • 在方案總管視窗上方包含幾個快捷鈕，其中設計工具檢視與檢視程式碼快捷鈕將在主窗格中開啟對應的分頁，分述如下：

32. 2.2.5 【設計／分割／原始檔】主窗格 • VWD視窗正中央的為【設計／分割／原始檔】主窗格，它是用來對應方案總管中選取之檔案，並且可同時開啟多個檔案（使用上方頁籤方式區隔） • 若想要開啟某一個檔案來進行設計，則可以在方案總管中，點選該檔按兩下，就會自動將檔案開啟到主窗格中。 • 若想要切換模式，則按下方的『設計／分割／原始檔』頁籤，可切換至不同的編輯模式。

34. 2.2.5 【設計／分割／原始檔】主窗格 • 主窗格是VWD用來設計網頁的介面以及設計程式原始碼的地方，如下說明： • 『設計』分頁： • VWD以Web Form（網頁表單）進行網頁的設計，在此模式下，可以拖曳工具箱的控制項至Web Form來設計網頁外觀。 • 『原始檔』分頁： • 伺服器端的.aspx其實是一個純文字檔，其中使用了某些標籤代表控制項（這些標籤符合XML的規範，有些則是HTML的標籤），若需要觀看標籤內容，則可以切換至此模式。此處同時也是撰寫程式之處。 • 『分割』分頁： • 同時觀看上述兩者。有助於初學者了解加入控制項後，在伺服器aspx檔案中發生了什麼樣的變化。 • 『其他標籤』頁籤： • 在主窗格下方會出現某些標籤格式的頁籤，如<html>、<body>等等，代表著原始檔的巢狀標籤安排，可快速切換到所需要的標籤位置。

35. 2.2.6 屬性窗格：設定屬性值 • 在上一章中，我們已經介紹過物件與屬性的關係，例如：飛機是一個類別，它有眾多屬性來描述屬於該類別下各個物件的特性，例如：爬升力、外殼顏色、載重、重量、、等等。因此，將飛機的屬性設定為不同的屬性值，就可以得到各式各樣的飛機，如客機與戰鬥機等等。 • ASP.NET的每一種控制項都是一個類別，而每一個控制項都是一個物件，因此，控制項擁有屬於該控制項的屬性，我們可以透過視窗右下角的屬性窗格來更改這些控制項物件的各個屬性值。 • 例如，在網頁中有一個按鈕控制項物件，名稱為Button1，隸屬於WebControls.Button類別，若欲將其文字設定為『發送』，則只要在屬性窗格中，設定Text的屬性值為『發送』即可，如下圖。 • （若無法即時反應，可先切換至【原始檔】分頁再切回【設計】分頁，就可以發現屬性設定的效果）

36. 除了事先靜態設定屬性值之外，我們也可以撰寫程式碼來動態更改屬性值，換句話說，該物件的屬性值將在程式執行時被更改，例如：更改某一個標籤物件的文字屬性值。除了事先靜態設定屬性值之外，我們也可以撰寫程式碼來動態更改屬性值，換句話說，該物件的屬性值將在程式執行時被更改，例如：更改某一個標籤物件的文字屬性值。

37. 2.2.6 屬性窗格：設定屬性值 • 屬性窗格預設放置於視窗右下角，若不慎關閉，可執行【檢視／其他視窗／屬性視窗】指令來開啟。 • 若VWD中已經出現屬性窗格時，則可以藉由物件名稱下拉式清單選取網頁中不同的物件，進而設定該物件的屬性。

38. 2.2.6 屬性窗格：設定屬性值 【註】屬性視窗也可以用來產生事件處理程序，留待後面小節介紹。

39. 2.3 建立與操作Web Form上的控制項 • VWD 2010 Express預設的原始碼介面並不包含行號，而為了本書往後說明程式碼的方便，因此，建議讀者如下開啟行號功能，以便對照相關程式碼的說明。 • 開啟行號顯示功能 • 進入VWD後，執行【工具／選項】指令，勾選行號，按下【確定】鈕後，關閉VWD，往後開啟VWD，在程式碼分頁處就會顯示行號了。

41. 2.3 建立與操作Web Form上的控制項 • 在範例2-1中，我們加入新檔案時，選用的範本是Web Form，其副檔名是.aspx。 • 而Web Form是使得ASP.NET可採用事件處理方式開發的關鍵元件，它使用的是一個<form runat="server">標籤作為原始碼，在預設狀況下（尚未配置其他控制項時），其原始檔如下：

42. 2.3 建立與操作Web Form上的控制項

43. 2.3 建立與操作Web Form上的控制項 • 【說明】 • 如果您了解HTML網頁的原理與原始碼，您會發現， ASP.NET網頁的初始內容與XHTML網頁部分類似，但有些許不同，不同之處如上述粗體所示，說明如下： • (1)第1行： • 由於這是一個ASP.NET網頁，因此必須先說明該網頁使用何種語法撰寫，故使用@Page指示詞說明該網頁為VB語法（也就是VB.NET 4.0或VB2010語法）。 • (2)第5~7行： • 這裡出現了一個<script>標籤，並且runat屬性註明為server，在ASP.NET中，只要標籤包含一個屬性runat="server"，就代表該標籤內容必須由伺服器進行編譯與執行，而此處<script>標籤的作用是放置事件處理程序之處。

44. 2.3 建立與操作Web Form上的控制項 • (3)第14~18行： • 您會發現在標籤<body>..</body>中，包含了一個<form runat="server">標籤，該標籤之id屬性為form1，這代表著 • (1)這是一個表單，名稱為form1，並且必須由伺服器先進行處理，事實上這就是Web Form表單 • (2)伺服器處理的範圍將包含在<form>之中，而由於它被包含在<body>之內，因此處理結果也會被包含在<body>之內，故可以作為網頁顯示的內容。 • (3)<form>標籤內是配置控制項之處。 • (4)<div>標籤內容為空，它只是一個純HTML標籤（並無runat="server"屬性），代表著這裡可以放置文字或其他標籤 • (4)所有標籤中出現runat="server"者，編譯器都會將之視為一個物件進行處理。而沒有runat="server"的標籤，則不需要被處理，通常僅直接輸出（例如本例中的<div>標籤）。

45. 2.3 建立與操作Web Form上的控制項 • (5)由以上各點，我們可以得知 • ASP.NET網頁採用單一檔案模型開發時，事件處理程序將位於<script>標籤中 • 而控制項將加入在<form1>標籤中。 • 接下來，我們將示範如何在Web Form中加入控制項，目標是設計出下圖的網頁使用者介面。它一共配置了4個控制項。 • ASP.NET是由Page物件來代表檔案本身，而若以Web Form型式建立.aspx檔案時，會自動出現<form runat="server">來代表Web Form物件。 • 由於Web Form物件具有容器性質，因此可以加入其他控制項，下圖的Web Form中包含的控制項如下：

46. 2.3 建立與操作Web Form上的控制項 • 一個HTML標籤<div>，若加上runat="server"，則可以視為HTML控制項，若不加上runat="server"，則只是單純的HTML標籤。 • Web Form內包含一個Label標籤控制項。 • Web Form內包含一個Button按鈕控制項。 • <form>本身也是一個HTML控制項，因為它也有runat="server"屬性。 圖2-2 包含兩個伺服器控制項的Web Form

47. 2.3.1 建立控制項 • Web Form內定已經包含一個<form>HTML控制項與<div>標籤，而要如何建立上圖Web Form的另外兩個伺服器控制項呢？我們以範例2-2~2-4來加以說明： • 【練習範例2-1a】： • 延續範例2-1，加入兩個標籤控制項。（本例僅練習用，不必存檔）