在 Visual Studio 2013 中以程式碼編輯 ASP.NET Web Forms

發行項
07/13/2023

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

本逐步解說說明 Visual Studio 程式碼編輯器的各種功能。

在這個逐步解說期間，您將了解如何：

更正內嵌程式碼錯誤。
重構和重新命名程式碼。
重新命名變數和物件。
插入程式碼片段。

必要條件

為了完成這個逐步解說，您需要：

Microsoft Visual Studio 2013或Microsoft Visual Studio Express 2013 for Web。 .NET Framework會自動安裝。

注意

Microsoft Visual Studio 2013 和 Microsoft Visual Studio Express 2013 for Web 通常在本教學課程系列中稱為 Visual Studio。

如果您使用 Visual Studio，本逐步解說假設您在第一次啟動 Visual Studio 時選取 了設定的 Web 開發 集合。如需詳細資訊，請參閱如何：選取 Web 開發環境設定。

建立 Web 應用程式專案和頁面

在本逐步解說的這個部分中，您將建立 Web 應用程式專案，並在其中新增頁面。

建立 Web 應用程式專案

開啟 Microsoft Visual Studio。
在 [檔案] 功能表上，選取 [新增專案]。

[新增專案] 對話方塊隨即出現。
選取左側的[範本- >Visual C# - >Web範本] 群組。
選擇中間欄的 [ASP.NET Web 應用程式] 範本。
將您的專案命名為 BasicWebApp ，然後按一下 [ 確定] 按鈕。
接下來，選取Web Form範本，然後按一下 [確定] 按鈕以建立專案。

Visual Studio 會建立新的專案，其中包含以Web Form範本為基礎的預先建置功能。

建立新的 ASP.NET Web Forms頁面

當您使用ASP.NET Web 應用程式專案範本建立新的Web Form應用程式時，Visual Studio 會在名為Default.aspx的 (Web Form 頁面) 新增 ASP.NET 網頁，以及其他數個檔案和資料夾。您可以使用 Default.aspx 頁面作為 Web 應用程式的首頁。不過，在本逐步解說中，您將建立和使用新的頁面。

將頁面新增至 Web 應用程式

在方案總管中，以滑鼠右鍵按一下本教學課程中的 [Web 應用程式名稱] (，應用程式名稱為BasicWebSite) ，然後按一下 [新增專案 >]。
[ 加入新項目 ] 對話方塊隨即出現。
選取左側的[Visual C# - >Web範本] 群組。然後，從中間清單中選取 [Web Form ]，並將它命名為 FirstWebPage.aspx。
按一下[新增] 將 [Web Form] 頁面新增至您的專案。
Visual Studio 會建立新的頁面並加以開啟。
接下來，將此新頁面設定為預設啟動頁面。在方案總管中，以滑鼠右鍵按一下名為FirstWebPage.aspx的新頁面，然後選取[設定為起始頁]。下次執行此應用程式以測試我們的進度時，您會自動在瀏覽器中看到這個新頁面。

更正內嵌程式碼錯誤

Visual Studio 中的程式碼編輯器可協助您在撰寫程式碼時避免錯誤，而且如果您發生錯誤，程式碼編輯器可協助您更正錯誤。在本逐步解說的這個部分中，您將撰寫一行程式碼，以說明編輯器中的錯誤修正功能。

若要修正 Visual Studio 中的簡單程式碼錯誤

在 [設計 ] 檢視中，按兩下空白頁面，為頁面的 Load 事件建立處理常式。
您只使用事件處理常式做為撰寫某些程式碼的位置。
在處理常式內，輸入包含錯誤的下列程式程式碼，然後按 ENTER：
```
string myStr = "Loading..."
```
當您按下 ENTER鍵時，程式碼編輯器會將綠色和紅色底線放在 (通常稱為「波浪線」行) 在發生問題的程式碼區域中。綠色底線表示警告。紅色底線表示您必須修正的錯誤。

將滑鼠指標停留在上方 myStr ，以查看可告訴您警告的工具提示。此外，請將滑鼠指標停留在紅色底線上方，以查看錯誤訊息。

下圖顯示具有底線的程式碼。

將分號 ; 新增至行尾，必須修正此錯誤。警告只會通知您尚未使用 myStr 變數。

注意

選取[工具-選項- >>字型和色彩]，即可在 Visual Studio 中檢視目前的程式碼格式設定。

重構和重新命名

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

程式碼編輯器包含可協助您執行各種重構工作的工具。在本逐步解說中，您將使用兩種重構技術：重新命名變數和擷取方法。其他重構選項包括封裝欄位、將區域變數升階為方法參數，以及管理方法參數。這些重構選項的可用性取決於程式碼中的位置。

重構程式碼

常見的重構案例是建立 (從另一個成員內部的程式碼擷取) 方法，例如方法。這會減少原始成員的大小，並使擷取的程式碼可重複使用。

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

在 C# 頁面中擷取方法

切換至 [設計 ] 檢視。
在 [ 工具箱] 的 [ 標準 ] 索引標籤中，將 [按鈕 ] 控制項拖曳至頁面。

按兩下 Button 控制項，為其 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 物件、使用迴圈以值載入它，然後使用另一個迴圈來顯示 ArrayList 物件的內容。

按 CTRL+F5 執行頁面，然後按一下按鈕以確定您看到下列輸出：
```
i = 0
i = 1
i = 2
i = 3
i = 4
```

返回程式碼編輯器，然後在事件處理常式中選取下列幾行。

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

以滑鼠右鍵按一下選取範圍，按一下 [ 重構]，然後選擇 [ 擷取方法]。

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

在 [ 新增方法名稱 ] 方塊中，輸入 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);
}

按 CTRL+F5 再次執行頁面，然後按一下按鈕。

頁面的運作方式與之前相同。方法 DisplayArray 現在可以從頁面類別中的任何位置呼叫。

重新命名變數

當您使用變數和物件時，您可能會想要在程式碼中參考變數之後重新命名它們。不過，如果您錯過重新命名其中一個參考，重新命名變數和物件可能會導致程式碼中斷。因此，您可以使用重構來執行重新命名。

若要使用重構來重新命名變數

在 Click 事件處理常式中，找出下列這一行：

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

以滑鼠右鍵按一下變數名稱 alist ，選擇 [重構]，然後選擇 [ 重新命名]。

[ 重新命名 ] 對話方塊隨即出現。
在 [ 新增名稱 ] 方塊中，輸入 ArrayList1 ，並確定已選取 [預覽參考變更 ] 核取方塊。然後按一下 [確定] 。

[ 預覽變更 ] 對話方塊隨即出現，並顯示樹狀結構，其中包含您要重新命名之變數的所有參考。
按一下 [套用 ] 以關閉 [預覽變更 ] 對話方塊。

特別參考您所選取實例的變數會重新命名。不過請注意，下一行中的變數 alist 不會重新命名。
```
private int DisplayArray(System.Collections.ArrayList alist, 
    int i)
```
此行中的變數 alist 不會重新命名，因為它不代表與您重新命名之變數 alist 相同的值。宣告中的 DisplayArray 變數 alist 是該方法的區域變數。這說明使用重構來重新命名變數與在編輯器中執行尋找和取代動作不同;重構會重新命名變數，並瞭解其正在使用之變數的語意。

插入程式碼片段

由於有許多程式碼撰寫工作Web Form開發人員經常需要執行，因此程式碼編輯器會提供程式碼片段程式庫或預先撰寫程式碼區塊。您可以將這些程式碼片段插入頁面。

您在 Visual Studio 中使用的每個語言，在插入程式碼片段的方式上稍有差異。如需插入程式碼片段的相關資訊，請參閱 Visual Basic IntelliSense 程式碼片段。如需在 Visual C# 中插入程式碼片段的相關資訊，請參閱 Visual C# 程式碼片段。

後續步驟

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

深入瞭解 IntelliSense 的功能，例如修改 IntelliSense 選項、管理程式碼片段，以及線上搜尋程式碼片段。如需詳細資訊，請參閱使用 IntelliSense。
瞭解如何建立您自己的程式碼片段。如需詳細資訊，請參閱建立和使用 IntelliSense 程式碼片段
深入瞭解 IntelliSense 程式碼片段的 Visual Basic 特定功能，例如自訂程式碼片段和疑難排解。如需詳細資訊，請參閱 Visual Basic IntelliSense 程式碼片段
深入瞭解 IntelliSense 的 C#特定功能，例如重構和程式碼片段。如需詳細資訊，請參閱 Visual C# IntelliSense。

共用方式為