How to Call C# Function From JavaScript

This tutorial is focused on explaining the use of Blazor to call the C# function from JavaScript code.

Blazor is a mutation of Browser & Razor, an open-source and free web framework that allows us to use C# to develop interactive Web User Interfaces (UIs).

We use Microsoft Visual Studio to make a Blazor application; you can also download it from here.

Use Blazor to Call C# Function From JavaScript Code

Let’s create a Blazor application to start coding step by step.

Open Microsoft Visual Studio and select Create New Project.

Select Blazor WebAssembly App and click Next.

Write your project name, select the location where you want to save, check the checkbox to keep the solution in the same directory and click Next.

Keep everything default on the next screen and click Create. It will create default files and folders for us.

See the screenshot given below.

Create a new folder named scripts inside wwwroot. Right-click on the scripts folder and go to Add->Razor Component to create a JavaScript file.

It opens a new window, selects the JavaScript File, writes its name as example.js, and clicks Add.

Attach the JavaScript file into index.html (it resides in wwwroot) using the following code line.

<script src="scripts/example.js"></script>

Right-click on the Pages folder and go to Add->Razor Component. Select Razor Component from the popped up window, name it CallDotNetFromJavaScript.razor, and click Add.

Right-click on Pages folder and go to Add->Razor Component again but this time select Class, name it as CallDotNetFromJavaScript.razor.cs, and click Add.

Now, you can see both files CallDotNetFromJavaScript.razor and CallDotNetFromJavaScript.razor.cs in Pages folder as given below.

Now, modify the CallDotNetFromJavaScript.razor file by adding the following code.

@page
    '/dotnetinjs' < h1 >
    Learn How to Call DotNet From JavaScript Code</h1>
<br />

    < div class
= 'row' > < div class
= 'col-md-4' > <h4>Call static method from JS</h4>
 	</div>< div class
= 'col-md-2' > < button type = 'button' class
= 'btn btn-success' onclick =
    'jsMethods.checkNumber()' > Check Number</button>
 	</div>< div class
= 'col-md-4' > < span id = 'string-result' class
= 'form-text' > </span>
 	</div></div>
<hr />

Modify the Index.razor file by adding the following code.

@page
    '/' < ul > <li><a href = '/dotnetinjs'>Call from JavaScript</a>
 	</li><
    /ul>

Create a static method inside the CallDotNetFromJavaScript.razor.cs file (remember, we can call static methods and those methods that are instantiated classes via this technique).

We’re just implementing a function checkNumber(int number) to examine whether the given number is even or odd.

The crucial point is to understand the [JSInvokable] attribute; it denotes that the method right after it ([JSInvokable]) would be called/invoked from JavaScript code.

public partial class CallDotNetFromJavaScript {
  [JSInvokable] public static string checkNumber(int number) {
    if (number % 2 == 0)
      return $ 'The Number {number} is Even';
    else
      return $ 'The Number {number} is Odd';
  }
}

Write the following code in the example.js file in the scripts folder.

var jsMethods = {};

jsMethods.checkNumber = function() {
  const number = prompt('Enter your number');
  DotNet.invokeMethodAsync('BlazorApplication', 'checkNumber', parseInt(number))
      .then(result => {
        var el = document.getElementById('string-result');
        el.innerHTML = result;
      });
}

You may have a question that we want to call the C# method from JavaScript but using the DotNet object. The DotNet object is used to invoke/call C# methods from JS code (JavaScript code).

Still confused? Run the project again; when it shows the interface, press F12, go to the Console tab, and write DotNet.

See the following screenshot.

You may have observed that the DotNet object contains two properties, invokeMethod and invokeMethodAsync, used to call C# static methods from JavaScript code. We are using invokeMethodAsync in this tutorial.

Let’s run the blazor application again to call the C# function from JavaScript and check its behavior.

Output:

We are getting the response from the C# method to check whether the number is even or odd.