Calling C# methods

To make a good website, Blazor and JavaScript need to work closely. Blazor is not only support C# to call JavaScript, but from JavaScript to call C# as well. In this tutorial, you will discover:

• Call a C# method.
• Handle methods with return value.
• Pass data to a method.

You can download the example code used in this topic on GitHub.

Prerequisite

Before going further in this tutorial, you need to learn how to add JavaScript to Blazor and how to call a JavaScript function first.

Call a C# method

To make the integration with JavaScript library more efficient, Blazor supports to call a C# method from JavaScript. There are 2 ways to call a C# method: Direct calling and Proxy calling.

Direct calling and Proxy calling

Direct calling: only apply for C# static methods with the attribute [JSInvokable]. The call will be initiated by JavaScript.

1. Make the destination C# method as static with the [JSInvokable] attribute. For example:

[JSInvokable]
public static void LocalStaticMethod()
{
}

2. In JavaScript function, use DotNet.invokeMethodAsync(assemblyName, methodName) to call the C# method. For example:

function callStaticLocalComponentMethod()
{
    DotNet.invokeMethodAsync("JavaScriptInteraction", "LocalStaticMethod");
}

The first parameter is your Assembly Name, the second parameter is your method name. You can right-click your project, select Properties and look for Packages ⇒ General to see your assembly's name as the following image:

You can put your static method in any class. In the end, Blazor uses the assembly's name to find the method. Your method should have a unique name. If not, you can pass a parameter to [JSInvokable] attribute to specify a different name for your method.

Proxy calling: only apply for any C# method with the attribute [JSInvokable]. The call will be initiated by C# to call and pass a reference to the JavaScript function, the JavaScript function takes that reference, make a call back to C#.

1. Define destination C# method with the attribute [JSInvokable]. For example:

public class ExampleClass
{
    [JSInvokable]
    public void ExampleVoidMethod()
    {
    }
}

2. Pass the instance to the JavaScript function. Assuming you have your JavaScript module stored in ExampleModule:

var exampleInstance = new ExampleClass();
var wrappedInstance = DotNetObjectReference.Create(exampleInstance );
await ExampleModule.Value.InvokeVoidAsync("callSynchronousCSharpMethod", wrappedInstance);

3. Receive the reference, then use the reference to invoke the destination C# method in JavaScript function.

export function callSynchronousCSharpMethod(csharpObject)
{
    csharpObject.invokeMethodAsync("ExampleVoidMethod");
}

Call a synchronous method

Assuming you have the following C# method:

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

In the JavaScript function, just like C#, you don't need to await the result for the synchronous method. You can make a simple call as follows:

export function callSynchronousCSharpMethod(csharpObject)
{
    csharpObject.invokeMethodAsync("ExampleVoidMethod");
}

Call an asynchronous method

Assuming you have the following C# method:

[JSInvokable]
public Task ExampleVoidMethodAsync()
{
    return Task.CompletedTask;
}

In the JavaScript function, you can await the asynchronous method to complete or just fire and forget it. You can create an async JavaScript function to await for the C# method calls as follows:

export async function callAsynchronousCSharpMethod(csharpObject)
{
    await csharpObject.invokeMethodAsync("ExampleVoidMethodAsync");
}

Call a static method

See the Direct Call example.

Call a local component method

Assuming you have the following C# method in your component:

@code {
    [JSInvokable]
    public void LocalMethod()
    {
    }
}

Assuming you have your JavaScript module stored in ExampleModule. You will need to pass a reference of your current component to the JavaScript function as follows:

var wrappedInstance = DotNetObjectReference.Create(this);
await ExampleModule.Value.InvokeVoidAsync("callLocalComponentMethod", wrappedInstance);

Then you just receive the reference and use the reference to call the method in your JavaScript function:

export function callLocalComponentMethod(componentInstance)
{
    componentInstance.invokeMethodAsync("LocalMethod");
}

Handle methods with return value

Some C# methods will have return value. The return value can be a primitive data type or a reference to an object.

Methods with primitive data return type

Assuming you have the following method, which return a primitive data as follows:

[JSInvokable]
public string ExamplePrimitiveReturnMethod() => "Blazor School";

Assuming you have your JavaScript module stored in ExampleModule. You will need to await the C# call in the JavaScript function as follows:

export async function callPrimitiveDataReturnMethod(csharpObject)
{
    let result = await csharpObject.invokeMethodAsync("ExamplePrimitiveReturnMethod");
    alert(`The result is ${result}`);
}

Methods with reference object return type

Assuming you have the following method which return a reference object as follows:

[JSInvokable]
public ExampleClass ExampleReferenceReturnMethod() => new ExampleClass()
{
    ExampleString = "Blazor School",
    ExampleDate = DateTime.Now,
    ExampleInt = 999
}

The reference will be serialized by the JSON serializer of Blazor. By default, it is System.Text.Json.JsonSerializer and the serialized data will have camelCase instead of PascalCase. In the example above, ExampleString will be passed to the JavaScript function as exampleString. You need to await the C# call in the JavaScript function as follows:

export async function callReferenceDataReturnMethod(csharpObject)
{
    let result = await csharpObject.invokeMethodAsync("ExampleReferenceReturnMethod");
    alert(`Received object data: string ${result.exampleString}, number ${result.exampleInt}, date time ${result.exampleDate}`)
}

You can't receive a Tuple in JavaScript function.

Pass data to a method

You can use invokeMethodAsync to pass data from a JavaScript function to a C# method.

Pass primitive data to a method

Assuming you have the following C# method:

[JSInvokable("MethodWithPrimitiveParameters")]
public void ExamplePrimitiveParameterizedMethod(string exampleString, int exampleInt, DateTime exampleDate)
{
    ExampleString = exampleString;
    ExampleInt = exampleInt;
    ExampleDate = exampleDate;
}

Assuming you have your JavaScript module stored in ExampleModule. You can pass primitive data to the C# method as follows:

export function callPrimitiveParameterizedCSharpMethod(csharpObject)
{
    csharpObject.invokeMethodAsync("MethodWithPrimitiveParameters", "Blazor School", 100, new Date());
}

Notice that we rename the C# method to MethodWithPrimitiveParameters by specifying the name in the [JSInvokable] attribute.

Pass reference data to a method

Assuming you have the following C# method:

[JSInvokable("MethodWithReferenceParameters")]
public void ExampleReferenceParameterizedMethod(ExampleClass instance)
{
    ExampleString = instance.ExampleString;
    ExampleInt = instance.ExampleInt;
    ExampleDate = instance.ExampleDate;
}

You can pass reference data to the C# method as follows:

export function callReferenceParameterizedCSharpMethod(csharpObject)
{
    let passingObject = {
        exampleString: "Blazor School",
        exampleInt: 9000,
        exampleDate: new Date()
    };

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