逐步解說：使用 Visual Web Developer 中的程式碼分離建立基本 Web 網頁

  • 發行項

更新：2007 年 11 月

建立 ASP.NET Web 網頁並在其中撰寫程式碼時，您可以從兩個模型中選擇如何管理可見項目 (控制項、內容) 和程式設計程式碼。在單一檔案模型中，可見項目和程式碼一起保存在相同的檔案中。在稱為「程式碼分離」的替代模型中，可見項目在一個檔案中，而程式碼則在另一個稱為「程式碼後置」(Code-Behind) 檔案的檔案中。此逐步解說介紹使用程式碼分離的 Web 網頁。

單一檔案模型則會在逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中進行介紹。您現在閱讀的逐步解說則顯示如何建立與單一檔案逐步解說中之網頁具有相同功能的 Web 網頁，但重點在使用程式碼分離上。

選擇使用單一檔案網頁還是具有程式碼分離的網頁，主要取決於方便和個人的喜好。在 Microsoft Visual Web Developer 中使用這兩個模型是類似的，兩個模型在編輯器中都有大致相同的支援。兩者在網頁執行時都有相等的效能。具有程式碼分離的網頁可在程式設計人員為網頁建立程式碼時，讓 Web 設計工具在該網頁之配置上的運作更具實用性，因為這兩個網頁可分別進行編輯。

逐步解說將說明的工作包括：

  • 使用 Visual Web Developer 建立具有程式碼分離的 ASP.NET Web 網頁。

  • 加入控制項。

  • 加入事件處理常式。

  • 使用「ASP.NET 程式開發伺服器」執行網頁。

必要條件

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

  • Visual Web Developer 和 .NET Framework。

建立網站和 Web 網頁

在這部分的逐步解說中，將會建立一個網站，並在此網站中加入新頁面。您還將加入 HTML 文字並在您的 Web 瀏覽器中執行這個網頁。

如果您已在 Visual Web Developer 中建立了網站 (例如，藉由遵循逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟)，就可以使用該網站並跳至此逐步解說中稍後的「建立新網頁」。否則，請依照下列這些步驟建立新的網站和 Web 網頁。

若要建立檔案系統網站

  1. 開啟 Visual Web Developer。

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

    [新網站] 對話方塊隨即出現。

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

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

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

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

    注意事項：

    Visual Web Developer 目前不支援在 Visual J# 中建立程式碼後置的網頁。

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

  6. 按一下 [確定]。

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

建立新網頁

建立新網站時，Visual Web Developer 會加入名為 Default.aspx 的頁面。依照預設，Visual Web Developer 會建立具有程式碼分離的頁面。

若要將具有程式碼分離的網頁加入至網站

  1. 關閉 Default.aspx 網頁。若要執行這些作業，請以滑鼠右鍵按一下其中有檔案名稱的索引標籤，並選取 [關閉]。

  2. 在 [方案總管] 中，以滑鼠右鍵按一下網站 (例如，C:\BasicWebSite)，然後選擇 [加入新項目]。

  3. 在 [Visual Studio 安裝的範本] 下方，選擇 [Web Form]。

  4. 在 [名稱] 方塊中，輸入 WebPageSeparated。

  5. 從 [語言] 清單中，選擇您想要使用的程式設計語言 (Visual Basic 或 C#)。

  6. 確認 [將程式碼置於個別檔案中] 核取方塊為已選取。

    依照預設，此方塊是選取的。

  7. 按一下 [加入]。

    Visual Web Developer 會建立兩個檔案。第一個檔案 WebPageSeparated.aspx 包含網頁的文字和控制項，並在編輯器中開啟。第二個檔案 WebPageSeparated.aspx.vb 或 WebPageSeparated.aspx.cs (視您所選取的程式語言而定) 為程式碼檔案。您可以透過按一下 WebPageSeparated.aspx 檔案旁邊的加號 (+) 在 [方案總管] 中查看兩個檔案；該程式碼檔案已建立但未開啟。您將在稍後的此逐步解說中撰寫程式碼時，將其開啟。

將 HTML 加入至網頁

在這部分的逐步解說中，您要將一些靜態 HTML 文字加入至 WebPageSeparated.aspx 頁面。

若要將文字加入至網頁

  1. 按一下文件視窗底部的 [設計] 索引標籤切換至 [設計] 檢視。

    [設計] 檢視會顯示您要以類似於 WYSIWYG 之方式處理的網頁。此時，您的網頁上不會有任何文字或控制項，因此網頁為空白。

  2. 將插入點放在已位於頁面上的 div 項目中。

  3. 輸入文字歡迎使用利用程式碼分離的 Visual Web Developer。

  4. 切換至原始碼檢視。

    您可以查看透過在 [設計] 檢視中輸入而建立的 HTML。在這個階段，頁面看起來像一般的 HTML 頁面。唯一的差異在於該頁面頂部的 <%@ Page %> 指示詞中。

加入控制項以及以程式編寫控制項

在這部分的逐步解說中，您要將按鈕、文字方塊和標籤控制項加入至頁面，並撰寫程式碼以處理按鈕的 Click 事件。伺服器控制項 (包含按鈕、標籤、文字方塊和其他熟悉的控制項) 可為您的 ASP.NET Web 網頁提供典型的表單處理功能。不過，您可以使用在伺服器上 (而不是用戶端) 執行的程式碼撰寫控制項。

若要將控制項加入頁面中

  1. 按一下 [設計] 索引標籤切換至 [設計] 檢視。

  2. 將插入點放在之前加入的文字後方。

  3. 按 ENTER 數次留出一些空間。

  4. 從 [工具箱] 中的 [標準] 索引標籤中，將以下三個控制項拖曳至頁面：TextBox 控制項、Button 控制項和 Label 控制項。

  5. 將插入指標放在文字方塊的前面，然後輸入輸入名稱：。

    這個靜態 HTML 文字是 TextBox 控制項的標題。您可以混合同一網頁上的靜態 HTML 和伺服器控制項。

設定控制項屬性

Visual Web Developer 為您提供了數種設定網頁上之控制項屬性的方法。在這部分的逐步解說中，您將同時使用 [設計] 檢視和 [原始碼] 檢視中的屬性。

若要設定控制項屬性

  1. 選取 Button 控制項，並在 [屬性] 視窗中，將其 Text 屬性設定為 Display Name。

  2. 切換至原始碼檢視。

    [原始碼] 檢視會顯示網頁的 HTML，包括 Visual Web Developer 已為伺服器控制項建立的項目。除了標記使用 asp: 前置詞並包含 屬性之外，會使用類似於 HTML 的語法宣告控制項。

    控制項屬性 (Property) 宣告為屬性 (Attribute)。例如，當您在步驟 1 中設定按鈕的 Text 屬性時，您實際上是在設定控制項標記中的 Text 屬性。

    請注意，所有控制項都在 form 項目內部，該項目也具有 屬性。控制項標記 (Tag) 的 屬性和 asp: 前置詞會標記 (Mark) 控制項，以便它們在頁面執行時由 ASP.NET 進行處理。

程式設計按鈕控制項

在此逐步解說中，您將撰寫程式碼，用於讀取使用者在文字方塊中輸入的名稱並將其顯示在 Label 控制項。

若要加入預設按鈕事件處理常式

  1. 切換至 [設計] 檢視

  2. 按兩下 Button 控制項。

    Visual Web Developer 會在編輯器內的不同視窗中開啟 WebPageSeparated.aspx.vb 或 WebPageSeparated.aspx.cs 檔案。該檔案包含按鈕的基本架構 Click 事件處理常式。

  3. 加入下列以反白顯示的程式碼完成 Click 事件處理常式。

    Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
        Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

    protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

    請注意，在您輸入時，IntelliSense 會協助您使用即時線上選項。這與您在單一檔案頁面中撰寫程式碼時的行為相同。

檢查頁面和程式碼檔案

您現在有兩個組成完整 WebPageSeparated 頁面的檔案：WebPageSeparated.aspx 和 WebPageSeparated.aspx.vb 或 WebPageSeparated.aspx.cs。在本章節的逐步解說中，您將檢查這些檔案如何結構化及它們如何互相關聯。

若要檢查頁面和程式碼檔案

  1. 按一下編輯器視窗頂部的 [WebPageSeparated.aspx] 索引標籤切換至頁面檔案。

  2. 切換至原始碼檢視。

    頁面的頂端為將此頁面繫結至程式碼檔案的 @ page 指示詞。指示詞類似於下列程式碼。

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="WebPageSeparated.aspx.vb" Inherits="WebPageSeparated" %>

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPageSeparated.aspx.cs" Inherits="WebPageSeparated" %>

    (該行不在編輯器中換行，並且語言屬性和副檔名會與您所選取的程式語言相符)。

    頁面執行時，ASP.NET 會動態建立表示頁面之類別的執行個體。Inherits 屬性會識別從中衍生 .aspx 頁面之程式碼後置檔案中定義的類別。依照預設，Visual Web Developer 會使用頁面名稱做為程式碼後置檔案中類別名稱的基準。

    CodeFile 屬性會識別此頁面的程式碼檔案。在簡單詞彙中，程式碼後置檔案包含頁面的事件處理程式碼。

  3. 按一下 [WebPageSeparated.aspx.vb] 或 [WebPageSeparated.aspx.cs] 索引標籤切換至程式碼檔案。

    程式碼檔案包含類似於類別定義的程式碼。不過，它並不是完整的類別定義，而是僅包含將組成頁面之部分完整類別的「部分類別」。更明確地說，在程式碼檔案中定義的部分類別包含您撰寫的事件處理常式和其他自訂程式碼。在執行階段，ASP.NET 會產生包含使用者程式碼的其他部分類別。然後，這個完整類別會充當用於呈現頁面的基底類別。如需詳細資訊，請參閱 ASP.NET 網頁類別概觀。

    注意事項：

    如果您熟悉 Microsoft Visual Studio .NET 2003 中使用的程式碼後置模型，就會注意到在這個新模型中，程式碼後置類別不包含該類別定義本身以外所任何其他產生的程式碼。例如，該類別不包含頁面上控制項之執行個體變數，所以，不再需要這種類型所產生的程式碼。

執行網頁

您現在可以測試網頁。

若要執行網頁

  1. 按 CTRL+F5 於瀏覽器中執行此頁。

    使用「ASP.NET 程式開發伺服器」執行此頁。

    注意事項：

    如果瀏覽器顯示 502 錯誤或表示無法顯示網頁的錯誤，您可能需要設定瀏覽器，使其在本機要求中略過 Proxy 伺服器。如需詳細資訊，請參閱 HOW TO：為本機 Web 要求略過 Proxy 伺服器。

  2. 在文字方塊中輸入名稱並按一下按鈕。

    您輸入的名稱將出現於 Label 控制項中。

  3. 在瀏覽器中，檢視您要執行之網頁的原始碼。

  4. 關閉瀏覽器。

    這個頁面的操作方式，如同它本身是一個單一檔案的頁面 (如果您按照逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟建立單一檔案頁面，便可以比較這兩個頁面，確認它們的執行方式是一樣的)。

後續步驟

此逐步解說已說明如何建立和編輯使用程式碼分離的 Web 網頁。從建立和執行頁面的檢視方塊而言，單一檔案頁面和具有程式碼分離的頁面之間沒有重大差異。

您可能要瀏覽其他功能。例如，您可能要：

請參閱

工作

逐步解說：在 Visual Web Developer 中建立基本 Web 網頁

概念

Visual Web Developer 中的網站類型