How to Call JavaScript Functions with C# in Blazor-Live Demo

Blazor is a free and open-source web framework that enables developers to create web apps using C# and HTML. It is being developed by Microsoft.

Using Blazor, you can call the JavaScript function from C# and vice versa. This blog post will show you how to invoke the JavaScript function from C#.

First, I will demonstrate how to call pre-defined functions in JavaScript, such as alert and confirm and then I will explain how to call a function from an outside file.
The first thing you need to do is include the JavaScript runtime dependency on your page.

Because this service is already incorporated into the framework, there is no need for you to add anything new to the startup class.

@page "/"
@inject IJSRuntime js

IJSRuntime

IJSRuntime runtime exposes two methods, InvokeVoidAsync and InvokeAsync<>. The first one is used to invoke the JavaScript function, which does not return the value, while the second one is used to invoke the function that returns the value.

For example, let’s assume you want to show a JavaScript alert when the page load. To do so, override the OnAfterRenderAsync of the base component and invoke the alert function as shown below.

@page "/"
@inject IJSRuntime js
<button @onclick="ShowAlert">Click</button>

@code
{

  public async Task ShowAlert(){
      await js.InvokeVoidAsync("alert","code guru");
  }
   
}

You can see that I am utilizing the InvokeVoidAsync method in this context because the alert function does not return any value.

Let’s look at yet another example. Assume that you want to present the user with a confirmation dialogue that allows them to choose between the ok  cancel Options. The confirm the function will return true or false depending on the case. To put this into action, we will call the second function, which is called, and then we will store the response in the variable. The following is a snippet of code that demonstrates this for you.

public bool Response{get;set;}
 public async Task ShowConfirm(){
     Response= await js.InvokeAsync<bool>("confirm","do you want to delete?");
  }

Call External JavaScript

There are times when we have to call the JavaScript function that is saved in a file. Blazor gives us the ability to call an external function the same way we would call a built-in function.
I have incorporated a straightforward operation directly into the component to simplify the demonstration.

Although Blazor does not permit the use of the script tag on the component page, there is a workaround that allows you to disable the error message by including the suppress-error="BL9992 attribute in the script tag. (I beg of you, don’t include this in your project.)

@inject IJSRuntime js 
<button @onclick="CallJavaScript">Call JavaScript</button>

@code {
    
    public async Task CallJavaScript(){
            await js.InvokeVoidAsync("methods.helloWorld","code guru");
    }
}

<script  suppress-error="BL9992">

  window.methods={
          helloWorld:function(name){
        alert("Hello"+name);
    }
  }
</script>