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;">© @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)