.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. .NET
  4. ASP.NET
  5. 【ASP.NET MVC入門その4】ASP.NET MVCでViewクラスの実装

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

  • .NET
  • ASP.NET
  • C#
  • プログラミング言語
公開日時: 　 更新日時:
【ASP.NET MVC入門その4】ASP.NET MVCでViewクラスの実装
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

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

    システム
    エンジニア
    ASP.NET MVCのViewとはどういうものでしょうか？Viewについて教えてください。
    プロジェクト
    マネージャー
    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クラスが作成できました。

    システム
    エンジニア
    Viewクラスで画面表示する内容はHTMLで記述するのですね。HTMLは以前に使用したことがあるので、作成しやすいです！
    プロジェクト
    マネージャー
    HTML部分は変わりがないので、Viewクラスは簡単ですね。HTMLに加えてC#でロジックが記述できることによって、より様々な機能が実装できますよ。

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

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

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ

    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへ応募する
    会員登録不要! カンタン45秒!

    ASP.NET新着案件New Job

    関連記事Related Posts