VWD开发环境简介PPT演示课件

1,第二章VWD開發環境簡介,在本章中，我們將介紹本書最重要的ASP.NET網頁程式開發軟體：VisualWebDeveloper2010Express，並且示範如何建立ASP.NET網頁的介面元件（這些元件稱之為控制項）。,2,大綱,2.1建立新網站2.2VWD整合開發環境介紹2.2.1主視窗2.2.2工具列2.2.3工具箱（ToolBox）2.2.4方案總管2.2.5【設計分割原始檔】主窗格2.2.6屬性窗格：設定屬性值2.3建立與操作WebForm上的控制項2.3.1建立控制項2.3.2絕對定位2.3.3調整控制項的大小2.3.4刪除控制項2.4主窗格原始檔分頁屬性窗格2.5本章回顧,3,2.1建立新網站,假設您已經安裝完成VisualWebDeveloper2010（VWD2010），我們現在可以馬上開始建立ASP.NET網頁程式。（安裝VWD2010請見附錄A）範例2-1：使用【檔案系統】網站模式建立第一個ASP.NET網頁。學習目標：包含刪除預設網頁、新增網頁及存檔。步驟0：在進行本範例的操作，請先刪除C:ASPNETch02內的所有檔案。因為那是本章範例的最終執行結果。步驟1：執行【開始所有程式MicrosoftVisualStudio2010ExpressMicrosoftVisualWebDeveloper2010Express】指令，開啟VWD2010，如下圖。步驟2：執行【檔案新網站】指令。,4,2.1建立新網站,步驟3：點選範本為【ASP.NET網站】，選擇位置為【檔案系統】，以及要將網站放置的目錄，在本例中，我們以C:ASPNETch02為存放目錄，最後選擇語言為【VisualBasic】，代表要使用VB.NET語法開發ASP.NET網頁程式，選擇完畢後按下【確定】鈕。,5,2.1建立新網站,步驟4：此時會正式開啟一個ASP.NET網站，但沒有任何網頁。您可以在方案總管窗格中，看到ch02網站的相關目錄與相關檔案，目前只有一個web.config檔，這是該網站的組態檔，記錄了該網站所使用的.NETFramework版本等資訊。我們欲在該網站中加入第一個ASP.NET網頁，因此在方案總管內，點選網站目錄或空白處按滑鼠右鍵，執行快顯功能表的【加入新項目】指令，如下圖。,6,2.1建立新網站,步驟5：接著我們選擇要新增的網頁格式為WebForm，然後輸入檔名ch02.aspx，選擇語言為【VisualBasic】，並取消將程式碼置於個別檔案中選項，最後按下【新增】鈕，如下圖。,2.1建立新網站,將程式碼置於個別檔案中選項若勾選本選項代表要將介面與程式碼分開在兩個檔案，這種開發模型稱之為程式碼後置模型(CodeBehindModel)，例如網頁介面存放在ch02.aspx檔案，而程式碼放置在ch02.aspx.vb（使用VB.NET語法）或ch02.aspx.cs（使用C#語法）檔案中。而我們在本範例中取消了這個選項，代表介面與程式碼將同時位於ch02.aspx檔案中。這種模型稱之為內嵌程式碼分割模型(InlineCodeSeparationModel)或單一檔案模型。單一檔案模型較適合不熟悉VB.NET繼承語法的初學者，因此，本書將以此種模型開發ASP.NET網頁。事實上，除了這兩種撰寫ASP.NET的模型外，ASP.NET為了與傳統ASP相容，也允許使用的方式撰寫，但本書只在資料繫結時才會採用這種過時的方式。,7,8,2.1建立新網站,步驟6：此時新增的ch02.aspx網頁會出現在方案總管中，同時在主窗格中，也會出現該檔案的原始碼。我們在原始碼中的與中輸入文字這是一個ASP.NET網頁，然後按下【設計】頁籤。,2.1建立新網站,【刪除檔案】如果想要刪除新增的ch02.aspx，可以點選ch02.aspx按下滑鼠右鍵，執行快顯功能表的【刪除】指令。,9,10,2.1建立新網站,步驟7：此時將切換到網頁的介面設計模式，您可以發現在原始檔中輸入的文字顯示在網頁中了。事實上，如果我們在設計模式中加入元件到網頁中，原始碼也會跟著改變。接下來，我們準備關閉VWD結束本範例。由於我們已經改變了ch02.aspx的內容，因此在離開VWD之前，應該要按下全部存檔鈕進行存檔，若未進行存檔就按下右上角的關閉鈕，則會出現一個提示對話框，提醒您進行存檔，如下圖。【註】本章範例具有連續性，在範例2-1建立的ch02網站將會在本章後面的範例中繼續使用。,11,12,2.1建立新網站,範例說明：在這個範例的步驟3中，我們選擇了【檔案系統】來開發ASP.NET網站。事實上，VWD提供的遠端與本地端網站類型有下列三種：1：HTTP：透過HTTP協定，將遠端伺服器（例如IIS）上的檔案下載到本地端，透過VWD來修改與開發網頁，修改完成後，也會回存到伺服器端。2：FTP：透過FTP協定，將遠端伺服器上的檔案下載到本地端，透過VWD來修改與開發網頁，修改完成後，也會回存到伺服器端。3：檔案系統：使用本地端的檔案系統作為虛擬網站，以目錄方式規劃網站，並且透過VWD啟動模擬的Web伺服器（稱之為ASP.NET程式開發伺服器），進行測試，而在瀏覽器的網址列中，會以localhost取代IP/DomainName，透過HTTP協定讀取模擬的Web伺服器的輸出。換句話說，使用本模式，並不需要額外架設實際的網頁伺服器，特別適合開發階段時使用。在下一章的範例中，我們將執行範例，您會發現瀏覽器的網址列會以localhost取代IP。,13,2.2VWD整合開發環境介紹,VWD是本書最重要的開發環境，因此在進行語法介紹之前，首先我們先來了解VWD的環境與相關操作。在上一個範例中，我們曾開啟VWD整合環境，事實上它是由許多窗格組合而成，如圖2-1。,2.2VWD整合開發環境介紹,VWD各窗格簡介除了圖2-1中所出現的主視窗、工具箱、主窗格、方案總管、屬性視窗、工具列之外，還有書籤視窗、類別檢視、文件大綱、物件瀏覽器、等等。某些子窗格是共用同一窗格的，例如圖2-1的方案總管與資料庫總管是使用同一個窗格（停駐於IDE右上方的窗格），但以頁籤分頁來區隔。除了某些分頁共用同一窗格外，某些子窗格不以頁籤方式共用同一窗格，但仍會銜接在一起，例如【CSS屬性】窗格會銜接在工具箱下方。VWD由上而下，由左而右的各窗格說明如表2-1：,14,15,2.2VWD整合開發環境介紹,【註】若已調整各窗格的位置後想要恢復原有預設的窗格位置，只要執行【視窗重設視窗配置】指令即可。,16,2.2VWD整合開發環境介紹,除了主視窗之外，事實上，其他各種窗格或子窗格都可以在【檢視】功能表中找到對應的開啟視窗指令，例如下圖中，執行【檢視其他視窗CSS屬性】指令，則可以開啟【CSS屬性】窗格於工具箱窗格下方。,17,2.2.1主視窗,VWD主視窗包含了標題列、功能表列，如下圖所示：標題列在標題列的右方，會出現一般Windows應用程式常見的3種按鈕，最小化鈕、還原鈕或最大化鈕、關閉鈕。在標題列的左方，會出現VWD視窗圖示及目前開發專案網站的目錄名稱WebSite1-VisualWebDeveloper2010Express。功能表列功能表列包含了十一個功能表（某些需先選取控制項才會出現），每個功能表中則包含了不同的指令：,18,2.2.1主視窗,19,2.2.2工具列,VWD提供了包含眾多快捷鈕的工具列，以對應某個功能表內的常用指令。工具列被分為許多種類，其中格式、標準、HTML原始檔編輯、WebPlatformInstaller等四個工具列預設會出現在VWD視窗中，而其他的工具列則可以透過【檢視工具列】指令來選擇開啟或關閉。和大多數的應用軟體一樣，當滑鼠游標移動到VWD工具列的某一個快捷鈕上等待約2秒，就會出現該快捷鈕的名稱，以便我們了解該快捷鈕的用途。在本小節中，我們先介紹最常使用的標準工具列與格式工具列：標準工具列：,20,2.2.2工具列,標準工具列的快捷鈕：,21,22,2.2.2工具列,【註】HTML5多了一些關於多媒體播放的標籤，但各家瀏覽器支援的部分並不統一，因此本書都是採用預設格式的XHTML1.0Transitional作為輸出的HTML格式。格式工具列：格式工具列的相關快捷鈕與Word等編輯軟體類似，可用來設定字型、粗體、斜體等，在此就不多作介紹。,23,2.2.3工具箱（ToolBox）,VWD的工具箱提供了許多的工具可做為網頁介面設計之用，而這些工具稱之為控制項。事實上，控制項又可以分為VWD提供的伺服器控制項(ServerControls)以及使用者自訂的使用者控制項(UserControls)，本書只會介紹VWD提供的伺服器控制項，並且又可以分為下列幾大類：標準控制項：包括常見視窗UI的控制項，只不過此處採用的是網頁方式呈現，例如按鈕、清單、影像、方塊、超鏈結、標籤與表格等等，有些控制項內還可以加入其他控制項，此類控制項稱之為容器控制項(Container)。資料控制項：此類控制項可連結伺服器端的資料來源，例如XML檔案或資料庫。驗證控制項：此類控制項的功能是用來驗證使用者在Web表單中的輸入。其功能可讓設計者驗證特定值或值的範圍。巡覽控制項：這類控制項提供了在ASP.NET網頁上建立功能表或網站巡覽的功能。,2.2.3工具箱（ToolBox）,登入控制項：這類控制項可讓設計者快速建置登入網頁。AJAX擴充功能控制項：這是ASP.NET3.5版之後新增的控制項，可以用來快速使用AJAX建立網頁，省掉過去許多需自行撰寫JavaScript程式碼的麻煩，在Web2.0網站中時常使用。VWD2010Express提供的AJAX控制項為最新的4.0版，這些控制項使用AJAXTemplate語法，可產生JavaScript的動態資料繫結效果。HTML控制項：提供許多HTML設計的元件，例如按鈕、表格等等，此類控制項不會由伺服器執行任何程式碼，伺服器只會將其對應的HTML標籤內容回傳給瀏覽器。若只需要製作靜態網頁時，可以使用此類控制項，否則，應該採用標準控制項。,24,25,2.2.3工具箱（ToolBox）,由於ASP.NET的伺服器控制項眾多，故在此不一一列出，在往後的章節中，每一章都會針對某一類的控制項進行說明。工具箱除了上述介紹的控制項之外，預設還有三類控制項頁籤，如下說明：WebParts控制項：又稱為Web組件控制項，包含網頁組件的多種控制項。可將網站的控制項整合作為集合，並允許使用者直接在瀏覽器中修改Web網頁的內容、外觀和行為。動態資料控制項：提供了許多控制項，可設計出以資料模型為導向的ASP.NET網站。一般控制項：可拖曳介面已有的常用控制項至此處，以便在使用時能夠快速複製相同類型的控制項，因此在預設狀況下，內容為空。,26,2.2.3工具箱,工具箱標籤預設會出現主窗格的左邊，若不慎關閉了，可以執行【檢視其他視窗工具箱】指令開啟。而要展開左邊的工具箱標籤，只需要將滑鼠游標移動到標籤上方，工具箱便會向右展開，其中各類控制項則以頁籤方式垂直分隔。在展開的工具箱右上角有三個按鈕，第一個按鈕為下拉鈕，其功用是選擇工具箱的出現型式，第二個按鈕的功用是固定或隱藏，當按下之後會變成圖釘樣式，此時工具箱被固定住而不會自動向左隱藏，再按一下即可恢復自動隱藏。最右方的按鈕則是關閉工具箱。,2.2.4方案總管,方案總管是VWD開發網頁程式的檔案管理窗格，預設在主窗格的右上方，使用VWD開發ASP.NET網站一般以目錄為最小基本單位，當建立一個空網站後，代表網站的目錄預設至少會包含web.config檔案，然後我們會加入新項目,27,28,2.2.4方案總管,假設加入的是WebForm網頁，則會產生預設名稱為Default.aspx的ASP.NET網頁，若採用程式碼後置模型(CodeBehindModel)開發網頁程式，則還會多出一個Default.aspx.vb或Default.aspx.cs程式檔。以下是各檔案及目錄的功能敘述。,29,2.2.4方案總管,Defalut.aspx：這是預設的網站首頁名稱，也就是當只輸入網址而未輸入檔案名稱時，會自動執行的網頁。若在VWD新增網頁而未命名時，也會以遞增數字方式來命名，例如Defaults2.aspx。Defalut.aspx.vb：這是依存在Defalut.aspx的VisualBasic.vb程式檔，當您使用程式碼後置(Code-Behind)模型開發ASP.NET網頁時，網頁內容與程式碼會分開，而程式碼會存放在此檔案。若使用C#開發ASP.NET網頁，則副檔名將為.cs。若使用單一檔案模型開發，則不會出現此檔案。web.config：這是ASP.NET特殊的網站設定檔，可依照需求設定此檔內容，而此檔為XML格式的檔案。【註】在後面章節中，我們會加入存取資料庫的功能，此時會出現一個App_Data子目錄，用來存放相關資料檔，例如XML檔或資料庫檔案。,2.2.4方案總管,在方案總管視窗上方包含幾個快捷鈕，其中設計工具檢視與檢視程式碼快捷鈕將在主窗格中開啟對應的分頁，分述如下：,30,31,2.2.4方案總管,在方案總管視窗上方包含幾個快捷鈕，其中設計工具檢視與檢視程式碼快捷鈕將在主窗格中開啟對應的分頁，分述如下：,32,2.2.5【設計分割原始檔】主窗格,VWD視窗正中央的為【設計分割原始檔】主窗格，它是用來對應方案總管中選取之檔案，並且可同時開啟多個檔案（使用上方頁籤方式區隔）若想要開啟某一個檔案來進行設計，則可以在方案總管中，點選該檔按兩下，就會自動將檔案開啟到主窗格中。若想要切換模式，則按下方的設計分割原始檔頁籤，可切換至不同的編輯模式。,33,34,2.2.5【設計分割原始檔】主窗格,主窗格是VWD用來設計網頁的介面以及設計程式原始碼的地方，如下說明：設計分頁：VWD以WebForm（網頁表單）進行網頁的設計，在此模式下，可以拖曳工具箱的控制項至WebForm來設計網頁外觀。原始檔分頁：伺服器端的.aspx其實是一個純文字檔，其中使用了某些標籤代表控制項（這些標籤符合XML的規範，有些則是HTML的標籤），若需要觀看標籤內容，則可以切換至此模式。此處同時也是撰寫程式之處。分割分頁：同時觀看上述兩者。有助於初學者了解加入控制項後，在伺服器aspx檔案中發生了什麼樣的變化。其他標籤頁籤：在主窗格下方會出現某些標籤格式的頁籤，如、等等，代表著原始檔的巢狀標籤安排，可快速切換到所需要的標籤位置。,35,2.2.6屬性窗格：設定屬性值,在上一章中，我們已經介紹過物件與屬性的關係，例如：飛機是一個類別，它有眾多屬性來描述屬於該類別下各個物件的特性，例如：爬升力、外殼顏色、載重、重量、等等。因此，將飛機的屬性設定為不同的屬性值，就可以得到各式各樣的飛機，如客機與戰鬥機等等。ASP.NET的每一種控制項都是一個類別，而每一個控制項都是一個物件，因此，控制項擁有屬於該控制項的屬性，我們可以透過視窗右下角的屬性窗格來更改這些控制項物件的各個屬性值。例如，在網頁中有一個按鈕控制項物件，名稱為Button1，隸屬於WebControls.Button類別，若欲將其文字設定為發送，則只要在屬性窗格中，設定Text的屬性值為發送即可，如下圖。（若無法即時反應，可先切換至【原始檔】分頁再切回【設計】分頁，就可以發現屬性設定的效果）,36,除了事先靜態設定屬性值之外，我們也可以撰寫程式碼來動態更改屬性值，換句話說，該物件的屬性值將在程式執行時被更改，例如：更改某一個標籤物件的文字屬性值。,37,2.2.6屬性窗格：設定屬性值,屬性窗格預設放置於視窗右下角，若不慎關閉，可執行【檢視其他視窗屬性視窗】指令來開啟。若VWD中已經出現屬性窗格時，則可以藉由物件名稱下拉式清單選取網頁中不同的物件，進而設定該物件的屬性。,38,2.2.6屬性窗格：設定屬性值,【註】屬性視窗也可以用來產生事件處理程序，留待後面小節介紹。,2.3建立與操作WebForm上的控制項,VWD2010Express預設的原始碼介面並不包含行號，而為了本書往後說明程式碼的方便，因此，建議讀者如下開啟行號功能，以便對照相關程式碼的說明。開啟行號顯示功能進入VWD後，執行【工具選項】指令，勾選行號，按下【確定】鈕後，關閉VWD，往後開啟VWD，在程式碼分頁處就會顯示行號了。,39,40,41,2.3建立與操作WebForm上的控制項,在範例2-1中，我們加入新檔案時，選用的範本是WebForm，其副檔名是.aspx。而WebForm是使得ASP.NET可採用事件處理方式開發的關鍵元件，它使用的是一個標籤作為原始碼，在預設狀況下（尚未配置其他控制項時），其原始檔如下：,42,2.3建立與操作WebForm上的控制項,43,2.3建立與操作WebForm上的控制項,【說明】如果您了解HTML網頁的原理與原始碼，您會發現，ASP.NET網頁的初始內容與XHTML網頁部分類似，但有些許不同，不同之處如上述粗體所示，說明如下：(1)第1行：由於這是一個ASP.NET網頁，因此必須先說明該網頁使用何種語法撰寫，故使用Page指示詞說明該網頁為VB語法（也就是VB.NET4.0或VB2010語法）。(2)第57行：這裡出現了一個標籤，並且runat屬性註明為server，在ASP.NET中，只要標籤包含一個屬性runat=server，就代表該標籤內容必須由伺服器進行編譯與執行，而此處標籤的作用是放置事件處理程序之處。,44,2.3建立與操作WebForm上的控制項,(3)第1418行：您會發現在標籤.中，包含了一個標籤，該標籤之id屬性為form1，這代表著(1)這是一個表單，名稱為form1，並且必須由伺服器先進行處理，事實上這就是WebForm表單(2)伺服器處理的範圍將包含在之中，而由於它被包含在之內，因此處理結果也會被包含在之內，故可以作為網頁顯示的內容。(3)標籤內是配置控制項之處。(4)標籤內容為空，它只是一個純HTML標籤（並無runat=server屬性），代表著這裡可以放置文字或其他標籤(4)所有標籤中出現runat=server者，編譯器都會將之視為一個物件進行處理。而沒有runat=server的標籤，則不需要被處理，通常僅直接輸出（例如本例中的標籤）。,45,2.3建立與操作WebForm上的控制項,(5)由以上各點，我們可以得知ASP.NET網頁採用單一檔案模型開發時，事件處理程序將位於標籤中而控制項將加入在標籤中。接下來，我們將示範如何在WebForm中加入控制項，目標是設計出下圖的網頁使用者介面。它一共配置了4個控制項。ASP.NET是由Page物件來代表檔案本身，而若以WebForm型式建立.aspx檔案時，會自動出現來代表WebForm物件。由於WebForm物件具有容器性質，因此可以加入其他控制項，下圖的WebForm中包含的控制項如下：,46,2.3建立與操作WebForm上的控制項,一個HTML標籤，若加上runat=server，則可以視為HTML控制項，若不加上runat=server，則只是單純的HTML標籤。WebForm內包含一個Label標籤控制項。WebForm內包含一個Button按鈕控制項。本身也是一個HTML控制項，因為它也有runat=server屬性。,圖2-2包含兩個伺服器控制項的WebForm,47,2.3.1建立控制項,WebForm內定已經包含一個HTML控制項與標籤，而要如何建立上圖WebForm的另外兩個伺服器控制項呢？我們以範例2-22-4來加以說明：【練習範例2-1a】：延續範例2-1，加入兩個標籤控制項。（本例僅練習用，不必存檔）,48,49,50,51,2.3.1建立控制項,52,2.3.1建立控制項,53,54,2.3.1建立控制項,在這個練習範例中，我們不但學會如何配置控制項，同時，也發現到在ASP.NET中配置控制項，不如在VB.NET視窗程式設計中配置控制項那樣隨心所欲這是因為，不論您如何配置控制項，最終在執行之後都會被轉換為HTML標籤，而HTML標籤具有連續性原則，也就是由左至右配置，中間無法自動增加空白並且除非是超過頁面，否則只能透過與標籤進行換行或換段落，而這種定位方式是VWD預設的定位方式。為了解決此一問題，VWD允許我們採用其他定位方式來配置控制項，這也將是本書前幾章採用的使用者介面設計方式。,55,2.3.2絕對定位,在上一個範例中，我們發現，控制項雖然位於標籤內，但調整位置並不方便，事實上，如果我們以絕對定位來定位控制項，就會方便許多。以下，我們透過範例來說明。【範例2-2】：延續範例2-1，加入兩個標籤控制項,56,2.3.2絕對定位,57,58,59,60,2.3.2絕對定位,61,62,63,64,65,2.3.2絕對定位,【原始檔說明】在這個範例中，我們調整了標籤的大小，也調整了Label1、Label2、Button1控制項的位置，並且位置設定為絕對定位，因此原始檔的標籤內出現了變化，如下。,66,2.3.2絕對定位,67,2.3.2絕對定位,說明：第15行標籤發生了變化，它使用了style屬性來設定新的高度為233px，這是CSS的語法。第17行與第22行標籤控制項對應的標籤出現了變化，它也使用了style屬性設定標籤的寬與高及其位置，其中position:absolute代表著使用的是絕對定位，而top與left，則代表它的位置應該位於網頁上方與左方多遠的距離。第2426行出現了一個標籤，它代表的是按鈕控制項，也使用了絕對定位。故雖然在原始檔之中，Label2位於Button1之前，但在設計介面處，Button1卻出現在Label2之上。,68,2.3.2絕對定位,如果您開啟本範例檔案，然後隨意拖曳任一個標籤或按鈕控制項的位置，會發現調整任何一個控制項並不會對另一個控制項造成影響。這是因為我們使用了絕對定位的緣故。若在對話方塊中採用【相對】定位，則原始檔會出現position:relative，此時，控制項就會跟隨前一個控制項自動調整位置。而本書較複雜的範例介面將採用絕對定位來配置介面元件，只有非常單純的範例會採用相對定位配置介面元件。與標籤並不是HTML標籤，凡是格式的標籤都是ASP.NET的伺服器控制項，由於它也需要被編譯器處理，故必定也有runat=server屬性。,69,2.3.3調整控制項的大小,在前面的範例中，我們在調整控制項的位置時，已經學會如何選取控制項。事實上，當您選取某一個控制項之後（或游標移到某一個控制項上方時），該控制項的外框就會出現八個小白點，而該控制項則稱之為作用控制項，此時您可以針對作用控制項進行各種動作，例如：搬移控制項位置、調整控制項大小、設定控制項的屬性值。在上一節中，我們已經學會如何調整控制項的位置在本小節中，我們將示範如何調整控制項的大小：【範例2-3】：延續範例2-2，調整按鈕控制項的大小,70,2.3.3調整控制項的大小,71,2.3.3調整控制項的大小,72,2.3.3調整控制項的大小,選取多個控制項我們常常會希望將許多控制項同時移動，例如：感覺WebForm表單的右邊空間比較大，就會希望將所有表單上的控制項同時向右移動。此時，一個一個慢慢地移動控制項位置是一種方法，不過卻顯得很麻煩又不容易對齊控制項這個時候如果我們可以先同時選取多個控制項，然後一起移動該有多好。同樣地，我們也希望可以同時改變多個控制項的大小。選取多個控制項的方式，只要按住【Ctrl】鍵就可以完成，如同在檔案總管中選取多個檔案的方式。不幸地，VWD2010Express雖然允許選取多個控制項，但卻無法同時進行移動及調整大小但可同時刪除或複製多個選取的控制項。,73,2.3.4刪除控制項,刪除控制項非常簡單，只要先選取控制項，使得控制項變成作用控制項（外框出現八個小白點），然後就可以對該控制項做縮放、搬移及刪除的動作，並且若選取多個控制項時，也可以一次刪除所選取的多個控制項（但無法進行多個控制項的縮放與搬移）。刪除作用控制項，可以依照下列三種方式完成：方法1：按下【Delete】鍵。方法2：執行【編輯刪除】指令。方法3：在作用控制項上按滑鼠右鍵，於快顯功能表中執行【刪除】指令。【範例2-4】：延續範例2-3，刪除Label2控制項,74,75,2.3.4刪除控制項,76,2.3.4刪除控制項,【復原被刪除的控制項】當我們不小心誤刪了某個控制項後，可以透過下列3種方式將之復原：方法1：執行【編輯復原】指令。方法2：按下一般工具列的復原快捷鈕。方法3：同時按下【Ctrl】鍵+【Z】鍵。,77,2.4主窗格原始檔分頁屬性窗格,主窗格的【原始檔】分頁是編輯程式碼的地方。對WebForm網頁而言，撰寫的程式大多為事件處理程序及其他自定的程序，這些都是伺服器端要執行的程式。ASP.NET當然也可以開發客戶端執行的JavaScript程式，不過我們暫時不會討論如何撰寫客戶端程式。原始檔分頁的操作以下，我們以範例2-4最後完成的WebForm(ch02.aspx)來說明【原始檔】分頁的操作：(1)開啟範例2-4的ch02.aspx網頁（ch02.aspx）並切換到【原始檔】分頁，如下圖：,78,79,2.4主窗格原始檔分頁屬性窗格,(2)控制項與預設事件：在範例2-4中，Page代表網頁本身，而其他則還有3個物件，分別是Button1、Label1與form1。您可以切換到【設計】分頁，如下圖，當我們在WebForm上選擇其中一個控制項（例如：選擇Button1按鈕控制項）之後，屬性窗格就會顯示該控制項的屬性，這些屬性被分類為外觀、行為等幾類，其中一定會出現的是(ID)屬性，它代表該控制項的名稱，也就是物件的名稱。而圖中的Text屬性的屬性值則代表按鈕的文字。而要產生控制項預設事件的事件程序，只需要