Blazor - Calling Blazor from JavaScript

Blazor is a web development framework that allows you to build web applications using C# and .NET instead of JavaScript. However, there may be cases where you need to call a Blazor method from JavaScript code. In this scenario, Blazor provides a mechanism to call C# methods from JavaScript using JavaScript interop.

Syntax

[JSInvokable]
public async Task MyMethod(string arg)
{
   // Method code here
}

Example

In this example, we create a Blazor component called MyComponent that contains a button. When the button is clicked, a JavaScript function myFunction is called which in turn invokes a C# method called MyMethod in the MyComponent component using JavaScript interop.

@page "/mycomponent"

<button onclick="myFunction()">Click me</button>

@code {
   [JSInvokable]
   public async Task MyMethod()
   {
       // Method code here
   }
   
   [JSInvokable]
   public async Task<string> MyMethodWithArgs(string arg)
   {
       // Method code here
       return "Return value";
   }
}

function myFunction() {
   DotNet.invokeMethodAsync('MyProject.Client', 'MyComponent.MyMethod')
      .then(data => {
         console.log(data);
      });
   
   DotNet.invokeMethodAsync('MyProject.Client', 'MyComponent.MyMethodWithArgs', arg)
      .then(data => {
         console.log(data);
      });
}

Output

The output of the MyMethod method is not visible as it is invoked by JavaScript code. If the method returns a value, it can be accessed in the JavaScript code using the then method.

Explanation

Blazor provides a mechanism to call C# methods from JavaScript using JavaScript interop. This allows you to bridge the gap between the two languages and allows you to call C# methods from JavaScript.

Use

You can call C# methods from JavaScript using JavaScript interop when you need to perform certain tasks that are difficult to achieve using only C# code. A common use case for this is when you need to interact with third-party JavaScript libraries that are not available in C#.

Important Points

• To call a C# method from JavaScript, you must decorate the method with the [JSInvokable] attribute.
• The DotNet.invokeMethodAsync function is used to invoke the C# method from JavaScript.
• When passing arguments to a C# method from JavaScript, the arguments must be of a supported type.

Summary

Blazor provides a mechanism to call C# methods from JavaScript using JavaScript interop. This allows you to bridge the gap between the two languages and allows you to call C# methods from JavaScript. To accomplish this, you must decorate the C# method with the [JSInvokable] attribute and use the DotNet.invokeMethodAsync function to invoke the method from JavaScript.