ASP.NET RazorでJavaScriptを指定するサンプル

nas2020/04/29

ASP.NETのRazorでJavaScriptを指定するサンプルです。
言語はVB.NETです。

目次

外部のJS 外部のJavaScriptを指定する
  外部のJavaScriptファイル
  ビュー
ビュー固有のJS @Sectionでビュー固有のJavaScriptを指定する

外部のJavaScriptを指定する

外部のJavaScriptを指定するサンプルです。

BundleConfig.vb

BundleConfig.vbに外部に出すJavaScriptファイルを指定します。(App_Start/BundleConfig.vb)

Imports System.Web.Optimization

Public Module BundleConfig
	' For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
	Public Sub RegisterBundles(ByVal bundles As BundleCollection)

		bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
					"~/Scripts/jquery-{version}.js"))

		bundles.Add(New ScriptBundle("~/bundles/jqueryval").Include(
					"~/Scripts/jquery.validate*"))

		' 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備が
		' ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
		bundles.Add(New ScriptBundle("~/bundles/modernizr").Include(
					"~/Scripts/modernizr-*"))

		bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include(
				  "~/Scripts/bootstrap.js",
				  "~/Scripts/respond.js"))

		bundles.Add(New StyleBundle("~/Content/css").Include(
				  "~/Content/bootstrap.css",
				  "~/Content/site.css"))

		bundles.Add(New ScriptBundle("~/bundles/project1").Include(
		  "~/Scripts/view1.js"))
	End Sub
End Module

26,27行目を追記しました。
26行目のScriptBundleクラスの引数は、呼び出すビューに追記する名称です。
27行目は、新規に追加するJavaScriptです。

外部のJavaScriptファイル

外部のJavaScriptファイルです。(Scripts/view1.js)

function getComment() {
	return "こんにちは";
}

文字列を返す関数です。

ビュー

ビューです。(view1.vbhtml)

@Code
	Layout = Nothing
End Code
<!DOCTYPE html>
<html>
<head>
	@Scripts.Render("~/bundles/project1")
	<script>
		var a = getComment();
		alert(a);
	</script>
</head>
<body>
</body>
</html>

7行目は、BundleConfig.vbの26行目に追記した名称を@Scripts.Renderで指定しています。
9行目は、外部のjsファイルの関数を呼び出しています。
画面が表示されると「こんにちは」というアラートが表示されます。

@Sectionでビュー固有のJavaScriptを指定する

@Sectionでビュー固有のJavaScriptを指定するサンプルです。
_Layout.vbhtmlのように、共通部を定義している場合に使用します。

共通部のビュー(_Layout.vbhtml)

共通部のビューです※後半は省略。(Views/Shared/_Layout.vbhtml)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - マイ ASP.NET アプリケーション</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("test1", False)
</head>

10行目は、新規に追加しました。個別のビューからsectionのtest1と指定することで埋め込むことができます。
2つめの引数は、個別のビューでセクションが必須かどうかです。falseなので不要です。
renderは「与える」でsectionは「部分」という意味です。

ビュー

ビューです。(view1.vbhtml)

@Section test1
	<script>
		function getComment() {
			return "こんにちは";
		}
		var a = getComment();
		alert(a);
	</script>
End Section
<body>
</body>

1行目は、_Layout.vbhtmlの10行目に定義したsectionと紐づきます。
画面が表示されると「こんにちは」というアラートが表示されます。

以下は、Microsoftのバンドルと縮小のリンクです。
https://docs.microsoft.com/ja-jp/aspnet/mvc/overview/performance/bundling-and-minification

関連の記事

ASP.NET RazorでCSSを指定するサンプル

△上に戻る