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

  1. FEnet.NETナビ
  2. .NETコラム
  3. .NET
  4. ASP.NET
  5. 【ASP.NET MVC入門その1】ASP.NET MVCで”Hello world”を表示する

【ASP.NET MVC入門その1】ASP.NET MVCで”Hello world”を表示する

  • .NET
  • ASP.NET
  • C#
  • プログラミング言語
公開日時:   更新日時:
【ASP.NET MVC入門その1】ASP.NET MVCで”Hello world”を表示する
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    「ASP.NET MVC」を使用してWebアプリケーションを作成します。
    この入門シリーズでは、ASP.NET MVCに必要なModel、View、Controllerの内容を確認します。
    初回は、MVCを利用して、「Hello world」を表示する処理を実装して、ASP.NET MVCのWebアプリケーションを作成します。

    システム
    エンジニア
    ASP.NET MVCを使ってWebアプリケーションを何か作成してみたいです!やり方を教えてください。
    プロジェクト
    リーダー
    Hello worldを表示する処理はシンプルなので、簡単に実装できますよ。内容を一緒に確認しましょう!

    ASP.NET MVCの開発環境の設定

    ASP.NET MVCの開発では、Visual Studioを利用するのが一般的です。
    Visual Studioには、ASP.NET MVCのWebアプリケーションを作成するための機能が多く用意されており、非常に便利なツールです。

    実装したプログラムをデバッグする機能や、作成したデータベースを参照する機能など、これ1つで開発に必要な環境は全て揃います。

    本記事では、Visual Studio 2017を使用します。

    Visual Studio 2017でASP.NET MVCのプロジェクトを作成するには、以下の手順で進めます。

    1. Visual Studioのファイルメニューから「新規作成」→「プロジェクト」を選択します。
    2. 左サイドメニューでC#の「Web」を選択し、真ん中のエリアで「ASP.NET Webアプリケーション(.NET Framework)」を選択し、OKボタンをクリックします。
    3. ASP.NET選択画面

    4. 認証の変更ボタンをクリックして、個別のユーザーアカウントを選択してください。
    5. 個別のユーザーアカウント選択画面

    認証の変更後、上記のような画面になったら、OKボタンをクリックします。

    ここまででプロジェクトの作成が完了です。

    ASP.NET MVCでHello worldの表示

    開発環境も整ったので、Hello worldを表示する処理を実装します。

    まず、ShopsControllerを使用してControllerを実装します。
    コードを以下に記載します。

    Controllerで大事なコードは以下の部分です。

    実際に画面に表示するHello worldという文字列を設定しています。

    文字列を設定しているのが、ViewBagという変数です。
    これはASP.NET MVCに標準で用意されている変数で、ControllerとViewで内容を共有することができます。
    Messageという部分は、任意の名前を付けることが可能です。

    Controllerで表示する文字列を設定し、Viewで文字列を取得して画面に表示します。

    続いて、index.cshtmlを使用してViewを実装します。
    コードを以下に記載します。

    Viewで大事なコードは以下の部分です。

    先ほど、Controllerで上記の変数にHello worldという文字列を設定しました。
    Viewでは、その変数名を記載することで、設定されている文字列を表示します。

    頭に「@」を付けることで、Controllerで設定した変数を参照することができます。
    実際に画面を表示すると、以下のようになります。

    実行結果

    Hello worldが表示できました。

    このように、Hello worldを表示するだけであれば、Modelは使用しません。
    画面に文字列を表示する場合は、ControllerとViewだけで実装が可能です。

    システム
    エンジニア
    画面にHello worldを表示できました。実装するコードも非常に簡単なコードでしたね。
    プロジェクト
    リーダー
    Hello worldを表示することで、ASP.NET MVCの基本が理解できましたね。基本をしっかり理解して開発していきましょう!

    Hello worldの表示でASP.NET MVCの基本を理解できる

    ASP.NET MVCでWebアプリケーションを作成し、Hello worldを表示しました。
    Hello worldの表示は基本となりますが、ASP.NET MVCは基本の処理を理解することで、様々な実装に応用ができます。
    シンプルな実装だからこそ、基本をしっかり理解して開発していきましょう。

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

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

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

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

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

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

    • 充実した研修制度

      充実した研修制度

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

    • 資格取得を応援

      資格取得を応援

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

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

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

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

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

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

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

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

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    ASP.NET新着案件New Job