在 Visual Studio 2013 中編輯 ASP.NET 網頁表單程式碼

作者：埃里克·雷坦

在許多 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 時選擇了 網頁開發 相關的設定集合。欲了解更多資訊，請參閱「如何選擇網頁開發環境設定」。

建立網頁應用程式專案與頁面

在這部分的攻略中，你將建立一個網頁應用程式專案，並為其新增頁面。

建立網頁應用程式專案

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

[新增專案] 對話方塊隨即出現。
選擇左側的範本 ->Visual C# ->Web 範本群組。
請在中間欄位選擇 ASP.NET 網頁應用程式 範本。
將你的專案命名 為 BasicWebApp ，然後點擊確定按鈕。
接著，選擇 網頁表單 範本並點擊確定按鈕建立專案。

Visual Studio 建立一個基於 Web 表單範本的新專案，包含預建功能。

建立新的 ASP.NET 網頁表單頁面

當你使用 ASP.NET Web Application 專案範本建立新的 Web Forms 應用程式時，Visual Studio 會新增一個名為 Default.aspx 的 ASP.NET 頁面（網頁表單頁面），以及其他幾個檔案和資料夾。你可以將 Default.aspx 頁作為網頁應用程式的首頁。不過，在這個攻略中，你將建立並操作一個新頁面。

將網頁新增到應用程式

在解決方案總管中，右鍵點擊網頁應用程式名稱（本教學中應用程式名稱為 BasicWebSite），然後點選新增>項目。
[ 新增專案 ] 對話框隨即顯示。
在左側選擇 Visual C# ->Web 模板群組。接著，從中間列表中選擇 「網頁表單 」並命名 為 FirstWebPage.aspx。
點擊新增，將網頁表單頁面加入您的專案。
Visual Studio 建立新頁面並開啟。
接著，將這個新頁面設為預設啟動頁面。在 解決方案總管中，右鍵點擊名為 FirstWebPage.aspx 的新頁面，並選擇 「設定為開始頁面」。下次您執行此應用程式測試進度時，瀏覽器中會自動看到這個新頁面。

修正內嵌編碼錯誤

Visual Studio 的程式碼編輯器能幫助你在寫程式碼時避免錯誤，如果你犯錯了，程式碼編輯器也會協助你修正錯誤。在這部分的攻略中，你會寫一行程式碼，說明編輯器中的錯誤更正功能。

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

在設計檢視中，雙擊空白頁面以建立該頁面的載入事件處理器。
你只是把事件處理程式當作寫程式碼的地方。
在處理程序中，輸入以下包含錯誤的行，然後按下 ENTER：
```
string myStr = "Loading..."
```
當你按下 Enter 鍵時，程式碼編輯器會在程式碼中有問題的區域下方標註綠色和紅色底線（通常稱為「波浪線」）。綠色底線表示警告。紅色底線表示必須修正的錯誤。

將滑鼠指標移到 myStr 上面，可以看到提示，裡面會告訴你警告的資訊。另外，將滑鼠指標放在紅色底線上方，可以看到錯誤訊息。

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

必須在行尾加分號 ; 來修正錯誤。警告只是通知你還沒用過變 myStr 數。

備註

你可以在 Visual Studio 中選擇工具 ->選項 ->字型與顏色，查看目前的程式碼格式設定。

重構與更名

重構是一種軟體方法論，透過重組程式碼，使其更易理解與維護，同時保留其功能性。一個簡單的例子是，你在事件處理器中寫程式碼，從資料庫取得資料。當你開發頁面時，你會發現需要從多個不同的處理者那裡存取資料。因此，你必須在頁面中建立一個存取資料的方法，並在事件處理常式中插入對該方法的呼叫來重構程式碼。

程式碼編輯器包含協助你執行各種重構任務的工具。在這個教學中，你會使用兩種重構技巧：重新命名變數和提取方法。其他重構選項包括封裝欄位、將局部變數升調為方法參數，以及管理方法參數。這些重構選項的可用性取決於程式碼中的位置。

重構程式碼

常見的重構情境是從其他成員（如方法）中的程式碼中建立（提取）方法。這會縮小原始成員的大小，並使擷取的程式碼可重複使用。

在這部分的攻略中，你會寫一些簡單的程式碼，然後從中提取一個方法。 C# 支援重構，因此你會建立一個使用 C# 作為程式語言的頁面。

在 C# 頁面中擷取方法

切換到設計檢視。
在 工具箱中，從標準標籤中拖曳按鈕控制項到頁面上。

請雙擊按鈕控制項來產生其 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此方法現在可以從頁面類別的任意位置呼叫。

變數重命名

當你處理變數和物件時，在程式碼中已經引用過後，你可能會想重新命名它們。不過，重新命名變數和物件時，如果漏了重命名其中一個參考，可能會導致程式碼損壞。因此，你可以使用重構來執行重新命名。

使用重構來重新命名變數

在點擊事件處理程序中，找到以下一行：

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

右鍵點選變數名稱 alist，選擇重構，然後選擇 重命名。

「 重新命名 」對話框會出現。
在 新名稱 框中輸入 ArrayList1 ，並確認已勾選預覽 參考變更 的勾選框。然後按一下 [確定] 。

預覽 變更對話框 會出現，並顯示一個包含你重新命名變數所有參考的樹狀結構。
點擊套用以關閉 預覽變更 對話框。

這些專門指向你所選實例的變數會被重新命名。但請注意，以下行中的變數 alist 並未被重新命名。
```
private int DisplayArray(System.Collections.ArrayList alist, 
    int i)
```
這行中的變數 alist 沒有被重新命名，因為它代表的值和你重新命名的變數 alist 不同。宣告中的alist變數DisplayArray是該方法的區域變數。這說明了使用重構來重新命名變數，與在編輯器中執行尋找並替換操作是不同的;重構是根據所處理變數的語意來重新命名變數。

插入摘要

由於網頁表單開發者經常需要執行許多程式設計任務，程式碼編輯器提供一個包含片段或預寫程式碼區塊的函式庫。你可以將這些片段插入你的頁面。

你在 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。

意見反應

此頁面對您有幫助嗎？

Last updated on 2026-03-27