Changes between Version 8 and Version 9 of HowTo/VisualStudioWeb2013Tutorial


Ignore:
Timestamp:
Aug 31, 2014, 3:47:54 PM (10 years ago)
Author:
村山 俊之
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • HowTo/VisualStudioWeb2013Tutorial

    v8 v9  
    9494ブラウザを見てみましょう。 ASP.NET について色々と書かれたページが表示されています。ページの最上部に「アプリケーション名」、「ホーム」、「詳細」、「連絡先」と書かれたリンクボタンがあります。「アプリケーション」と「ホーム」は今表示しているページヘのリンクですが、のこり 2つは別のページヘのリンクです。それぞれクリックしてみましょう。「詳細」からは About ページに、「連絡先」からは「Contact.」ページに遷移します。
    9595
    96 これら 3つのページで見た目が共通している部分があるのがわかるでしょうか? そう、ページ最上部のリンクボタンが並んでいる黒い部分と、ページ末尾の「©2014」から始まる表示の部分です。これらは基本的にはサイト全体で共通するレイアウトとして使われている部分です。
     96{{{#!html
     97<p>これら 3つのページで見た目が共通している部分があるのがわかるでしょうか? そう、ページ最上部のリンクボタンが並んでいる黒い部分と、ページ末尾の「&copy;2014」から始まる表示の部分です。これらは基本的にはサイト全体で共通するレイアウトとして使われている部分です。</p>
     98}}}
    9799
    98100Visual Studio を見てみましょう。ソリューションエクスプローラーのツリーが表示されていますね。 Web ブラウザー上での見た目の部分を定義しているファイルは、この中の「Views」フォルダーの中に収められています。その中の、「Shared」フォルダーを展開すると、中に「_Layout.cshtml」というファイルがあるので、ダブルクリックして開いてみましょう。このファイルが、共通レイアウトファイルで、この中のとある箇所に、そのページで実際に表示したい内容が挿入されたものが、 Web ブラウザーに送られて表示されるようになっています。
    … …  
    123125「レイアウトページの使用」は、まさに先ほど紹介した「_Layout.cshtml」を使用するかどうかということです。これはチェックを入れておきます。その下の空欄はレイアウトページに使用するファイルを指定するものですが、そのさらに下にある但し書きの条件にまさに合致するケースになりますので、ここは空欄にしておきます。
    124126
    125 「追加」ボタンを押すと、 View/Home フォルダの下に、 Hello.cshtml というファイルが追加され、そのファイルがエディタで開いた状態になります。コードは以下の様な内容になっているはずです。
     127「追加」ボタンを押すと、 !View/Home フォルダの下に、 Hello.cshtml というファイルが追加され、そのファイルがエディタで開いた状態になります。コードは以下の様な内容になっているはずです。
    126128
    127129{{{#!text/html
    … …  
    133135}}}
    134136
    135 "@{" ～ "}" の中には、サーバーサイドで実行する C# のコードを書きます。ここでは、変数 ViewBag が持つオブジェクトの Title フィールドに、文字列 "Hello" を代入しています。実はこの ViewBag.Title は、先に見た共通レイアウトファイル「_Layout.cshtml」の中で参照していて、そのままページのタイトルとして使用されています。
     137`@{` ～ `}` の中には、サーバーサイドで実行する C# のコードを書きます。ここでは、変数 `ViewBag` が持つオブジェクトの `Title` フィールドに、文字列 `"Hello"` を代入しています。実はこの `ViewBag.Title` は、先に見た共通レイアウトファイル「_Layout.cshtml」の中で参照していて、そのままページのタイトルとして使用されています。
    136138
    137139つまり、この部分を、
    … …  
    151153}}}
    152154
    153 としてしまえば、ページにもそのまま「Hello, World」が表示される、というわけです。
     155としてしまえば、ページにもそのまま「Hello, World」が表示される、ということになります。
    154156
    155157==== Controller メソッドの追加 ====
    … …  
    157159次の段階に進みましょう。ページを追加する際、そのページに相当する View を追加したら、その View に対応する Controller メソッドを追加して上げる必要があります。 Controller は何をするところかというと、ページに表示すべき情報を View が扱いやすいように直したり、ユーザー操作によって追加または変化する情報 (フォーム入力とかクッキーとか) に応じて何らかの処理を行ったり、といったようなことを行います。
    158160
    159 今回、 View は Home フォルダの下に Hello という名前で追加したので、対応する Controller メソッドは !HomeController クラスの Hello メソッドということになります。まず、 !HomeController クラスが書かれたファイルを開きましょう。ソリューションエクスプローラーのツリーにて、「Controllers」フォルダを展開すると、 HomeController.cs ファイルが存在するので、このファイルをダブルクリックしてエディターにて開きます。
     161今回、 View は Home フォルダの下に Hello という名前で追加したので、対応する Controller メソッドは `HomeController` クラスの `Hello` メソッドということになります。まず、 `HomeController` クラスが書かれたファイルを開きましょう。ソリューションエクスプローラーのツリーにて、「Controllers」フォルダを展開すると、 !HomeController.cs ファイルが存在するので、このファイルをダブルクリックしてエディターにて開きます。
    160162
    161163[[Image(fig-home-controller.PNG, align=center)]]
    … …  
    202204}}}
    203205
    204 という行を加えると (今回は加えなくてもいいですよ)、文字列を少しずつ繋いで生成していくためのライブラリクラス [http://msdn.microsoft.com/ja-jp/library/system.text.stringbuilder%28v=vs.110%29.aspx System.Text.StringBuilder] を、単に "!StringBuilder" と書くだけで使用できるようになります。次に "namespace" で始まる行は、こういう名前の名前空間を作るよ、という宣言です。つまり、この後定義されている !HomeController クラスの本当の名前は、ここで宣言した名前空間の名前を手前につないだ "!HelloWorld.Controllers.!HomeController" ですよ、ということになるわけです。
     206という行を加えると (今回は加えなくてもいいですよ)、文字列を少しずつ繋いで生成していくためのライブラリクラス [http://msdn.microsoft.com/ja-jp/library/system.text.stringbuilder%28v=vs.110%29.aspx `System.Text.StringBuilder`] を、単に `StringBuilder` と書くだけで使用できるようになります。
     207
     208次に `namespace` で始まる行は、こういう名前の名前空間を作るよ、という宣言です。つまり、この後定義されている `HomeController` クラスの本当の名前は、ここで宣言した名前空間の名前を手前につないだ `HelloWorld.Controllers.HomeController` ですよ、ということになるわけです。
    205209
    206210名前空間という言葉がここまでに何回か出てきましたが、この概念の存在意義については自分で調べてみましょう。大雑把に言ってしまえば、要するに名前の衝突を防ぐための仕組みであるということになります。
    207211
    208 "public class" で始まる行が、ここで作ろうとしているクラスの宣言です。 "!HomeController" がこのクラスの名前で、コロン ":" を挟んで後ろにある "Controller" というのは、このクラスが継承する基底クラスになります。これはつまり、 !HomeController クラスは、 Controller クラスが持つ機能をそのまま継承して実装されるよ、というような意味合いになります[[FootNote(この Controller というクラスがどんな機能を提供してくれているのかについては、 MSDN Library では[http://msdn.microsoft.com/ja-jp/library/system.web.mvc.controller%28v=vs.118%29.aspx この辺]に記述されています。)]]。
    209 
    210 "public !ActionResult" で始まる行は、このクラスに所属するメソッドです。 ASP.NET MVC の Controller クラスでは、この中に実装されるメソッドが、ユーザーが Web サイトにアクセスした際に実際に呼ばれる処理そのものとなります。とりあえず、先ほど追加した Hello ビューに対応する Controller メソッドを追加したいので、ここにある "Index" メソッドの実装を参考に、以下のように "Hello" メソッドを追加してみてください。
     212`public class` で始まる行が、ここで作ろうとしているクラスの宣言です。 `HomeController` がこのクラスの名前で、コロン `:` を挟んで後ろにある `Controller` というのは、このクラスが継承する基底クラスになります。これはつまり、 `HomeController` クラスは、 `Controller` クラスが持つ機能をそのまま継承して実装されるよ、というような意味合いになります[[FootNote(この `Controller` というクラスがどんな機能を提供してくれているのかについては、 MSDN Library では[http://msdn.microsoft.com/ja-jp/library/system.web.mvc.controller%28v=vs.118%29.aspx この辺]に記述されています。)]]。
     213
     214`public ActionResult` で始まる行は、このクラスに所属するメソッドです。 ASP.NET MVC の Controller クラスでは、この中に実装されるメソッドが、ユーザーが Web サイトにアクセスした際に実際に呼ばれる処理そのものとなります。とりあえず、先ほど追加した Hello ビューに対応する Controller メソッドを追加したいので、ここにある `Index` メソッドの実装を参考に、以下のように `Hello` メソッドを追加してみてください。
    211215
    212216{{{#!cs
    … …  
    270274 * View ファイル: (View のルートディレクトリ)\__Home__\__Hello__.cshtml
    271275   * Visual Basic プロジェクトの場合、拡張子は .vbhtml
    272  * Controller メソッド: __Home__Controller クラスの __Hello__ メソッド (__Home__Controller.__Hello__)
     276 * Controller メソッド: __`Home`__`Controller` クラスの __`Hello`__ メソッド (__`Home`__`Controller.`__`Hello`__)
    273277
    274278もし、このどちらかが存在しない場合、実行時にサーバー内にてエラーが発生し、そのエラーの内容がブラウザに伝えられます。特に、上図で示したような「リソースが見つかりませんでした」というエラーは、 Controller メソッドが存在しない (つまり、名前が間違っている) 場合に発生します (Controller メソッドは見つけたけど View が見つからない場合には、もうちょっと違う内容のサーバーエラーになります)。 !HomeController.cs ファイルを開き、追加したメソッドの名前を確認し、修正しましょう。