逐步解說：在 Visual Web Developer 中編輯 Web 網頁的程式碼

更新：2007 年 11 月

在許多 ASP.NET Web 網頁中，您可以使用 Visual Basic、C# 或其他語言來撰寫程式碼。Visual Web Developer 中的程式碼編輯器可協助您快速撰寫程式碼，同時協助您避免錯誤。此外，編輯器可讓您以數種方式建立可重複使用的程式碼，以協助減少您需要執行的工作量。

這個逐步解說說明程式碼編輯器的各種功能。程式碼編輯器的部分功能會視您的編碼語言而定。因此，在此逐步解說中，您會建立兩個網頁，一個網頁會使用 Visual Basic 做為語言，而另一個網頁則使 C#。

在瀏覽這份逐步解說期間，您將了解如何：

• 更正錯誤 (在 Visual Basic 中)。

• 重構和重新命名程式碼 (在 C# 中)。

• 重新命名符號。

• 插入程式碼片段 (在 Visual Basic 和 C# 中)。

必要條件

若要完成這個逐步解說，您必須要有：

• Visual Studio 或 Visual Web Developer。

如需 Visual Web Developer 的簡介，請參閱逐步解說：在 Visual Web Developer 中建立基本 Web 網頁。

建立網站和網頁

如果您已經在 Visual Web Developer 中建立了網站 (例如，依照 逐步解說：在 Visual Web Developer 中建立基本 Web 網頁 中的步驟)，可以使用該網站，並繼續進行下一節的步驟。否則，依照下列這些步驟建立新的網站和 Web 網頁。

若要建立檔案系統網站

1. 開啟 Visual Web Developer。

2. 在 [檔案] 功能表上，按一下 [新網站]。

3. 請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。

4. 在 [位置] 方塊中，選取 [檔案系統]，然後輸入您想要用來保存網站頁面的資料夾名稱。

   例如，輸入資料夾名稱 C:\WebSites。

5. 在 [語言] 清單中，按一下 [Visual Basic]。

   您選擇的程式語言將成為網站的預設值，不過您可以為每個網頁分別設定程式語言。

6. 按一下 [確定]。

   Visual Web Developer 會建立資料夾和名稱為 Default.aspx 的新頁面。

在 Visual Basic 中更正錯誤

Visual Web Developer 中的程式碼編輯器可協助您在撰寫程式碼時避免錯誤，且如果出現錯誤，程式碼編輯器可協助您更正錯誤。在逐步解說的這個部分中，您將撰寫幾行程式碼，用於說明編輯器中的錯誤更正功能。

程式碼編輯器的行為會視您以哪個語言撰寫程式碼而定。一般而言，Visual Basic 2008 的程式碼編輯器會在您撰寫程式碼時提供更詳細的錯誤資訊。

若要在 Visual Basic 中測試錯誤更正

1. 在 [設計] 檢視中，按兩下空白網頁，以建立網頁之 Load 事件的處理常式。

   您只是將事件處理常式當做撰寫部分程式碼的地方。

2. 在處理常式內，輸入包含錯誤的下行程式碼：

   dim var1 as inger
   

   當您按 ENTER 鍵時，程式碼編輯器會將字 inger 加上底線，說明未辨認該字。請注意，部分底線 (Underline) 是小底線 (Underscore)。

3. 將滑鼠指標置於 inger 這個字上，查看告知您錯誤內容的工具提示。

4. 將滑鼠指標置於底線中的底線上。

   底線擴展至圖示。

5. 按一下圖示。

   字 inger 的可能更正清單隨即顯示。

6. 選取 [將 'inger' 變更為 Integer]。

在 C# 中重構和重新命名

重構是一種軟體方法，包括重組您的程式碼，以在保留其功能時更容易了解和維護它。簡單的範例可能是您在事件處理常式中撰寫程式碼，以從資料庫取得資料。在您開發網頁時，會發現需要從數個不同的處理常式存取資料。因此，您會藉由在網頁中建立資料存取功能並在處理常式中插入功能的呼叫，重構網頁的程式碼。

程式碼編輯器所包括的工具可協助您執行各種重構工作。在這個逐步解說中，您將使用兩種重構技術：重新命名符號和擷取方法。其他重構選項包括封裝欄位、將區域變數提升為方法參數以及管理方法參數。這些重構選項的可用性會視程式碼中的位置而定。例如，如果您反白顯示非欄位宣告的程式碼，則無法選取 [封裝欄位] 選項。如果您反白顯示事件方法中的變數，則無法選取 [將區域變數提升至參數]，這是因為事件處理常式簽章 (Signature) 是常數。

重構程式碼

一般重構案例是從位於其他成員中的程式碼建立 (擷取) 方法。如此會減小原始成員的大小，並讓擷取的程式碼可重複使用。

在逐步解說的這個部分中，您將撰寫部分簡單程式碼，然後從中擷取方法。C# 支援重構，因此您將建立使用 C# 做為程式語言的網頁。

若要建立 C# 網頁

1. 在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，然後再按 [加入新項目]。

2. 請在 [Visual Studio 安裝的範本] 下方，選取 [Web Form]。

3. 在 [語言] 清單中，按一下 [C#]。

   注意事項：
   您可以保留名稱 Default2.aspx。

4. 按一下 [加入]，以建立和開啟新網頁。

若要在 C# 網頁中擷取方法

1. 切換至 [設計] 檢視。

2. 在 [工具箱] 的 [標準] 索引標籤中，將 Button 控制項拖曳至頁面上。

3. 按兩下 [按鈕] 控制項，以建立其 Click 事件的處理常式，然後加入下列以粗體顯示的程式碼。

   protected void Button1_Click(object sender, EventArgs e)
   {
       System.Collections.ArrayList alist =         new System.Collections.ArrayList();    int i;    string arrayValue;    for(i=0; i<5; i++)    {        arrayValue = "i = " + i.ToString();        alist.Add(arrayValue);    }    for(i=0; i<alist.Count; i++)    {        Response.Write("<br />" + alist[i]);    }
   }
   

   該程式碼會建立 ArrayList 物件、使用迴圈 (Loop) 將值載入其中，然後使用另一個迴圈顯示 ArrayList 物件的內容。

4. 按 CTRL+F5 執行網頁，然後按一下按鈕，以確保您會看到下列輸出：

   i = 0
   i = 1
   i = 2
   i = 3
   i = 4
   

5. 返回程式碼編輯器，然後選取事件處理常式中的下行程式碼。

      for(i=0; i<alist.Count; i++)
      {
         Response.Write("<br />" + alist[i]);
      }
   

6. 以滑鼠右鍵按一下選取項目，並按 [重構]，然後選擇 [擷取方法]。

   [擷取方法] 對話方塊隨即出現。

7. 在 [新方法名稱] 方塊中，輸入 DisplayArray，然後按一下 [確定]。

   程式碼編輯器會建立名為 DisplayArray 的新方法，並將對新方法的呼叫置於迴圈原來所在的 Click 處理常式中。

   protected void Button1_Click(object sender, EventArgs e)
   {
       System.Collections.ArrayList alist = 
           new System.Collections.ArrayList();
       int i;
       string arrayValue;
       for(i=0; i<5; i++)
       {
           arrayValue = "i = " + i.ToString();
           alist.Add(arrayValue);
       }
       i = DisplayArray(alist, i);
   }
   

8. 按 CTRL+F5 再次執行頁面，並按一下按鈕。

   網頁的運作方式與先前一樣。

重新命名符號

使用變數和物件 (也都稱為符號) 時，您可能想要於在程式碼中參考符號後重新命名符號。然而，如果您未重新命名其中一個符號參考，則重新命名符號會導致程式碼中斷。因此，您可以使用重構執行重新命名。

若要使用重構重新命名符號

1. 在 Click 事件處理常式中，尋找下行程式碼：

   System.Collections.ArrayList alist = 
       new System.Collections.ArrayList;
   

2. 以滑鼠右鍵按一下變數名稱 alist，並依序選擇 [重構] 和 [重新命名]。

   [重新命名] 對話方塊隨即出現。

3. 在 [新名稱] 方塊中，輸入 [ArrayList1]，然後按 ENTER 鍵。

   [預覽變更] 對話方塊隨即出現，它會顯示包含您重新命名的符號所有參考的樹狀目錄。

4. 按一下 [套用]，以關閉 [預覽變更] 對話方塊。

   會重新命名專門參考您所選取之執行個體的變數。然而，請注意，不會重新命名下行程式碼中的變數 alist。

   private int DisplayArray(System.Collections.ArrayList alist, 
       int i)
   

   此行程式碼中的變數 alist 並未重新命名，因為它代表的值與您重新命名之變數 alist 的值並不相同。DisplayArray 宣告中的變數 alist 是該方法的區域變數。這說明使用重構重新命名符號不同於簡單地在編輯器中執行尋找和取代動作。重構會用其所使用之符號的語意 (Semantics) 知識重新命名符號。

插入程式碼片段

因為 Web 網頁開發人員需要頻繁執行眾多編碼工作，所以程式碼編輯器會提供程式碼片段的程式庫，或預先撰寫的程式碼區塊。您可將這些程式碼片段插入網頁。

每種 Visual Studio 語言的程式碼片段插入方式都有些微的差異。如需在 Visual Basic 中插入程式碼片段的詳細資訊，請參閱 HOW TO：在您的程式碼中插入程式碼片段 (Visual Basic)。如需在 Visual C# 中插入程式碼片段的詳細資訊，請參閱 HOW TO：使用程式碼片段 (C#)。

後續步驟

這個逐步解說已說明 Visual Studio 2008 程式碼編輯器的基本功能：更正程式碼中的錯誤、重構程式碼、重新命名符號，以及將程式碼片段插入程式碼。編輯器中的其他功能可讓您更快速、更輕鬆地開發應用程式。例如，您可能要：

• 了解 IntelliSense 功能，例如修改 IntelliSense 選項、管理程式碼片段和搜尋線上程式碼片段。如需詳細資訊，請參閱使用 IntelliSense。

• 了解如何建立您自己的程式碼片段。如需詳細資訊，請參閱建立和使用 IntelliSense 程式碼片段。

• 了解 IntelliSense 程式碼片段的 Visual Basic 特定功能，例如自訂程式碼片段和疑難排解。如需詳細資訊，請參閱 Visual Basic IntelliSense 程式碼片段。

• 了解 IntelliSense 的 C# 特定功能，例如重構和程式碼片段。如需詳細資訊，請參閱 Visual C# 程式碼編輯器的功能。

請參閱

概念

Visual Basic IntelliSense 程式碼片段

重構

程式碼片段 (C#)

其他資源

編輯文字、程式碼和標記

使用 IntelliSense