18
お悩み解決!! 効率的なビュー開発

Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

Embed Size (px)

DESCRIPTION

2012/11/24 ASP.NET MVC 入門 2 回目 の資料の一部です。

Citation preview

Page 1: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

お悩み解決!! 効率的なビュー開発

Page 2: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

お悩み解決!! 効率的なビュー開発

ビューのコードが複雑になってしまう・・・ 重複コードをなくしたい・・・ Html の記述は量が多いので、大変。スピーディに行いたい。 ASP.NET MVC って、生産性悪いんでしょう?

どのような実装かわかりませんが、これから紹介する方法で 解決できるかもしれません。 初めて開発する方も知っておくとお得です。 ただの Tips ではありません。

立派な ASP.NET MVC のビュー機能 をご紹介します。

Page 3: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

お品書き

カスタム Html ヘルパー 同じ Html 要素を書いた時には、これ!

宣言型 Html ヘルパー ビューで複雑な処理を書いた時には、これ!

部分ビュー 同じ画面を書いた時は、これ!で統一

Html.Action 画面の中に、まったく違う性質の情報を表示することに なった時には、これ!

テンプレート機能 この型はこの表示、と決まっていたらテンプレートを 作ろう!

Page 4: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

1. カスタム Html ヘルパー

Html ヘルパー は、 HtmlHelper オブジェクトを引数に持ち、 MvcHtmlString を返す拡張メソッドです。 作成するときは、同じように拡張メソッドを作成します。

@Html.ActionLink(…) などと同じように、自分で Html ヘルパーを作成します。

Page 5: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

2. 宣言型 Html ヘルパー

ビューの記述が複雑になってしまった時、 関数のように利用することができます。

Page 6: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

2. 宣言型 Html ヘルパー

App_Code フォルダの中に作成すると、 全ビューから参照することができます。 共通する文章等は、ここに記述するとよいかもしれません。

Page 7: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

3. 部分ビュー

Create.cshtml Edit.cshtml

_Form.cshtml (部分ビュー)

共通する部分を、別ファイルとして作成し、 複数のビューで共有することができます。

Page 8: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

3. 部分ビュー

作成した部分ビューを表示したい時は、 このように記述します。 第1引数は、部分ビューの名前を指定します。 部分ビューで利用する Model を指定することもできます。

下の用に書くこともできます。 が、違いはほとんどありません。

Page 9: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

4. Html.Action

1つのページにまったく性質の違う情報が複数ある場合、 無理に1つのアクションメソッドに処理を書く必要はありません。 Html.Action を利用します。

Details.cshtml

最新情報

日記

Page 10: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

4. Html.Action

Html.Action は、指定したアクションの結果を出力することが できます。(別のアクションメソッドの処理を呼ぶことができる、 というイメージです)

Details.cshtml

最新情報

日記

Page 11: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

4. Html.Action

利用するときは、ビュー側で、以下のように記述します。 引数では、コントローラやアクションを指定します。

以下の様に書くこともできます。 が、違いはほとんどありません。

Page 12: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

5. テンプレート

この項目は、この表示方法で、 この項目は、このような入力方法で、 といった決まりを、テンプレートとして作成し、利用することができます。

テンプレートは、 表示用 と 編集用

の2種類に分けることができます。

Page 13: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

5. テンプレート

利用する場合 表示用: 編集用:

以上のように記述すると、 項目の型情報などから、どのテンプレートを利用するか判断し、 そのテンプレートを利用して出力されます。

Page 14: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

5. テンプレート

テンプレートの作成方法

作成用: DisplayTemplates フォルダ内 編集用: EditorTemplates フォルダ内 に作成します。 場所は、Shared または、各コントローラフォルダ内に置きます。

Page 15: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

5. テンプレート

テンプレートの選択方法

型情報から、テンプレートが選択されます。 [UIHint(“Name”) ] → Name.cshtml を検索 [DataType(DataType.Url)] → Url.cshtml を検索 プロパティの型(String) → String.cshtml を検索

Page 16: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

5. テンプレート

既に ASP.NET MVC に登録されているテンプレートもあります。

注意!

DataType の属性をつけたからといって、 検証を行ってくれるわけではありません。

bool , DataType.Url , DataType.EmailAddress, などなど・・・

Page 17: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

おしまい

カスタム Html ヘルパー 同じ Html 要素を書いた時には、これ!

宣言型 Html ヘルパー ビューで複雑な処理を書いた時には、これ!

部分ビュー 同じ画面を書いた時は、これ!で統一

Html.Action 画面の中に、まったく違う性質の情報を表示することに なった時には、これ!

テンプレート機能 この型はこの表示、と決まっていたらテンプレートを 作ろう!

Page 18: Hokuriku.NET ASP.NET MVC 入門 2 回目 3.効率的なビュー開発

おしまい

たくさんのビュー機能がありましたが、 どれも、Html の制御は隠ぺいされていません。 これが、 ASP.NET MVC の利点でもあり 欠点でもあります。 次にご紹介する JavaScript 開発は、 Html 制御が可能な ASP.NET MVC だからこそ 容易にできる部分です。