自作HTMLヘルパーを作る

HTMLヘルパーとは？

Html.ActionLink => Aタグ生成

Html.BeginForm() => Formタグ生成

Html.TextBox() => INPUTタグ（Text）生成

など、指定した引数を元に、自動的にHTMLを生成してくれるものです。

モデルと連携をするものあり重宝します。

インテリセンスが有効なのもありがたいです。

自分専用のHTMLヘルパーを作ろう

標準のものだけでなく、よく使うHTMLをヘルパー化してしまおう。

ということで、ここでは例としてアプリで使うアイコンを表示するための自分専用ヘルパーを作ってみます。

1. アイコンファイルを準備
2. アイコンリストを作成
3. ヘルパーを作成
4. ビューから参照

１．アイコンファイルを準備

/Content/Icons/内に48×48のアイコンファイル(pngファイル)をいろいろ用意します。

２．アイコンリストを作成

public enum Icons

{

    left,

    right,

    up,

    down,

    home,

    add,

    remove,

    search,

    ････

}

３．ヘルパーを作成

namespace MvcApplication1.Helpers

{

    public static class IconExtensions

    {

        public static string DrawIcon(this HtmlHelper helper, Icons icon)

        {

            return string.Format("<img src=\"{0}.png\" width=\"48\" height=\"48\" alt=\"{0}\" />", icon.ToString());

        }

    }

}

４．ビューから参照

Razor構文で。

@using MvcApplication1.Helpers 

<div id="container">

<a href="/">@Html.DrawIcon(Icons.home)</a>

<a href="/search/">@Html.DrawIcon(Icons.search)</a>

</div>

見たいな感じでどうぞ。

完成

あんまり面白みは無いですけれど基本はこんな感じです。いちいちHTML書かなくても、自分がよく使うものをまとめておけるので、使い道はいろいろありますよね。

 あとヘルパーで作るHTMLがごちゃごちゃするので、きれいにしたい場合はTagBuilderクラスを使うと幸せになります。

この本持ってます！

プログラミングMicrosoft ASP.NET MVC ASP.NET MVC 3対応版 (マイクロソフト公式解説書)

ASP.NET 2.0の頃の本しか持ってないので新しいのほしいです^^

プログラミングMicrosoft ASP.NET 4 (マイクロソフト公式解説書)