pro aspnetmvc3framework chap15
TRANSCRIPT
![Page 1: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/1.jpg)
@84zume
Pro ASP.NET MVC 3 Framework CHAPTER 15
Views
![Page 2: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/2.jpg)
目次
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
![Page 3: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/3.jpg)
ViewEngineのこと
3
![Page 4: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/4.jpg)
ViewEngineとは
=ViewResultsをもとにView(主にHTML)を作る仕組み
• ASP.NET MVC3の標準のViewEngine
Razor エンジン
ASPX エンジン
• 3rd Party製のViewEngine
NVelocity
NHaml
Spark
4
![Page 5: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/5.jpg)
ViewEngineのカスタマイズ
カスタマイズするメリットがあまりない?
• IViewを実装する
Renderメソッド…クライアントへのレスポンスを生成する。
• IViewEngineを実装する
FindViewメソッド…ViewEngineResultを生成する。
• 登録する
Global.asaxのApplication_Startで。
5
![Page 6: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/6.jpg)
Razorとともに
6
![Page 7: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/7.jpg)
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>
![Page 8: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/8.jpg)
Razorで動的なコンテンツを扱う
• Inline code
if とかforeach とか使う。説明は割愛。
• HTML helper Methods
簡単なHTMLを出力してくれるヘルパー。
MVC Frameworkにあるライブラリーを使う。
自分で作る。
• Partial views
共有可能なビュー。
• Child actions
Viewから呼ぶ専用のアクション。
8
![Page 9: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/9.jpg)
「Built-in HTML Helper」 と 「HTML Helperを作る」
9
![Page 10: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/10.jpg)
Built-in HTML Helper の分類その1
• 入力用ですか?出力用ですか?
• 入力用の例:@Html.TextBox()
• 出力用の例:@Html.ValidationSummary()
• 強い型付けですか?弱い型付けですか?
• 強い型付け:@Html.TextBoxFor(x=>x.Name)
• 弱い型付け:@Html.TextBox(“messsage”, “Hello, world”)
10
![Page 11: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/11.jpg)
Built-in HTML Helper の分類その2
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
![Page 12: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/12.jpg)
HTML Helperを作る
• HtmlHelperの拡張メソッドとして作る
• TagBuilderを用いてHTMLを生成する
12
![Page 13: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/13.jpg)
「Partial Views」 と 「Child Actions」
13
![Page 14: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/14.jpg)
Partial Views
=Viewの一部分を再利用したいときに利用する
• 通常の利用方法
• @Html.Partial(“Partial_View_Name”)
• 引数を取る場合
• @Html.Partial(“P_V_N”, new []{“Apple”, “Orange”})
14
![Page 15: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/15.jpg)
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>
![Page 16: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/16.jpg)
おわりに
16
![Page 17: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/17.jpg)
まとめ
1. HTML(+CSS)と親しくなるべし、そのあとRazor
2. Helperのバリエーションをおさえるべし
3. Viewの再利用の方法を把握すべし
17
![Page 18: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/18.jpg)
最近、気になったこと
• 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
![Page 19: Pro aspnetmvc3framework chap15](https://reader034.vdocuments.mx/reader034/viewer/2022042700/55660029d8b42a2a4d8b4dfc/html5/thumbnails/19.jpg)
参考文献
• 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