ASP.NET MVC と jQuery で実践する標準志向 Web 開発
7 likes18,079 views
2010.10.23 .NETラボ勉強会資料
![Controller と View の命名ルール
コンセプト「規約は設定に勝る」
• CoC (Convention over Configuration)
• 命名ルールによってモジュール間の結合を疎に
– コードや設定ファイルなどで関連付けない
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["Message"] = "MVC";
return View();
}
}
アクション名
Controller 名
Controller クラス
16](https://image.slidesharecdn.com/dotnetlabmvcshare-101023083615-phpapp02/85/ASP-NET-MVC-jQuery-Web-16-320.jpg)
![テスト駆動開発 (TDD)
Controller Action の単体テストが容易に
• 単体テストには IIS などの Web サーバー は不要
• Visual Studio 2008/2010 Professional 以上が必要
• NUnit, MBUnit, XUnit なども利用可能
• テスト プロジェクトも同時に作成可能
– テスト コードの雛型が自動生成
[TestMethod]
public void Index() {
HomeController ctrl = new HomeController();
ViewResult result = ctrl.Index() as ViewResult;
ViewDataDictionary viewData = result.ViewData;
Assert.AreEqual("Hello", viewData["Message"]);
}
17](https://image.slidesharecdn.com/dotnetlabmvcshare-101023083615-phpapp02/85/ASP-NET-MVC-jQuery-Web-17-320.jpg)
![Data Annotation バリデーション
Model 中心の入力検証
• 宣言型で コードすっきり バリデーション
Model
View
public class MyData {
[DisplayName("年齢")]
[Required(ErrorMessage = "{0}を入力してね")]
[Range(0, 100)]
public int Age { get; set; }
}
<%: Html.TextBoxFor(model => model.Age) %>
<%: Html.ValidationMessageFor(model => model.Age) %>
Controller
public ActionResult Create(MyData myData) {
if (ModelState.IsValid) { … }
}
属性ベースで
検証ルールを指定
エラー メッセージも
指定可能
モデル バインドと
検証実行 20](https://image.slidesharecdn.com/dotnetlabmvcshare-101023083615-phpapp02/85/ASP-NET-MVC-jQuery-Web-20-320.jpg)
![セキュリティ対策
ASP.NET MVC でも忘れずに
• Controller 実行時の認証の要求
– [Authorize] 属性 (ActionFilter)
• HTML Encoding 構文 (WebFormViewEngine)
– <%: SomeStringData %>
• Cross Site Scripting (XSS)
– Microsoft Web Protection Library
http://wpl.codeplex.com/
• Cross Site Request Forgeries (CSRF)
– Html.AntiForgeryToken()
– [ValidateAntiForgeryToken]
• JSON Hijacking
– JsonResult
– return Json(data, JsonRequestBehavior.DenyGet);
22](https://image.slidesharecdn.com/dotnetlabmvcshare-101023083615-phpapp02/85/ASP-NET-MVC-jQuery-Web-22-320.jpg)
![MVC 3 と Razor View エンジン
Small, Simple, Seamless
• 新しい "Razor 構文" View エンジンの追加
– Razor プロジェクト テンプレート
– [ View の追加 ] ダイアログ での View エンジン選択
• View 毎に使用するエンジンを選択可能
– Razor View 拡張子 (※変更の可能性あり)
• .cshtml (C#) / .vbhtml (VB)
28](https://image.slidesharecdn.com/dotnetlabmvcshare-101023083615-phpapp02/85/ASP-NET-MVC-jQuery-Web-28-320.jpg)
![スキャフォールディング機能 (1)
Controller の追加
38
Controllers 上で
右クリック
[コントローラー]
を選択
コントローラー名
追加、更新、削除などの
各アクション メソッドを
自動生成](https://image.slidesharecdn.com/dotnetlabmvcshare-101023083615-phpapp02/85/ASP-NET-MVC-jQuery-Web-38-320.jpg)
![スキャフォールディング機能 (2)
View の追加
39
ビュー名
モデル クラス
の指定
生成するビューの種類
を選択
アクション メソッド
の上で右クリック
[ビューの追加]
を選択](https://image.slidesharecdn.com/dotnetlabmvcshare-101023083615-phpapp02/85/ASP-NET-MVC-jQuery-Web-39-320.jpg)
![ビュー データ の利用方法
モデル データをビューに渡すには ...
• ViewDataDictionary クラス
• ViewDataDictionary<TModel> クラス
40
public ActionResult Index() {
ViewData["Name"] = "ジャイケル・マクソン";
ViewData["Song"] = "サラリー";
return View();
} <p><%: ViewData["Name"] %></p>
<p><%: ViewData["Song"] %></p>
public ActionResult Index() {
var artist = new MyArtist();
artist.Name = "ジャイケル・マクソン";
artist.Song = "サラリー";
return View(artist);
} <p><%: ViewData.Model.Name %></p>
<p><%: ViewData.Model.Song %></p>
TempDataDictionary
でリクエスト間での
データ永続化も可](https://image.slidesharecdn.com/dotnetlabmvcshare-101023083615-phpapp02/85/ASP-NET-MVC-jQuery-Web-40-320.jpg)
![Web.config - <system.web><caching><outputCacheSettings>
出力キャッシュの利用
冗長なサーバー処理の回避
• OutputCacheAttribute (ActionFilter) を利用
– Controller Action の無駄な実行を制御
– アプリケーション パフォーマンスの改善
• キャッシュ プロファイル を利用した設定
– アプリケーションを再ビルドすることなく設定変更可
[OutputCache(Duration=3600, VaryByParam="id")]
public ActionResult Details(int id) {
return View(myModel.GetData(id));
}
id 毎に
1 時間キャッシュ
[OutputCache(CacheProfile="MyCache")]
public ActionResult Index() {…}
<outputCacheProfiles>
<add name="MyCache" duration="3600" … />
</outputCacheProfiles> 41](https://image.slidesharecdn.com/dotnetlabmvcshare-101023083615-phpapp02/85/ASP-NET-MVC-jQuery-Web-41-320.jpg)
![ASP.NET MVC 2
その他の機能
• Areas (区分)
– 単一 MVC プロジェクト内で
アプリケーションを分割
– AreaRegistration.RegisterAllAreas()
• アクション メソッドのデフォルト値
• HTTP Method 属性
– HttpPost, HttpGet, HttpPut, HttpDelete
[HttpPost]
public ActionResult Create(MyData myData) { … }
ActionResult Index([DefaultValue(1)] int id)
ActionResult Index(int id = 1)
44](https://image.slidesharecdn.com/dotnetlabmvcshare-101023083615-phpapp02/85/ASP-NET-MVC-jQuery-Web-44-320.jpg)
![ActionFilter 拡張
アクション メソッド実行時の拡張ポイント
• アクション メソッドの実行前後に独自機能を追加
• ベース クラス
ActionFilterAttribute : FilterAttribute
• 既存の FilterAttribute 派生クラス
AuthorizeAttribute, ValidateAntiForgeryTokenAttribute,
ChildActionOnlyAttribute, RequireHttpsAttribute ...
使用例
public class LogAttribute : ActionFilterAttribute {
public override void OnActionExecuting(…) {…}
public override void OnResultExecuted(…) {…}
}
[Log]
public class HomeController : Controller {…}
Controller や Action に属性を指定
45](https://image.slidesharecdn.com/dotnetlabmvcshare-101023083615-phpapp02/85/ASP-NET-MVC-jQuery-Web-45-320.jpg)
![バインドなしの場合
バインドありの場合
ModelBinder とは ?
HTTP リクエスト データの自動バインド
• アクション メソッド 引数への自動バインド
• 既定のバインドは DefaultModelBinder
• 以下のオブジェクト型をバインド
– Model クラス
– プリミティブ型 (String, DateTime, ...)
– コレクション (ICollection<T>, IList<T>, ...)
ActionResult Create() {
string name = Request["Name"];
...
ActionResult Create(MyData myData) {
if (ModelState.IsValid) {
string name = myData.Name;
...
MyData へバインド
46](https://image.slidesharecdn.com/dotnetlabmvcshare-101023083615-phpapp02/85/ASP-NET-MVC-jQuery-Web-46-320.jpg)
![ModelBinder の登録
ModelBinder 拡張
カスタム機能の追加
• インターフェース : IModelBinder
• ベース クラス : DefaultModelBinder
主な拡張ポイント
object BindModel(…); // モデル バインド実行
object CreateModel(…); // モデル型オブジェクト生成
bool OnModelUpdating(…); // モデル更新開始
void OnModelUpdated(…); // モデル更新完了
bool OnPropertyValidating(…); // プロパティ検証開始
void OnPropertyValidated(…); // プロパティ検証完了
// Application_Start() で下記のいずれかで指定
ModelBinders.Binders.DefaultBinder = new MyBinder();
ModelBinders.Binders.Add(typeof(MyData),new MyBinder());
// または、引数の属性で指定
[ModelBinder(typeof(MyBinder))]
47](https://image.slidesharecdn.com/dotnetlabmvcshare-101023083615-phpapp02/85/ASP-NET-MVC-jQuery-Web-47-320.jpg)
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
- 1. マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト 井上 章（いのうえ あきら） http://blogs.msdn.com/chack/ http://twitter.com/chack411/ 1 ASP.NET MVC と jQuery で 実践する標準志向 Web 開発
- 2. アジェンダ ～ 本日の内容 ～ 2 • JavaScript と jQuery • ASP.NET MVC ～ 概要・入門編 ～ • ASP.NET MVC ～ 活用・応用編 ～ • 事例紹介 • まとめ
- 4. 注目される JavaScript Technology Radar January 2010 • Language 分野で 高い注目度 出典: Technology Radar January 2010 © ThoughtWorks https://www1.vtrenz.net/imarkownerfiles/ownerassets/ 1013/Technology%20Radar%20Jan%202010.pdf While JavaScript first appeared in 1995, it is only in the past couple of years that libraries such as Prototype and jQuery have helped the language become more accessible to a wider developer audience. As developers continue to embrace JavaScript for developing rich user web applications, we increasingly hold JavaScript in the same level of esteem as any other production language, ensuring that scripts are adequately tested, refactored and maintained.
- 5. JavaScript の実装 オーバー ビュー • JavaScript にはさまざまな実装が存在 – ECMAScript (ECMA-262 言語仕様) として標準化 • 最新は ECMAScript 5 ECMA-262 5th Edition, December 2009 – JScript • ECMA-262 3rd Edition のマイクロソフト実装
- 6. JavaScript と Visual Studio デバッグ対応 ブレーク ポイント ツールヒント による変数の ウォッチ スクリプト ドキュメント イミディエイト ウィンドウ ブレーク ポイント一覧 ウォッチ ウィンドウ
- 7. jQuery のサポート Visual Studio と jQuery • 高速・軽量な JavaScript ライブラリ – DOM 操作 / CSS 操作 / Ajax 処理を容易に – オープンソース • jQuery 公式サイト http://jquery.com/ – 最新バージョンは 1.4.3 • Visual Studio と jQuery – jQuery 1.4.1 が標準搭載 • Web フォーム や MVC プロジェクト で標準採用 • インテリセンスとコードスニペット にも対応 (詳細は Appendix を参照) $(function() { $('#button1').click(function() { $('#div1').fadeIn('slow'); }); });
- 8. 8
- 9. ASP.NET 4 構成 フレームワーク関係図 9 .NET Framework 4 ASP.NET 4 Web フォーム ASP.NET MVC 2 ASP.NET AJAX 動的データ
- 10. 注目される ASP.NET MVC Technology Radar January 2010 • 高い注目度 (Tool 分野) • 試用から採用へ 出典: Technology Radar January 2010 © ThoughtWorks https://www1.vtrenz.net/imarkownerfiles/ownerassets/ 1013/Technology%20Radar%20Jan%202010.pdf This is an exciting development in the .NET space from Microsoft, both in the programming model and in the open source license under which Microsoft has released the library. ASP.NET MVC is similar to MVC frameworks on the Java platform and is a move away from the ASP.NET Web Forms approach to one that supports greater levels of automated testing. 10
- 11. What is MVC ? デザイン パターン • Model データとビジネス ロジック を表現 • View Model から取得したデータを プレゼンテーション (UI) へ出力する • Controller ユーザーからの入力を受付け View と Model を制御する M C V 11
- 12. MVC オーバービュー Web アプリにおける MVC パターン 12 HTTP Request 1. Controller が リクエストを受信 2. Controller が Model を初期化 3. ビジネス ロジック を実行 4. Controller が View を呼び出す 5. View が Model を参照 6. View がレスポンス を送信 Model Controller ViewHTTP Response 入力と制御 プレゼンテーション データ表現と ビジネス ロジック
- 13. ASP.NET MVC 2 新しい Web アプリ開発フレームワーク • 2010 年 3 月 RTM リリース (for VS 2008 SP1) • Visual Studio 2010 に標準搭載 • オープン ソース (CodePlex) 各モジュールが 疎結合 に 単体テスト (TDD) が容易に HTML ベース のページ開発が容易に URL ルーティング が可能に 13
- 14. View の特徴と HTML 生成 埋め込みコード ブロックの利用 • View における HTML 生成 (View エンジン) は 既定で Web フォーム (.aspx) を使用 – System.Web.Mvc.WebFormViewEngine クラス – 基本的に Web サーバー コントロールは使用しない (ポストバックや ViewState は使用しない) – ヘルパー メソッドで HTML タグ ブロックを生成 View (.aspx) <html> <div><%: DateTime.Now.ToString() %></div> <div><%: Html.TextBox("data", Model.data) %></div> </html> 埋め込み コード ブロック 14
- 15. HTML ヘルパー メソッド HTML 生成を助ける関数群 メソッド名 概要 ActionLink アクション名などから a タグを生成 BeginForm form タグを生成 TextBox input タグによる入力フィールドを生成 TextBoxFor … …<%: Html.ActionLink("Go to Home", "Index") %> <%: Html.TextBox("message", model.Message) %> <%: Html.TextBoxFor(model => model.Message) %> 使用例 15
- 16. Controller と View の命名ルール コンセプト「規約は設定に勝る」 • CoC (Convention over Configuration) • 命名ルールによってモジュール間の結合を疎に – コードや設定ファイルなどで関連付けない public class HomeController : Controller { public ActionResult Index() { ViewData["Message"] = "MVC"; return View(); } } アクション名 Controller 名 Controller クラス 16
- 17. テスト駆動開発 (TDD) Controller Action の単体テストが容易に • 単体テストには IIS などの Web サーバー は不要 • Visual Studio 2008/2010 Professional 以上が必要 • NUnit, MBUnit, XUnit なども利用可能 • テスト プロジェクトも同時に作成可能 – テスト コードの雛型が自動生成 [TestMethod] public void Index() { HomeController ctrl = new HomeController(); ViewResult result = ctrl.Index() as ViewResult; ViewDataDictionary viewData = result.ViewData; Assert.AreEqual("Hello", viewData["Message"]); } 17
- 18. URL ルーティング クリーン URL で SEO 対策 • ASP.NET MVC では既定でルーティングが有効 – System.Web.Routing 名前空間 static void RegisterRoutes(RouteCollection routes) { routes.MapRoute( "Default", "{controller}/{action}/{id}", new { controller = "Car", action = "List", id = UrlParameter.Optional } ); } void Application_Start() { RegisterRoutes(RouteTable.Routes); } 例: http://example.com/Products/Car/Details/5 ルーティング定義 既定値 (省略時の値) 18
- 19. ASP.NET MVC における AJAX 非同期処理と部分更新の実装方法 • AJAX ヘルパー メソッド を利用 • jQuery を利用 19 <%: Ajax.ActionLink("データの表示...", "ShowData", new AjaxOptions {UpdateTargetId = "results"}) %> <% using (Ajax.BeginForm("UpdateList", new AjaxOptions {UpdateTargetId = "results"})) { %> ... <% } %>
- 20. Data Annotation バリデーション Model 中心の入力検証 • 宣言型で コードすっきり バリデーション Model View public class MyData { [DisplayName("年齢")] [Required(ErrorMessage = "{0}を入力してね")] [Range(0, 100)] public int Age { get; set; } } <%: Html.TextBoxFor(model => model.Age) %> <%: Html.ValidationMessageFor(model => model.Age) %> Controller public ActionResult Create(MyData myData) { if (ModelState.IsValid) { … } } 属性ベースで 検証ルールを指定 エラー メッセージも 指定可能 モデル バインドと 検証実行 20
- 21. RenderPartial と RenderAction View の部分レンダリング • RenderPartial – 部分 View をレンダリング • RenderAction – コントローラー アクションの実行結果をレンダリング View (.aspx) <html> <% RenderPartial(…); %> </html> View (.ascx) <div>…</div> View (.aspx) <html> <% RenderAction(…); %> </html> Controller ActionResult Ad() M M M M Html.RenderPartial(ViewName, … ) Html.RenderAction(ActionName, … ) ※ M は Model の略 21
- 22. セキュリティ対策 ASP.NET MVC でも忘れずに • Controller 実行時の認証の要求 – [Authorize] 属性 (ActionFilter) • HTML Encoding 構文 (WebFormViewEngine) – <%: SomeStringData %> • Cross Site Scripting (XSS) – Microsoft Web Protection Library http://wpl.codeplex.com/ • Cross Site Request Forgeries (CSRF) – Html.AntiForgeryToken() – [ValidateAntiForgeryToken] • JSON Hijacking – JsonResult – return Json(data, JsonRequestBehavior.DenyGet); 22
- 23. 23
- 24. MVC フレームワークの拡張 多くの拡張ポイントと容易なカスタマイズ odel ontroller iew Response ModelBinder ActionFilter ActionResult ViewEngine HtmlHelper ValidationAttribute Request Routing 24
- 25. View エンジンのカスタマイズ (1) ViewEngine = HTML 生成テンプレート エンジン • View エンジンの変更 (Razor, NHaml, Spark, ...) • オリジナル View エンジンの作成 • View の検索パスの変更 などのカスタマイズが可能 View Engine ontroller iew ResponseRequest 25 HTML5 対応や 携帯向けサイトの HTML 生成が容易
- 26. View エンジンのカスタマイズ (2) さまざまな View エンジンの記法 • WebFormViewEngine (.aspx 既定) • NHaml - http://code.google.com/p/nhaml/ – Rails Haml View エンジンの .NET 実装版 • Spark - http://sparkviewengine.com/ – Castle Project - MonoRail 向け View エンジン <h1><%: product.ProductName %></h1> <p><%: Html.ActionLink("Add...", "Add") %></p> %h1= product.ProductName %p= Html.ActionLink("Add...", "Add") <h1>${ product.ProductName }</h1> <p>${ Html.ActionLink("Add...", "Add") }</p> 26
- 27. ASP.NET MVC 3 新機能 概要 • Beta (2010 年 10 月 6 日 リリース) http://go.microsoft.com/fwlink/?LinkID=191795 • 新機能 – Razor, ASPX, … などの View エンジンの選択機能 – ダイナミック View / ViewModel プロパティ – グローバル Action Filters – JsonValueProviderFactory と JSON モデル バインド – ValidationAttribute と IValidatableObject – 新しい ActionResult 型 と Permanent Redirect – Dependency Injection (DI) サポート • ランタイム – ASP.NET 4 & Visual Studio 2010 以降 27
- 28. MVC 3 と Razor View エンジン Small, Simple, Seamless • 新しい "Razor 構文" View エンジンの追加 – Razor プロジェクト テンプレート – [ View の追加 ] ダイアログ での View エンジン選択 • View 毎に使用するエンジンを選択可能 – Razor View 拡張子 (※変更の可能性あり) • .cshtml (C#) / .vbhtml (VB) 28
- 29. .cshtml "Razor" 構文 Small, Simple, Seamless • Web ページ (View) の新しい記述構文 – シンプル & クリーン – タイピング量とコード サイズの低減 (vs. PHP, ASPX) – 便利な HTML ヘルパーと容易な拡張 – C#, Visual Basic をサポート @{ string title = "Hello Razor"; } <h1>@title</h1> <ul> @foreach (var item in Model) { <li>@item.Message</li> } </ul> <p>Time is @DateTime.Now</p> <p>@Html.ActionLink("Add...", "Add")</p> 29
- 31. StackOverflow.com アーキテクチャー • トラフィック – 1600 万 ページ ビュー / 月 – 300 万 ユニーク ビジター / 月 – 600 万 ビジター / 月 • プラットフォーム・テクノロジー – ASP.NET MVC – SQL Server 2008 – C# – Visual Studio 2008 Team Suite – jQuery – LINQ to SQL 出典: Stack Overflow Architecture http://highscalability.com/stack-overflow-architecture 31
- 32. 国内採用事例のご紹介 こちらも続々と増えてます ... • 現場入退場管理システム「デイリ」 – 携帯コールによる遠隔地の現場労働時間管理システム – コムテックス株式会社様 開発 – http://www.ctx.co.jp/deiri_pr/index.html – システム構成 • Windows Azure (Web Role + SQL Azure) • ASP.NET MVC + jQuery • ASP.NET メンバーシップ & ロール管理 • オンプレミス連携 (電話着信処理など) 32
- 33. まとめ 33
- 34. Web フォーム vs. MVC 特徴と使い分け • ASP.NET MVC と Web フォーム は 適材適所で使い分けることが重要 • プロジェクトの要求、アプリケーションの仕様、 エンジニアのスキル、開発手法、チーム編成など ... Web フォーム ASP.NET MVC 豊富なコントロール を使用可能 HTML ベース の UI 開発 イベント駆動型プログラミング アクション メソッドによる リクエスト処理 ViewState やポストバック処理を 多用する ViewState やポストバック処理を 使用しない ロジックの検証に Web サーバー が必要 ロジックの検証に Web サーバー が不要 (テスト駆動開発をサポート) 34
- 35. ASP.NET MVC 2 Small + Simple + Seamless = Smart ! ASPX, Razor, ... M C V 35
- 36. Appendix. 36
- 37. View (Edit.aspx) Model / View / Controller 実装コード例 Model と Controller public class HomeController : Controller { MyModelService myModel = new MyModelService(); public ActionResult Edit(int id) { MyData md = myModel.GetData(id); return View(md); } } <html> <p><%: Html.TextBox("data", Model.data) %></p> </html> Model の準備 HTTP リクエスト によるメソッドの 実行 (例: Home/Edit/5 ) View の呼び出し ロジックの実行と データ取得 HTML タグ生成と データの埋め込み 37
- 38. スキャフォールディング機能 (1) Controller の追加 38 Controllers 上で 右クリック [コントローラー] を選択 コントローラー名 追加、更新、削除などの 各アクション メソッドを 自動生成
- 39. スキャフォールディング機能 (2) View の追加 39 ビュー名 モデル クラス の指定 生成するビューの種類 を選択 アクション メソッド の上で右クリック [ビューの追加] を選択
- 40. ビュー データ の利用方法 モデル データをビューに渡すには ... • ViewDataDictionary クラス • ViewDataDictionary<TModel> クラス 40 public ActionResult Index() { ViewData["Name"] = "ジャイケル・マクソン"; ViewData["Song"] = "サラリー"; return View(); } <p><%: ViewData["Name"] %></p> <p><%: ViewData["Song"] %></p> public ActionResult Index() { var artist = new MyArtist(); artist.Name = "ジャイケル・マクソン"; artist.Song = "サラリー"; return View(artist); } <p><%: ViewData.Model.Name %></p> <p><%: ViewData.Model.Song %></p> TempDataDictionary でリクエスト間での データ永続化も可
- 41. Web.config - <system.web><caching><outputCacheSettings> 出力キャッシュの利用 冗長なサーバー処理の回避 • OutputCacheAttribute (ActionFilter) を利用 – Controller Action の無駄な実行を制御 – アプリケーション パフォーマンスの改善 • キャッシュ プロファイル を利用した設定 – アプリケーションを再ビルドすることなく設定変更可 [OutputCache(Duration=3600, VaryByParam="id")] public ActionResult Details(int id) { return View(myModel.GetData(id)); } id 毎に 1 時間キャッシュ [OutputCache(CacheProfile="MyCache")] public ActionResult Index() {…} <outputCacheProfiles> <add name="MyCache" duration="3600" … /> </outputCacheProfiles> 41
- 42. Templated Helpers View の部分レンダリング • データの表示や編集ための部分 View を生成 – DisplayForModel, EditorForModel 等のヘルパー • テンプレート (部分 View) として .ascx ファイルを用意 – データ型やクラスに基づいた 部分 View の定義 42 <%@ Page Inherits="ViewPage<MyData>" %> <%: Html.DisplayForModel() %> <%: Html.DisplayFor(m => m.Name, "NameTemplate") %> A) データ型やクラスに基づいたテンプレートの利用 B) 名前付きテンプレートの利用
- 43. AsyncController 非同期コントローラーの利用 • AsyncController クラス – 命名規約による容易な非同期処理の実装が可能 ※ View 名には Async / Completed の文字は不要 • 利点 – Web サーバーの他のリクエスト 処理がブロックされない – 時間のかかるネットワーク I/O (Web API 呼び出し等) に有効 • 注意点 – 非同期処理はオーバーヘッドが大きい – 同期処理においてボトル ネックになる部分に適用 :AsyncController object1: 1: 開始 2: 完了 他の処理 開始 : void ActionNameAsync() 終了 : ActionResult ActionNameCompleted() 43
- 44. ASP.NET MVC 2 その他の機能 • Areas (区分) – 単一 MVC プロジェクト内で アプリケーションを分割 – AreaRegistration.RegisterAllAreas() • アクション メソッドのデフォルト値 • HTTP Method 属性 – HttpPost, HttpGet, HttpPut, HttpDelete [HttpPost] public ActionResult Create(MyData myData) { … } ActionResult Index([DefaultValue(1)] int id) ActionResult Index(int id = 1) 44
- 45. ActionFilter 拡張 アクション メソッド実行時の拡張ポイント • アクション メソッドの実行前後に独自機能を追加 • ベース クラス ActionFilterAttribute : FilterAttribute • 既存の FilterAttribute 派生クラス AuthorizeAttribute, ValidateAntiForgeryTokenAttribute, ChildActionOnlyAttribute, RequireHttpsAttribute ... 使用例 public class LogAttribute : ActionFilterAttribute { public override void OnActionExecuting(…) {…} public override void OnResultExecuted(…) {…} } [Log] public class HomeController : Controller {…} Controller や Action に属性を指定 45
- 46. バインドなしの場合 バインドありの場合 ModelBinder とは ? HTTP リクエスト データの自動バインド • アクション メソッド 引数への自動バインド • 既定のバインドは DefaultModelBinder • 以下のオブジェクト型をバインド – Model クラス – プリミティブ型 (String, DateTime, ...) – コレクション (ICollection<T>, IList<T>, ...) ActionResult Create() { string name = Request["Name"]; ... ActionResult Create(MyData myData) { if (ModelState.IsValid) { string name = myData.Name; ... MyData へバインド 46
- 47. ModelBinder の登録 ModelBinder 拡張 カスタム機能の追加 • インターフェース : IModelBinder • ベース クラス : DefaultModelBinder 主な拡張ポイント object BindModel(…); // モデル バインド実行 object CreateModel(…); // モデル型オブジェクト生成 bool OnModelUpdating(…); // モデル更新開始 void OnModelUpdated(…); // モデル更新完了 bool OnPropertyValidating(…); // プロパティ検証開始 void OnPropertyValidated(…); // プロパティ検証完了 // Application_Start() で下記のいずれかで指定 ModelBinders.Binders.DefaultBinder = new MyBinder(); ModelBinders.Binders.Add(typeof(MyData),new MyBinder()); // または、引数の属性で指定 [ModelBinder(typeof(MyBinder))] 47
- 48. ASP.NET MVC 拡張ライブラリ もっと活用したい ! あなたのために ... • MVC Contrib http://mvccontrib.codeplex.com/ – 様々な拡張ライブラリ群 – HTML Helper, Model Binder, Controller, Routing, Action Result, Action Filter, Unit Test Helper, ... • T4MVC http://mvccontrib.codeplex.com/releases/view/41582 – T4 テンプレートを利用した自動コード生成 – View や Controller コード内のリテラル文字列を排除 – インテリセンス利用可 & 容易なコード メンテナンス <% Html.RenderPartial("Banner"); %> <% Html.RenderPartial(MVC.Home.Views.Banner); %> 48
- 49. ASP.NET MVC の採用事例 続々と増加中 ... • StackOverflow.com – http://stackoverflow.com/ • Ruth's Chris Steakhouse – http://www.ruthschris.com/ • MarketWatch – http://www.marketwatch.com/ • Kelley Blue Book – http://www.kbb.com/ • CodePlex - Open Source Project – http://www.codeplex.com/ • Windows Live – http://home.live.com/ • Bing Shopping – http://www.bing.com/shopping/ 49
- 50. Orchard 新しい .NET ベース CMS • Orchard (オーチャード) – 2010 年 8 月 3 日 v.0.5 (Beta) リリース – http://orchardproject.net/ – http://orchard.codeplex.com/ (ソース コード等) • 軽量な CMS (Contents Management System) – Web サイト、ブログ、 ドキュメント管理など ... – ASP.NET MVC 2 ベース – 容易なセットアップ (Web PI) – 容易な拡張とカスタマイズ (Visual Studio, WebMatrix) 50
- 51. 最新テクノロジーと Web 開発 新しいプラットフォームも続々と ... • WebMatrix (Beta) – http://www.microsoft.com/web/webmatrix/ – 軽量な Web サイトを構築・管理する統合ツール – オープンソースの Web アプリのインストールやカスタマイズ • Visual Studio LightSwitch (Beta) – http://www.microsoft.com/visualstudio/en-us/lightswitch/ – ベーシックな業務アプリケーションを迅速に構築 – 基本コードはテンプレートから自動生成 • Internet Explorer 9 (Beta) – http://ie.microsoft.com/testdrive/ – Web 標準への準拠、次世代規格 HTML5, CSS3 への対応 51
- 52. インテリセンス と スニペット Visual Studio 2010 入力支援機能 • インテリセンス – オートコンプリート・オートコレクト • コード スニペット – コード ブロックのひな形を簡単に挿入 – HTML と JavaScript でも使用可能 – カスタム スニペットを作成して拡張可能
- 53. jQuery と インテリセンス Visual Studio 2010 入力支援機能 • jQuery インテリセンス対応 – jquery-1.x.x-vsdoc.js ファイルを提供 • インテリセンス向けのコメント情報が記述される • HTML では通常の jquery-1.x.x.js への参照を追 加 • IDE がプロジェクト内の –vsdoc ファイルを認識 • 外部 JavaScript ファイルでは ... <script src="jquery-1.4.1.js" type="text/javascript"></script> /// <reference path="jquery-1.4.1.js" /> function FadeOut() { $("#Text1").fadeOut(); ... jQuery ファイル への参照の追加
- 54. jQuery と スニペット Visual Studio 2010 入力支援機能 • jQuery コードスニペット対応 – jQuery Code Snippets for Visual Studio 2010 http://jquerysnippets.codeplex.com/ – 上記を含め 131 ものスニペットを提供 対象 ショートカット 概要 HTML jq スクリプトタグと $(document).ready() ショートカットを挿入 HTML jqscript jQuery ソースファイルへのスクリプト タグを挿入 JavaScript func JavaScript の匿名関数を挿入 JavaScript jqclick click イベントハンドラを挿入 JavaScript jqfadein fadeIn 関数を挿入
- 55. Content Delivery Network CDN から jQuery を利用する • Microsoft Ajax Content Delivery Network – ajax.microsoft.com ドメインで主要 JS ファイルをホスト – jQuery などのスクリプトライブラリの利用を容易に – 最小限のネットワーク ホップ数で効率的にロード – ブラウザーキャッシュに格納されたスクリプトを アプリケーション間で再利用 – 無償サービス Web サーバー ajax.microsoft.com エッジ キャッシュ サーバー
- 56. Microsoft Ajax CDN ホストされる JavaScript ライブラリ • jQuery 1.4.2 • jQuery 1.4.1 • jQuery 1.4 • jQuery 1.3.2 • jQuery Validate 1.7 • jQuery Validate 1.6 • jQuery Validate 1.5.5 • jQuery UI 1.8.5 • … http://www.asp.net/ ajaxLibrary/CDN.ashx <script type="text/javascript" src= "http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"> </script> 使用方法
- 57. Microsoft Web Platform ホーム まずはここからスタート ! • Web プラットフォームの紹介 – サーバー – フレームワーク – データーベース – ツール • Web App Gallery • ダウンロード • プログラム紹介 • ホスティング情報 • 事例紹介 • などなど ... 57 www.microsoft.com/web
- 58. Web プラットフォーム インストーラー コンポーネントやアプリの一括管理ツール (Web PI) マイクロソフトの コンポーネント コミュニティの コンポーネント www.microsoft.com/web 58
- 59. WebsiteSpark Web 開発会社様 支援プログラム プログラム特典： 開発ツール Visual Studio 2010 Professional x 3 Expression Studio 4 x 1 Expression Web 4 x 2 サーバー ソフトウェア（検証、デモ用） Windows Web Server 2008 R2 x 3 SQL Server 2008 Web Edition x 3 ※これらのソフトウェアは MSDN サブスクリプションの ダウンロード サイトから提供させていただきます 技術サポート 技術サポートを 2 インシデント無償提供 その他 参加企業の露出機会の提供 技術資料、トレーニングマテリアルなどの提供 参加要件： • Web 開発ビジネスを主業務としていること （個人事業主を含む） • 従業員数が 25 名以下であること 期間：最大 3 年間 費用：無料（プログラム終了時にプログラム提供料 として 100 米ドルお支払いいただきます） www.microsoft.com/japan/web/websitespark 59
- 60. リファレンス #1 Microsoft Web Platform http://www.microsoft.com/web/ MSDN ASP.NET デベロッパー センター http://msdn.microsoft.com/ja-jp/asp.net/default.aspx Microsoft Web 開発ガイドライン http://msdn.microsoft.com/ja-jp/asp.net/ff602016.aspx ASP.NET MVC チュートリアル http://msdn.microsoft.com/ja-jp/asp.net/ff630143.aspx ASP.NET MVC 2 サンプル ソース コード ～ Edtter ～ http://edtter.codeplex.com/ THE TRUTH IS OUT THERE ～ 井上 章のブログ ～ http://blogs.msdn.com/chack/ 60
- 61. リファレンス #2 ASP.NET MVC: The Official Microsoft ASP.NET Site (英語) http://www.asp.net/mvc CodePlex - ASP.NET MVC (英語) http://aspnet.codeplex.com/wikipage?title=MVC ScottGu's Blog (英語) http://weblogs.asp.net/scottgu/default.aspx Scott Hanselman's Blog (英語) http://www.hanselman.com/blog/ K. Scott Allen's Blog (英語) http://odetocode.com/Blogs/scott/default.aspx Phil Haack's Blog (英語) http://haacked.com/Default.aspx 61
- 62. お疲れ様でした ... 62
- 63. 63