使用 Visual Studio 2013 建立基本 ASP.NET 4.5 Web Form 頁面

作者：Erik Reitan

針對新的 Web 應用程式開發，我們建議 使用 Blazor。

本指南將介紹Microsoft Visual Studio 2013和Microsoft Visual Studio Express 2013 for Web中的 Web 開發環境。 本逐步解說會引導您建立簡單的 ASP.NET Web Form 頁面，並說明建立新頁面、新增控件和撰寫程式代碼的基本技術。

這個逐步解說中所述的工作包括：

  • 建立檔案系統的 Web Forms 應用程式專案。
  • 熟悉 Visual Studio。
  • 建立 ASP.NET 頁面。
  • 新增控制件。
  • 新增事件處理程式。
  • 從 Visual Studio 執行及測試頁面。

必要條件

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

建立 Web 應用程式項目和頁面

在本逐步解說的這個部分中，您將建立 Web 應用程式專案，並在其中新增頁面。 您也會新增 HTML 文字，並在瀏覽器中執行頁面。

建立 Web 應用程式專案

  1. 開啟 Microsoft Visual Studio。

  2. 在 [檔案] 功能表上，選取 [新增專案]。
    檔案功能表

    [新增專案] 對話方塊隨即出現。

  3. 選取左側的 [範本 -> Visual C# ->Web 範本] 群組。

  4. 選擇 中央數據行中的 ASP.NET Web 應用程式 範本。

  5. 將專案命名為 BasicWebApp，然後按兩下 [確定] 按鈕。
    新增專案對話方塊

  6. 接下來，選取 Web Form 範本，然後按兩下 [確定] 按鈕以建立專案。
    [新增 ASP.NET 專案] 對話方塊

    Visual Studio 會建立新的專案，其中包含以 Web Form 範本為基礎的預先建置功能。 它不僅提供您Home.aspx頁面、About.aspx頁面、Contact.aspx頁面，還包含註冊用戶並儲存其認證的成員資格功能，讓他們能夠登入您的網站。 建立新頁面時，根據預設，Visual Studio 會在 [來源] 檢視中顯示頁面，您可以在其中查看頁面的 HTML 元素。 下圖顯示如果您建立名為 BasicWebApp.aspx 的新網頁，則會在 [來源] 檢視中看到的內容。
    原始碼檢視

Visual Studio Web 開發環境的導覽

在您繼續修改頁面之前，最好先熟悉Visual Studio開發環境。 下圖顯示 Visual Studio 和 Visual Studio Express for Web 中可用的視窗和工具。

注意

此圖表顯示預設視窗和視窗位置。 [ 檢視 ] 功能表可讓您顯示其他視窗，以及重新排列和調整視窗大小，以符合您的喜好設定。 如果已經對視窗排列進行變更，則您所看到的內容與圖例不符。

Visual Studio 環境

Visual Studio 環境

熟悉網站設計師

檢查上述圖例，並將文字與下列清單相符，其中描述最常用的視窗和工具。 （並非所有您看到的視窗和工具都列在這裡，只有上圖中標示的視窗和工具。

  • 工具列。 提供格式化文字、尋找文字等的命令。 只有當您在 [設計] 檢視中工作時，才能使用某些工具列。
  • 方案總管 視窗。 顯示 Web 應用程式中的檔案和資料夾。
  • 文件視窗。 顯示您在索引標籤視窗中處理的檔案。 您可以按下索引標籤，在檔案之間切換。
  • [屬性] 視窗。 可讓您變更頁面、HTML 元素、控制件和其他物件的設定。
  • 檢視索引標籤。 我們向您呈現相同文件的不同視圖。 設計 檢視是接近 WYSIWYG 編輯介面。 來源 檢視是頁面的 HTML 編輯器。 分割 檢視會顯示檔的 [ 設計 ] 檢視和 [ 來源 ] 檢視。 在這份指南中稍後的部分，您將使用設計和來源檢視。 如果您想要在 [設計] 檢視中開啟網頁，請在 [工具] 功能表上按兩下 [選項]，選取 [HTML 設計工具] 節點，然後變更 [起始頁輸入] 選項。
  • ToolBox。 提供您可以拖曳到頁面的控件和 HTML 元素。 工具箱 元素會依一般函式分組。
  • S erver Explorer。 顯示資料庫連線。 如果看不到 [伺服器總管]，請單擊 [檢視] 功能表上的 [伺服器總管]。

建立新的 ASP.NET Web Form 頁面

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

將頁面新增至 Web 應用程式

  1. 關閉Default.aspx頁面。 若要這樣做，請按一下顯示檔名的標籤，然後按一下關閉選項。
  2. 在 方案總管 中，以滑鼠右鍵點選 Web 應用程式名稱（在本教學課程中，應用程式名稱為 BasicWebSite），然後按一下 [新增 - >新項目]。
    隨即顯示 [ 新增項目] 對話方塊。
  3. 選取左側的 Visual C# ->Web 樣本群組。 然後，從中間清單中選取 [Web 表單 ]，並將其命名 為FirstWebPage.aspx。
    加入新項目對話方塊
  4. 按兩下 [新增 ] 將網頁新增至您的專案。
    Visual Studio 會建立新的頁面，並開啟它。

將 HTML 新增至頁面

在本逐步解說的這個部分中，您會將一些靜態文字新增至頁面。

將文字新增至頁面

  1. 在文檔視窗底部，按兩下 [設計 ] 索引標籤以切換至 [設計 ] 檢視。

    設計檢視會以類似WYSIWYG的方式顯示目前的頁面。 目前，您的頁面上沒有任何文字或控件，因此頁面會是空白的狀態，唯有矩形區域的虛線框例外。 這個矩形代表 頁面上的 div 元素。

  2. 在虛線框出的矩形內按一下。

  3. 輸入 歡迎使用 Visual Web 開發人員 ，然後按 ENTER 兩次。

    下圖顯示您在設計檢視中輸入的文字。

    設計檢視中的歡迎文字

  4. 切換至 [ 來源 ] 檢視。

    您可以在 [來源] 檢視中看到您在 [設計] 檢視中輸入時所建立的 HTML。
    具有靜態文字的網頁

執行頁面

在繼續將控件新增至頁面之前，您可以先執行它。

啟動頁面

  1. 在 方案總管 中，以滑鼠右鍵按兩下FirstWebPage.aspx，然後選取 [設定為起始頁]。

  2. 按 CTRL+F5 以執行頁面。

    頁面會顯示在瀏覽器中。 雖然您建立的頁面擴展名為 .aspx，但它目前會像任何 HTML 頁面一樣執行。

    若要在瀏覽器中顯示頁面，您也可以以滑鼠右鍵按兩下 方案總管中的頁面，然後選取 [在瀏覽器中檢視]。

  3. 關閉瀏覽器以停止 Web 應用程式。

新增和程式設計控制件

您現在會將伺服器控制項新增至頁面。 伺服器控制項，例如按鈕、標籤、文字框和其他熟悉的控件，為您的 Web Form 頁面提供一般表單處理功能。 不過，您可以使用在伺服器上執行的程式代碼，而不是客戶端來撰寫控件的程式代碼。

您會將 Button 控件、TextBox 控制件和 Label 控件新增至頁面，並撰寫程式代碼來處理 Button 控制件的 Click 事件。

將控件新增至頁面

  1. 點擊 設計 頁籤以切換至 設計檢視。

  2. 將插入點放在 Welcome to Visual Web Developer 的結尾，然後按下 ENTER 鍵五次或更多次，以便在 div 元素框中創建一些空間。

  3. 在工具箱中，如果標準群組尚未展開，請展開。
    請注意，您可能需要展開 左側的 [工具箱 ] 視窗才能檢視它。

  4. 將 TextBox控制項拖曳到該頁面，並將它放在包含「Welcome to Visual Web Developer」的第一行文本的 div元素方塊中間。

  5. 將 Button 控制項拖放到頁面，並將它放在 TextBox 控制項右側。

  6. 將Label控件拖曳到頁面上，並將其置於Button控件下方的單獨一行上。

  7. 將插入點放在 TextBox 控制件上方，然後輸入 Enter your name： 。

    這個靜態 HTML 文字是 TextBox 控制件的標題。 您可以在相同的頁面上混合靜態 HTML 和伺服器控制件。 下圖顯示三個控件在設計檢視中的外觀。

    設計檢視中的三個控件

設定控件屬性

Visual Studio 提供各種方式來設定頁面上控件的屬性。 在本逐步解說的這個部分中，您會在 設計 檢視和 來源 檢視中設定屬性。

若要設定控件屬性

  1. 首先，從 [檢視] 功能表選擇 - [其他視窗] - [屬性視窗]顯示 [屬性] 視窗。 您也可以選取 F4 以顯示 [ 屬性 ] 視窗。

  2. 選取 [按鈕] 控件，然後在 [屬性] 視窗中，將 [文字] 的值設定為 [顯示名稱]。 您輸入的文字會出現在設計工具的按鈕上，如下圖所示。

    設定按鈕文字

  3. 切換至 [ 來源 ] 檢視。

    來源 檢視會顯示頁面的 HTML，包括 Visual Studio 為伺服器控制項建立的元素。 控件是使用類似 HTML 的語法來宣告，不同之處在於標記會使用前置詞 asp： 並包含屬性 runat=“server”。

    控件屬性會宣告為屬性。 例如，當您設定 Button 控件的 Text 屬性時，在步驟 1 中，實際上是在控件標記中設定 Text 屬性。

    注意

    所有控件都在窗體元素內，其中也有屬性 runat=“server”。 runat=“server” 屬性和控件標籤的 asp： 前置詞會標示控件，以便在頁面執行時，由伺服器上 ASP.NET 來處理這些控件。 非 <form runat="server"> 和 <script runat="server"> 元素中的程式代碼會未變更地傳送至瀏覽器，因此 ASP.NET 程式碼必須包含在開頭標記包含 runat="server" 屬性的元素內。

  4. 接下來，您會將其他屬性新增至 Label 控制件。 將插入點直接放在 asp：Label 標記的<> 後面，然後按 SPACEBAR。

    隨即會出現一個下拉式清單，顯示您可以為 標籤 設定的可用屬性清單。 這項功能稱為 IntelliSense，可協助您在來源檢視中使用伺服器控件、HTML 元素和其他頁面上項目的語法。 下圖顯示標籤控件的 IntelliSense 下拉式清單。

    IntelliSense 屬性

  5. 選取 [ForeColor ]，然後輸入等號。

    IntelliSense 會顯示色彩清單。

    注意

    您可以在檢視程序代碼時按 CTRL+J，隨時顯示 IntelliSense 下拉式清單。

  6. 選取標籤控制項的文字顏色。 請務必確保您選取的色彩足夠深，在白色背景上易於閱讀。

    ForeColor 屬性已完成，其中包含您選取的色彩，包括右引號。

程式設計按鈕控制件

在本逐步講解中，您將撰寫程式碼，以讀取使用者輸入到文字方塊中的名稱，然後在 [標籤] 控制件中顯示名稱。

新增預設按鈕事件處理程式

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

  2. 按兩下 [按鈕] 控制件。

    根據預設，Visual Studio 會切換到程式碼後置檔案，並為 Button 控件的預設事件 Click 事件建立基本架構的事件處理程式。 程序代碼後置檔案會將您的UI標記（例如HTML）與伺服器程式代碼區隔（例如 C#）。
    游標會移動到用於此事件處理器的新增程式碼。

    注意

    在設計檢視中雙擊控制項只是可以用來建立事件處理程式的多種方式之一。

  3. 在 Button1_Click 事件處理程式內，輸入 Label1 ，後面接著句號 （.. ）。

    當您在標籤的 ID（Label1）之後輸入句點時，Visual Studio 會顯示 Label 控制項的可用成員清單，如以下插圖所示。 成員通常是屬性、方法或事件。

    程式碼檢視中的 IntelliSense

  4. 完成按鈕的 Click 事件處理程式，使其讀取，如下列程式代碼範例所示。

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

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Textbox1.Text & ", welcome to Visual Studio!"
End Sub

  5. 切換回檢視 HTML 標記的來源檢視，方法是以滑鼠右鍵按兩下 方案總管 中的FirstWebPage.aspx，然後選取 [檢視標記]。

  6. 捲動至 <asp：Button> 元素。 請注意，<asp:Button> 元素現在具有 onclick="Button1_Click" 屬性。

    這個屬性會將按鈕的 Click 事件系結至您在上一個步驟中編碼的處理程式方法。

    事件處理程式方法可以有任何名稱;您看到的名稱是 Visual Studio 所建立的預設名稱。 重點是，HTML 中 OnClick 屬性所使用的名稱必須符合程式代碼後置中定義的方法名稱。

執行頁面

您現在可以在頁面上測試伺服器控制件。

啟動頁面

  1. 按 CTRL+F5 以在瀏覽器中執行頁面。 如果發生錯誤，請重新檢查上述步驟。

  2. 在文字框中輸入名稱，然後按下 [ 顯示名稱 ] 按鈕。

    您輸入的名稱會顯示在 [卷標 ] 控制項中。 請注意，當您按下按鈕時，頁面會張貼到網頁伺服器。 ASP.NET 然後重新建立頁面、執行程式代碼（在此案例中， Button 控件的 Click 事件處理程式會執行），然後將新頁面傳送至瀏覽器。 如果您在瀏覽器中監看狀態列，則每次按下按鈕時，可以看到頁面正在往返網頁伺服器。

  3. 在瀏覽器中，以滑鼠右鍵按下頁面並選取 [檢視來源]，以檢視您正在執行的頁面來源。

    在頁面原始程式碼中，您會看到不含任何伺服器程式代碼的 HTML。 具體而言，您在 Source 檢視中工作的 asp 元素並未顯示。 當頁面執行時，ASP.NET 處理伺服器控制項，並將 HTML 元素轉譯至執行代表控制項之函式的頁面。 例如， <asp：Button> 控件會轉譯為 HTML <輸入類型=“submit”> 元素。

  4. 關閉瀏覽器。

使用其他控制件

在本逐步解說的這個部分中，您將使用 行事歷 控件，一次顯示一個月的日期。 [ 行事曆 ] 控件比您一直在處理的按鈕、文本框和標籤更為複雜，並說明伺服器控件的一些進一步功能。

在本節中，您會將 System.Web.UI.WebControls.Calendar 控件新增至頁面並格式化它。

若要新增行事歷控件

  1. 在 Visual Studio 中，切換至 [設計 ] 檢視。

  2. 從 [工具箱] 的 [標準] 區段，將 [行事歷] 控件拖曳到頁面，並將它放在包含其他控件的 div 元素下方。

    行事曆的智慧標記面板隨即顯示。 面板會顯示命令，讓您輕鬆執行所選控件的最常見工作。 下圖顯示 [設計] 檢視中呈現的 [行事曆] 控件。

    設計檢視中的行事歷控件

  3. 在智慧標記面板中，選擇 [ 自動格式]。

    [ 自動格式] 對話框隨即顯示，可讓您選取行事曆的格式配置。 下圖顯示 [行事曆] 控制件的 [自動格式] 對話框。

    [自動格式化] 對話框 （行事曆控件）

  4. 從 [ 選取配置] 列表中，選取 [ 簡單 ]，然後按兩下 [ 確定]。

  5. 切換至 [ 來源 ] 檢視。

    您可以看到 <asp：Calendar> 元素。 這個元素比您稍早建立之簡單控件的元素長很多。 它也包含子元素，例如 <WeekEndDayStyle>，代表各種格式設定。 下圖顯示 [來源] 檢視中的 [行事曆] 控件。 （您在來源檢視中看到的確切標記可能與圖例稍有不同。）

    來源檢視中的行事歷控件

程序設計行事歷控件

在本節中，您將設定 行事歷 控件以顯示目前選取的日期。

若要為行事曆控制項進行程式設計

  1. 在 設計 檢視中，按兩下 行事曆 控件。

    系統會建立新的事件處理程式，並顯示在名為 FirstWebPage.aspx.cs的程式代碼後置檔案中。

  2. 使用下列程式代碼完成 SelectionChanged 事件處理程式。

    protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{    
    Label1.Text = Calendar1.SelectedDate.ToLongDateString();
}

    Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Calendar1.SelectedDate.ToLongDateString()
End Sub

    上述程式代碼會將標籤的文字設定為行事曆控件的選取日期。

執行頁面

您現在可以測試行事曆。

啟動頁面

  1. 按 CTRL+F5 以在瀏覽器中執行頁面。

  2. 按兩下行事曆中的日期。

    您按下的日期會顯示在 標籤 控制項中。

  3. 在瀏覽器中，檢視頁面的原始程式碼。

    請注意，行事曆控件已以表格形式呈現在頁面上，每一天都作為td元素。

  4. 關閉瀏覽器。

後續步驟

本逐步解說說明 Visual Studio 頁面設計工具的基本功能。 既然您已瞭解如何在 Visual Studio 中建立和編輯 Web Form 頁面，您可能想要探索其他功能。 例如，您可能想要執行下列動作：

  • Last updated on