jQuery
ASP.NET
Bootstrap
.NETCore
ASP.NET_Core

ASP.NET CoreのScriptTagHelperについて調べてみる

ASP.NET CoreScriptTagHelperについて調べたこと。


履歴

2017/05/26 初版

2019/03/15 環境ASP.NET Coreバージョン追加


環境

Visual Studio 2017

ASP.NET Core 1.1, 2.1, 2.2


ScriptTagHelperとは

ASP.NET Coreの新規プロジェクト作成時に出来る_Layout.htmlに記述されている以下のようなコードのこと。


Views/Shared/_Layout.cshtml

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"

asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>


ScriptTagHelperの機能

ScriptTagHelperには以下の属性を指定できる。

属性名

asp-src-include

asp-src-exclude

asp-fallback-src

asp-fallback-src-include

asp-fallback-src-exclude

asp-fallback-test

asp-append-version

以下、サンプルコードのソリューション構成

image.png


asp-src-include

複数のファイルを読み込む。Globbing patternsによる指定が可能。


Views/Shared/_Layout.cshtml

<script asp-src-include="~/js/sample/**/*.js"></script>



結果

<script src="/js/sample/test4.js"></script><script src="/js/sample/test5.js"></script><script src="/js/sample/calc/test1.js"></script><script src="/js/sample/calc/test2.js"></script><script src="/js/sample/calc/test3.js"></script>


image.png


asp-src-exclude

複数のファイルを除外する。asp-src-includeと組み合わせて使用する。Globbing patternsによる指定が可能。


Views/Shared/_Layout.cshtml

<script asp-src-include="~/js/sample/**/*.js" asp-src-exclude="~/js/sample/calc/*.js"></script>



結果

<script src="/js/sample/test4.js"></script><script src="/js/sample/test5.js"></script>


image.png


asp-fallback-src

src属性に指定したファイルの読み込みに失敗した場合に読み込む代替ファイル。asp-fallback-testと組み合わせて使用する。


Views/Shared/_Layout.cshtml

<script src="https://example.com/test.js" asp-fallback-src="~/js/sample/calc/test1.js" asp-fallback-test="window.test"></script>



結果

<script src="https://example.com/test.js"></script>

<script>(window.test||document.write("\u003Cscript src=\u0022\/js\/sample\/calc\/test1.js\u0022\u003E\u003C\/script\u003E"));</script>

image.png


asp-fallback-test

読み込みに失敗したかどうかの判定を行うためのスクリプト。

例えばjQueryの場合は、


Views/Shared/_Layout.cshtml

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"

asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>

といった具合に記述することで、「"window.jQuery"というオブジェクトが定義された=読み込みに成功した」とみなして判定することができる。


asp-fallback-src-include

src属性に指定したファイルの読み込みに失敗した場合に読み込む代替ファイル一式。Globbing patternsによる指定が可能。


Views/Shared/_Layout.cshtml

<script src="https://example.com/test.js" asp-fallback-src-include="~/js/sample/**/*.js" asp-fallback-test="window.test"></script>



結果

<script src="https://example.com/test.js"></script>

<script>(window.test||document.write("\u003Cscript src=\u0022\/js\/sample\/test4.js\u0022\u003E\u003C\/script\u003E\u003Cscript src=\u0022\/js\/sample\/test5.js\u0022\u003E\u003C\/script\u003E\u003Cscript src=\u0022\/js\/sample\/calc\/test1.js\u0022\u003E\u003C\/script\u003E\u003Cscript src=\u0022\/js\/sample\/calc\/test2.js\u0022\u003E\u003C\/script\u003E\u003Cscript src=\u0022\/js\/sample\/calc\/test3.js\u0022\u003E\u003C\/script\u003E"));</script>


asp-fallback-src-include

src属性に指定したファイルの読み込みに失敗した場合に読み込む代替ファイル一式。Globbing patternsによる指定が可能。


Views/Shared/_Layout.cshtml

<script src="https://example.com/test.js" asp-fallback-src-include="~/js/sample/**/*.js" asp-fallback-test="window.test"></script>



結果

<script src="https://example.com/test.js"></script>

<script>(window.test||document.write("\u003Cscript src=\u0022\/js\/sample\/test4.js\u0022\u003E\u003C\/script\u003E\u003Cscript src=\u0022\/js\/sample\/test5.js\u0022\u003E\u003C\/script\u003E\u003Cscript src=\u0022\/js\/sample\/calc\/test1.js\u0022\u003E\u003C\/script\u003E\u003Cscript src=\u0022\/js\/sample\/calc\/test2.js\u0022\u003E\u003C\/script\u003E\u003Cscript src=\u0022\/js\/sample\/calc\/test3.js\u0022\u003E\u003C\/script\u003E"));</script>

image.png


asp-fallback-src-exclude

src属性に指定したファイルの読み込みに失敗した場合に除外する代替ファイル一式。asp-fallback-src-includeと組み合わせて使用する。Globbing patternsによる指定が可能。


Views/Shared/_Layout.cshtml

<script src="https://example.com/test.js" asp-fallback-src-include="~/js/sample/**/*.js" asp-fallback-src-exclude="~/js/sample/calc/*.js" asp-fallback-test="window.test"></script>



結果

<script src="https://example.com/test.js"></script>

<script>(window.test||document.write("\u003Cscript src=\u0022\/js\/sample\/test4.js\u0022\u003E\u003C\/script\u003E\u003Cscript src=\u0022\/js\/sample\/test5.js\u0022\u003E\u003C\/script\u003E"));</script>

image.png


asp-append-version

ファイルのURLパス末尾にバージョン番号をハッシュ化した文字列を付加する。ファイル変更時のキャッシュ対策用。


Views/Shared/_Layout.cshtml

<script src="~/js/sample/calc/test1.js" asp-append-version="true"></script>



結果

<script src="/js/sample/calc/test1.js?v=2E3m_HZUu6HkFSgIsMaGLZTvfcps4WXJN9e69ag9h6I"></script>



おまけ


integrityのハッシュ文字列生成

https://www.srihash.org/

が便利です。