Mvc-framework-quick-guide

提供：Dev Guides
移動先:案内、検索

MVCフレームワーク-はじめに

  • Model-View-Controller（MVC）は、アプリケーションを3つの主要な論理コンポーネント（ *model 、ビュー、コントローラー）に分離するアーキテクチャパターンです。 これらの各コンポーネントは、アプリケーションの特定の開発面を処理するために構築されています。 MVCは、スケーラブルで拡張可能なプロジェクトを作成するために最も頻繁に使用される業界標準のWeb開発フレームワークの1つです。

MVCコンポーネント

MVCのコンポーネントは次のとおりです-

モデルビューコントローラー

モデル

モデルコンポーネントは、ユーザーが操作するすべてのデータ関連ロジックに対応します。 これは、ViewコンポーネントとControllerコンポーネント間で転送されるデータ、またはその他のビジネスロジック関連データを表すことができます。 たとえば、Customerオブジェクトはデータベースから顧客情報を取得し、それを操作してデータベースにデータを更新するか、それを使用してデータをレンダリングします。

View

Viewコンポーネントは、アプリケーションのすべてのUIロジックに使用されます。 たとえば、Customerビューには、テキストボックス、ドロップダウンなど、すべてのUIコンポーネントが含まれます。 最終ユーザーが操作するもの。

コントローラ

コントローラーは、モデルコンポーネントとビューコンポーネント間のインターフェイスとして機能し、すべてのビジネスロジックと受信リクエストを処理し、モデルコンポーネントを使用してデータを操作し、ビューと対話して最終出力をレンダリングします。 たとえば、顧客コントローラーは、顧客ビューからのすべての対話と入力を処理し、顧客モデルを使用してデータベースを更新します。 同じコントローラーを使用して、顧客データを表示します。

ASP.NET MVC

ASP.NETは、Webページ、Webフォーム、MVC（Model View Controller）の3つの主要な開発モデルをサポートしています。 ASP.NET MVCフレームワークは、マスターページ、認証などの既存のASP.NET機能と統合された、軽量でテスト可能なプレゼンテーションフレームワークです。 .NET内では、このフレームワークはSystem.Web.Mvcアセンブリで定義されています。 MVCフレームワークの最新バージョンは5.0です。 Visual Studioを使用して、Visual Studioでテンプレートとして追加できるASP.NET MVCアプリケーションを作成します。

ASP.NET MVCの機能

ASP.NET MVCは次の機能を提供します-

  • 複雑だが軽量なアプリケーションの開発に最適。
  • 拡張およびプラグ可能なフレームワークを提供します。これは、簡単に交換およびカスタマイズできます。 たとえば、組み込みのRazorまたはASPXビューエンジンを使用したくない場合は、他のサードパーティビューエンジンを使用したり、既存のビューエンジンをカスタマイズすることもできます。
  • モデル、ビュー、コントローラーの各コンポーネントに論理的に分割することにより、アプリケーションのコンポーネントベースの設計を活用します。 これにより、開発者は大規模プロジェクトの複雑さを管理し、個々のコンポーネントで作業することができます。
  • MVC構造は、すべてのコンポーネントをインターフェイスベースで設計し、モックオブジェクトを使用してテストできるため、アプリケーションのテスト駆動開発とテスト容易性を強化します。 したがって、ASP.NET MVCフレームワークは、Web開発者の大規模なチームを持つプロジェクトに最適です。
  • 承認と認証、マスターページ、データバインディング、ユーザーコントロール、メンバーシップ、ASP.NETルーティングなど、既存の膨大なASP.NET機能をすべてサポートします。
  • ビューステート（ASP.NETに存在する）の概念を使用しません。 これは、軽量で開発者が完全に制御できるアプリケーションの構築に役立ちます。

したがって、MVCフレームワークはASP.NET上に構築された主要なフレームワークと見なすことができ、コンポーネントベースの開発とテストに焦点を当てた多数の追加機能を提供します。

MVCフレームワーク-アーキテクチャ

最後の章では、MVCフレームワークの高レベルのアーキテクチャフローについて学習しました。 ここで、クライアントから特定の要求があるときにMVCアプリケーションの実行がどのように行われるかを見てみましょう。 次の図は、フローを示しています。

MVCフロー図

MVC Flow

フローステップ

  • ステップ1 *-クライアントブラウザーはMVCアプリケーションにリクエストを送信します。
  • ステップ2 *-Global.ascxはこのリクエストを受信し、RouteTable、RouteData、UrlRoutingModuleおよびMvcRouteHandlerオブジェクトを使用して、着信リクエストのURLに基​​づいてルーティングを実行します。
  • ステップ3 *-このルーティング操作は適切なコントローラーを呼び出し、IControllerFactoryオブジェクトとMvcHandlerオブジェクトのExecuteメソッドを使用して実行します。
  • ステップ4 *-コントローラーはモデルを使用してデータを処理し、ControllerActionInvokerオブジェクトを使用して適切なメソッドを呼び出します
  • ステップ5 *-処理されたモデルはビューに渡され、ビューが最終出力をレンダリングします。

MVCフレームワーク-ASP.NETフォーム

MVCとASP.NET Webフォームは、アプリケーションの要件やその他の要因に応じて、相互に関連するが開発の異なるモデルです。 大まかに言うと、MVCは、懸念とテスト容易性の分離を念頭に置いて設計された、高度で洗練されたWebアプリケーションフレームワークであると考えることができます。 両方のフレームワークには、特定の要件に応じて長所と短所があります。 この概念は、次の図を使用して視覚化することができます-

MVCおよびASP.NETの図

MVCおよびASPネットスタック

比較表

ASPとMVCの比較

MVCフレームワーク-最初のアプリケーション

ビューとコントローラーを使用して、最初のMVCアプリケーションを作成してみましょう。 基本的なMVCアプリケーションがどのように機能するかについての小さな実地体験ができたら、次の章ですべての個々のコンポーネントと概念を学習します。

最初のMVCアプリケーションを作成する

ステップ1 *-Visual Studioを起動し、[ファイル]→[新規]→[プロジェクト]を選択します。 Web→ASP.NET MVC Web Applicationを選択し、このプロジェクトに *FirstMVCApplicatio という名前を付けます。 場所を C：\ MVC として選択します。 OKをクリックしてください。

Create MVC Project Step 1 Create MVC Project Step 2

  • ステップ2 *-これにより、[プロジェクトテンプレート]オプションが開きます。 空のテンプレートを選択し、Razorとしてエンジンを表示します。 OKをクリックしてください。

MVCテンプレートの選択

これで、Visual Studioは次のスクリーンショットに示すように、最初のMVCプロジェクトを作成します。

MVCプロジェクトの構造

  • ステップ3 *-アプリケーションで最初のコントローラーを作成します。 コントローラーは、アクションメソッドと呼ばれる複数のパブリックメソッドを含む単純なC＃クラスです。 新しいコントローラーを追加するには、プロジェクトのControllersフォルダーを右クリックし、追加→コントローラーを選択します。 ControllerにHomeControllerという名前を付け、[追加]をクリックします。

MVCコントローラーの追加 ホームコントローラーの作成

これにより、次のデフォルトコードでControllersフォルダーの下に HomeController.cs クラスファイルが作成されます。 

using System;
using System.Web.Mvc;

namespace FirstMVCApplication.Controllers {

   public class HomeController : Controller {

      public ViewResult Index() {
         return View();
      }
   }
}

上記のコードは、基本的にHomeController内でパブリックメソッドIndexを定義し、ViewResultオブジェクトを返します。 次の手順では、ViewResultオブジェクトを使用してビューを返す方法を学習します。

  • ステップ4 *-次に、新しいビューをHome Controllerに追加します。 新しいビューを追加するには、ビューフォルダを右クリックして、追加→ビューをクリックします。

MVCビューの追加

  • ステップ5 *-新しいビューにインデックスとして、ビューエンジンにRazor（SCHTML）として名前を付けます。 追加をクリックします。

インデックスビューの作成

これにより、Views/Homeフォルダ内に次のコードを含む新しい cshtml ファイルが追加されます- 

@{
   Layout = null;
}

<html>
   <head>
      <meta name = "viewport" content = "width = device-width"/>
      <title>Index</title>
   </head>

   <body>
      <div>

      </div>
   </body>
</html>
  • ステップ6 *-上記のビューのボディコンテンツを次のコードで変更します-
<body>
   <div>
      Welcome to My First MVC Application (<b>From Index View</b>)
   </div>
</body>
  • ステップ7 *-アプリケーションを実行します。 これにより、ブラウザに次の出力が表示されます。 この出力は、Viewファイルのコンテンツに基づいてレンダリングされます。 アプリケーションは最初にControllerを呼び出し、ControllerはこのViewを呼び出して出力を生成します。

mvc_welcome_message

ステップ7で受け取った出力は、Viewファイルのコンテンツに基づいており、コントローラーとの対話はありませんでした。 次にステップを進めて、ViewとControllerの対話を使用して、現在の時刻でWelcomeメッセージを表示する小さな例を作成します。

  • ステップ8 *-MVCはViewBagオブジェクトを使用して、コントローラーとビューの間でデータを渡します。 HomeController.csを開き、Index関数を次のコードに編集します。
public ViewResult Index() {
   int hour = DateTime.Now.Hour;

   ViewBag.Greeting =
   hour < 12
   ? "Good Morning. Time is" +  DateTime.Now.ToShortTimeString()
   : "Good Afternoon. Time is " + DateTime.Now.ToShortTimeString();

   return View();
}

上記のコードでは、ViewBagオブジェクトのGreeting属性の値を設定します。 コードは現在の時間をチェックし、それに応じてreturn View（）ステートメントを使用しておはよう/午後のメッセージを返します。 ここで、GreetingはViewBagオブジェクトで使用した属性の例にすぎないことに注意してください。 Greetingの代わりに他の属性名を使用できます。

  • ステップ9 *-Index.cshtmlを開き、本文セクションに次のコードをコピーします。
<body>
   <div>
      @ViewBag.Greeting (<b>From Index View</b>)
   </div>
</body>

上記のコードでは、＆commat;を使用してViewBagオブジェクトのGreeting属性の値にアクセスしています。 （コントローラーから設定されます）。

  • ステップ10 *-アプリケーションを再度実行します。 今回は、コードで最初にコントローラーを実行し、ViewBagを設定してから、Viewコードを使用してレンダリングします。 出力は次のようになります。

MVCの例

MVCフレームワーク-フォルダー

サンプルMVCアプリケーションを既に作成したので、MVCプロジェクトのフォルダー構造を理解しましょう。 これを学習するために、新しいMVCプロジェクトを作成します。

Visual Studioで、ファイル→新規→プロジェクトを開き、ASP.NET MVCアプリケーションを選択します。 MVCFolderDemo という名前を付けます。

MVCフォルダーデモプロジェクトの作成

OKをクリックしてください。 次のウィンドウで、プロジェクトテンプレートとして[インターネットアプリケーション]を選択し、[OK]をクリックします。

MVCインターネットアプリケーションの作成

これにより、次のスクリーンショットに示すサンプルMVCアプリケーションが作成されます。

MVCフォルダープロジェクト構造

注-このプロジェクトに存在するファイルは、選択したデフォルトのテンプレートから出ています。 これらは、バージョンごとにわずかに変更される場合があります。

Controllersフォルダー

このフォルダーには、すべてのコントローラークラスが含まれます。 MVCでは、すべてのコントローラーファイルの名前がControllerで終わる必要があります。

この例では、ControllersフォルダーにAccountControllerとHomeControllerの2つのクラスファイルが含まれています。

MVCコントローラー

モデルフォルダ

このフォルダーには、アプリケーションデータを処理するために使用されるすべてのモデルクラスが含まれます。

この例では、ModelsフォルダーにAccountModelsが含まれています。 このファイルのコードを開いて見て、この例でアカウントを管理するためのデータモデルがどのように作成されているかを確認できます。

MVCモデル

ビューフォルダ

このフォルダーには、アプリケーションの表示とユーザーインターフェイスに関連するHTMLファイルが格納されます。 コントローラーごとに1つのフォルダーが含まれています。

この例では、ビューの下に3つのサブフォルダー、つまり、そのビュー領域に固有のhtmlファイルを含むAccount、HomeおよびSharedが表示されます。

MVCビュー

App_Startフォルダー

このフォルダーには、アプリケーションのロード中に必要なすべてのファイルが含まれています。

たとえば、RouteConfigファイルを使用して、着信URLを正しいコントローラーとアクションにルーティングします。

MVCアプリ開始フォルダー

コンテンツフォルダ

このフォルダーには、CSS、画像、アイコンなどのすべての静的ファイルが含まれます。

このフォルダー内のSite.cssファイルは、アプリケーションが適用するデフォルトのスタイルです。

MVCコンテンツフォルダー

スクリプトフォルダー

このフォルダーには、プロジェクト内のすべてのJSファイルが格納されます。 デフォルトでは、Visual StudioはMVC、jQuery、およびその他の標準JSライブラリを追加します。

MVCスクリプトフォルダー

MVCフレームワーク-モデル

コンポーネント「モデル」は、アプリケーションのデータを管理します。 ビューからの要求に応答し、コントローラーからの指示にも応答して、それ自体を更新します。

モデルクラスは、手動で作成するか、データベースエンティティから生成できます。 これからの章では、モデルを手動で作成するための多くの例を見ていきます。 したがって、この章では、他のオプション、つまり データベースから生成することにより、両方の方法を実際に体験できます。

データベースエンティティを作成する

SQL Serverに接続し、新しいデータベースを作成します。

SQLサーバーの接続

次のクエリを実行して、新しいテーブルを作成します。 

CREATE TABLE [dbo].[Student](
   [StudentID]      INT           IDENTITY (1,1) NOT NULL,
   [LastName]       NVARCHAR (50) NULL,
   [FirstName]      NVARCHAR (50) NULL,
   [EnrollmentDate] DATETIME      NULL,
   PRIMARY KEY CLUSTERED ([StudentID] ASC)
)

CREATE TABLE [dbo].[Course](
   [CourseID] INT           IDENTITY (1,1) NOT NULL,
   [Title]    NVARCHAR (50) NULL,
   [Credits]  INT           NULL,
   PRIMARY KEY CLUSTERED ([CourseID] ASC)
)

CREATE TABLE [dbo].[Enrollment](
   [EnrollmentID] INT IDENTITY (1,1) NOT NULL,
   [Grade]        DECIMAL(3,2) NULL,
   [CourseID]     INT NOT NULL,
   [StudentID]    INT NOT NULL,
   PRIMARY KEY CLUSTERED ([EnrollmentID] ASC),
      CONSTRAINT [FK_dbo.Enrollment_dbo.Course_CourseID] FOREIGN KEY ([CourseID])
   REFERENCES [dbo].[Course]([CourseID]) ON DELETE CASCADE,
      CONSTRAINT [FK_dbo.Enrollment_dbo.Student_StudentID] FOREIGN KEY ([StudentID])
   REFERENCES [dbo].[Student]([StudentID]) ON DELETE CASCADE
)

データベースエンティティを使用してモデルを生成する

データベースを作成してテーブルを設定したら、先に進み、新しいMVC Empty Applicationを作成できます。 プロジェクトのModelsフォルダーを右クリックし、[追加]→[新しいアイテム]を選択します。 次に、ADO.NET Entity Data Modelを選択します。

新しいモデルの追加ステップ1

Add New Model Step 2

次のウィザードで、「データベースから生成」を選択して「次へ」をクリックします。 SQLデータベースへの接続を設定します。

新しいモデルテスト接続の追加

データベースを選択し、「接続のテスト」をクリックします。 次のような画面が表示されます。 Nextをクリックしてください。

新しいモデルのテスト接続の追加ステップ2

テーブル、ビュー、ストアドプロシージャおよび関数を選択します。 完了をクリックします。 次のスクリーンショットに示すように作成されたモデルビューが表示されます。

新しいMVCモデル

上記の操作により、すべてのデータベースエンティティのモデルファイルが自動的に作成されます。 たとえば、作成したStudentテーブルは、次のコードを含むモデルファイルStudent.csになります- 

namespace MvcModelExample.Models {
   using System;
   using System.Collections.Generic;

   public partial class Student {

      public Student() {
         this.Enrollments = new HashSet();
      }

      public int StudentID { get; set; }
      public string LastName { get; set; }
      public string FirstName { get; set; }
      public Nullable EnrollmentDate { get; set; }
      public virtual ICollection Enrollments { get; set; }
   }
}

MVCフレームワーク-コントローラー

Asp.net MVCコントローラーは、アプリケーション実行のフローを制御する役割を果たします。 MVCアプリケーションに要求（ページを要求すること）を行うと、コントローラーはその要求への応答を返します。 コントローラーは1つ以上のアクションを実行できます。 コントローラーアクションは、特定の要求にさまざまなタイプのアクション結果を返すことができます。

コントローラーは、アプリケーションロジックを制御し、ビューとモデルの間のコーディネーターとして機能します。 コントローラは、ビューを介してユーザーから入力を受け取り、モデルの助けを借りてユーザーのデータを処理し、結果をビューに返します。

コントローラーを作成する

コントローラを作成するには-

  • ステップ1 *-MVC空のアプリケーションを作成し、MVCアプリケーションのControllerフォルダーを右クリックします。

ステップ2 *-メニューオプション[追加]→[コントローラー]を選択します。 選択後、「コントローラーの追加」ダイアログが表示されます。 Controllerに *DemoController という名前を付けます。

次のスクリーンショットに示すように、コントローラークラスファイルが作成されます。

MVC新しいコントローラー

IControllerを使用してコントローラーを作成する

MVCフレームワークでは、コントローラークラスはSystem.Web.Mvc名前空間からIControllerインターフェイスを実装する必要があります。 

public interface IController {
   void Execute(RequestContext requestContext);
}

これは非常にシンプルなインターフェースです。 唯一のメソッドであるExecuteは、リクエストがコントローラークラスをターゲットとするときに呼び出されます。 MVCフレームワークは、ルーティングデータによって生成されたコントローラープロパティの値を読み取ることで、リクエストでどのコントローラークラスがターゲットにされたかを認識します。

新しいコントローラークラスの追加

  • ステップ1 *-新しいクラスファイルを追加し、DemoCustomControllerという名前を付けます。 次に、このクラスを変更して、IControllerインターフェイスを継承します。

コントローラーを使用したコントローラー

  • ステップ2 *-このクラス内に次のコードをコピーします。
public class DemoCustomController:IController {

   public void Execute(System.Web.Routing.RequestContext requestContext) {
      var controller = (string)requestContext.RouteData.Values["controller"];
      var action = (string)requestContext.RouteData.Values["action"];
      requestContext.HttpContext.Response.Write(
      string.Format("Controller: {0}, Action: {1}", controller, action));
   }
}
  • ステップ3 *-アプリケーションを実行すると、次の出力が表示されます。

デモコントローラーの呼び出し

MVCフレームワーク-ビュー

最初の入門の章で見たように、Viewはアプリケーションのユーザーインターフェイスに関連するコンポーネントです。 これらのビューは通常、モデルデータからバインドされ、html、aspx、cshtml、vbhtmlなどの拡張機能があります。 最初のMVCアプリケーションでは、コントローラー付きのビューを使用して、最終ユーザーにデータを表示しました。 これらの静的および動的コンテンツをブラウザにレンダリングするために、MVCフレームワークはView Engineを利用します。 View Engineは基本的にマークアップ構文の実装であり、最終的なHTMLをブラウザーにレンダリングする役割を果たします。

MVCフレームワークには、2つの組み込みビューエンジンが付属しています- 

*Razor Engine* -Razorは、サーバー側のC＃またはVBコードをWebページに有効にするマークアップ構文です。 このサーバー側のコードを使用して、Webページのロード時に動的コンテンツを作成できます。 Razorは、ASPXエンジンと比較して高度なエンジンであり、MVCの後のバージョンで発売されました。
  • ASPXエンジン*-ASPXまたはWebフォームエンジンは、最初からMVCフレームワークに含まれているデフォルトのビューエンジンです。 このエンジンを使用してコードを記述することは、ASP.NET Webフォームでコードを記述することに似ています。

以下は、RazorとASPXエンジンの両方を比較する小さなコードスニペットです。

かみそり

@Html.ActionLink("Create New", "UserAdd")

ASPX

<% Html.ActionLink("SignUp", "SignUp") %>

これら2つの中で、Razorはコンパクトな構文、テスト駆動開発アプローチ、およびより優れたセキュリティ機能を備えているため、高度なView Engineです。 最も使用頻度の高いViewエンジンであるため、すべての例でRazorエンジンを使用します。

これらのビューエンジンは、次の2つのタイプでコーディングおよび実装できます-

  • 強く型付けされている
  • 動的型付け

これらのアプローチは、それぞれモデルがビューに強くまたは動的にバインドされる事前バインディングと遅延バインディングに似ています。

強く型付けされたビュー

この概念を理解するために、サンプルMVCアプリケーションを作成し（前の章の手順に従って）、 ViewDemoController という名前のコントローラークラスファイルを追加しましょう。

新しいView Controller

さて、コントローラファイルに次のコードをコピーします- 

using System.Collections.Generic;
using System.Web.Mvc;

namespace ViewsInMVC.Controllers {

   public class ViewDemoController : Controller {

      public class Blog {
         public string Name;
         public string URL;
      }

      private readonly List topBlogs = new List {
         new Blog { Name = "Joe Delage", URL = "http://finddevguides/joe/"},
         new Blog {Name = "Mark Dsouza", URL = "http://finddevguides/mark"},
         new Blog {Name = "Michael Shawn", URL = "http://finddevguides/michael"}
      };

      public ActionResult StonglyTypedIndex() {
         return View(topBlogs);
      }

      public ActionResult IndexNotStonglyTyped() {
         return View(topBlogs);
      }
   }
}

上記のコードでは、 StronglyTypedIndex および IndexNotStonglyTyped という2つのアクションメソッドが定義されています。 これらのアクションメソッドのビューを追加します。

StonglyTypedIndexアクションメソッドを右クリックし、[ビューの追加]をクリックします。 次のウィンドウで、「厳密に型指定されたビューを作成する」チェックボックスをオンにします。 これにより、Model ClassおよびScaffoldテンプレートオプションも有効になります。 Scaffold TemplateオプションからListを選択します。 追加をクリックします。

強くビューを追加

次のスクリーンショットのようなビューファイルが作成されます。 お気づきのとおり、ViewDemoControllerのBlogモデルクラスが上部に含まれています。 このアプローチでは、コードでIntelliSenseを使用することもできます。

強力なタイプのインテリセンスを表示

動的型付きビュー

動的型付きビューを作成するには、IndexNotStonglyTypedアクションを右クリックし、[ビューの追加]をクリックします。

ビューの追加

今回は、「厳密に型指定されたビューを作成する」チェックボックスを選択しないでください。

強くないタイプのインデックスを表示

結果のビューには、次のコードがあります- 

@model dynamic

@{
   ViewBag.Title = "IndexNotStonglyTyped";
}

<h2>Index Not Stongly Typed</h2>
<p>
   <ul>

      @foreach (var blog in Model) {
         <li>
            <a href = "@blog.URL">@blog.Name</a>
         </li>
      }

   </ul>
</p>

上記のコードを見るとわかるように、今回は前のケースのようにビューにBlogモデルを追加しませんでした。 また、今回はバインディングが実行時に行われるため、今回はIntelliSenseを使用できません。

実行時にデータがバインドされ、リンクされたモデルで何かが変更された場合に実行時エラーが発生する可能性がある動的な型付きビューとは異なり、モデルとして渡されるデータが既にわかっているため、厳密に型付きのビューはより良いアプローチと見なされます。

MVCフレームワーク-レイアウト

MVCではレイアウトを使用して、アプリケーションのすべてのページで一貫したルックアンドフィールを提供します。 マスターページの定義と同じですが、MVCにはさらに多くの機能があります。

MVCレイアウトを作成する

  • ステップ1 *-インターネットアプリケーションをテンプレートとしてサンプルMVCアプリケーションを作成し、Webアプリケーションのルートディレクトリにコンテンツフォルダーを作成します。

新しいコンテンツフォルダーの追加

新しいコンテンツフォルダーの追加

  • ステップ2 *-CONTENTフォルダーの下にMyStyleSheet.cssという名前のスタイルシートファイルを作成します。 このCSSファイルには、一貫したWebアプリケーションページデザインに必要なすべてのCSSクラスが含まれます。

新しいCSSを作成

新しいCSS 1を作成

  • ステップ3 *-ビューフォルダーの下に共有フォルダーを作成します。

共有ビューフォルダー

共有ビューフォルダ1

  • ステップ4 *-共有フォルダーの下にMasterLayout.cshtmlファイルを作成します。 ファイルMasterLayout.cshtmlは、アプリケーションの各ページのレイアウトを表します。 ソリューションエクスプローラーで共有フォルダーを右クリックし、[アイテムの追加]に移動して[表示]をクリックします。 次のレイアウトコードをコピーします。

MVCマスターレイアウト

レイアウトコード

<!DOCTYPE html>

<html lang = "en">
   <head>
      <meta charset = "utf-8"/>
      <title>@ViewBag.Title - Tutorial Point</title>
      <link href = "~/favicon.ico" rel = "shortcut icon" type = "image/x-icon"/>
      <link rel = "stylesheet" href = "@Url.Content("~/Content/MyStyleSheet.css")"/>
   </head>

   <body>
      <header>

         <div class = "content-wrapper">
            <div class = "float-left">
               <p class = "site-title">
                  @Html.ActionLink("Tutorial Point", "Index", "Home")
               </p>
            </div>

            <div class = "float-right">
               <nav>
                  <ul id = "menu">
                     <li>@Html.ActionLink("Home", "Index", "Home")</li>
                      <li>@Html.ActionLink("About", "About", "Home")</li>
                  </ul>
               </nav>
            </div>
         </div>

      </header>
      <div id = "body">
         @RenderSection("featured", required: false)
         <section class = "content-wrapper main-content clear-fix">
            @RenderBody()
         </section>
      </div>

      <footer>
         <div class = "content-wrapper">
            <div class = "float-left">
               <p>© @DateTime.Now.Year - Tutorial Point</p>
            </div>
         </div>
      </footer>

   </body>
</html>

このレイアウトでは、HTMLヘルパーメソッドと他のシステム定義のメソッドを使用しているため、これらのメソッドを1つずつ見ていきましょう。

  • * Url.Content（）*-このメソッドは、Viewコードで使用しているファイルのパスを指定します。 入力として仮想パスを取り、絶対パスを返します。
  • * Html.ActionLink（）*-このメソッドは、一部のコントローラーのアクションにリンクするHTMLリンクをレンダリングします。 最初のパラメーターは表示名を指定し、2番目のパラメーターはアクション名を指定し、3番目のパラメーターはコントローラー名を指定します。
  • * RenderSection（）*-テンプレート内のその場所に表示するセクションの名前を指定します。
  • * RenderBody（）*-関連するビューの実際のボディをレンダリングします。
  • ステップ5 *-最後に、Viewsフォルダー内の_ViewStart.cshtmlファイルを開き、次のコードを追加します-
@{
   Layout = "~/Views/Shared/_Layout.cshtml";
}

ファイルが存在しない場合は、この名前でファイルを作成できます。

  • ステップ6 *-今すぐアプリケーションを実行して、変更されたホームページを表示します。

MVCマスターレイアウト

MVCフレームワーク-ルーティングエンジン

ASP.NET MVCルーティングを使用すると、ユーザーのアクションを説明し、ユーザーがより簡単に理解できるURLを使用できます。 同時に、ルーティングを使用して、最終ユーザーに表示することを意図していないデータを非表示にすることができます。

たとえば、ルーティングを使用しないアプリケーションでは、ユーザーにはhttp：//myapplication/Users.aspx？id = 1としてURLが表示され、myapplicationパス内のファイルUsers.aspxに対応し、IDを1として送信します。 、一般的に、最終ユーザーにそのようなファイル名を表示したくない。

MVC URLを処理するために、ASP.NETプラットフォームはルーティングシステムを使用します。これにより、希望するURLのパターンを作成し、明確かつ簡潔な方法で表現できます。 MVCの各ルートには、特定のURLパターンが含まれています。 このURLパターンは着信リクエストURLと比較され、URLがこのパターンに一致する場合、ルーティングエンジンはリクエストをさらに処理するために使用します。

MVCルーティングURL形式

MVCルーティングを理解するには、次のURLを考慮してください- 

http://servername/Products/Phones

上記のURLでは、Productsは最初のセグメントで、Phoneは次の形式で表現できる2番目のセグメントです- 

{controller}/{action}

MVCフレームワークは、最初のセグメントを自動的にコントローラー名と見なし、2番目のセグメントをそのコントローラー内のアクションの1つと見なします。

注-Controllerの名前がProductsControllerの場合、ルーティングURLで製品のみを言及します。 MVCフレームワークは、Controllerサフィックスを自動的に理解します。

シンプルなルートを作成する

ルートは、App_Startプロジェクトフォルダーの下にあるRouteConfig.csファイルで定義されます。

MVC Route Config

このファイル内に次のコードが表示されます- 

public class RouteConfig {

   public static void RegisterRoutes(RouteCollection routes) {
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

      routes.MapRoute(
         name: "Default",
         url: "{controller}/{action}/{id}",
         defaults: new { controller = "Home", action = "Index",
            id = UrlParameter.Optional }
      );
   }
}

このRegisterRoutesメソッドは、アプリケーションの起動時にGlobal.ascxによって呼び出されます。 Global.ascxの下のApplication_Startメソッドは、このMapRoute関数を呼び出して、デフォルトのコントローラーとそのアクション（コントローラークラス内のメソッド）を設定します。

上記のデフォルトのマッピングを例に従って変更するには、次のコード行を変更します- 

defaults: new { controller = "Products", action = "Phones", id = UrlParameter.Optional }

この設定はProductsControllerを選択し、その中のPhoneメソッドを呼び出します。 同様に、ProductsController内にElectronicsなどの別のメソッドがある場合、そのURLは次のようになります- 

*http：//servername/Products/Electronics*

MVCフレームワーク-アクションフィルター

ASP.NET MVCでは、コントローラーはアクションメソッドを定義し、これらのアクションメソッドは通常、ボタンやリンクのクリックなど、UIコントロールと1対1の関係を持ちます。 たとえば、前の例の1つでは、UserControllerクラスにUserAdd、UserDeleteなどのメソッドが含まれていました。

ただし、特定の操作の前後に何らかのアクションを実行したい場合がよくあります。 この機能を実現するために、ASP.NET MVCは、コントローラーのアクションメソッドにアクション前およびアクション後の動作を追加する機能を提供します。

フィルターの種類

ASP.NET MVCフレームワークは、次のアクションフィルターをサポートしています-

  • アクションフィルター-アクションフィルターは、コントローラーアクションの実行前後に実行されるロジックを実装するために使用されます。 この章では、アクションフィルターについて詳しく説明します。
  • 承認フィルター-承認フィルターは、コントローラーアクションの認証と承認を実装するために使用されます。
  • 結果フィルター-結果フィルターには、ビュー結果の実行前後に実行されるロジックが含まれます。 たとえば、ビューがブラウザにレンダリングされる直前に、ビューの結果を変更できます。
  • 例外フィルター-例外フィルターは、実行する最後のタイプのフィルターです。 例外フィルターを使用して、コントローラーアクションまたはコントローラーアクションの結果によって発生したエラーを処理できます。 例外フィルターを使用してエラーを記録することもできます。

アクションフィルターは、追加のデータ処理を実行したり、実行時に戻り値を操作したり、アクションの実行をキャンセルしたり、ビュー構造を変更したりするために最もよく使用されるフィルターの1つです。

アクションフィルター

アクションフィルターは、コントローラーセクションまたはコントローラー全体に適用して、アクションの実行方法を変更できる追加の属性です。 これらの属性は、System.Attributeから派生した特別な.NETクラスであり、クラス、メソッド、プロパティ、およびフィールドに添付できます。

ASP.NET MVCは、次のアクションフィルターを提供します-

  • 出力キャッシュ-このアクションフィルターは、指定された時間、コントローラーアクションの出力をキャッシュします。
  • Handle Error -このアクションフィルターは、コントローラーアクションの実行時に発生したエラーを処理します。
  • Authorize -このアクションフィルターを使用すると、特定のユーザーまたはロールへのアクセスを制限できます。

次に、これらのフィルターをサンプルのコントローラーActionFilterDemoControllerに適用するコード例を見てみましょう。 （ActionFilterDemoControllerは例として使用されています。 これらのフィルターはどのコントローラーでも使用できます。）

出力キャッシュ

例-10秒間キャッシュする戻り値を指定します。 

public class ActionFilterDemoController : Controller {
   [HttpGet]
   OutputCache(Duration = 10)]

   public string Index() {
      return DateTime.Now.ToString("T");
   }
}

エラー処理

例-エラーがコントローラーによってトリガーされたときに、アプリケーションをカスタムエラーページにリダイレクトします。 

[HandleError]
public class ActionFilterDemoController : Controller {

   public ActionResult Index() {
      throw new NullReferenceException();
   }

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

上記のコードを使用すると、アクションの実行中にエラーが発生すると、ViewsフォルダーでErrorという名前のビューが検出され、そのページがユーザーに表示されます。

承認する

例-承認されたユーザーのみにアプリケーションへのログインを許可します。 

public class ActionFilterDemoController: Controller {
   [Authorize]

   public ActionResult Index() {
      ViewBag.Message = "This can be viewed only by authenticated users only";
      return View();
   }

   [Authorize(Roles="admin")]
   public ActionResult AdminIndex() {
      ViewBag.Message = "This can be viewed only by users in Admin role only";
      return View();
   }
}

上記のコードでは、ログインせずにアプリケーションにアクセスしようとすると、次のスクリーンショットに示すようなエラーがスローされます。

MVC認証フィルター

MVCフレームワーク-高度な例

最初の章では、MVCでコントローラーとビューがどのように相互作用するかを学びました。 このチュートリアルでは、モデルを使用して、作成、編集、削除する高度なアプリケーションを作成する方法を学びます。 アプリケーションのユーザーのリストを表示します。

高度なMVCアプリケーションを作成する

  • ステップ1 *-[ファイル]→[新規]→[プロジェクト]→[ASP.NET MVC Webアプリケーション]を選択します。 AdvancedMVCApplicationという名前を付けます。 Okをクリックしてください。 次のウィンドウで、「インターネットアプリケーションとしてのテンプレート」と「Razorとしてのビューエンジン」を選択します。 今回は空のアプリケーションの代わりにテンプレートを使用していることに注意してください。

MVC New Internet Project

これにより、次のスクリーンショットに示すように、新しいソリューションプロジェクトが作成されます。 デフォルトのASP.NETテーマを使用しているため、サンプルビュー、コントローラー、モデル、その他のファイルが付属しています。

MVC Model View Controller

  • ステップ2 *-ソリューションをビルドし、アプリケーションを実行して、次のスクリーンショットに示すデフォルト出力を確認します。

MVCサンプルインターネットアプリケーション

  • ステップ3 *-ユーザーデータの構造を定義する新しいモデルを追加します。 Modelsフォルダーを右クリックして、追加→クラスをクリックします。 これにUserModelという名前を付け、[追加]をクリックします。

MVCモデルの追加ステップ1

MVCモデルの追加ステップ2

  • ステップ4 *-新しく作成されたUserModel.csに次のコードをコピーします。
using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc.Html;

namespace AdvancedMVCApplication.Models {
   public class UserModels {

      [Required]
      public int Id { get; set; }
      [DisplayName("First Name")]
      [Required(ErrorMessage = "First name is required")]
      public string FirstName { get; set; }
      [Required]
      public string LastName { get; set; }

      public string Address { get; set; }

      [Required]
      [StringLength(50)]
      public string Email { get; set; }

      [DataType(DataType.Date)]
      public DateTime DOB { get; set; }

      [Range(100,1000000)]
      public decimal Salary { get; set; }
   }
}

上記のコードでは、Userモデルに含まれるすべてのパラメーター、データ型、必須フィールドや長さなどの検証を指定しました。

ユーザーモデルにデータを保持する準備ができたので、クラスファイルUsers.csを作成します。このファイルには、ユーザーの表示、ユーザーの追加、編集、削除のメソッドが含まれます。

  • ステップ5 *-モデルを右クリックして、追加→クラスをクリックします。 ユーザーとして名前を付けます。 これにより、Models内にusers.csクラスが作成されます。 users.csクラスの次のコードをコピーします。
using System;
using System.Collections.Generic;
using System.EnterpriseServices;

namespace AdvancedMVCApplication.Models {

   public class Users {
      public List UserList = new List();

     //action to get user details
      public UserModels GetUser(int id) {
         UserModels usrMdl = null;

         foreach (UserModels um in UserList)

            if (um.Id == id)
               usrMdl = um;
               return usrMdl;
      }

     //action to create new user
      public void CreateUser(UserModels userModel) {
         UserList.Add(userModel);
      }

     //action to udpate existing user
      public void UpdateUser(UserModels userModel) {

         foreach (UserModels usrlst in UserList) {

            if (usrlst.Id == userModel.Id) {
               usrlst.Address = userModel.Address;
               usrlst.DOB = userModel.DOB;
               usrlst.Email = userModel.Email;
               usrlst.FirstName = userModel.FirstName;
               usrlst.LastName = userModel.LastName;
               usrlst.Salary = userModel.Salary;
               break;
            }
         }
      }

     //action to delete exising user
      public void DeleteUser(UserModels userModel) {

         foreach (UserModels usrlst in UserList) {

            if (usrlst.Id == userModel.Id) {
               UserList.Remove(usrlst);
               break;
            }
         }
      }
   }
}

UserModel.csとUsers.csを取得したら、ユーザーの表示、ユーザーの追加、編集、削除のためのビューをモデルに追加します。 まず、ビューを作成してユーザーを作成します。

  • ステップ6 *-Viewsフォルダーを右クリックし、Add→Viewをクリックします。

mvc_advanced_add_view

  • ステップ7 *-次のウィンドウで、ビュー名をUserAdd、ビューエンジンをRazorとして選択し、[厳密に型指定されたビューを作成]チェックボックスを選択します。

MVC Advanced User Add View

  • ステップ8 *-[追加]をクリックします。 これにより、以下に示すように、デフォルトで次のCSHMLコードが作成されます-
@model AdvancedMVCApplication.Models.UserModels

@{
   ViewBag.Title = "UserAdd";
}

<h2>UserAdd</h2>

@using (Html.BeginForm()) {
   @Html.ValidationSummary(true)

   <fieldset>
      <legend>UserModels</legend>
      <div class = "editor-label">
         @Html.LabelFor(model => model.FirstName)
      </div>

      <div class = "editor-field">
         @Html.EditorFor(model => model.FirstName)
         @Html.ValidationMessageFor(model => model.FirstName)
      </div>

      <div class = "editor-label">
         @Html.LabelFor(model => model.LastName)
      </div>

      <div class = "editor-field">
         @Html.EditorFor(model => model.LastName)
         @Html.ValidationMessageFor(model => model.LastName)
      </div>

      <div class = "editor-label">
         @Html.LabelFor(model => model.Address)
      </div>

      <div class = "editor-field">
         @Html.EditorFor(model => model.Address)
         @Html.ValidationMessageFor(model => model.Address)
      </div>

      <div class = "editor-label">
         @Html.LabelFor(model => model.Email)
      </div>

      <div class = "editor-field">
         @Html.EditorFor(model => model.Email)
         @Html.ValidationMessageFor(model => model.Email)
      </div>

      <div class = "editor-label">
         @Html.LabelFor(model => model.DOB)
      </div>

      <div class = "editor-field">
         @Html.EditorFor(model => model.DOB)
         @Html.ValidationMessageFor(model => model.DOB)
      </div>

      <div class = "editor-label">
         @Html.LabelFor(model => model.Salary)
      </div>

      <div class = "editor-field">
         @Html.EditorFor(model => model.Salary)
         @Html.ValidationMessageFor(model => model.Salary)
      </div>

      <p>
         <input type = "submit" value = "Create"/>
      </p>
   </fieldset>
}
<div>
   @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {

   @Scripts.Render("~/bundles/jqueryval")
}

ご覧のとおり、このビューには、検証メッセージ、ラベルなど、フィールドのすべての属性の詳細が表示されます。 このビューは、最終アプリケーションでは次のようになります。

MVC Advanced Application 1

UserAddと同様に、指定されたコードで以下に示す4つのビューを追加します-

Index.cshtml

このビューには、システムに存在するすべてのユーザーが[インデックス]ページに表示されます。 

@model IEnumerable<AdvancedMVCApplication.Models.UserModels>

@{
   ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
   @Html.ActionLink("Create New", "UserAdd")
</p>

<table>
   <tr>
      <th>
         @Html.DisplayNameFor(model => model.FirstName)
      </th>

      <th>
         @Html.DisplayNameFor(model => model.LastName)
      </th>

      <th>
         @Html.DisplayNameFor(model => model.Address)
      </th>

      <th>
         @Html.DisplayNameFor(model => model.Email)
      </th>

      <th>
         @Html.DisplayNameFor(model => model.DOB)
      </th>

      <th>
         @Html.DisplayNameFor(model => model.Salary)
      </th>

      <th></th>
   </tr>

   @foreach (var item in Model) {
      <tr>
         <td>
            @Html.DisplayFor(modelItem => item.FirstName)
         </td>

         <td>
            @Html.DisplayFor(modelItem => item.LastName)
         </td>

         <td>
            @Html.DisplayFor(modelItem => item.Address)
         </td>

         <td>
            @Html.DisplayFor(modelItem => item.Email)
         </td>

         <td>
            @Html.DisplayFor(modelItem => item.DOB)
         </td>

         <td>
            @Html.DisplayFor(modelItem => item.Salary)
         </td>

         <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
            @Html.ActionLink("Details", "Details", new { id = item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
         </td>
      </tr>
   }
</table>

このビューは、最終アプリケーションでは次のようになります。

MVC Advanced Application 2

Details.cshtml

このビューには、ユーザーレコードをクリックすると、特定のユーザーの詳細が表示されます。 

@model AdvancedMVCApplication.Models.UserModels

@{
   ViewBag.Title = "Details";
}

<h2>Details</h2>
<fieldset>
   <legend>UserModels</legend>
   <div class = "display-label">
      @Html.DisplayNameFor(model => model.FirstName)
   </div>

   <div class = "display-field">
      @Html.DisplayFor(model => model.FirstName)
   </div>

   <div class = "display-label">
      @Html.DisplayNameFor(model => model.LastName)
   </div>

   <div class = "display-field">
      @Html.DisplayFor(model => model.LastName)
   </div>

   <div class = "display-label">
      @Html.DisplayNameFor(model => model.Address)
   </div>

   <div class = "display-field">
      @Html.DisplayFor(model => model.Address)
   </div>

   <div class = "display-label">
      @Html.DisplayNameFor(model => model.Email)
   </div>

   <div class = "display-field">
      @Html.DisplayFor(model => model.Email)
   </div>

   <div class = "display-label">
      @Html.DisplayNameFor(model => model.DOB)
   </div>

   <div class = "display-field">
      @Html.DisplayFor(model => model.DOB)
   </div>

   <div class = "display-label">
      @Html.DisplayNameFor(model => model.Salary)
   </div>

   <div class = "display-field">
      @Html.DisplayFor(model => model.Salary)
   </div>

</fieldset>
<p>
   @Html.ActionLink("Edit", "Edit", new { id = Model.Id }) |
   @Html.ActionLink("Back to List", "Index")
</p>

このビューは、最終アプリケーションでは次のようになります。

MVC Advanced Application Details

Edit.cshtml

このビューには、既存のユーザーの詳細を編集するための編集フォームが表示されます。 

@model AdvancedMVCApplication.Models.UserModels

@{
   ViewBag.Title = "Edit";
}

<h2>Edit</h2>
@using (Html.BeginForm()) {
   @Html.AntiForgeryToken()
   @Html.ValidationSummary(true)

   <fieldset>
      <legend>UserModels</legend>
      @Html.HiddenFor(model => model.Id)
      <div class = "editor-label">
         @Html.LabelFor(model => model.FirstName)
      </div>

      <div class = "editor-field">
         @Html.EditorFor(model => model.FirstName)
         @Html.ValidationMessageFor(model => model.FirstName)
      </div>

      <div class = "editor-label">
         @Html.LabelFor(model => model.LastName)
      </div>

      <div class = "editor-field">
         @Html.EditorFor(model => model.LastName)
         @Html.ValidationMessageFor(model => model.LastName)
      </div>

      <div class = "editor-label">
         @Html.LabelFor(model => model.Address)
      </div>

      <div class = "editor-field">
         @Html.EditorFor(model => model.Address)
         @Html.ValidationMessageFor(model => model.Address)
      </div>

      <div class = "editor-label">
         @Html.LabelFor(model => model.Email)
      </div>

      <div class = "editor-field">
         @Html.EditorFor(model => model.Email)
         @Html.ValidationMessageFor(model => model.Email)
      </div>

      <div class = "editor-label">
         @Html.LabelFor(model => model.DOB)
      </div>

      <div class = "editor-field">
         @Html.EditorFor(model => model.DOB)
         @Html.ValidationMessageFor(model => model.DOB)
      </div>

      <div class = "editor-label">
         @Html.LabelFor(model => model.Salary)
      </div>

      <div class = "editor-field">
         @Html.EditorFor(model => model.Salary)
         @Html.ValidationMessageFor(model => model.Salary)
      </div>

      <p>
         <input type = "submit" value = "Save"/>
      </p>
   </fieldset>
}
<div>
   @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
}

このビューは、アプリケーションでは次のようになります。

MVC Advanced Application Details

Delete.cshtml

このビューには、既存のユーザーを削除するためのフォームが表示されます。 

@model AdvancedMVCApplication.Models.UserModels

@{
   ViewBag.Title = "Delete";
}

<h2>Delete</h2>
<h3>Are you sure you want to delete this?</h3>
<fieldset>
   <legend>UserModels</legend>
   <div class = "display-label">
      @Html.DisplayNameFor(model => model.FirstName)
   </div>

   <div class = "display-field">
      @Html.DisplayFor(model => model.FirstName)
   </div>

   <div class = "display-label">
      @Html.DisplayNameFor(model => model.LastName)
   </div>

   <div class = "display-field">
      @Html.DisplayFor(model => model.LastName)
   </div>

   <div class = "display-label">
      @Html.DisplayNameFor(model => model.Address)
   </div>

   <div class = "display-field">
      @Html.DisplayFor(model => model.Address)
   </div>

   <div class = "display-label">
      @Html.DisplayNameFor(model => model.Email)
   </div>

   <div class = "display-field">
      @Html.DisplayFor(model => model.Email)
   </div>

   <div class = "display-label">
      @Html.DisplayNameFor(model => model.DOB)
   </div>

   <div class = "display-field">
      @Html.DisplayFor(model => model.DOB)
   </div>

   <div class = "display-label">
      @Html.DisplayNameFor(model => model.Salary)
   </div>

   <div class = "display-field">
      @Html.DisplayFor(model => model.Salary)
   </div>
</fieldset>

@using (Html.BeginForm()) {
   @Html.AntiForgeryToken()

   <p>
      <input type = "submit" value = "Delete"/> |
      @Html.ActionLink("Back to List", "Index")
   </p>
}

このビューは、最終アプリケーションでは次のようになります。

MVC詳細アプリケーション詳細削除

  • ステップ9 *-すでにアプリケーションにモデルとビューを追加しています。 最後に、ビューにコントローラーを追加します。 Controllersフォルダーを右クリックして、Add→Controllerをクリックします。 UserControllerという名前を付けます。

MVC Advanced Add Controller

デフォルトでは、コントローラクラスは次のコードで作成されます- 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AdvancedMVCApplication.Models;

namespace AdvancedMVCApplication.Controllers {

   public class UserController : Controller {
      private static Users _users = new Users();

      public ActionResult Index() {
         return View(_users.UserList);
      }
   }
}

上記のコードでは、IndexページでユーザーのリストをレンダリングするときにIndexメソッドが使用されます。

  • ステップ10 *-インデックスメソッドを右クリックし、[ビューの作成]を選択して、インデックスページのビューを作成します（すべてのユーザーがリストされ、新しいユーザーを作成するオプションが表示されます）。

MVC高度なインデックスビューの追加

  • ステップ11 *-次のコードをUserController.csに追加します。 このコードでは、さまざまなユーザーアクションのアクションメソッドを作成し、前に作成した対応するビューを返します。

操作ごとに、GETとPOSTの2つのメソッドを追加します。 HttpGetは、データを取得してレンダリングするときに使用されます。 HttpPostは、データの作成/更新に使用されます。 たとえば、新しいユーザーを追加する場合、ユーザーを追加するフォームが必要になります。これはGET操作です。 フォームに入力してこれらの値を送信したら、POSTメソッドが必要になります。 

//Action for Index View
public ActionResult Index() {
   return View(_users.UserList);
}

//Action for UserAdd View
[HttpGet]
public ActionResult UserAdd() {
   return View();
}

[HttpPost]
public ActionResult UserAdd(UserModels userModel) {
   _users.CreateUser(userModel);
   return View("Index", _users.UserList);
}

//Action for Details View
[HttpGet]
public ActionResult Details(int id) {
   return View(_users.UserList.FirstOrDefault(x => x.Id == id));
}

[HttpPost]
public ActionResult Details() {
   return View("Index", _users.UserList);
}

//Action for Edit View
[HttpGet]
public ActionResult Edit(int id) {
   return View(_users.UserList.FirstOrDefault(x=>x.Id==id));
}

[HttpPost]
public ActionResult Edit(UserModels userModel) {
   _users.UpdateUser(userModel);
   return View("Index", _users.UserList);
}

//Action for Delete View
[HttpGet]
public ActionResult Delete(int id) {
   return View(_users.UserList.FirstOrDefault(x => x.Id == id));
}

[HttpPost]
public ActionResult Delete(UserModels userModel) {
   _users.DeleteUser(userModel);
   return View("Index", _users.UserList);
} sers.UserList);
  • ステップ12 *-最後に行うことは、App_StartフォルダーのRouteConfig.csファイルに移動し、デフォルトのコントローラーをユーザーに変更することです。
defaults: new { controller = "User", action = "Index", id = UrlParameter.Optional }

高度なアプリケーションを起動して実行するために必要なのはそれだけです。

  • ステップ13 *-アプリケーションを実行します。 次のスクリーンショットに示すように、アプリケーションを見ることができます。 前のスクリーンショットで見たように、ユーザーの追加、表示、編集、削除のすべての機能を実行できます。

MVC Advanced Add Index Final

MVCフレームワーク-Ajaxサポート

ご存じかもしれませんが、AjaxはAsynchronous JavaScript and XMLの省略形です。 MVCフレームワークには、控えめなAjaxのサポートが組み込まれています。 すべてのビューにコードを追加しなくても、ヘルパーメソッドを使用してAjax機能を定義できます。 MVCのこの機能は、jQuery機能に基づいています。

MVCアプリケーションで控えめなAJAXサポートを有効にするには、Web.Configファイルを開き、次のコードを使用してappSettingsセクション内でUnobtrusiveJavaScriptEnabledプロパティを設定します。 キーがアプリケーションにすでに存在する場合、この手順は無視できます。 

<add key = "UnobtrusiveJavaScriptEnabled" value = "true"/>

MVC Ajax Config

この後、Views/Sharedフォルダーの下にある共通レイアウトファイル _Layout.cshtml ファイルを開きます。 ここで、次のコードを使用してjQueryライブラリへの参照を追加します- 

<script src = "~/Scripts/jquery-ui-1.8.24.min.js" type = "text/javascript">
</script>

<script src = "~/Scripts/jquery.unobtrusive-ajax.min.js" type = "text/javascript">
</script>

MVC Ajax Config 1

目立たないAjaxアプリケーションを作成する

次の例では、システム内のユーザーのリストを表示するフォームを作成します。 Admin、Normal、Guestの3つのオプションを持つドロップダウンを配置します。 これらの値のいずれかを選択すると、控えめなAJAXセットアップを使用して、このカテゴリに属する​​ユーザーのリストが表示されます。

  • ステップ1 *-モデルファイルModel.csを作成し、次のコードをコピーします。
using System;

namespace MVCAjaxSupportExample.Models {

   public class User {
      public int UserId { get; set; }
      public string FirstName { get; set; }
      public string LastName { get; set; }
      public DateTime BirthDate { get; set; }
      public Role Role { get; set; }
   }

   public enum Role {
      Admin,
      Normal,
      Guest
   }
}
  • ステップ2 *-UserController.csという名前のControllerファイルを作成し、次のコードを使用してその中に2つのアクションメソッドを作成します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MVCAjaxSupportExample.Models;

namespace MVCAjaxSupportExample.Controllers {

   public class UserController : Controller {

      private readonly User[] userData =
      {
         new User {FirstName = "Edy", LastName = "Clooney", Role = Role.Admin},
         new User {FirstName = "David", LastName = "Sanderson", Role = Role.Admin},
         new User {FirstName = "Pandy", LastName = "Griffyth", Role = Role.Normal},
         new User {FirstName = "Joe", LastName = "Gubbins", Role = Role.Normal},
         new User {FirstName = "Mike", LastName = "Smith", Role = Role.Guest}
      };

      public ActionResult Index() {
         return View(userData);
      }

      public PartialViewResult GetUserData(string selectedRole = "All") {
         IEnumerable data = userData;

         if (selectedRole != "All") {
            var selected = (Role) Enum.Parse(typeof (Role), selectedRole);
            data = userData.Where(p => p.Role == selected);
         }

         return PartialView(data);
      }

      public ActionResult GetUser(string selectedRole = "All") {
         return View((object) selectedRole);
      }
   }
}
  • ステップ3 *-次のコードを使用して、GetUserDataという名前の部分ビューを作成します。 このビューは、ドロップダウンから選択された役割に基づいてユーザーのリストを表示するために使用されます。
@model IEnumerable<MVCAjaxSupportExample.Models.User>

<table>
   <tr>
      <th>
         @Html.DisplayNameFor(model => model.FirstName)
      </th>

      <th>
         @Html.DisplayNameFor(model => model.LastName)
      </th>

      <th>
         @Html.DisplayNameFor(model => model.BirthDate)
      </th>
      <th></th>
   </tr>

   @foreach (var item in Model) {
   <tr>
      <td>
         @Html.DisplayFor(modelItem => item.FirstName)
      </td>

      <td>
         @Html.DisplayFor(modelItem => item.LastName)
      </td>

      <td>
         @Html.DisplayFor(modelItem => item.BirthDate)
      </td>

      <td>

      </td>
   </tr>
}
</table>
  • ステップ4 *-次のコードでビューGetUserを作成します。 このビューは、以前に作成したコントローラーのGetUserDataアクションからデータを非同期的に取得します。
@using MVCAjaxSupportExample.Models
@model string

@{
ViewBag.Title = "GetUser";

AjaxOptions ajaxOpts = new AjaxOptions {
UpdateTargetId = "tableBody"
};
}

<h2>Get User</h2>
<table>
   <thead>
      <tr>
         <th>First</th>
         <th>Last</th>
         <th>Role</th>
      </tr>
   </thead>

   <tbody id="tableBody">
      @Html.Action("GetUserData", new {selectedRole = Model })
   </tbody>
</table>

@using (Ajax.BeginForm("GetUser", ajaxOpts)) {
   <div>
      @Html.DropDownList("selectedRole", new SelectList(
      new [] {"All"}.Concat(Enum.GetNames(typeof(Role)))))
      <button type="submit">Submit</button>
   </div>
}
  • ステップ5 *-最後に、Route.configエントリを変更してユーザーコントローラーを起動します。
defaults: new { controller = "User", action = "GetUser", id = UrlParameter.Optional }
  • ステップ6 *-次のスクリーンショットのように見えるアプリケーションを実行します。

MVC Ajaxアプリケーション

ドロップダウンから[管理者]を選択すると、管理者タイプのすべてのユーザーが取得されます。 これはAJAXを介して行われ、ページ全体をリロードしません。

MVC Ajax Application 1

MVCフレームワーク-バンドル

  • バンドル*と*最小化*は、アプリケーションのリクエストのロード時間を改善する2つのパフォーマンス改善技術です。 現在の主要なブラウザのほとんどは、ホスト名あたりの同時接続数を6に制限しています。 これは、一度にすべての追加リクエストがブラウザによってキューに入れられることを意味します。

バンドルと縮小を有効にする

MVCアプリケーションでバンドルと縮小を有効にするには、ソリューション内でWeb.configファイルを開きます。 このファイルで、system.webの下でコンパイル設定を検索します- 

<system.web>
   <compilation debug = "true"/>
</system.web>

デフォルトでは、デバッグパラメータがtrueに設定されています。これは、バンドルと縮小が無効になっていることを意味します。 このパラメーターをfalseに設定します。

同梱

アプリケーションのパフォーマンスを向上させるために、ASP.NET MVCは複数のファイルを単一のファイルにバンドルする組み込み機能を提供します。これにより、HTTP要求が少なくなるため、ページのロードパフォーマンスが向上します。

バンドリングは、一意の名前で参照でき、単一のHTTP要求でロードできるファイルの単純な論理グループです。

デフォルトでは、MVCアプリケーションのBundleConfig（App_Startフォルダー内にあります）には次のコードが付属しています- 

public static void RegisterBundles(BundleCollection bundles) {

  //Following is the sample code to bundle all the css files in the project

  //The code to bundle other javascript files will also be similar to this

   bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
      "~/Content/themes/base/jquery.ui.core.css",
      "~/Content/themes/base/jquery.ui.tabs.css",
      "~/Content/themes/base/jquery.ui.datepicker.css",
      "~/Content/themes/base/jquery.ui.progressbar.css",
      "~/Content/themes/base/jquery.ui.theme.css"));
}

上記のコードは、基本的にContent/themes/baseフォルダーにあるすべてのCSSファイルを単一のファイルにバンドルします。

縮小

縮小化は、変数名を短縮し、不要な空白、改行、コメントなどを削除することにより、javascript、cssコードを最適化する、パフォーマンスを向上させるもう1つの手法です。 これにより、ファイルサイズが小さくなり、アプリケーションの読み込みが速くなります。

Visual StudioおよびWeb Essentials Extensionによる縮小

このオプションを使用するには、まずVisual StudioにWeb Essentials Extensionをインストールする必要があります。 その後、cssまたはjavascriptファイルを右クリックすると、そのファイルの縮小バージョンを作成するオプションが表示されます。

MVC Bundling Minify

したがって、Site.cssという名前のcssファイルがある場合、その縮小版はSite.min.cssとして作成されます。

これで、次回アプリケーションをブラウザーで実行するときに、すべてのcssファイルとjsファイルがバンドルされて縮小されるため、アプリケーションのパフォーマンスが向上します。

MVCフレームワーク-例外処理

ASP.NETでは、エラー処理は標準のtry catchアプローチまたはアプリケーションイベントを使用して行われます。 ASP.NET MVCには、例外フィルターと呼ばれる機能を使用した例外処理のサポートが組み込まれています。 ここでは、onExceptionメソッドをオーバーライドする方法と、HandleErrorフィルターを定義する方法の2つの方法を学習します。

OnExceptionメソッドをオーバーライドする

このアプローチは、コントローラーレベルでアクションメソッド全体のすべての例外を処理する場合に使用されます。

このアプローチを理解するには、MVCアプリケーションを作成します（前の章で説明した手順に従います）。 次に、新しいControllerクラスを追加し、onExceptionメソッドをオーバーライドし、Actionメソッドで明示的にエラーをスローする次のコードを追加します-

MVC例外処理

ここで、アプリケーションで例外が発生したときにユーザーに表示される Error という名前の共通ビューを作成しましょう。 Viewsフォルダー内に、Sharedという新しいフォルダーを作成し、Errorという名前の新しいビューを追加します。

MVCエラー処理

新しく作成されたError.cshtml内の次のコードをコピーします-

MVC例外共通ビュー

ここでアプリケーションを実行しようとすると、次の結果が得られます。 上記のコードは、このコントローラー内のいずれかのアクションメソッドで例外が発生すると、エラービューを表示します。

MVC共通例外処理

このアプローチの利点は、同じコントローラー内の複数のアクションがこのエラー処理ロジックを共有できることです。 ただし、欠点は、複数のコントローラー間で同じエラー処理ロジックを使用できないことです。

HandleError属性

HandleError属性は、フィルターおよびアクションフィルターの章で学習したアクションフィルターの1つです。 HandleErrorAttributeは、IExceptionFilterのデフォルトの実装です。 このフィルターは、コントローラーアクション、フィルター、およびビューによって発生したすべての例外を処理します。

この機能を使用するには、まずweb.configのcustomErrorsセクションをオンにします。 web.configを開き、次のコードをsystem.web内に配置して、その値をOnに設定します。 

<customErrors mode = "On"/>

[ビュー]の下の[共有]フォルダー内にエラービューが既に作成されています。 今回は、このViewファイルのコードを次のように変更して、HandleErrorInfoモデル（System.Web.MVCの下にある）で強く型付けします。 

@model System.Web.Mvc.HandleErrorInfo

@{
Layout = null;
}

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

   <body>
      <h2>
         Sorry, an error occurred while processing your request.
      </h2>
      <h2>Exception details</h2>

      <p>
         Controller: @Model.ControllerName <br>
         Action: @Model.ActionName
         Exception: @Model.Exception
      </p>

   </body>
</html>

ここで、コントローラファイルに[HandleError]属性を指定する次のコードをコントローラファイルに配置します。 

using System;
using System.Data.Common;
using System.Web.Mvc;

namespace ExceptionHandlingMVC.Controllers {
   [HandleError]
   public class ExceptionHandlingController : Controller {

      public ActionResult TestMethod() {
         throw new Exception("Test Exception");
         return View();
      }
   }
}

ここでアプリケーションを実行しようとすると、次のスクリーンショットに示すようなエラーが表示されます。

MVC例外

ご覧のとおり、今回はエラーにコントローラーおよびアクション関連の詳細に関する詳細が含まれています。 この方法では、HandleErrorを任意のレベルで、またコントローラー全体で使用して、このようなエラーを処理できます。 Mvc-framework-questions-answers

MVCフレームワーク-リソース

次のリソースには、MVCフレームワークに関する追加情報が含まれています。 これについての詳細な知識を得るためにそれらを使用してください。

MVCフレームワークの便利なリンク

MVCフレームワークに関する有用な書籍

このページにサイトを登録するには、 contact @ finddevguides.com にメールを送信してください。

「https://www.finddevguides.com/index.php?title=Mvc-framework-quick-guide&oldid=79145」から取得
Powered by MediaWiki