ASP.NET MVCアプリケーションにビュー(View)を追加する手順を紹介します。
事前準備
こちらの記事を参照してASP.NET MVCのプロジェクトを作成します。プロジェクト作成後コントローラーを追加します。コントローラーの追加の手順は
こちらの記事を参照してください。
Viewの追加: レイアウトページを利用しない場合
ASP.NET MVCプロジェクトを開き、ソリューションエクスプローラのViewフォルダ内のコントローラー名のフォルダをクリックして選択します。
右クリックしてポップアップメニューを表示します。メニューの[追加]の[ビュー]の項目をクリックします。
[ビューの追加]ダイアログが表示されます。
[ビュー名]のテキストボックスにビュー名を設定します。
こちらの記事でコントローラーのクラスに実装したメソッドの名称と同じ名称である"Index"をビュー名に設定します。また、コードと動作をシンプルにするために[レイアウト ページの使用]のチェックボックスからチェックを外します。設定ができたらダイアログウィンドウ右下の[追加]ボタンをクリックします。
ソリューションエクスプローラに "Index.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アプリケーションのルートディレクトリ)/Default/Index" URLにアクセスします。エラーは表示されず、下図のページが表示されます。
結果が確認しにくいため、cshtmlファイルにテキストを追加し、下記のコードにします。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
Indexページです。
</div>
</body>
</html>
再度プロジェクトを実行し、"(Webアプリケーションのルートディレクトリ)/Default/Index" URLにアクセスします。cshtmlファイルに追記したテキストが画面に表示されることが確認できます。
Viewの追加: レイアウトページを利用する場合
先に紹介した手順と同様の操作をして、ビューを追加します。下図のダイアログが表示されますので、[レイアウト ページの使用]チェックボックスを付けた状態にします。ビュー名を競ってできたらダイアログウィンドウ右下の[追加]ボタンをクリックします。
Index.cshtmlと _Layout.cshtml, _ViewStart.cshtml ファイルが追加されます。
cshtmlで生成されるコードは下記になります。
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
プロジェクトを実行します。_Layout.cshtml のレイアウトページの内部にIndex.cshtmlが表示される動作となります。
ASP.NET MVCのプロジェクトにViewを追加できました。
次の作業
続いてはモデルとモデルを参照するViewを追加します。コードと手順は
こちらの記事を参照してください。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2018-08-07
作成日: 2018-07-30
