共用方式為

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

  • 發行項

作者 ：Erik Reitan

針對新的 Web 應用程式開發，我們建議使用 Razor Pages。 如需詳細資訊，請參閱 開始使用 Razor 頁面。

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

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

  • 建立檔案系統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 Designer] 節點，然後變更 [開始頁面輸入] 選項。
  • ToolBox。 提供您可以拖曳到頁面的控制項和 HTML 元素。 工具箱 元素會依一般函式分組。
  • S erver Explorer。 顯示資料庫連結。 如果看不到 [伺服器總管]，請按一下 [檢視] 功能表上的 [伺服器總管]。

建立新的 ASP.NET Web Forms頁面

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

將頁面新增至 Web 應用程式

  1. 關閉 Default.aspx 頁面。 若要這樣做，請按一下顯示檔案名的索引標籤，然後按一下關閉選項。
  2. 在方案總管中，以滑鼠右鍵按一下本教學課程中的 [Web 應用程式名稱] (，應用程式名稱為BasicWebSite) ，然後按一下 [新增專案 >]。
    [ 加入新項目 ] 對話方塊隨即出現。
  3. 選取左側的[Visual C# - >Web範本] 群組。 然後，從中間清單中選取 [Web Form ]，並將它命名為 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 開發人員] 的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 >標籤後面，然後按空格鍵。

    下拉式清單隨即出現，其中會顯示您可以為卷 標 控制項設定的可用屬性清單。 此功能稱為 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 會顯示卷標控制項的可用成員清單，如下圖所示。 成員通常是屬性、方法或事件。

    程式碼檢視中的 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 然後重新建立頁面、在此案例中執行程式碼 (、 按鈕 控制項的 Click 事件處理常式) 執行，然後將新頁面傳送至瀏覽器。 如果您watch瀏覽器中的狀態列，您可以看到每次按一下按鈕時，頁面都會往返網頁伺服器。

  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頁面，您可能想要探索其他功能。 例如，您可能想要執行下列動作：