ASP.NET Core の部分ビューで JavaScript を使用したい

2018/07/26

ASP.NET Core の部分ビューで JavaScript を使用したい

ASP.NET Core の部分ビューに @section scripts を書くとエラーになったので、代替案を模索しました。

結論としては、HTML と JavaScript に分けて部分ビューを作成する方法に落ち着きました。
（他に良い方法があれば教えて頂きたいです。）

環境

Visual Studio 2017
ASP.NET Core 2.1

問題点

ASP.NET Core では、JavaScript は @section scripts の中に書くことで、_Layout.cshtml 内の @RenderSection("Scripts") の箇所に出力されます。

しかし、部分ビューの場合、@section scripts を書くとエラーになってしましました。
はっきりとした理由はわかりませんが、部分ビューは何度も読み込まれることを想定しているためではないかとのことです。

仕方がないので、HTML の部分と JavaScript に分けて部分ビューを作成することにしました。

尚、JavaScript だけであれば、部分ビューではなく .js ファイルとして作成して読み込む方法もあるかと思います。
しかし、私の場合は Razor により JavaScript のコード自体を動的に生成したかったので、JavaScript だけの部分ビューを作成しました。
（以下のサンプルコードは静的な JavaScript コードですが）

サンプルコード

部分ビューのファイル名はそれぞれ Sample.cshtml SampleJS.html としました。

部分ビューを使用するファイル

<div>
@Html.PartialAsync("Sample").Result
</div>

@section scripts {
    @Html.PartialAsync("SampleJS").Result
}

部分ビュー(HTML)

<table id="sampleTable" class="table table-hover table-condensed">
    <thead>
        <tr>
            <th>foo</th>
            <th>bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>foo</th>
            <th>bar</th>
        </tr>
    </tbody>
</table>

部分ビュー(JavaScript)

<environment include="Development">
    <script src="~/lib/datatables.net/js/jquery.dataTables.js"></script>
    <script src="~/lib/datatables.net-bs/js/dataTables.bootstrap.js"></script>
</environment>
<environment exclude="Development">
    <script src="~/lib/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="~/lib/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
</environment>
<script>
    $(function () {
        $("#sampleTable").DataTable({
            lengthMenu: [10, 50, 100],
            displayLength: 10,
        });
    });
</script>

参考 URL

https://teratail.com/questions/101799

へっぽこプログラマーの備忘録

2018/07/26