JavaScript Interop - CallingJavaScript 1/2

전역 자바스크립트 함수 호출 하기

 

wwwRoot/js/global.js  에 특정 함수 호출

function exampleFunction() {
    alert("exampleFunction from global.js called");
}

위의 global.js 를 _Layout.cshtml 의 body 영역에서 script 태그를 통해 import 하였다.

_Layout.html

 

IJSRuntime 를 @inject 를 이용해 inject 한후 global.js 의 exampleFunction 을 호출 한다. 

 

Pages/CallGlobalJavascriptFunction.razor

@page "/call/global-javascript-function"
@inject IJSRuntime JS
<button @onclick = "CallFromGlobalAsync">Call Global Javascript Function</button>

@code {
    public async Task CallFromGlobalAsync()
    {
        await JS.InvokeVoidAsync("exampleFunction");
    }
}

 

실행

 

 

Module 자바스크립트 함수 호출하기

 

wwwRoot/js/isolate.js 생성

export function exampleFunction() {
    alert("exampleFunction from isolated.js called");
}

Pages/CallFunctionModule.razor

OnAfterRenderAsync 를 override 하여 IsolatedModule 를 초기화 시켜준다. 

(코드상에서 보면 Import 를 통해 ./js/isolated.js 를 load 시키고 있다.)

DisposeAsync() 에서 IsolatedModule 을 Dispose 시킨다.

@page "/call/module-javascript-function"
@inject IJSRuntime JS
@implements IAsyncDisposable
<button @onclick="CallFromIsolatedAsync">Call Module Javascript Function</button>

@code {
    private Lazy<IJSObjectReference> IsolatedModule = new();
     protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            IsolatedModule = new(await JS.InvokeAsync<IJSObjectReference>("import","./js/isolated.js"));
        }
    }
    public async Task CallFromIsolatedAsync()
    {
        await IsolatedModule.Value.InvokeVoidAsync("exampleFunction");
    }

    public async ValueTask DisposeAsync()
    {
        await IsolatedModule.Value.DisposeAsync();
    }
}

 

반환 값 처리 하기

 

wwwRoot/js/global.js 에 다음 함수 추가

function predictableResult() {
    return "Ok";
}

function unpredictableResult() {
    let randomNum = Math.random() * 10;

    if (randomNum < 3) {
        return "Hello World";
    }

    if (3 < randomNum && randomNum < 6) {
        return 10;
    }

    return 1;
}

하나는 string 을 return 하는 것이고

하나는 string 또는 number 형을 return 하는 javascript function 이다.

 

Pages/ReturnGlobalJavascriptFunction.razor 생성

@page "/return/global-javascript-function"
@inject IJSRuntime JS
<button @onclick = "CallStaticType">return static type</button>
<button @onclick = "CallDynamicType">return dynamic type</button>

<h1><span class="text-danger">@Data</span></h1>

@code {
    private dynamic Data { get; set; } = "";

    public async Task CallStaticType()
    {
        Data = await JS.InvokeAsync<string>("predictableResult");
    }
    public async Task CallDynamicType()
    {
        Data = await JS.InvokeAsync<dynamic>("unpredictableResult");
    }
}

string 은 InvokeAsync<string> 형태로 받고 

variantType 은 InvokeAsync<dynamic>  형태로 받는다. 

 

실행

return static type 클릭

return dynamic type 클릭

 

 

 

관련영상

https://youtu.be/cQYHlD2Z138