ASP.NET Web ページ (Razor) サイトでのヘルパーの作成と使用

[アーティクル]
07/13/2023

この記事では、ASP.NET Web ページ (Razor) Web サイトでヘルパーを作成する方法について説明します。 ヘルパーは、面倒なタスクや複雑なタスクを実行するためのコードとマークアップを含む再利用可能なコンポーネントです。

学習内容:

単純なヘルパーを作成して使用する方法。

記事で紹介した ASP.NET 機能は次のとおりです。

@helper構文。

チュートリアルで使用するソフトウェアのバージョン

ASP.NET Web ページ (Razor) 3

このチュートリアルは、ASP.NET Web ページ 2 でも動作します。

ヘルパーの概要

サイト内の異なるページで同じタスクを実行する必要がある場合は、ヘルパーを使用できます。 ASP.NET Web ページには多数のヘルパーが含まれており、さらに多くのヘルパーをダウンロードしてインストールできます。 (ASP.NET Web ページの組み込みヘルパーの一覧は、ASP.NET API クイックリファレンスに記載されています)。ニーズを満たす既存のヘルパーがない場合は、独自のヘルパーを作成できます。

ヘルパーを使用すると、複数のページで共通のコードブロックを使用できます。ページで、通常の段落とは別に設定されたメモ項目を作成することが多いとします。おそらく、ノートは、罫線付 <div> きのボックスとしてスタイル設定された要素として作成されます。メモを表示するたびにこの同じマークアップをページに追加するのではなく、マークアップをヘルパーとしてパッケージ化できます。その後、必要な場所に 1 行のコードを含むメモを挿入できます。

このようなヘルパーを使用すると、各ページのコードがよりシンプルになり、読みやすくなります。また、ノートの外観を変更する必要がある場合は、マークアップを 1 か所で変更できるため、サイトの保守も容易になります。

ヘルパーの作成

この手順では、説明したように、メモを作成するヘルパーを作成する方法を示します。これは簡単な例ですが、カスタムヘルパーには、必要なマークアップと ASP.NET コードを含めることができます。

Web サイトのルートフォルダーに、 App_Code という名前のフォルダーを作成します。これは、ヘルパーなどのコンポーネントのコードを配置できる ASP.NET の予約済みフォルダー名です。
App_Code フォルダーに新しい .cshtml ファイルを作成し、MyHelpers.cshtml という名前を付けます。
既存のコンテンツを次のように置き換えます。
```
@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はであることに注意してください。複数のカスタムヘルパーを 1 つのファイルに配置できます。
ファイルを保存して閉じます。

ページでのヘルパーの使用

ルートフォルダーに、 TestHelper.cshtml という名前の新しい空のファイルを作成します。
次のコードをファイルに追加します。
```
<!DOCTYPE html>
  <head>
    <title>Test Helpers Page</title>
  </head>
  <body>
    <p>This is some opening paragraph text.</p>

    
    @MyHelpers.MakeNote("My test note content.")

    <p>This is some following text.</p>
  </body>
</html>
```
作成したヘルパーを呼び出すには、を使用し、その後にヘルパーがあるファイル名、ドット、ヘルパー名を使用 @ します。 ( App_Code フォルダーに複数のフォルダーがある場合は、構文 @FolderName.FileName.HelperName を使用して、入れ子になったフォルダーレベル内でヘルパーを呼び出すことができます)。かっこ内に引用符で囲んで追加するテキストは、ヘルパーが Web ページのメモの一部として表示するテキストです。
ページを保存し、ブラウザーで実行します。ヘルパーは、2 つの段落の間でヘルパーを呼び出したノート項目を直接生成します。

その他のリソース

Razor ヘルパーとしての水平メニュー。 Mike Pope によるこのブログエントリでは、マークアップ、CSS、コードを使用してヘルパーとして水平メニューを作成する方法を示します。

WebMatrix と ASP.NET MVC3 の ASP.NET Web ページヘルパーでの HTML5 の活用。 Sam Abraham によるこのブログエントリでは、HTML5 Canvas 要素をレンダリングするヘルパーを示します。

The Difference Between @Helpers and @Functions in WebMatrix. Mike Brind によるこのブログエントリでは、 @helper 構文と構文、および @function それぞれを使用するタイミングについて説明します。

ASP.NET Web ページ (Razor) サイトでのヘルパーの作成と使用

チュートリアルで使用するソフトウェアのバージョン

ヘルパーの概要

ヘルパーの作成

ページでのヘルパーの使用

その他のリソース

フィードバック

フィードバック

その他のリソース