BlazorにJavaScript(.js)ファイルのインポートする方法

Swiper（https://swiperjs.com/get-started/）という、cssとjsのみ画像スライダーを実現するコードを使用したいのですが、
jsファイルの読み込み方法がわかりません。
サムネイル付き画像スライダーを表現する、Swiperのカスタムjsファイル「topimages.js」はwwwroot/js/topimages.jsに配置しています。

Pages/_Host.cshtml内に、

@My-Swiper jsとcssのCDN(1)@

<head>に上記サイトの載っているSwiperのcssとjsのCDNタグを付けました。

@My-Swiper Swiperのカスタムjsファイル(2)@

@My-Swiper(3)@

@*My-Swiper Swiperのカスタムjsファイル(2)*@
<script src="~/js/topimages.js"></script>

@*My-Swiper(3)*@
<script>
    var slider = new Swiper('#slider', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev'
    })
    var thumbs = new Swiper('#thumbs', {
        centeredSlides: true,
        spaceBetween: 10,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true
    });
    slider.params.control = thumbs;
    thumbs.params.control = slider;
</script>

</head> <body>

<app>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
</app>

<div id="blazor-error-ui">
    <environment include="Staging,Production">
        An error has occurred. This application may no longer respond until reloaded.
    </environment>
    <environment include="Development">
        An unhandled exception has occurred. See browser dev tools for details.
    </environment>
    <a href="" class="reload">Reload</a>
    <a class="dismiss">????</a>
</div>
<script src="_framework/blazor.server.js"></script>

@*My-Swiper(4)*@
<script type="text/javascript" src="~/js/topimages.js"></script>

</body> </html>


jsファイルを読み込ませたい先のPages/MyPages/TopImages.razorのコードになります。
```Blazor

Pages/MyPages/TopImages.razor

@page "/topimages"

@inject IJSRuntime JSRuntime

@inherits ArticleItem

<h3>TopImages</h3>

@foreach (var build in builds)
{
    <div id="slider" class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="/Images/Builds/@build.ArtImageUrl" style="width:300px; height:auto;"></div>
        </div>
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
    </div>

    <div id="thumbs" class="swiper-container mb60">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="/Images/Builds/@build.ArtImageUrl" style="width:100px; height:auto;"></div>
        </div>
    </div>
}

@code {
}

海外サイトを翻訳かけつつ調べてみたのですが、ファイル自体の読み込む方法がわからずでして・・・。
どなたかご教示頂けないでしょうか、
どうぞ宜しくお願いいたします・・・。

退会済みユーザー

2020/06/15 00:44

開発環境（Visual Studio のバージョン、プロジェクトを作成したテンプレート、WebAssmbly か Server のどっちかなど）を書いてください。

退会済みユーザー

2020/06/15 00:56

Swiper というのが動かないだけで例えば質問者さんが簡単な JavaScript のサンプルを作ってそれを動かすのは問題なくできるのか、それともそもそも Swiperが動かない以前に JavaScript は全く動かないのかどっちですか？

行動規範の内容に同意します

回答1件

質問者さんが行方不明ですが、自分がかかわったスレッドがこのまま放置されて終わってしまうのもなんですので、たぶん VS2019 の Blazor Server のテンプレートで作ったアプリの話であろうと想像して回答を書いておきます。

質問にある topimages.js とか正体不明ですしコードはいろいろいじり倒しているので、質問のコードをベースに話はできないです。なので、Swiper のデモのページ（URL 下記）の Default Setup をベースに話をします。

Swiper Demos
https://swiperjs.com/demos/

質問者さんの問題は Blazor での Swiper の初期化、すなわち上のデモ Default Setup のソースコードで言うと下のコードを Blazor でどのように実行するかだと思います。質問のコードは他にも問題があるかもしれませんが、少なくとも初期化ができてないのは明白です。

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper('.swiper-container');
</script>

Swiper のデモ Default Setup を Blazor Server アプリで動かすためのコードは以下の通りです。

_Host.cshtml

赤枠部分が Swiper のデモ用に追加した部分です。swiper.css, swiper.js は CDN から取得します。

swiperexample.css

デモのソースコードの  のスタイルです。_Host.cshtml にインラインで含めても良いのですが、普通はそういうことはしないと思います。なので、wwwroot/css フォルダ下に外部ファイルとして作成し、上の _Host.cshtml から参照します。デモのソースコードの .swiper-container の width:100% が原因でサイズを変えると中身が消えてしまうことがあるので 600px x 300px に変更してます。

swiperexample.js

これも _Host.cshtml にインラインで含めても良いのですが、wwwroot/js フォルダ下に外部ファイルとして作成し、上の _Host.cshtml から参照してます。赤枠の部分が上で述べた Swiper を初期化するためのものです。この initializeSwiper メソッドを Razor コンポーネントの @code ブロックの中から呼び出せば Swiper を初期化できます。

Razor コンポーネント

画像の一番下の赤枠のコードが JavaScript の initializeSwiper メソッドを呼び出して Swiper を初期化するコードです。

コンポーネントのレンダリングが完了した後に呼び出される OnAfterRenderAsync または OnAfterRender で行うのがよさそうです。他にも OnInitializedAsync とかがありますが、そのタイミングでは早すぎるようです。それらのメソッドの詳細は以下の記事を見てください。

ASP.NET Core Blazor ライフサイクル
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/lifecycle?view=aspnetcore-3.1

結果

赤枠部分が Swiper デモのものです。ブラウザは Windows 10 の Chrome です。