JavaScript Interop - CallingCSharpMethod

Blazor 에서는 C# 에서 JavaScript 관련 Method 를 호출 할 수 있지만

반대로 JavaScript 에 C# 관련 Method 를 호출 할 수도 있다. 

 

 

**이전강좌를 통해 기본적인 Javascirpt Interop 에 대해 익혔다고 가정합니다. **

https://yogingang.tistory.com/183

https://yogingang.tistory.com/187

직접 호출 

Data/CSharpObject.cs

...
[JSInvokable]
public static string StaticMethod() => "Static method called";
...

 

wwwroot/js/global.js

...
async function callStaticLocalComponentMethod() {
    const data = await DotNet.invokeMethodAsync("BlazorTutorial", "StaticMethod");
    alert(data);
}
...

 

Pages/DirectCall.razor

@page "/call/direct"
@using BlazorTutorial.Data

<h3>DirectCall</h3>

<button onclick="callStaticLocalComponentMethod()">call direct</button>

 

프록시 호출 (Proxy Calling)

Data/CSharpObject.cs

[JSInvokable]
public string ProxyMethod() => Name = $"ProxyMethod called";

 

wwwroot/js/callByModule.js

export async function callProxyCSharpMethod(csharpObject) {
    alert(await csharpObject.invokeMethodAsync("ProxyMethod"));
}

Pages/ProxyCall.razor

@page "/call/proxy"
@using BlazorTutorial.Data
@inject IJSRuntime JS
@implements IAsyncDisposable
<button @onclick="CallFunction">Proxy Call</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();

        var refObject = DotNetObjectReference.Create<CSharpObject>(passObject);
        await Module.Value.InvokeVoidAsync("callProxyCSharpMethod", refObject);
        refObject?.Dispose();
    }

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

 

CSharpObject Return

Data/CSharpObject.cs

[JSInvokable]
public CSharpObject ReturnCSharpObject() => new()
{
     Name ="return new CSharpObject",
     Age =2000,
     BirthDate = DateTime.Now
};

wwwroot/js/callByModule.js

...
export async function callReturnCSharpObjectMethod(csharpObject) {
    alert(JSON.stringify(await csharpObject.invokeMethodAsync("ReturnCSharpObject")));
}
...

Pages/ProxyCall.razor

...
<button @onclick="CallFunction2">Return CSharpObject </button>
...

...
public async Task CallFunction2()
{
    var passObject = new CSharpObject();

    var refObject = DotNetObjectReference.Create<CSharpObject>(passObject);
    await Module.Value.InvokeVoidAsync("callReturnCSharpObjectMethod", refObject);
    refObject?.Dispose();
}
...

 

C# 메서드로 data 전달 (parameters)

 

Primitive type

//c# side code
...
[JSInvokable]
public void MethodWithPrimitiveParameters(string name, int age, DateTime birthDate)
{
    Name = name;
    Age = age;
    BirthDate = birthDate;
}
...

// javascript side
...
export function callPrimitiveParameterizedCSharpMethod(csharpObject) {
    csharpObject.invokeMethodAsync("MethodWithPrimitiveParameters", "Send Primitive Type", 100, new Date());
}
...

// .razor
<button @onclick="CallFunction">Call by Primitive Type</button>
...
public async Task CallFunction()
{
    var passObject = new CSharpObject();

    var refObject = DotNetObjectReference.Create<CSharpObject>(passObject);
    await Module.Value.InvokeVoidAsync("callPrimitiveParameterizedCSharpMethod", refObject);
    refObject?.Dispose();
}
...

 

Reference type

//c# side
[JSInvokable]
public void MethodWithReferenceParameters(CSharpObject self)
{
    Name = self.Name;
    Age = self.Age;
    BirthDate = self.BirthDate;
}

// javascript side
export function callReferenceParameterizedCSharpMethod(csharpObject) {
    let passingObject = {
        name: "Send Reference Type",
        age: 200,
        birthDate: new Date()
    };

    csharpObject.invokeMethodAsync("MethodWithReferenceParameters", passingObject);
}

//.razor
...
<button @onclick="CallFunction2">Call by Reference Type </button>
...
public async Task CallFunction2()
{
    var passObject = new CSharpObject();

    var refObject = DotNetObjectReference.Create<CSharpObject>(passObject);
    await Module.Value.InvokeVoidAsync("callReferenceParameterizedCSharpMethod", refObject);
    refObject?.Dispose();
}
...

 

 

관련영상

https://youtu.be/Ljo3UOOGccE