.net column

.NET開発者のためのブログメディア
Webシステム制作

【ASP.NET MVC入門その4】ASP.NET MVCでViewクラスの実装

2019年12月03日

「ASP.NET MVC」を使用してWebアプリケーションを作成します。
ASP.NET MVCでWebアプリケーションを作成する際、画面を表示するためのロジックを実装するのが、MVCの「V」の部分となるViewです。
条件によって、表示する項目を変えるなどの制御もViewで行います。

SE
ASP.NET MVCのViewとはどういうものでしょうか?Viewについて教えてください。
PM
ASP.NET MVCのViewは、画面を表示するためのロジックを実装する部分です。一緒に確認しましょう!

ASP.NET MVCのViewとは

ASP.NET MVCのViewとは、画面を表示するためのロジックを実装するためのクラスです。

例えば、Webアプリケーションで検索機能を実装する場合を考えます。画面上にワードを入力するテキストボックスや、検索ボタンを表示するための処理が必要です。

また、検索した結果を画面に表示する際に、各データを表示するための処理も行います。

実際にデータベースからデータを検索する処理はModelで実装します。

そして、結果を表示する時、データによって表示する内容を変えたい場合があります。
そういった場合にViewが利用され、データによって分岐する処理や繰り返し処理を実装することができます。

このようにASP.NET MVCにおいて、Viewは画面を表示するための各ロジックを実装することになります。

Viewに実装する内容を明確にして、開発を進めることが大事になります。

ASP.NET MVCのViewクラスの実装方法

それでは実際にVisual Studio 2017を使ってViewを実装していきます。

前回までで、店舗の情報を管理するModelクラス(Shopクラス)とControllerクラス(ShopsControllerクラス)を作成しました。
今回は、ModelとControllerに対応するViewクラスを作成します。

Viewクラスの作成

まず、右側に表示されている「ソリューションエクスプローラー」で、「Views」のフォルダを右クリックし、追加→ビューを選択します。

以下の画面が表示されるので、各項目を入力してAddボタンをクリックします。各項目は以下のように入力します。

  • ・View name:Index
  • ・Template:Empty
  • ・Model class:Shop
  • ・Data context class:ApplicationDbContext

ビューの設定

Viewクラスの実装

以下のソースが作成されます。

ビューのソースコード

実装は以下の通りです。

Viewクラスの実装のポイントは以下の通りです。

  • ・対応するModelクラスを定義する
  • 上記のように対応するModelクラスを定義します。
    Viewクラス作成時に、ダイアログで指定した内容が自動で設定されます。
    Modelクラスと対応させることで、データベースに格納されているデータを表示する、といったことが可能です。

  • ・C#でロジックを記述することが可能
  • 上記のように括弧で囲われた範囲内は、C#でロジックを記述することが可能です。
    Viewクラス内で、データの内容によって画面の表示内容を変える際に利用します。

  • ・画面表示する内容はHTMLで記述する
  • ASP.NET MVCでC#を利用していますが、画面表示する部分のロジックは全てHTMLで記述します。
    他の言語でWebアプリケーションを作成したことがあれば、HTMLの部分は変わりないので、作成しやすいです。

以上で、Viewクラスが作成できました。

SE
Viewクラスで画面表示する内容はHTMLで記述するのですね。HTMLは以前に使用したことがあるので、作成しやすいです!
PM
HTML部分は変わりがないので、Viewクラスは簡単ですね。HTMLに加えてC#でロジックが記述できることによって、より様々な機能が実装できますよ。

ViewクラスではHTMLとC#でロジックが記述できる

Viewクラスでは、HTMLとC#を利用してロジックを記述できることが分かりました。HTML部分は変わりがなく、Viewクラスだからといって特別なロジックはありません。
HTMLに加えてC#で様々なロジックが実装できるので、使っていきましょう。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)