@84zume

Pro ASP.NET MVC 3 Framework CHAPTER 15

Views

目次

1. ViewEngineのこと

1. ViewEngineとは

2. ViewEngineのカスタマイズ

2. Razorとともに

1. Razorの基本的な文法

2. Razorで動的なコンテンツを扱う

3. Built-in HTML Helper

4. HTML Helperを作る

5. Partial Views

6. Child Actions

2

ViewEngineのこと

3

ViewEngineとは

＝ViewResultsをもとにView(主にHTML)を作る仕組み

• ASP.NET MVC3の標準のViewEngine

Razor エンジン

ASPX エンジン

• 3rd Party製のViewEngine

NVelocity

NHaml

Spark

4

ViewEngineのカスタマイズ

カスタマイズするメリットがあまりない？

• IViewを実装する

Renderメソッド…クライアントへのレスポンスを生成する。

• IViewEngineを実装する

FindViewメソッド…ViewEngineResultを生成する。

• 登録する

Global.asaxのApplication_Startで。

5

Razorとともに

6

Razorの基本的な文法

• 基本はHTML ← 意外に大事

• @を使う

7

@model SportsStore.WebUI.Models.ProductsListViewModel @using SportsStore.WebUI.HtmlHelpers @{ ViewBag.Title = "Products"; } <h2>Proucts List</h2> @foreach (var p in Model.Products) { <div class="item"> <h3>@p.Name</h3> @p.Description @if (p.Price > 100) { <h4>p.Price.ToString("c")</h4> } </div> } <div class="pager"> @Html.PageLinks(Model.PagingInfo, x => Url.Action("List", new { page = x })) </div>

Razorで動的なコンテンツを扱う

• Inline code

if とかforeach とか使う。説明は割愛。

• HTML helper Methods

簡単なHTMLを出力してくれるヘルパー。

MVC Frameworkにあるライブラリーを使う。

自分で作る。

• Partial views

共有可能なビュー。

• Child actions

Viewから呼ぶ専用のアクション。

8

「Built-in HTML Helper」 と 「HTML Helperを作る」

9

Built-in HTML Helper の分類その１

• 入力用ですか？出力用ですか？

• 入力用の例：@Html.TextBox()

• 出力用の例：@Html.ValidationSummary()

• 強い型付けですか？弱い型付けですか？

• 強い型付け：@Html.TextBoxFor(x=>x.Name)

• 弱い型付け：@Html.TextBox(“messsage”, “Hello, world”)

10

Built-in HTML Helper の分類その２

11

<h2>ASP.NET Web Helper library</h2> <h5>Bing Seach</h5> @Bing.SearchBox() <h5>Facebook Like Button</h5> @Facebook.LikeButton() <h5>Twitter Stream</h5> @Twitter.Search("84zume")

• MVCのヘルパー？それ以外のヘルパー？

• それ以外 ≒ ASP.NET Web Helpers Library (Microsoft.Web.Helpers)

PM> Install-Package microsoft-web-helpers

HTML Helperを作る

• HtmlHelperの拡張メソッドとして作る

• TagBuilderを用いてHTMLを生成する

12

「Partial Views」 と 「Child Actions」

13

Partial Views

＝Viewの一部分を再利用したいときに利用する

• 通常の利用方法

• @Html.Partial(“Partial_View_Name”)

• 引数を取る場合

• @Html.Partial(“P_V_N”, new []{“Apple”, “Orange”})

14

Child Actions

＝Viewから呼ぶ専用のアクション。共通するロジックを使いまわすために利用する。

15

View in Home/Index.cshtml

@Html.Action(“Time”, “Common”, new {time = DateTime.Now}) Action in CommonController#Time

[ChildActionOnly] public ActionResult Time(DateTime time){ return PartialView(time); }

Partial View in Shared/Time.cshtml

@model DateTime <p>The time is: @Model.ToShortTimeString()</p>

おわりに

16

まとめ

1. HTML（＋CSS）と親しくなるべし、そのあとRazor

2. Helperのバリエーションをおさえるべし

3. Viewの再利用の方法を把握すべし

17

最近、気になったこと

• S#arp Architecure

• ASP.NET MVC + Nhibernateをベースにしたアーキテクチャ例？

• http://www.infoq.com/jp/news/2011/12/Sharp-Lite

• http://www.sharparchitecture.net/

• MVC Contrib

• MVCからはみ出た機能はここにある

• http://mvccontrib.codeplex.com/

• MEF2

• MVCをサポート（？）する

• http://mef.codeplex.com/

18

参考文献

• CodePlex

「ASP.NET MVC 3 RTM」

http://aspnet.codeplex.com/releases

• ASP.NET デベロッパーセンター

「Razor 構文と ASP.NET Web ページ」

http://msdn.microsoft.com/ja-jp/asp.net/gg193039

19