ASP.NET MVC-ビュー

ASP.NET MVCアプリケーションでは、ページのようなものはなく、URLでパスを指定するときにページに直接対応するものも含まれません。 ASP.NET MVCアプリケーションのページに最も近いものは*ビュー*と呼ばれます。

ASP.NET MVCアプリケーションでは、すべての着信ブラウザー要求はコントローラーによって処理され、これらの要求はコントローラーアクションにマップされます。コントローラーアクションはビューを返すか、別のコントローラーアクションへのリダイレクトなど、他のタイプのアクションを実行する場合があります。

新しいASP.NET MVCプロジェクトを作成して、Viewの簡単な例を見てみましょう。

ステップ1 *-Visual Studioを開き、[ファイル]→[新規]→[プロジェクト]メニューオプションをクリックします。

新しいプロジェクトダイアログが開きます。

Visual Studio

ステップ2 *-左ペインから、テンプレート→Visual C＃→Webを選択します。

ステップ3 *-中央のペインで、ASP.NET Webアプリケーションを選択します。

ステップ4 *-[名前]フィールドにプロジェクト名「MVCViewDemo」を入力し、[OK]をクリックして続行します。 ASP.NETプロジェクトの初期コンテンツを設定するよう求める次のダイアログが表示されます。

MVCViewDemo

ステップ5 *-簡単にするために、[空にする]オプションを選択し、[フォルダーとコア参照を追加する]セクションの[MVC]チェックボックスをオンにして[OK]をクリックします。

最小限の定義済みコンテンツで基本的なMVCプロジェクトを作成します。ここでコントローラーを追加する必要があります。

ステップ6 *-ソリューションエクスプローラーでコントローラーフォルダーを右クリックし、[追加]→[コントローラー]を選択します。

[足場の追加]ダイアログが表示されます。

コントローラーフォルダー

ステップ7 *-MVC 5 Controller – Emptyオプションを選択し、「追加」ボタンをクリックします。

[コントローラーの追加]ダイアログが表示されます。

コントローラーの追加ダイアログ

ステップ8 *-名前をHomeControllerに設定し、[追加]ボタンをクリックします。

Controllersフォルダーに新しいC＃ファイル「HomeController.cs」が表示され、Visual Studioでも編集できるようになっています。

次のコードに示すように、2つのアクションメソッドを含むHomeController.csファイルを更新しましょう。

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCViewDemo.Controllers {
   public class HomeController : Controller{
     //GET: Home
      public ActionResult Index(){
         return View();
      }

      public string Mycontroller(){
         return "Hi, I am a controller";
      }
   }
}

ステップ9 *-このアプリケーションを実行し、ブラウザのURLに/Home/MyControllerを追加してEnterキーを押します。次の出力が表示されます。

MyController

MyControllerアクションは単に文字列を返すため、アクションからビューを返すには、最初にビューを追加する必要があります。

ステップ10 *-ビューを追加する前に、デフォルトビューを返す別のアクションを追加しましょう。

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCViewDemo.Controllers {
   public class HomeController : Controller{
     //GET: Home
      public ActionResult Index(){
         return View();
      }

      public string Mycontroller(){
         return "Hi, I am a controller";
      }

      public ActionResult MyView(){
         return View();
      }
   }
}

ステップ11 *-このアプリケーションを実行し、ブラウザーのURLに/Home/MyViewを追加してEnterキーを押します。次の出力が表示されます。

MyViewビュー

ここにエラーがあることがわかります。このエラーは実際には非常にわかりやすく、MyViewビューが見つからないことを示しています。

ステップ12 *-ビューを追加するには、MyViewアクション内を右クリックし、[ビューの追加]を選択します。

MyViewアクション

[ビューの追加]ダイアログが表示され、デフォルト名が追加されます。

ビューの追加ダイアログ

ステップ13 *-[レイアウトページを使用する]チェックボックスをオフにして、[追加]ボタンをクリックします。

ビュー内にデフォルトのコードができました。

レイアウトページを使用

ステップ14 *-次のコードを使用して、このビューにテキストを追加します。

@{
   Layout = null;
}

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width"/>
      <title>MyView</title>
   </head>

   <body>
      <div>
         Hi, I am a view
      </div>
   </body>

</html>

ステップ15 *-このアプリケーションを実行し、ブラウザのURLに/Home/MyViewを追加します。 Enterキーを押すと、次の出力が表示されます。

私はビューです

これで、ビューからテキストを表示できます。

Asp.net-mvc-views

ASP.NET MVC-ビュー