1. Pro ASP.NET MVC 3 Framework
CHAPTER 15
Views
@84zume

2. 2
目次
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

3. 3
ViewEngineのこと

4. 4
ViewEngineとは
＝ViewResultsをもとにView(主にHTML)を作る仕組み
• ASP.NET MVC3の標準のViewEngine
 Razor エンジン
 ASPX エンジン
• 3rd Party製のViewEngine
 NVelocity
 NHaml
 Spark

5. 5
ViewEngineのカスタマイズ
カスタマイズするメリットがあまりない？
• IViewを実装する
 Renderメソッド…クライアントへのレスポンスを生成する。
• IViewEngineを実装する
 FindViewメソッド…ViewEngineResultを生成する。
• 登録する
 Global.asaxのApplication_Startで。

6. 6
Razorとともに

7. 7
Razorの基本的な文法
• 基本はHTML ← 意外に大事
• @を使う
@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>

8. 8
Razorで動的なコンテンツを扱う
• Inline code
if とかforeach とか使う。説明は割愛。
• HTML helper Methods
 簡単なHTMLを出力してくれるヘルパー。
 MVC Frameworkにあるライブラリーを使う。
 自分で作る。
• Partial views
共有可能なビュー。
• Child actions
Viewから呼ぶ専用のアクション。

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

10. 10
Built-in HTML Helper の分類その１
• 入力用ですか？出力用ですか？
• 入力用の例：@Html.TextBox()
• 出力用の例：@Html.ValidationSummary()
• 強い型付けですか？弱い型付けですか？
• 強い型付け：@Html.TextBoxFor(x=>x.Name)
• 弱い型付け：@Html.TextBox(“messsage”, “Hello, world”)

11. 11
Built-in HTML Helper の分類その２
• MVCのヘルパー？それ以外のヘルパー？
• それ以外 ≒ ASP.NET Web Helpers Library (Microsoft.Web.Helpers)
PM> Install-Package microsoft-web-helpers
<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")

12. 12
HTML Helperを作る
• HtmlHelperの拡張メソッドとして作る
• TagBuilderを用いてHTMLを生成する

13. 13
「Partial Views」 と 「Child Actions」

14. 14
Partial Views
＝Viewの一部分を再利用したいときに利用する
• 通常の利用方法
• @Html.Partial(“Partial_View_Name”)
• 引数を取る場合
• @Html.Partial(“P_V_N”, new []{“Apple”, “Orange”})

15. 15
Child Actions
＝Viewから呼ぶ専用のアクション。共通するロジックを使
いまわすために利用する。
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. 16
おわりに

17. 17
まとめ
1. HTML（＋CSS）と親しくなるべし、そのあとRazor
2. Helperのバリエーションをおさえるべし
3. Viewの再利用の方法を把握すべし

18. 18
最近、気になったこと
• 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/

19. 19
参考文献
• 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