在 ASP.NET Web Pages (Razor) 網站中建立及使用協助程式

  • 發行項

作者：Tom FitzMacken

本文說明如何在 ASP.NET Web Pages (Razor) 網站中建立協助程式。 協助程式是可重複使用的元件，其中包含程式碼和標記，可執行可能很繁瑣或複雜的工作。

您將瞭解的內容：

  • 如何建立和使用簡單的協助程式。

以下是文章中引進的 ASP.NET 功能：

  • 語法 @helper 。

教學課程中使用的軟體版本

  • ASP.NET Web Pages (Razor) 3

本教學課程也適用于 ASP.NET Web Pages 2。

協助程式概觀

如果您需要在網站的不同頁面上執行相同的工作，您可以使用協助程式。 ASP.NET Web Pages包含許多協助程式，而且您可以下載並安裝更多協助程式。 (ASP.NET Web Pages中的內建協助程式清單列在ASP.NET API 快速參考中。) 如果沒有任何現有的協助程式符合您的需求，您可以建立自己的協助程式。

協助程式可讓您跨多個頁面使用一般程式碼區塊。 假設在您的頁面中，您經常想要建立一個與一般段落分開設定的記事專案。 可能是將附注建立為樣式為 <div> 框線方塊的專案。 您可以封裝標記做為協助程式，而不是在每次您想要顯示附注時將這個相同的標記新增至頁面。 接著，您可以在任何需要的地方插入附注與單行程式碼。

使用這類協助程式可讓每個頁面中的程式碼更簡單且更容易閱讀。 它也可讓您更輕鬆地維護您的網站，因為如果您需要變更筆記的外觀，您可以在一個地方變更標記。

建立協助程式

此程式說明如何建立建立附注的協助程式，如所述。 這是簡單的範例，但自訂協助程式可以包含您需要的任何標記和 ASP.NET 程式碼。

  1. 在網站的根資料夾中，建立名為 App_Code的資料夾。 這是 ASP.NET 中保留的資料夾名稱，您可以在其中為協助程式等元件放置程式碼。

  2. 在 App_Code 資料夾中，建立新的 .cshtml 檔案，並將它命名為 MyHelpers.cshtml。

  3. 以下列內容取代現有的內容：

    @helper MakeNote(string content) {
  <div class="note" 
       style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;">
    <p>
      <strong>Note</strong>&nbsp;&nbsp; @content
    </p>
  </div>
}

    此程式碼會 @helper 使用 語法來宣告名為 MakeNote 的新協助程式。 這個特定的協助程式可讓您傳遞名為 content 的參數，其中包含文字和標記的組合。 協助程式會使用 @content 變數，將字串插入記事本文。

    請注意，檔案名為 MyHelpers.cshtml，但協助程式的名稱為 MakeNote 。 您可以將多個自訂協助程式放入單一檔案中。

  4. 儲存並關閉檔案。

在頁面中使用協助程式

  1. 在根資料夾中，建立名為 TestHelper.cshtml的新空白檔案。

  2. 將下列程式碼新增至該檔案：

    <!DOCTYPE html>
  <head>
    <title>Test Helpers Page</title>
  </head>
  <body>
    <p>This is some opening paragraph text.</p>

    <!-- Insert the call to your note helper here. -->
    @MyHelpers.MakeNote("My test note content.")

    <p>This is some following text.</p>
  </body>
</html>

    若要呼叫您所建立的協助程式，請使用 @ ，後面接著協助程式所在的檔案名、點和協助程式名稱。 (如果您在 App_Code 資料夾中有多個資料夾，您可以使用 語法 @FolderName.FileName.HelperName 在任何巢狀資料夾層級內呼叫協助程式) 。 您在括弧內加上引號的文字是協助程式會在網頁中顯示為附注一部分的文字。

  3. 儲存頁面並在瀏覽器中執行。 協助程式會在您呼叫協助程式的位置產生記事專案：這兩個段落之間。

    顯示瀏覽器中頁面的螢幕擷取畫面，以及協助程式如何產生標記，以將方塊放在指定的文字周圍。

其他資源

水準功能表做為 Razor 協助程式。 Mike Pope 的這個部落格文章示範如何使用標記、CSS 和程式碼，建立水準功能表作為協助程式。

在 ASP.NET Web Pages Helpers for WebMatrix 和 ASP.NET MVC3 中運用 HTML5。 Sam Abraham 的這個部落格文章顯示轉譯 HTML5 Canvas 元素的協助程式。

The Difference Between @Helpers and @Functions in WebMatrix. Mike Brind 的這個部落格文章描述 @helper 語法和 @function 語法，以及何時使用每個專案。