JavaScript Interop - CallingJavaScript 2/2

JavaScript 함수에 data 전달

 

IJSRuntime 의 InvokeAsync 및 InvokeVoidAsync 둘다 매개변수를 전달할 수 있다.

 

아래 파일을 생성 한다. 

wwwroot/js/callByModule.js 

export function callWithPrimtiveParameters(data1, data2, data3) {
    alert(`Received: data1 ${data1}, data2 ${data2}, data3 ${data3}`);
}

Pages/CallWithParameter.razor

@page "/call/pass-parameter-javascript-function"
@inject IJSRuntime JS
@implements IAsyncDisposable
<button @onclick="CallFunction">pass parameter to function</button>

@code {
    private Lazy<IJSObjectReference> Module = new();
     protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            Module = new(await JS.InvokeAsync<IJSObjectReference>("import","./js/callByModule.js"));
        }
    }
    public async Task CallFunction()
    {
        await Module.Value.InvokeVoidAsync("callWithPrimtiveParameters", "나야나", 1234, DateTime.Now);
    }

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

 

실행

 

 

공통개체 생성

Data/CSharpObject.cs

using Microsoft.JSInterop;

namespace BlazorTutorial.Data;
public class CSharpObject
{
    public string Name { get; set; } = "";
    public int Age { get; set; }
    public DateTime BirthDate { get; set; }

    [JSInvokable]
    public void VoidMethod() => Name = $"{nameof(VoidMethod)} called";
}

wwwroot/callByModule.js

export function callWithPrimtiveParameters(data1, data2, data3) {
    alert(`Received: data1 ${data1}, data2 ${data2}, data3 ${data3}`);
}

export function callWithReferenceParameter(csharpObjectReference) {
    alert(`Received object not null? - ${csharpObjectReference != null}`);
}

export function callWithObjectParameter(csharpObject) {
    alert(`Received object data: name ${csharpObject.name}, age ${csharpObject.age}, birthDate ${csharpObject.birthDate}`);
}

 

JavaScript 함수에 개체 참조 전달

Pages/CallWithReference.razor

@page "/call/with-reference"
@using BlazorTutorial.Data
@inject IJSRuntime JS
@implements IAsyncDisposable
<button @onclick="CallFunction">pass parameter to function</button>

@code {
    private Lazy<IJSObjectReference> Module = new();
     protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            Module = new(await JS.InvokeAsync<IJSObjectReference>("import","./js/callByModule.js"));
        }
    }
    public async Task CallFunction()
    {
        var passObject = new CSharpObject()
        {
            Name = "나야 나",
            Age = 100,
            BirthDate = DateTime.Now
        };
        var refObject = DotNetObjectReference.Create<CSharpObject>(passObject);
        await Module.Value.InvokeVoidAsync("callWithReferenceParameter", refObject);
    }

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

 

Reference 로 CSharpObject 를 전달 하는 경우 Property 또는  member field로 javascript 가 접근 할 수 없다. 

대신 function 으로의 접근은 가능 한다.

[JSInvokable] 

위 attribute 가 적용된 함수는 javascript 에서 호출 할 수 있다. (이 다음 강좌에서 설명드리겠다.)

즉 javascript 에서 c# method 를 호출 할때는 위와 같이 csharp class 의 reference 를 javascript 쪽으로 전달 하여야 한다. 

 

JavaScript 함수에 개체 데이터 전달

@page "/call/with-object"
@using BlazorTutorial.Data
@inject IJSRuntime JS
@implements IAsyncDisposable
<button @onclick="CallFunction">pass parameter to function</button>

@code {
    private Lazy<IJSObjectReference> Module = new();
     protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            Module = new(await JS.InvokeAsync<IJSObjectReference>("import","./js/callByModule.js"));
        }
    }
    public async Task CallFunction()
    {
        var passObject = new CSharpObject()
        {
            Name = "나야 나",
            Age = 100,
            BirthDate = DateTime.Now
        };
        await Module.Value.InvokeVoidAsync("callWithObjectParameter", passObject);
    }

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

CSharpObject 에서 property 는 Name, Age, BirthDate 로 되어 있지만 javascript 로 전달되면서 json 변환과정에서 camelCase 로 변경되어 name, age, birthDate 가 된다.  참고 하자

 

 

관련영상

https://youtu.be/FtkF6Vd5un0