ASP.NET MVC での Gravatar のイメージを利用する方法のメモ

ASP.NET MVC で Gravatar のイメージを利用する方法の備忘録です。

Gravatar の素の使い方は Gravatar の Image Requests のページにありますが、HTML ヘルパーとして使えるものがあるので、そちらを使います。

GitHub にある AndrewFreemantle さんの Gravatar-HtmlHelper を利用します。

これは、ASP.NET MVC の HTML ヘルパーとして作成されているので、ビューでヘルパーを利用するだけで Gravatar のイメージがブラウザ上に表示されるようになります。

このヘルパーは、ソースコードを組み込むものなので、まずは git clone で GitHub から git リポジトリを取得するか、zip ファイルをダウンロードするか、いづれかの方法でソースコードを取得しておきます。

ここに書く利用例では、

  • User モデルを作成し、利用者 ID、利用者名、メールアドレスを持つようにする
  • Index ページで利用者の一覧を表示し、表示する利用者情報の最初に Gravatar のイメージが表示されるようにする

ことを行っています。

ASP.NET MVC なプロジェクトを作成します(プロジェクト名は「GravatarSample01」としています)。

プロジェクトの Views フォルダに 「Helpers」フォルダを作成します。
作成した Helpers フォルダに取得した GravatarHtmlHelper.cs を設置します(namespace を「GravatarSample01.Views.Helpers」とする変更を加えます)。

Models フォルダに「User」クラスを作成します。

namespace GravatarSample01.Models
{
    public class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
    }
}

Controllers フォルダの HomeController クラスの Index アクションの右クリックから「ビューの追加」で Index ビューを再作成します(テンプレートで「List」を選択し、モデルクラスで「User」を指定)。
再作成されたビューを変更します。

@model IEnumerable<GravatarSample01.Models.User>
@using GravatarSample01.Views.Helpers

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th></th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.GravatarImage(item.Email, defaultImage: GravatarHtmlHelper.DefaultImage.MysteryMan)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Email)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>

using で GravatarImage の namespace を参照するようにしています。
GravatarImage の名前付き引数 defaultImage に GravatarHtmlHelper.DefaultImage.MysteryMan を指定しています。

最後に、HomeController の Index アクションを変更します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using GravatarSample01.Models;

namespace GravatarSample01.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var users = new List<User> {
                new User { Id = 0, Name = "ほげ", Email = "mak@makcraft.com" },
                new User { Id = 1, Name = "ふが", Email = "sample.example.com" }
            };
            return View(users);
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

HTML ヘルパーの利用例なので、単純に List のインスタンスを生成してビューに渡しています。

動かすと、次のようなページが表示されます。

Index 画面
Index 画面


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です