ASP.NET 共通の部分レイアウトを作成(VB.NET)

ASP.NETの共通の部分レイアウトを作成するサンプルです。言語はVB.NETです。

確認環境
・Microsoft Visual Studio Community 2019

目次

サンプル 共通の部分レイアウトを作成する
  実行結果

共通の部分レイアウトを作成する

ビューのヘッダーやフッターになる共通の部分レイアウトを作成します。

1.ViewsフォルダのSharedフォルダ配下に_partial1.vbhtmlファイルを作成しました。
Shared(シェアード)は共有という意味です。

index.vbhtmlで_partial1.vbhtmlを読み込むようにします。

 

2.以下は_partial1.vbhtmlファイルのコードです。

<p style="background:yellow;">部分です</p>
@RenderBody()
<hr />
<p style="background:yellow;">&copy; @DateTime.Now.Year マイ アプリ</p>

2行目の@RenderBody()の箇所にビューが表示されます。
1行目がヘッダーで、4行目がフッターのイメージです。

 

ビュー

以下はビューのコードです。ファイル名は、index.vbhtmlです。

@Code
	Layout = "~/Views/Shared/_partial1.vbhtml"
End Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<input type="text" id="text1" value="red" />
	<input type="submit" id="button1" value="ボタン" />
</body>
</html>

2行目は、Layoutの変数に共通の部分レイアウトの_partial1.vbhtmlファイルを指定しています。

 

コントローラ

以下は、コントローラです。ビューを表示します。

Namespace Controllers
	Public Class Test1Controller
		Inherits Controller

		Function Index() As ActionResult
			Return View()
		End Function
	End Class
End Namespace

 

実行結果

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

ビューの上下の部分に共通の部分レイアウト(_partial1.vbhtmlファイル)が表示されています。

 

共通の部分レイアウトを表示したくない場合

共通の部分レイアウトを表示したくない場合は、ビューのLayout変数にNothingをセットします。

@Code
	Layout = Nothing
End Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<input type="text" id="text1" value="red" />
	<input type="submit" id="button1" value="ボタン" />
</body>
</html>

以下は、MicrosoftのASP.NET Web ページ (Razor) サイトでの一貫したレイアウトの作成のリンクです。
https://docs.microsoft.com/ja-jp/aspnet/web-pages/overview/ui-layouts-and-themes/3-creating-a-consistent-look

関連の記事

ASP.NET JsonResultでJSONを返す(VB.NET)
ASP.NET RedirectToActionのサンプル(VB.NET)

△上に戻る