내 인생 이대로 ㅈ될 수 없다

반응형 웹이 필요했다.

평소에는 아무것도 보이지 않다가 작아지면 토글버튼이 생기고

토글 버튼 누르면 메뉴가 아래로 갱신되는 형태이다.

그러려면 자바스크립트를 쓸 수 밖에 없었고,

자바 스크립트를 사용하는 방법은 다음과 같았다.

@inherits LayoutComponentBase

<PageTitle>Changed</PageTitle>

<div class="wrapper">

    <header class="common-header">

    </header>

    <main>
        <article class="class-main">
            @Body
          
        </article>
    </main>

    <footer class="common-footer">

    </footer>
</div>

MainLayout.razor

@page "/"


<nav class="navbar">
    <div class="navbar__logo">
        <i class="fab fa-apple"></i>
        <a href="">자바스크립트 넣기</a>
    </div>
    <ul class="navbar__menu">
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
    <ul class="navbar__links">
        <li> <i class="fab fa-facebook-square"></i></li>
        <li><i class="fab fa-instagram"></i></li>
    </ul>

    <button href="#" class="navbar__toggleBtn" @onclick="ToggleMenu"></button>
</nav>

@code {
    
}

index.razor

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace Changed.Pages
{
    public partial class Index
    {
        [Inject]
        public IJSRuntime? JSRuntime { get; set; }

        private IJSObjectReference _jsModule;
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./assets/js/main.js");
            }
        }
        public async Task ToggleMenu() =>
            await _jsModule.InvokeVoidAsync("Changed");


    }
}

index.razor.cs

return 값이있다면 

```InvokeAsynce<object>```를

return 값이 없다면

```InvokeVoidAsync()```를

쓰면된다.

export function Changed() {
    const toggleBtn = document.querySelector('.navbar__toggleBtn');
    const menu = document.querySelector('.navbar__menu');
    const links = document.querySelector('.navbar__links');

    toggleBtn.addEventListener('click', () => {
        menu.classList.toggle('active');
        links.classList.toggle('active');
    })
    

}

main.js

_Host.cstml에 작성하면 export를 따로 적지 않아줘도된다.

결과

참고

ASP.NET Core Blazor의 .NET 메서드에서 JavaScript 함수 호출 | Microsoft Learn

[Blazor] javascript import 방법 - 👨‍🏫 튜토리얼, 팁, 강좌 - 닷넷데브 (dotnetdev.kr)

반응형 헤더 만들기 (velog.io)