ASP.NETとC# @Html.Partialで部分ビューを表示

ASP.NETとC#の@Html.Partialで部分ビューを表示するサンプルです。
(確認環境:Microsoft Visual Studio Community 2019)

目次

サンプル 部分ビューを表示する
  呼び出す側のビュー(TestView1.cshtml)
  部分ビュー(part1.cshtml)
  実行結果
  コントローラ(Test1Controller.cs)
モデル(ActionForm.cs)

部分ビューを表示する

ビューのTestView1.cshtmlからSharedフォルダ配下のPart1.cshtmlを呼び出して表示します。Shared(シェアード)は共有という意味です。

その際、modelの値と変数が部分ビューで参照できるかも確認します。

https://localhost:44320/Test1/TestView1

 

呼び出す側のビュー(TestView1.cshtml)

@model asp_test2.Models.ActionForm
@{
	var str = "テスト";
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	@Html.Partial("part1")
	<p style="background: Orange">@Model.name</p>
	<p style="background: Orange">@str</p>

	@Html.Partial("/Views/Shared/Part1.cshtml")
	@Html.Partial("~/Views/Shared/Part1.cshtml")
</body>
</html>

10行目は、part1.cshtmlを呼び出します。

ビューでモデルの値と変数の値を確認するため、1行目にモデルと4行目に変数を追加しています。

14,15行目の書き方でも可能です。チルダ(~)はホームディレクトリを指します。

 

部分ビュー(part1.cshtml)

部分ビューとして呼ばれる側です。

<p style="background: yellow">part1.cshtmlのページです</p>
<p style="background: yellow">@Model.name</p>
<p style="background: yellow">@*str*@</p>

1行目は、文字列として表示されます。
2行目は、モデルで表示されます。
3行目は、呼ぶ側のビューにある変数ですが表示できません。※コメントにしています。

 

実行結果

上記コードを実行した結果です。

ビューの上部分の黄色の箇所は、部分ビュー(Part1.cshtml)の画面です。
モデルの値も表示されています。

ビューの下部分のオレンジの箇所は、呼び出す側のビュー(TestView1.cshtml)の画面です。
※ビューの14,15行目は表示していません。

 

コントローラ(Test1Controller.cs)

ビュー(TestView1.cshtml)を表示するコントローラです。

using asp_test2.Models;
using System.Web.Mvc;

namespace asp_test2.Controllers
{
    public class Test1Controller : Controller
    {
		public ActionResult TestView1()
		{
			var actionForm = new ActionForm();
			actionForm.name = "ABCDE";
			return View(actionForm);
		}
	}
}

11行目は、モデルの項目に値をセットしています。

モデル(ActionForm.cs)

ビューの表示で使用するモデルです。

namespace asp_test2.Models
{
	public class ActionForm
	{
		public string name { get; set; }
	}
}

関連の記事

ASP.NETとC# ビューの書き方(変数/配列/if/for)

△上に戻る