これら 3つのページで見た目が共通している部分があるのがわかるでしょうか? そう、ページ最上部のリンクボタンが並んでいる黒い部分と、ページ末尾の「©2014」から始まる表示の部分です。これらは基本的にはサイト全体で共通するレイアウトとして使われている部分です。
}}} Visual Studio を見てみましょう。ソリューションエクスプローラーのツリーが表示されていますね。 Web ブラウザー上での見た目の部分を定義しているファイルは、この中の「Views」フォルダーの中に収められています。その中の、「Shared」フォルダーを展開すると、中に「_Layout.cshtml」というファイルがあるので、ダブルクリックして開いてみましょう。このファイルが、共通レイアウトファイルで、この中のとある箇所に、そのページで実際に表示したい内容が挿入されたものが、 Web ブラウザーに送られて表示されるようになっています。 === ページを追加する === とりあえず共通レイアウトはそのまま放っておいて、まずは「Hello, World」を表示するためのページをこのサイトに追加してみましょう。それには以下の 2つの操作が必要です。 1. ビューのファイルを追加する 1. 該当するコントローラメソッドを追加する ==== ビューの追加 ==== まず、ビューのファイルを追加します。ソリューションエクスプローラーにて、ツリーの「View」→「Home」フォルダを右クリックしてみてください。 [[Image(fig-append-view-01.PNG, 640px, align=center)]] コンテキストメニューにて、「追加」→「ビュー」を選択します。 [[Image(fig-append-view-02.PNG, align=center)]] ビュー名は「Hello」とでもしておきましょう。 テンプレートは「Empty (モデルなし)」のままで ok です。 オプションの「部分ビューとして作成」はチェックを外しておきます。このオプションは、このビューを他のビューの一部分として使用する場合に使用します。単独のページとして使用する場合はチェックを入れません。 「レイアウトページの使用」は、まさに先ほど紹介した「_Layout.cshtml」を使用するかどうかということです。これはチェックを入れておきます。その下の空欄はレイアウトページに使用するファイルを指定するものですが、そのさらに下にある但し書きの条件にまさに合致するケースになりますので、ここは空欄にしておきます。 「追加」ボタンを押すと、 !View/Home フォルダの下に、 Hello.cshtml というファイルが追加され、そのファイルがエディタで開いた状態になります。コードは以下の様な内容になっているはずです。 {{{#!text/html @{ ViewBag.Title = "Hello"; }@Html.ActionLink("Hello, World のページヘ", "Hello", "Home")
}}} 3つ目の引数 `"Home"` は、同じ Home ディレクトリ内のビューファイルにて記述するのであれば、省略することも可能です。 順を追って解説しましょう…。まず、 `@` で始まる記述箇所は、 C# のコードを記述することを表すものです。 `Html` はここで使えるオブジェクトの名前で、 HTML 関連の処理を行うメソッドが色々と用意されているというものです。このオブジェクトの `ActionLink` メソッドを呼び、その結果をこの位置に出力する、という意味になります。 `ActionLink` メソッドの公式の MSDN Library ドキュメントは[http://msdn.microsoft.com/ja-jp/library/system.web.mvc.html.linkextensions.actionlink(v=vs.118).aspx ここにあります]。実はもっといろんな引数の指定方法があるのですが (同じ名前の関数に複数の引数指定のバリエーションを持たせることを関数の'''オーバーロード'''と言います)、とりあえず、 * 1つ目の引数に、リンクボタンとして表示する文字列を指定する。 * 2つ目の引数と 3つ目の引数で、リンク先の URL が決定する。 * 同じディレクトリにあるページヘリンクを張る場合、 3つ目の引数は省略可能。 なお、この時指定する 2つ目の引数と 3つ目の引数は、それぞれ'''アクション名'''と'''コントローラ名'''と呼ばれています。実際の URL も、 {{{ http://ホスト名/コントローラ名/アクション名 }}} と考えることができます。 説明が長くなってしまいました。それでは実際にリンクを張ってみましょう。まず、ビューファイル View\Home\Index.cshtml を開きます。 [[Image(fig-viewfile-home-index.PNG, align=center)]] …なんだか色々と書かれていますが、別にいらない情報でしょうから、 HTML で書かれている部分は全部消してしまいましょう。ファイルの内容を以下のように書き換えてしまってください。 {{{#!text/html @{ ViewBag.Title = "Home Page"; }@Html.ActionLink("Hello, World のページヘ", "Hello", "Home")
}}} ここまで書いたら、 Ctrl + F5 を押して実行してみましょう。下図のような画面が表示されましたか? [[Image(fig-index-with-linkbutton.PNG, 640px, align=center)]] 「Hello, World のページヘ」と書かれたリンクボタンをクリックしてみてください。これで、 Hello, World のページヘ遷移できたならば、成功です。 === もっと Web アプリらしいことをしてみよう === Hello, World を表示することには成功しましたが、ここまででやっていることといえば、単に HTML ファイルを書いてブラウザに読み込ませているのと殆ど変わりません。本来であれば、何らかの処理を経て得られたデータを Web ページに表示する、ぐらいのことはやってみたいところでしょう。 そこで、その「何らかの処理」を書くべき場所から Hello, World という文字列を取り出し、それを表示に適用する、という Web アプリらしいプログラムを書いてみることにしましょう。 ==== MVC アーキテクチャ ==== 「何らかの処理」を書くべき場所とは、実際には業務内容に応じて必要となる処理、すなわちシステムへの要件そのものに対応する本質的な部分ということになります。そのような処理のことを、一般的には'''ビジネスロジック'''と呼ばれています。そして、ビジネスロジックを書くべき場所のことを、 MVC アーキテクチャにおける'''モデル'''といいます。 モデルに書かれたビジネスロジックの処理によって得られた結果をコントローラが整形し、ビューで表示する。または、ユーザーが操作を行うための UI をビューに設け、その操作をコントローラが受け付けて処理内容をモデルに指示し、モデルにおけるビジネスロジックが最終的な処理を行う。 MVC アーキテクチャとは、そのようにシステムの役割を 3つのレイヤーに分けて記述する設計手法のことなのです。 ASP.NET MVC では、ビューは Views フォルダ下に HTML っぽいファイルとして、コントローラは Controllers フォルダ下にある C# コードで書かれたクラスのメソッドとして、それぞれ記述しました。モデルもこれらと同様に、 Models フォルダの下の任意のフォルダ階層に、 C# で記述することができます。ただし、ビューやコントローラとは違い、これらの名前に合わせる必要は全くなく、あくまで業務要件の都合に応じた好きな名前でクラスやメソッドを実装してしまって構いません。 ==== Hello, World と返すモデル ==== そんなわけで、 Hello, World という内容のデータを取り出すことができるモデルを作ってみましょう。 Models フォルダの直下に C# ファイルを作ってしまっても良いのですが、業務内容を整理しやすくするため、サブフォルダを切ってからにしましょうか。まず、 Models フォルダを右クリックし、「追加」→「新しいフォルダー」を選択します。 [[Image(fig-model-new-folder.PNG, 640px, align=center)]] サブフォルダの名前は「!SmallCase」とでもしておきましょう。次に今作ったフォルダを右クリックし、「追加」→「クラス」を選択します。 [[Image(fig-append-model-01.PNG, 640px, align=center)]] [[Image(fig-append-model-02.PNG, 640px, align=center)]] 「新しい項目の追加」ダイアログが表示されます。「クラス」が選択されていることを確認して下さい。ファイル名は、「!HelloWorld.cs」としましょう。 「OK」ボタンをクリックすると、 !SmallCase フォルダの下に !HelloWorld.cs ファイルが生成され、エディタで開いた状態になります。ファイルの内容は以下の通りになっているはずです。 {{{#!cs using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace HelloWorld.Models.SmallCase { public class HelloWorld { } } }}} 名前空間 (`namespace` で始まる行で宣言されている名前ですね) の最後が `SmallCase`、クラス名が `HelloWorld` となっています。よくできてますねー。 それではこのクラスに、 Hello, World という文字列を返す'''プロパティ'''を追加してみましょう。プロパティとは、フィールド (メンバ変数) のように操作できるけど、その実態はメソッドのように振る舞いを持つ、というものです。今回は `get` のみを定義した読み取りアクセスのみ可能なプロパティを定義します。以下のように書いてください。 {{{#!cs public class HelloWorld { // Hello, World を返す Text プロパティ public string Text { get { return "Hello, World"; } } } }}} こう書くことによって、このクラスのオブジェクトを使用する側のプログラムでは、以下のように書くことができます。 {{{#!cs var hw = new HelloWorld.Models.SmallCase.HelloWorld(); var output_text = hw.Text; // "Hello, World" をここで取得 }}} C# に慣れていない人のために順を追って解説しましょう。まず、 `var` という修飾子は、ここで定義する変数の型を推測することを意味します。'''型推論'''はコンパイル時に行われ、代入しようとする値と同じ型の変数であるとみなされます。つまり、上記のコードは以下のコードと本質的には同じ意味です。 {{{#!cs HelloWorld.Models.SmallCase.HelloWorld hw = new HelloWorld.Models.SmallCase.HelloWorld(); string output_text = hw.Text; }}} なんでこう書かないのかというと、 2回も `HelloWorld.Models.SmallCase.HelloWorld` などという長ったらしい名前を書くのはさすがに冗長すぎるからです…。 次になぜ `Text` プロパティをわざわざプロパティとして実装したかというと、仮に単なるフィールドとして実装した場合、 {{{#!cs public class HelloWorld { // Text をフィールドとして実装した場合 public string Text = "Hello, World"; } }}} 呼び出し側のプログラムで、このフィールドを書き換えることができてしまいます。今回のケースはともかく、こうした使われ方はビジネスロジックの設計者にとっては意図していないものである可能性があります。 {{{#!cs var hw = new HelloWorld.Models.SmallCase.HelloWorld(); hw.Text = "Gooby, Past"; // Hello, World じゃなくなっちゃった…。 }}} 本質的には C# のプロパティはメソッドの構文糖衣に過ぎません。プロパティでできることは全てメソッドでも実現可能です[[FootNote(デスクトップアプリケーション作成で WPF を使う場合にビューモデルオブジェクトをビューにバインドする際、バインドするステータスは変数のようにアクセスできる必要があるという仕様があって、そういうケースではメソッドで代用できる必要がある、といったような例外はありますが…。)]]。とはいえ、プロパティを用いることでプログラムの表現がより直感的になるケースも多いですし、 C# では広く使われている書き方ですので、この際知っておくといいと思います。 [[FootNote]] ==== モデルデータをコントローラがビューに渡す ==== モデルが出来上がりましたので、次はこのコードを呼び出して取り出したデータをビューに渡すコントローラのコードを書きましょう。コントローラの !HomeController.cs ファイルを開いてください。 まず、使用するモデルの名前空間にアクセスしやすいように、名前空間のショートカット名を宣言しましょう。ファイル先頭の `using` で始まる行の並びに、以下の行を追加します。 {{{#!cs using sc = HelloWorld.Models.SmallCase; }}} 次に、以前追加した `HemoController.Hello` メソッドに、以下のコードを記述します。 {{{#!cs public ActionResult Hello() { var hw = new sc.HelloWorld(); ViewBag.Hello = hw.Text; return View(); } }}} `HelloWorld` クラスインスタンスの生成で、 {{{#!cs var hw = new HelloWorld.Moels.SmallCase.HelloWorld(); }}} と書かずに済んだのは、その前に書いた `using` 行のおかげです。ただ、今回の例では名前空間のショートカット名はあまりにも短くしすぎてわかりづらいかもしれません。この辺も、ある程度は開発チーム内で命名規則を決めておいたほうがよいかもしれません。 次の `ViewBag` は先程も出てきましたが、コントローラとビューの間でデータのやり取りをする際に使用する最も手っ取り早い手段の一つで、このオブジェクトには好きな名前のフィールドを作ってデータを放り込むことができるようになっています。放り込めるデータの型も、ある程度制限はありますが、割となんでも放り込めるようです。 {{{#!cs ViewBag.Name = "Toshiyuki Murayama"; // 文字列 ViewBag.Born = new Date(1978, 2, 7); // 日付 ViewBag.Tall = 166.2; // 数値 ViewBag.Hello = new sc.HelloWorld(); // モデルオブジェクトも入れようと思えば入れられる }}} ==== 受け取った値を表示するコードをビューに書く ==== それではいよいよ受け取った値を表示するコードを書きます。今度はビューの Home\Hello.cshtml ファイルを開いてください。 今までと同じ表示結果では面白く無いので、既にある `モデルから受け取った値: @ViewBag.Text
}}} 説明の必要はないかもしれませんが一応解説すると、 Razor 記法により、 `@ViewBag.Text` と書かれた場所には、 C# 言語での `ViewBag.Text` を評価して得られる値が HTML 出力されます[[FootNote(これが `string` 型の文字列の場合、正確には '''HTML エスケープ処理されてから出力'''されます。つまり、入っている文字列値がそのままブラウザ上に表示されるということです。)]]。つまり、うまく行けばこの部分は以下のように HTML 出力されるはずです。 {{{#!text/htmlモデルから受け取った値: Hello, World
}}} それでは、 Ctrl + F5 キーを押して、実際どのように動くか見てみましょう。以下のように表示されれば成功です。 [[FootNote]]