Changes between Version 9 and Version 10 of HowTo/VisualStudioWeb2013Tutorial


Ignore:
Timestamp:
Aug 31, 2014, 6:31:54 PM (12 years ago)
Author:
村山 俊之
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • HowTo/VisualStudioWeb2013Tutorial

    v9 v10  
    6060次の画面に進みます。ここではテンプレートの選択や、単体テストの設定、認証の設定などを行います。
    6161
    62 まず、「テンプレートの選択」にて、「MVC」を選択します。 MVC とは、プログラムを Model, View, Controller の 3つに分離した構造のことをいいます。
     62まず、「テンプレートの選択」にて、「MVC」を選択します。 MVC とは、プログラムをモデル (Model)、ビュー (View)、コントローラ (Controller) の 3つに分離した構造のことをいいます。
    6363
    6464ちなみに、「Web Forms」というのがありますが、古くから ASP.NET を使って Web アプリ開発を行っている技術者であればこちらのほうが馴染み深いでしょう。 Web 部品を WYSIWYG な専用エディタでペタペタ貼り付けて画面作りができるお手軽さは良いのですが、昨今トレンドな Web アプリの開発には向かない要因が色々とあって、 Visual Studio を使わない Web アプリ開発技術者の多くに敬遠される要因にもなっていました。
    … …  
    104104とりあえず共通レイアウトはそのまま放っておいて、まずは「Hello, World」を表示するためのページをこのサイトに追加してみましょう。それには以下の 2つの操作が必要です。
    105105
    106  1. View のファイルを追加する
    107  1. 該当する Controller メソッドを追加する
    108 
    109 ==== View の追加 ====
    110 
    111 まず、View にファイルを追加します。ソリューションエクスプローラーにて、ツリーの「View」→「Home」フォルダを右クリックしてみてください。
     106 1. ビューのファイルを追加する
     107 1. 該当するコントローラメソッドを追加する
     108
     109==== ビューの追加 ====
     110
     111まず、ビューのファイルを追加します。ソリューションエクスプローラーにて、ツリーの「View」→「Home」フォルダを右クリックしてみてください。
    112112
    113113[[Image(fig-append-view-01.PNG, 640px, align=center)]]
    … …  
    155155としてしまえば、ページにもそのまま「Hello, World」が表示される、ということになります。
    156156
    157 ==== Controller メソッドの追加 ====
    158 
    159 次の段階に進みましょう。ページを追加する際、そのページに相当する View を追加したら、その View に対応する Controller メソッドを追加して上げる必要があります。 Controller は何をするところかというと、ページに表示すべき情報を View が扱いやすいように直したり、ユーザー操作によって追加または変化する情報 (フォーム入力とかクッキーとか) に応じて何らかの処理を行ったり、といったようなことを行います。
    160 
    161 今回、 View は Home フォルダの下に Hello という名前で追加したので、対応する Controller メソッドは `HomeController` クラスの `Hello` メソッドということになります。まず、 `HomeController` クラスが書かれたファイルを開きましょう。ソリューションエクスプローラーのツリーにて、「Controllers」フォルダを展開すると、 !HomeController.cs ファイルが存在するので、このファイルをダブルクリックしてエディターにて開きます。
     157==== コントローラメソッドの追加 ====
     158
     159次の段階に進みましょう。ページを追加する際、そのページに相当するビューを追加したら、そのビューに対応するコントローラメソッドを追加して上げる必要があります。コントローラは何をするところかというと、ページに表示すべき情報をビューが扱いやすいように直したり、ユーザー操作によって追加または変化する情報 (フォーム入力とかクッキーとか) に応じて何らかの処理を行ったり、といったようなことを行います。
     160
     161今回、ビューは Home フォルダの下に Hello という名前で追加したので、対応するコントローラメソッドは `HomeController` クラスの `Hello` メソッドということになります。まず、 `HomeController` クラスが書かれたファイルを開きましょう。ソリューションエクスプローラーのツリーにて、「Controllers」フォルダを展開すると、 !HomeController.cs ファイルが存在するので、このファイルをダブルクリックしてエディターにて開きます。
    162162
    163163[[Image(fig-home-controller.PNG, align=center)]]
    … …  
    212212`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 この辺]に記述されています。)]]。
    213213
    214 `public ActionResult` で始まる行は、このクラスに所属するメソッドです。 ASP.NET MVC の Controller クラスでは、この中に実装されるメソッドが、ユーザーが Web サイトにアクセスした際に実際に呼ばれる処理そのものとなります。とりあえず、先ほど追加した Hello ビューに対応する Controller メソッドを追加したいので、ここにある `Index` メソッドの実装を参考に、以下のように `Hello` メソッドを追加してみてください。
     214`public ActionResult` で始まる行は、このクラスに所属するメソッドです。 ASP.NET MVC のコントローラクラスでは、この中に実装されるメソッドが、ユーザーが Web サイトにアクセスした際に実際に呼ばれる処理そのものとなります。とりあえず、先ほど追加した Hello ビューに対応するコントローラメソッドを追加したいので、ここにある `Index` メソッドの実装を参考に、以下のように `Hello` メソッドを追加してみてください。
    215215
    216216{{{#!cs
    … …  
    246246[[Image(fig-build-error.PNG, align=center)]]
    247247
    248 だとすれば、 Controller メソッドの記述で文法上のエラーなどが発生している可能性が高いです。「いいえ」をクリックしてダイアログを閉じ、 !HomeController.cs ファイルを開いてエラーのある箇所を修正しましょう。
     248だとすれば、コントローラメソッドの記述で文法上のエラーなどが発生している可能性が高いです。「いいえ」をクリックしてダイアログを閉じ、 !HomeController.cs ファイルを開いてエラーのある箇所を修正しましょう。
    249249
    250250Visual Studio の画面下にエラー一覧があり、そこにエラーの内容がリストアップされているかもしれません。
    … …  
    262262[[Image(fig-404.PNG, 640px, align=center)]]
    263263
    264 …のであれば、これは View の名前と Controller メソッドの名前が一致していないのが原因です。
    265 
    266 ASP.NET MVC では、指定された URL の名前に相当する名前の View と Controller が選択されることになっています。ブラウザの URL 欄に表示されている URL を確認してみましょう。以下の様な URL になっているはずです。
     264…のであれば、これはビューの名前とコントローラメソッドの名前が一致していないのが原因です。
     265
     266ASP.NET MVC では、指定された URL の名前に相当する名前のビューとコントローラが選択されることになっています。ブラウザの URL 欄に表示されている URL を確認してみましょう。以下の様な URL になっているはずです。
    267267
    268268{{{
    … …  
    270270}}}
    271271
    272 ここで、 Web サーバーのルートから見て、参照しようとしているリソースのパスは「!Home/Hello」となりますよね? このとき、 Web サーバーが呼びだそうとする View ファイルと Controller メソッドの名前は、以下の通りとなるのです。
    273 
    274  * View ファイル: (View のルートディレクトリ)\__Home__\__Hello__.cshtml
     272ここで、 Web サーバーのルートから見て、参照しようとしているリソースのパスは「!Home/Hello」となりますよね? このとき、 Web サーバーが呼びだそうとするビューファイルとコントローラメソッドの名前は、以下の通りとなるのです。
     273
     274 * ビューファイル: (ビューのルートディレクトリ)\__Home__\__Hello__.cshtml
    275275   * Visual Basic プロジェクトの場合、拡張子は .vbhtml
    276  * Controller メソッド: __`Home`__`Controller` クラスの __`Hello`__ メソッド (__`Home`__`Controller.`__`Hello`__)
    277 
    278 もし、このどちらかが存在しない場合、実行時にサーバー内にてエラーが発生し、そのエラーの内容がブラウザに伝えられます。特に、上図で示したような「リソースが見つかりませんでした」というエラーは、 Controller メソッドが存在しない (つまり、名前が間違っている) 場合に発生します (Controller メソッドは見つけたけど View が見つからない場合には、もうちょっと違う内容のサーバーエラーになります)。 !HomeController.cs ファイルを開き、追加したメソッドの名前を確認し、修正しましょう。
    279 
     276 * コントローラメソッド: __`Home`__`Controller` クラスの __`Hello`__ メソッド (__`Home`__`Controller.`__`Hello`__)
     277
     278もし、このどちらかが存在しない場合、実行時にサーバー内にてエラーが発生し、そのエラーの内容がブラウザに伝えられます。特に、上図で示したような「リソースが見つかりませんでした」というエラーは、コントローラメソッドが存在しない (つまり、名前が間違っている) 場合に発生します (コントローラメソッドは見つけたけどビューファイルが見つからない場合には、もうちょっと違う内容のサーバーエラーになります)。 !HomeController.cs ファイルを開き、追加したメソッドの名前を確認し、修正しましょう。
     279
     280=== 追加したページヘのリンクを張る ===
     281
     282さて、色々と試行錯誤していると気づいてしまっているかもしれませんが、 Visual Studio のエディタで Hello.cshtml ファイルを開いている時に Ctrl + F5 キーを押した場合は Hello, World のページが表示されますが、例えば !HomeController.cs ファイルを開いている時に Ctrl + F5 キーを押した場合、一番最初に実行した時のあのホーム画面
     283
     284[[Image(fig-default-index.PNG, 640px, align=center)]]
     285
     286が表示されてしまいますよね。
     287
     288Hello, World のページを表示してみたいのに、実行するたびにいちいち Visual Studio のエディタで Hello.cshtml ファイルを表示させてから Ctrl + F5 とか、なんだか面倒くさいですよね。どのみちこのサイトにアクセスした人が Hello, World ページを閲覧するために URL を教えてもらって直打ち…というわけにも行かないでしょうから、ページのどこかにリンクボタンを置いて、 Hello, World ページヘのリンクを張ってあげる必要があります。
     289
     290HTML では、リンクボタンは `<a>` タグで設置できますよね。 ASP.NET MVC でも、この `<a>` タグを使って任意のページヘのリンクを設置することができます。 Hello, World のページの (ホスト名を含まない) URL は `/Home/Hello` ですから、どこかのビュー (Home\Index.cshtml など) に、以下の行を書き加えてあげれば、それが Hello, World ページヘのリンクボタンになるはずです。
     291
     292{{{#!text/html
     293<p>
     294    <a href="/Home/Hello">Hello, World のページヘ</a>
     295</p>
     296}}}
     297
     298実際これでもいいのですが…、実は ASP.NET MVC 的にはもっと推奨された書き方が用意されています。ブラウザへの出力結果は上記と同じになりますが、以下のように記述します。
     299
     300{{{#!text/html
     301<p>
     302    @Html.ActionLink("Hello, World のページヘ", "Hello", "Home")
     303</p>
     304}}}
     305
     3063つ目の引数 `"Home"` は、同じ Home ディレクトリ内のビューファイルにて記述するのであれば、省略することも可能です。
     307
     308順を追って解説しましょう…。まず、 `@` で始まる記述箇所は、 C# のコードを記述することを表すものです。 `Html` はここで使えるオブジェクトの名前で、 HTML 関連の処理を行うメソッドが色々と用意されているというものです。このオブジェクトの `ActionLink` メソッドを呼び、その結果をこの位置に出力する、という意味になります。
     309
     310`ActionLink` メソッドの公式の MSDN Library ドキュメントは[http://msdn.microsoft.com/ja-jp/library/system.web.mvc.html.linkextensions.actionlink(v=vs.118).aspx ここにあります]。実はもっといろんな引数の指定方法があるのですが (同じ名前の関数に複数の引数指定のバリエーションを持たせることを関数の'''オーバーロード'''と言います)、とりあえず、
     311
     312 * 1つ目の引数に、リンクボタンとして表示する文字列を指定する。
     313 * 2つ目の引数と 3つ目の引数で、リンク先の URL が決定する。
     314   * 同じディレクトリにあるページヘリンクを張る場合、 3つ目の引数は省略可能。
     315
     316なお、この時指定する 2つ目の引数と 3つ目の引数は、それぞれ'''アクション名'''と'''コントローラ名'''と呼ばれています。実際の URL も、
     317
     318{{{
     319http://ホスト名/コントローラ名/アクション名
     320}}}
     321
     322と考えることができます。
     323
     324説明が長くなってしまいました。それでは実際にリンクを張ってみましょう。まず、ビューファイル View\Home\Index.cshtml を開きます。
     325
     326[[Image(fig-viewfile-home-index.PNG, align=center)]]
     327
     328…なんだか色々と書かれていますが、別にいらない情報でしょうから、 HTML で書かれている部分は全部消してしまいましょう。ファイルの内容を以下のように書き換えてしまってください。
     329
     330{{{#!text/html
     331@{
     332    ViewBag.Title = "Home Page";
     333}
     334
     335<p>
     336    @Html.ActionLink("Hello, World のページヘ", "Hello", "Home")
     337</p>
     338}}}
     339
     340ここまで書いたら、 Ctrl + F5 を押して実行してみましょう。下図のような画面が表示されましたか?
     341
     342[[Image(fig-index-with-linkbutton.PNG, 640px, align=center)]]
     343
     344「Hello, World のページヘ」と書かれたリンクボタンをクリックしてみてください。これで、 Hello, World のページヘ遷移できたならば、成功です。