[Blazor] Blazor에서 JavaScript 함수 호출

😬 Blazor에서 JavaScript 함수 호출

---

Blazor에서 Lottie.js를 사용하려고보니 여러가지 문제가좀 있었기에 적어둔다.

먼저 JavaScript를 작성하자

_Layout.cshtml

    <!-- Blazor Server SCRIPTS -->
    <script src="_framework/blazor.server.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script> <--요놈추가

index.razor

    <div id="lottieJS"></div>
    <button type="button" @onclick = "loginBtnClick"></button>

    function lottieStart(id, dataNum) {

        var Data = [
            "https://assets6.lottiefiles.com/packages/lf20_ABViugg18Y.json", //TransferFiles 0
        ];
            

        lottie.loadAnimation({
            container: document.getElementById(id.toString()), // the dom element that will contain the animation
            renderer: 'svg',
            loop: true,
            autoplay: true,
            rendererSettings: {
                progressiveLoad:true
            },
            path: Data[dataNum].toString() // the path to the animation json
        });
    }

    function lottieDestroy() {
        lottie.destroy();
    }

Lottie를 시작하는 함수와
애니메이션을 지우는 Destroy 함수를 만들고

index.razor

    @inject IJSRuntime JS


    [Inject]
    private NavigationManager navigationManager { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("lottieStart", "lottieJS", 0);
        }
        else
        {
            Console.WriteLine("Render 오류발생!!!!!");
        }
    }

    private async Task loginBtnClick()
    {
        await JS.InvokeVoidAsync("lottieDestroy"); // Animation 삭제
        await JS.InvokeVoidAsync("lottieStart", "lottieJS", 1); // 다른 Animation 추가
        Thread.Sleep(2000);
        navigationManager.NavigateTo("/index"); // 페이지 이동
    }

razor component가 모두 렌더링된 후에
JavaScript함수인 lottieStart를 호출한다.
그것의 Parameter인 태그ID와 json 링크주소배열 순번을 넘겨준다.

---

완성!!!!!

Lottie 홈페이지 https://airbnb.io/lottie/
Lottie github - https://github.com/airbnb/lottie
LottieFiles - https://lottiefiles.com/featured
MSDS - .NET에서 JavaScript 호출

Note: 만들고나니 내것이 아니었다.