共用方式為

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

  • 發行項

作者：Erik Reitan

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

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

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

  • 建立檔案系統 Web Form 應用程式專案。
  • 熟悉 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 設計工具

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

  • 工具列。 提供格式化文字、尋找文字等的命令。 只有當您在 [設計] 檢視中工作時，才能使用某些工具列。
  • 方案總管 視窗。 顯示 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. 將插入點放在歡迎使用 Visual Web 開發人員文字的結尾，然後按 ENTER 五次以上，在 div 元素方塊中建立一些空間。

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

  4. 將 TextBox 控制件拖曳到頁面，並將它放在第一行歡迎使用 Visual Web Developer 的 div 元素方塊中間。

  5. 將 Button 控件拖曳到頁面，並將它放到 TextBox 控制件的右邊。

  6. 將標籤控件拖曳到頁面，並將它放在按鈕控件下方的個別行上。

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

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

    設計檢視中的三個控件

設定控件屬性

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

若要設定控件屬性

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

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

    設定按鈕文字

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

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

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

    注意

    所有控件都在窗體元素內，其中也有屬性 runat=“server”。 runat=“server” 屬性和控件標籤的 asp： 前置詞會標示控件，以便在頁面執行時，由伺服器上 ASP.NET 來處理這些控件。 runat=“server” 和<腳本 runat=“server”>> 元素以外的<程式代碼會變更傳送至瀏覽器，這就是為什麼 ASP.NET 程式代碼必須位於開頭標記包含 runat=“server” 屬性的專案內的原因。

  4. 接下來，您會將其他屬性新增至 Label 控制件。 將插入點直接放在 asp：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 ，後面接著句號 （.. ）。

    當您在標籤標識碼 （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。 具體而言，您看不到<您在 [來源] 檢視中使用 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 頁面，您可能想要探索其他功能。 例如，您可能想要執行下列動作：