Razorメモ - はむ日記2

言語はC#

レイアウト

いままでのマスターページに替わって、Razorではレイアウトページという仕組みを使う。
共通のレイアウトページは_ViewStart.cshtmlで指定される。(デフォルトでは_Layout.cshtml)

<!-- _Layout.cshtmlサンプル -->

<!DOCTYPE html>
<html>
<head>
  <title>@ViewBag.Title</title>
  <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
  <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>

<body>
  <div id="header">
    @* requiredパラメーターをfalseにすることで、Viewページでの記述がオプション扱いになる。 *@ 
    @RenderSection("header", false)
  </div>
  <div id="body">
    @RenderBody()
  </div>
  <div id="footer">
    @RenderSection("footer", false)
  </div>
</body>
</html>

ビュー

@model List<RazorSample.ViewModels.PersonalViewModel>


@{
    //MVC3からはViewDataの代わりに、ViewBagを使用する。
    ViewBag.Title = "List";
    var qrUrl = ViewBag.QrUrl;
}

@* ヘッダー --------------------------------------------------- -------------------> *@
@section header{
    <h2>PersonalList</h2>
}


@* フッター------------------------------------------------------------------------> *@
@section footer{
    <p>現在日時: @DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss")</p>

    @* 出力する際にタグが必要ない場合は、textタグで囲む。 
    主に、Htmlヘルパーを呼び出す際に使用するのだと思われる。*@
    <text>
        @* http://blogs.msdn.com/b/chack/archive/2011/02/28/asp-net-mvc-3-webmatrix-razor-helper-nuget.aspx *@
        @QRCode.Render(@qrUrl)
    </text>
}


@* ボディ--------------------------------------------------------------------------> *@
<table border="1">
    <tr>
        <th>名前</th>
        <th>性別</th>
        <th>年齢</th>
        <th>住所</th>
        <th>メールアドレス</th>
        <th>ひとこと</th>
    </tr>

@{
    var sexCount = new int[2];
    sexCount.Initialize();
}

@for (var i = 0; i < Model.Count; i++)
{
    @* コードブロック直下であれば自由に変数を定義することができる。  *@
    var p = Model[i];
    var sex = @p.SexCode == 0 ? "男" : "女";
    
    <tr>
        <td>@p.Name</td>
        <td>@sex</td>
        <td>@p.Age</td>
        <td>@p.Address</td>
        <td>@p.Email</td>
        @if (String.IsNullOrEmpty(p.Comment))
        { 
            <td>特になし</td>
        }
        else
        { 
            <td>@p.Comment</td>
        }

        @* 処理を記述する場合、コードブロック直下で記述すること。そうしないと処理コード自体がhtml出力されてしまう。
            何かしらのタグ内で行う場合は新たにコードブロックで囲む必要がある。

            //性別毎人数カウント処理
            @{
                sexCount[p.SexCode]++;
            }
        *@
    </tr>
    
    @* カウントアップ処理 *@
    sexCount[p.SexCode]++;
}

</table>

@* "@(〜)"  *@
<pre>
@(
    "合計:" + Convert.ToInt32(sexCount[0] + sexCount[1]) + " （[内訳]男:" + sexCount[0] + "、女:" + sexCount[1] + ")"
)
</pre>

モデルとコントローラー

public class PersonalViewModel
{
  public string Name { get; set; }
  public string Address { get; set; }
  public int SexCode { get; set; }  //0:男、1:女
  public int Age { get; set; }
  public string Comment { get; set; }
  public string Email { get; set; }
}

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        var model = new List<PersonalViewModel>();
        model.Add(new PersonalViewModel
        {
            Name = "山田太郎"
            ,
            Age = 20
            ,
            SexCode = 0
            ,
            Address = "宮城県"
            ,
            Email = "yamada@yamada.com"
            ,
            Comment = "山田さんちの長男。要注意。"
        });
        model.Add(new PersonalViewModel
        {
            Name = "野田信子"
            ,
            Age = 21
            ,
            SexCode = 1
            ,
            Email = "nobu444@nodada.com"
            ,
            Address = "埼玉県"
        });
        model.Add(new PersonalViewModel
        {
            Name = "木場まき"
            ,
            Age = 23
            ,
            SexCode = 1
            ,
            Address = "山梨県"
            ,
            Email = "maki@key-ba.com"
            ,
            Comment = "客先の人"
        });

        ViewBag.QrUrl = "http://yahoo.co.jp/";

        return View(model);
    }
}

宣言的なHTMLヘルパー

部分ビューページのRazor対応版といったところ？
App_Codeフォルダ以下に配置すること。

<!-- HTMLヘルパーサンプル (PersonalGridRow.cshtml) -->

@helper Render(RazorSample.ViewModels.PersonalViewModel m)
{
    var sex = @m.SexCode == 0 ? "男" : "女";
    
    <tr>
        <td>@m.Name</td>
        <td>@sex</td>
        <td>@m.Age</td>
        <td>@m.Address</td>
        <td>@m.Email</td>
        @if (String.IsNullOrEmpty(@m.Comment))
        { 
            <td>特になし</td>
        }
        else
        { 
            <td>@m.Comment</td>
        }
    </tr>
}

Htmlヘルパーの呼び出し

先ほどのヘルパー(PersonalGridRow)を呼び出してみた。

<!-- ビューのうち、変更部分のみ抜粋 -->
@for (var i = 0; i < Model.Count; i++)
{
    @PersonalGridRow.Render(Model[i])
    sexCount[Model[i].SexCode]++;
}

参照元

“Razor”の紹介 − ASP.NET向け新ビュー・エンジン − ＠IT