匯出 (0) 列印
全部展開

逐步解說:使用 HTML 程式碼片段

本逐步解說將說明如何使用 HTML 程式碼片段將標記加入網頁。 在 Visual Studio 2010 中使用 HTML 程式碼片段可以節省時間,並減少您在 [原始碼] 檢視中建立網頁標記的輸入量。

此主題包括下列章節:

若要完成這個逐步解說,您必須要有:

  • Visual Studio 2010 或 Visual Web Developer 2010 Express。

Visual Studio 包含 200 組以上的 C#、Visual Basic、XML 以及 HTML (包含 ASP.NET 標記) 程式碼片段。 程式碼片段由預先撰寫的程式碼或標記組成。 在某些情況下,片段會包含資訊 (如屬性名稱) 的預留位置,讓您可以在插入程式碼片段之後進行指定。 當您撰寫程式碼時,可以在程式碼編輯器中使用程式碼片段;當您建立網頁時,則可在 HTML 編輯器的 [來源] 檢視中使用程式碼片段。

在本逐步解說中,您會將 HTML 標記和 ASP.NET 標記加入網頁。 幾乎所有片段皆有捷徑可以插入程式碼。 例如,如果要插入 ASP.NET Button 控制項,可以輸入 <bu,然後按兩次 TAB 鍵。 如此之後,編輯器即會插入下列標記完成 Button 控制項的標記:

<asp:Button Text="text" runat="server" />

本逐步解說將告訴您插入程式碼片段最快的方法。 您也可以下列方式插入程式碼片段:

  • 將游標置於您要插入程式碼片段的位置,然後以滑鼠右鍵按一下網頁,再選取 [插入程式碼片段]。

  • 將游標置於您要插入程式碼片段的位置,然後按鍵盤快速鍵 CTRL+K、CTRL+X。 這會顯示清單讓您選取程式碼片段。

  • 選取您想要使用程式碼片段包圍的字詞,然後以滑鼠右鍵按一下該字詞,再按一下 [範圍陳述式]。

  • 從 [編輯] 功能表選取 [IntelliSense],然後選取 [插入程式碼片段]。

您可以使用 [程式碼片段管理員] 瀏覽現有的程式碼片段或加入您自己的程式碼片段。 下圖顯示 [程式碼片段管理員] 對話方塊。

[程式碼片段管理員] 對話方塊

[程式碼片段管理員] 對話方塊

下列程序將會列出 HTML 項目所能使用的程式碼片段。

使用程式碼片段管理員檢視可用的 HTML 程式碼片段

  1. 開啟 Visual Studio 2010 或 Visual Web Developer 2010 Express。

    注意事項注意事項

    您無須開啟專案,即可檢視 [程式碼片段管理員]。

  2. 選取 [工具] 功能表中的 [程式碼片段管理員]。

    [程式碼片段管理員] 對話方塊隨即出現。

  3. 選取 [語言] 清單中的 [HTML]。

    請注意,會有幾個資料夾包含 HTML 相關的程式碼片段,例如 ASP.NET、ASP.NET MVC 2 和 HTML。

  4. 展開 [位置] 底下的 [HTML] 資料夾。

  5. 選取 [div]。

    請注意,[替代捷徑] 清單包括其他 HTML 項目,如 ph1h2 等。 這表示使用捷徑 <div<p<h1 等,會叫用相同的程式碼片段,因為其對應 HTML 項目都使用類似的模式。 因此,這些項目在 [程式碼片段管理員] 中會歸類在同一個群組。

如果還沒有 Visual Studio 2010 或 Visual Web Developer 2010 Express 專案,請依照下列步驟建立專案,以供此逐步解說使用。在此逐步解說中,您將在 Default.aspx 網頁中使用程式碼片段,但如果是使用現有的專案,即可在任意網頁中執行這些程序。

建立新的 Web 應用程式專案

  1. 按一下 [檔案] 功能表上的 [新增專案]。

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

  2. 選取 [Visual Studio 安裝的範本] 區段中的 [網路] 節點,然後選取 [ASP.NET Web 應用程式]。

  3. 在 [名稱] 欄位輸入 SnippetTest

  4. 按一下 [確定]。

    Visual Studio 會建立新的 Web 應用程式專案。

一如顯示其他 HTML 項目,IntelliSense 亦會顯示可用的 HTML 程式碼片段。 程式碼片段提供數種功能,可以加快插入和編輯程式碼片段的過程。 此外,有部分程式碼片段亦包含預留位置,讓您無須將插入點移至屬性,即可輸入其值。

在這個程序中,您將插入 ASP.NET 項目。 這些項目包含在 [程式碼片段管理員] 的 HTML 區段中。

將 HTML 程式碼片段插入標記中

  1. 如果尚未開啟 Default.aspx 網頁,請加以開啟。

  2. 切換至 [原始碼] 檢視。

  3. 將游標置於結尾 </asp:Content> 標籤之前。

  4. 輸入 <bu

    這個下拉式清單會顯示項目名稱與程式碼片段。 HTML 項目是由顯示角括弧的黃色方塊圖示所表示,如下圖所示:

    HTML 項目圖示

    程式碼片段是由一張紙的圖示所表示,如下圖所示:

    程式碼片段圖示

    某些程式碼片段的名稱與其 HTML 項目的名稱相同,並同時具有程式碼片段圖示及標記圖示。

  5. 按兩次 TAB 鍵。

    Button 控制項的標記隨即出現,並反白顯示 Text 屬性。

    注意事項注意事項

    如果未將游標置於項目的開頭與結尾標籤之間,結果可能不同。

  6. 輸入 "Submit",然後按 ENTER 鍵完成這個項目。

    游標會移至項目的結尾;您無須使用 TAB 鍵完成這個項目。

  7. 按 ENTER 移至下一行。

  8. 將游標置於該行的開頭,並以滑鼠右鍵按一下網頁。

  9. 選取 [插入程式碼片段] 顯示可用的程式碼片段資料夾。

  10. 按兩下 [HTML] 程式碼片段資料夾。

  11. 輸入 br,然後按 TAB 鍵。

    分行符號的標記 (br) 項目隨即出現。

  12. 按 ENTER 移至下一行。

  13. 將游標置於該行的開頭,然後按鍵盤快速鍵 CTRL+K、CTRL+X。

    如此會顯示程式碼片段資料夾清單。

  14. 按兩下 [ASP.NET] 程式碼片段資料夾。

  15. 輸入 la,然後按 TAB 鍵。

    Label 控制項的標記隨即出現,並反白顯示 Text 屬性值。

  16. 輸入 "User Name",然後按 ENTER 鍵完成這個項目。

  17. 按 ENTER 移至下一行。

  18. 從 [編輯] 功能表選取 [IntelliSense],然後選取 [插入程式碼片段]。

    隨即顯示程式碼片段資料夾清單。

  19. 按兩下 [ASP.NET] 程式碼片段資料夾。

  20. 輸入 textb,然後按 TAB 鍵。

    隨即顯示 TextBox 控制項的標記。

  21. TextBox 控制項的 ID 設為 UserName,以使 TextBox 控制項標記符合下列範例:

    <asp:TextBox runat="server" ID="UserName" />

  22. 移至下一行。

  23. 輸入 <req,然後按兩次 TAB 鍵。

    RequiredFieldValidator 控制項的標記隨即出現,並反白顯示 ErrorMessage 屬性值。

  24. 輸入 "You must enter a user name",然後按 TAB 鍵。

    請注意,ControlToValildate 屬性值會予以反白顯示。

  25. 輸入 UserName 做為要驗證的控制項,然後按 ENTER 鍵完成這個項目。

最後一個步驟是測試網頁。 若要測試網頁,您可以使用 Visual Studio 程式開發伺服器,此伺服器會在本機執行且不需要 IIS。

若要執行網頁

  1. 按 CTRL+F5 執行網頁。

  2. 按 [送出]。

    RequiredFieldValidator 控制項會顯示錯誤訊息。

  3. 將文字輸入 TextBox 控制項中。

  4. 按 [送出]。

    這次 RequiredFieldValidator 控制項會接受輸入,並允許送出網頁。

  5. 關閉瀏覽器。

在本逐步解說中,您學會如何將 HTML 程式碼片段加入您的 Visual Studio 2010 專案。 若要進一步了解如何使用程式碼片段,請檢閱下列主題:

社群新增項目

顯示:
© 2014 Microsoft