@code with Js(@code 와 자바스크립 상호 작용)

blazor 파일과 함게 js 파일 배치

blazor 파일과 함게 js 파일을 배치 할 수 있는 편리하 기능을 제공한다.

원문 표현 " Load a script from an external JavaScript file (.js) collocated with a component "

이게 참 멎진 기능인대 사용하기에는 녹록지 않다.

 

사용법

1. 자바스크립트 생성

갭쳐 화면과 같이 동일한 파일명으로 자바스크립트 파일을 생성한다.(확장자는 .js)

 

2. 새로 추가한 자바스크립트 파일을 추가한다.

 

3. Test 함수를 생성한다.

// Counter.razor.js

function Test(param) {
    alert("call medddd?");
    return param + " return by js";
}

 

4. Test 함수 호출

@page "/counter"
@rendermode InteractiveServer
@inject IJSRuntime JS

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<button @onclick="CallJs">call Js</button>
<p>@result</p>

@code {
    private int currentCount = 0;
    private string? result;

    private void IncrementCount()
    {
        currentCount++;
    }

    public async void CallJs()
    {
        result = await JS.InvokeAsync<string>("Test", "from @code");
        StateHasChanged();
    }
}

 

나는 이 방법을 알아 내기 위해 몇 일을 고생했는데...ㅜ.ㅜ

또 다른 누군가는 나와 같은 고생을 하지 않기를 바라는 마음에 이 글을 작성한다.

 

비고]

StateHasChanged() 함수에 대한 설명은 링크를 참조 하세요.