Blazor – JQueryの実行
前回、作成した画面はレスポンシブ対応で、画面を小さくすると、このようになります。
ここでメニューをクリックするとこのようになります。
しかし、Blazorに組み込むとクリックしてもメニューが出てきません。javascriptを見てみると、ここの個所が効いていないんですね。
on('click', '.mobile-nav-toggle', function(e) {
select('body').classList.toggle('mobile-nav-active')
this.classList.toggle('bi-list')
this.classList.toggle('bi-x')
})
javascriptのイベントが効いていない。これを効かせる方法があるのかもしれないのですが、今回はJQueryをBlazorから実行させる方法があるのでこれを使いました。
上記のコードJQueryで書くと以下のようになります。
$('.mobile-nav-toggle').click(function () {
$('body').toggleClass('mobile-nav-active');
$(this).toggleClass('bi-list');
$(this).toggleClass('bi-x');
})
新しくjavascriptファイルを作って、上記のコードをfunction renderjQueryComponents()という関数内に入れます。
function renderjQueryComponents() {
$('.mobile-nav-toggle').click(function () {
$('body').toggleClass('mobile-nav-active');
$(this).toggleClass('bi-list');
$(this).toggleClass('bi-x');
})
}
そして、razorファイル内で、以下のように書いてJQueryを登録します。
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("renderjQueryComponents");
}
}
これ、if(firstRender)内で登録しないと、２回登録されてしまうので、一度のクリックで関数が２回呼び出されてしまいます。これでメニュー画面を出すことが出来るようになりました。BlazorはJavascriptを新しく覚えなくてもC#でコードが書けることが謳い文句らしいんですが、実際の開発ってデザイナーの作った画面に組み込んでいく作業が多いですよね？多分・・・。結局Javascriptを解読しないと駄目やんと思うのですが・・・
Follow me!
