C# Blazor JavaScript 함수에서 .NET 메서드 호출하는 방법

Blazor의 JavaScript 함수에서 .NET 메서드 호출하는 방법

 

Blazor 의 JavaScript 에서 .Net Method 를 호출하는 방법입니다.

1. 첫번째 방법은 아래와 같이 Assembly 명과 Method 명으로 호출하는 방법입니다.

@page "/"

<PageTitle>Call .NET</PageTitle>

<script>
    function returnArrayAsync()
    {
        DotNet.invokeMethodAsync('BlazorCallFromJS', 'ReturnArrayAsync1', 'JS Param1')
            .then(data => {
                console.log(data);
            });

        DotNet.invokeMethodAsync('BlazorCallFromJS', 'TEST', 'JS Param2')
            .then(data => {
                console.log(data);
            });
    }
</script>

<p>
    <button onclick="returnArrayAsync()">
        Trigger .NET static method
    </button>
</p>

@code {

    [JSInvokable]
    public static Task<string[]> ReturnArrayAsync1(string jsParam)
    {
        return Task.FromResult(new string[] { "test1", jsParam });
    }

    [JSInvokable("TEST")]
    public static Task<string[]> ReturnArrayAsync2(string jsParam)
    {
        return Task.FromResult(new string[] { "test2", jsParam });
    }
}

위 코드를 보면 알 수 있듯이 JSInvokable 롤 선언한 메서드는 Java 에서 호출이 가능하게 됩니다.

메서드 명으로 호출할 수 있으나 명칭을 바꾸길 원하면  [JSInvokable("TEST")] 이런 식으로 메서드명을

명명하여 호출하면 됩니다.

'Trigger .NET static method' 버튼을 클릭하게 되면 JavaScript의 returnArrayAsync() 를 호출하게 되고

returnArrayAsync 에서 .Net 메서드(ReturnArrayAsync1) 를 호출하게 됩니다.

 

2. 두 번째 방법은 DotNetObjectReference 를 이용한 방법입니다.

DotNetObjectReference 를 JavaScript 인자로 넘겨서 처리하는 방법으로 사용방법은 아래와 같습니다.

@page "/"
@implements IDisposable
@inject IJSRuntime JS

<PageTitle>Call .NET</PageTitle>

<script>
    function sayHello(dotNetHelper, message)
    {
        dotNetHelper.invokeMethodAsync('GetHelloMessage', message);
    }
</script>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private DotNetObjectReference<Home>? objRef;
    private string? result;

    protected override void OnInitialized()
    {
        objRef = DotNetObjectReference.Create(this);
    }

    public async Task TriggerDotNetInstanceMethod()
    {
        result = await JS.InvokeAsync<string>("sayHello", objRef, "test3");
    }


    [JSInvokable]
    public void GetHelloMessage(string message)
    {
        Console.WriteLine("SayHello " + message);
    }

    public void Dispose() => objRef?.Dispose();
}

JavaScript 를 호출하는 경우 DotNetObjectReference 인자로 넘겨 해당 인자를 이용해

JavaScript 에서 invokeMethodAsync 으로 Method 명과 인자를 넘기면 됩니다.

중요한 건 반드시 DotNetObjectReference 에 대해 Dispose 를 해야 합니다.

 

 

참고

https://learn.microsoft.com/ko-kr/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-8.0

ASP.NET Core Blazor의 JavaScript 함수에서 .NET 메서드 호출