ASP.NET MVC アプリケーションに モデル (Model) を追加しコントローラーからビューにデータを渡すコードを紹介します。
こちらの記事でASP.NET MVCで何もしないアプリケーションを作成し、コントローラーの追加手順や、ビューの追加手順を紹介しました。
この記事では、モデル(Model)を追加し、コントローラからビューにデータを渡すコードを紹介します。
ASP.NET MVCアプリケーションを作成します。
ASP.NET MVCアプリケーションを作成し、コントローラーを追加します。コントローラーの名称は"DefaultController"としました。コントローラーの追加手順
の詳細はこちらの記事を参照してください。
Modelを追加します。ソリューションエクスプローラでASP.NET MVCプロジェクトのノードを展開し、[Models]ディレクトリをクリックして選択します。ディレクトリが選択された状態で右クリックしポップアップメニューを表示します。メニューの[追加]の[新しい項目]サブメニューをクリックします。
[新しい項目の追加]ダイアログボックスが表示されます。
左側のツリービューで[Web]ノード内の[コード]ノードをクリックして選択します。右側に項目の一覧が表示されますので、[クラス]をクリックして選択します。
ダイアログ下部の[名前]テキストボックスに作成するモデルのクラスの名称を入力します。今回は"MyItem"とします。(作成するファイルは "MyItem.cs" となります。)
設定ができたらウィンドウ右下の[追加]ボタンをクリックします。
"MyItem.cs"ファイルがModelsディレクトリ内に作成されました。
作成したモデルのクラスMyItemクラスにメンバを実装します。下記のコードを記述します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AspNetMvcModel.Models
{
public class MyItem
{
public string Name;
public int Value;
public string Code;
}
}
今回実装したMyItemクラスにはName, Value, Code の3つのメンバ変数を実装します。 Valueはint型で、Name,Code はString型になります。
public class MyItem
{
public string Name;
public int Value;
public string Code;
}
続いて、先ほど作成したモデルのクラスを扱うビュー(View)を追加します。
ソリューションエクスプローラーでASP.NET MVCプロジェクトのノードの[Views]ディレクトリのノードをクリックして選択します。右クリックしてポップアップメニューを表示します。[追加]メニューの[ビュー]サブメニューをクリックします。
[ビューの追加]ダイアログが表示されます。
[ビュー名]を作成するビュー名に変更します。今回は"Content"とします。[モデルクラス]の欄のコンボボックスを開きこのビューで利用するモデルのクラスを選択します。今回は先ほど作成した"MyItem"クラスを選択します。
[オプション]は今回はすべてのチェックを外します。設定ができましたらダイアログ右下の[追加]ボタンをクリックします。
Viewのcshtmlフィルが追加されました。モデルを参照するcshtmlのため、ファイルの先頭に"@model"ディレクティブが追加されていることがわかります。
ビューを実装します。下記のコードを記述します。
@model AspNetMvcModel.Models.MyItem
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Content</title>
</head>
<body>
<div>
<p>情報を表示します。</p>
<div>@Html.Encode(Model.Name)</div>
<div>@Html.Encode(Model.Value)</div>
<div>@Html.Encode(Model.Code)</div>
</div>
</body>
</html>
ほとんどは通常のHTMLと同じ書式です。
下記のコードはcshtmlが利用するViewの情報を参照するコードです。コントローラーからビューに渡されたモデルは "Model" の名称で参照できます。今回のコードではモデルにMyItemクラスが指定されているため、"Model.(メンバ名)" でビューに渡されたMyItemクラスのメンバ変巣の値を参照できます。
下記のコードではdivタグの中に、ビューに渡されたMyItemクラスの Name, Value, Code の値を画面に表示します。
<div>@Html.Encode(Model.Name)</div>
<div>@Html.Encode(Model.Value)</div>
<div>@Html.Encode(Model.Code)</div>
モデルに値を設定しビューに渡す処理をコントローラに実装します。
下記のコードを記述します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace AspNetMvcModel.Controllers
{
public class DefaultController : Controller
{
// GET: Default
public ActionResult Index()
{
return View();
}
public ActionResult Content()
{
Models.MyItem item = new Models.MyItem();
item.Name = "ペンギン";
item.Value = 830;
item.Code = "p-001";
return View(item);
}
}
}
追加したビューの名前である"Content"と同じ名称のメソッド"Content"メソッドをコントローラーに実装します。
メソッド内で、MyItemクラスのインスタンスを作成します。作成したクラスオブジェクトのメンバ変数に値を代入します。値の代入後ビューにオブジェクトを渡します。渡すオブジェクトは View() メソッドの引数に与えます。
public ActionResult Content()
{
Models.MyItem item = new Models.MyItem();
item.Name = "ペンギン";
item.Value = 830;
item.Code = "p-001";
return View(item);
}
プロジェクトを実行します。Webブラウザが起動しますので、Webアプリケーションの /Default/Content ページを表示します。コントローラーで代入したMyItemオブジェクトの値がページに表示されることが確認できます。
