JSRuntime in Blazor

JSRuntime은 JavaScript 엔진의 인스턴스를 나타내는 최상위 객체입니다. 

프로그램은 일반적으로 여러 스레드가 있더라도 하나의 JSRuntime만 가지게 됩니다.

 

그래서 결론은 뭐냐?

@code 블럭에서 JavaScript 를 호출, 또는 실행하고 싶다면 JSRuntime을 사용해야 한다는 것이다.

 

.razor

@inject IJSRuntime JSRuntime

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

    private async Task SaveNewWord()
    {
        await JSRuntime.InvokeVoidAsync("showQueryResult", wordSeq, mode);
    }
}

 

.js

function Test(p0) {
    $("#WordSecondLanguage").val("sdfsdf");

    alert("p0");
    return P0 + "return by js";
}

function showQueryResult(p0, p1) {
    alert("p0");
}

 

비고]

InvokeAsync 와 InvokeVoidAsync 의 차이점은 return 결과 유무 이다.

 

만약

javascript 함수 실행한 후

return 값을 사용해서 @code 블록에서 추가 작업을 할 경우 " InvokeAsync " 를 사용하고

StateHasChanged() 함수를 필수로 호출해 주어야한다.

 

하지만

javascrip 함수 실행 후 추가 작업이 없다면 " InvokeVoidAsync" 를 사용하면 된다.

 

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