ASP.NET MVCを使ったシンプルなWebアプリケーションを作成します。
概要
ASP.NET MVCのプロジェクトを作成し、シンプルなWebアプリケーションを作成します。
新しい手順
新しい手順は手順ごとに別記事で紹介します。
プロジェクトの作成
ASP.NET MVC のプロジェクトの作成については
こちらの記事を参照してください。
コントローラーの追加
プロジェクトが作成できたら、初めにコントローラーを作成して追加します。コントローラーの作成手順は
こちらの記事を参照してください。
ビューの追加
コントローラーが追加できましたら、コントローラーから呼び出されるビューを追加します。ビューの追加手順は
こちらの記事を参照して下さい。
モデルの追加
コントローラーからビューにデータを受け渡すモデルを追加します。モデルの追加手順は
こちらの記事を参照してください。
以前の手順
以下は以前の手順です。
プロジェクトの作成
Visual Studio(今回の例ではVisual Studio 2013)を起動します。
[ファイル]メニューの[新規作成]の[プロジェクト]を選択します。
[新しいプロジェクト]ダイアログが表示されますので、[ASP.NET Web アプリケーション]を選択します。
[新規 ASP.NET プロジェクト]ダイアログが表示されます。
今回は[Empty]のプロジェクトを選択します。
[以下にフォルダーおよびコア参照を追加]のセクションの[MVC]のチェックボックスにチェックをつけます。設定ができたら[OK]ボタンを押します。
プロジェクトが作成されました。
"Controllers", "Models", "Views"のフォルダや、Global.asaxファイルなどが作成されています。
コントローラーの追加
プロジェクトが作成できましたら、コントローラーを追加します。ソリューションエクスプローラで"Controllers"のフォルダを選択し、右クリックでポップアップメニューを表示します。[追加]メニューの[コントローラー]を選択します。
[スキャルフォールディングの追加]ダイアログが表示されます。
今回は[MVC 5 コントローラー - 空]を選択します。
[コントローラーの追加]ダイアログが表示されます。コントローラー名をテキストボックスに入力します。今回は"DefaultController"としました。入力ができたら[追加]ボタンをクリックします。
コントローラーが追加されました。
コントローラーのコードは以下になります。Index()メソッドが作成されていることを確認します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace AspNetMvcSimple.Controllers
{
public class DefaultController : Controller
{
// GET: Default
public ActionResult Index()
{
return View();
}
}
}
ビューの追加
続いてViewを追加します。ソリューションエクスプローラを開き"Views"ディレクトリを開きます。先ほどコントローラを追加した際に"Default"というフォルダが新たに作成されています。"Default"フォルダを選択します。
右クリックしポップアップメニューを表示します。[追加]メニューの[ビュー]を選択します。
[ビューの追加]ダイアログが表示されます。
[ビュー名]には、コントローラのメソッド名と同じ名前を入力します。コントローラーでIndex()メソッドが作成されていましたので、ビュー名はIndexとします。[テンプレート]は"Empty (モデルなし)"とします。また、オプションの[レイアウト ページの使用]のチェックを外します。設定ができたら[追加]ボタンをクリックします。
ビューが追加されました。"Index.cshtml"というファイルが作成されます。
ビューのcshtmlファイルのコードは以下になります。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>
プロジェクトの実行
ここまで設定ができたら、プロジェクトを実行します。Webブラウザが開き
http://localhost:(ポート番号)/Default/Index
のURLが開かれ、下図の画面が表示されます。(何も表示されない画面です)
cshtmlファイルの編集
ビューのcshtmlファイルを編集します。先ほどのindex.cshtmlファイルを下記に変更します。(「テストページです」の文言を追加します。)
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
テストページです。
</div>
</body>
</html>
プロジェクトを実行します。Webブラウザが開き、ページが表示されます。先ほど追加した「テストページです。」の一文が表示されています。
コントローラの実装
続いてコントローラを実装し、サーバー側で指定したメッセージをページで表示します。
下記のコントローラーのコードを記述します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace AspNetMvcSimple.Controllers
{
public class DefaultController : Controller
{
// GET: Default
public ActionResult Index()
{
ViewData["message"] = "Hello ASP.NET MVC World!";
return View();
}
}
}
解説
ViewData["message"] = "Hello ASP.NET MVC World!";
のコードにより、ビューデータの"message"に"Hello ASP.NET MVC World!"を格納します。
ビューの変更
コントローラで設定した、ビューデータをビューで表示できるようにします。
ビューのファイル"Index.cshtml"を編集します。
下記のコードに変更します。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
テストページです。
</div>
<div>
@Html.Encode(ViewData["message"])
</div>
</body>
</html>
解説
@Html.Encode(ViewData["message"])
のコードにより、"message"ビューデータをWebページに埋め込んで表示します。
プロジェクトを実行します。
Controllerのコードで設定した、"Hello ASP.NET MVC World!"がWebページに表示されました。
シンプルな画面表示ができる、ASP.NETのWebアプリケーションを作成できました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2018-08-07
作成日: 2015-02-16
