Write OnClick Events in C# using Blazor and Eliminate JavaScript

25th August 2020

JavaScript can be eliminated for OnClick and other HTML event attributes. Thanks to Microsoft's emerging web technology Blazor, you can now write HTML event attributes using C#.

No need to immerse yourself in another coding language. Whether it will be TypeScript, raw JavaScript, or one of the many JavaScript libraries out there. They are not needed! It can all be done with C#.

We are going to have a look at how we can implement some of the different HTML event attributes in Blazor and how easy it is to set up.

Why You Should Use Blazor over JavaScript?

But first, we need to understand why we should use Blazor over JavaScript.

One of the frustrations that I have is that you have different developers with different skill sets. When doing a web build, it can be a nightmare having to schedule particular developers where some specialise in C# and some specialise in JavaScript. They might be on holiday? Or, they might have no availability for the next three weeks!

Blazor allows you to code front-end elements of the site using C#. That means that you can have an interactive website without the need for JavaScript. And, it also means you can recruit developers that only have C# experience.

Then there's SEO to consider. If you are developing a Blazor Server application, it will load the whole page including the interactive parts of the application into the source. This means is that it makes it easier for search bots to crawl your site.

That is not the case with a JavaScript framework. You often have to download additional software onto your server to make this happen.

How to use OnClick with C#

Now that we have some reasons to use Blazor over JavaScript, that's see how we can implement HTML event attributes using C#. As promised, we are going to have a look at the OnClick HTML event attribute.

Using Blazor, in this example, we are going to create a Count property of type integer. This Count property will be displayed on the page under the paragraph "You have clicked the button @Count times". In addition, we are going to create a button that calls a function called Click when the button has been clicked on.

When the Click function is called, it increments the count by 1. By magic, it updates the paragraph "You have clicked the button @Count times", where @Count is updated by 1 every time the button is clicked.

@page "/"
<h1>Home Page</h1>
<p>You have clicked the button @Count times</p>
<button @onclick="@Click">Click Me</button>
@code { 
    public int Count { get; set; }

    private void Click(MouseEventArgs mouseEventArgs)
    {
        Count++;
    }
}
OnClick in a Blazor Server Application
Clicking on the "Click Me" button updates the number of times the button has been clicked

There you go! The counter interactive updates without refreshing the page and without using JavaScript.

What about other HTML Event Attributes?

In addition to OnClick, I tend to use the OnChange and OnBlur HTML event attributes a lot. It's very similar to how the OnClick works, so that's have a look at some examples for these.

OnChange

With this Blazor example, we have created a select dropdown and a string property called WebApplication. When an option in the select dropdown is selected, it calls a function called Change.

Now when you use the OnChange HTML event attribute, you are expected to pass in a parameter of type ChangeEventArgs. We can use the Value property in this type to get the value selected. We do that inside the Change function.

So, when the Change function is called, it updates the WebApplication property with the value. As a result, it updates the text above, stating that we have selected a particular web application.

@page "/"
<h1>Home Page</h1>
<p>You have selected @WebApplication as the web application.</p>
<select @onchange="@Change">
    <option value="">Select...</option>
    <option value="Blazor">Blazor</option>
    <option value="MVC">MVC</option>
    <option value="WebForms">WebForms</option>
</select>

@code { 
    public string WebApplication { get; set; }
    private void Change(ChangeEventArgs changeEventArgs)
    {
        WebApplication = changeEventArgs.Value.ToString();
    }

}
OnChange in a Select Dropdown in a Blazor Server Application
Selecting a value in a select drop-down menu updates the text above with the value selected.

OnBlur

Lastly, we are going to have a look at the OnBlur HTML event attribute. For this example, we are going to have two properties. One called Value and one called DisplayedValue.

We are going to have an input text box with two HTML event attributes. The first will be an OnChange attribute that will update the Value property with the current value of the input text box. The second will be an OnBlur attribute.

Now the OnBlur attribute will update the DisplayedValue property and this is what will be displayed on the screen. So the text with the input value will only be updated once the user has clicked out of the text box.

@page "/"
<h1>Home Page</h1>
<p>You text displayed is <strong>@DisplayedValue</strong>.</p>
<input type="text" @onchange="@ChangeValue" @onblur="@DisplayTheValue" />

@code { 
    public string Value { get; set; }
    public string DisplayedValue { get; set; }


    private void ChangeValue(ChangeEventArgs changeEventArgs)
    {
        Value = changeEventArgs.Value.ToString();
    }

    private void DisplayTheValue(FocusEventArgs focusEventArgs)
    {
        DisplayedValue = Value;
    }
}
OnBlur example in a Blazor Server Application
The text above the input box has not updated as we are still focused on the input box

Is there an Easier Way of Implementing HTML Event Attributes?

When researching for this article, I came across binding. This is where you can bind a value of an input box to a particular property. And, the nice thing about it is you can set when binding comes into force. You might want to bind it when you have finished inputting the value into the input box? Or you might want to change it as you are typing in the input box.

That's go ahead and look at some examples of binding.

By default, if you use the bind attribute, it will bind the value to the property when it loses focus. Effectively, it's copying what the OnBlur HTML event attribute is doing.

@page "/"
<h1>Home Page</h1>
<p>You text displayed is <strong>@Value</strong>.</p>
<input type="text" @bind="@Value" />

@code { 
    public string Value { get; set; }
}

However, if you want to dictate when the value is bound to the property, you can use the @bind:event attribute and specify when to bind the value.

The example below will bind the value to the property when it has been changed. We have specified the @bind:event attribute with a value of "oninput".

@page "/"
<h1>Home Page</h1>
<p>You text displayed is <strong>@Value</strong>.</p>
<input type="text" @bind="@Value" @bind:event="oninput" />

@code { 
    public string Value { get; set; }
}

Where can I see this in action?

I like to provide a working example so you can see how things get done.

Watch our tutorial below where we run through using the OnClick, OnChange and OnBlur HTML event attributes in C#. Then we go ahead and use the bind attribute for a much easier way of assigning values to properties.

Where Next?

Using OnClick and other HTML event attributes in Blazor has only just touched the service of the capabilities of Blazor.

In addition, if you are using a Blazor Server application, you can share data for client-side and server-side functionality. That is because a SignalR connection is set up between the browser and the server. I like the fact that you don't have to rewrite the same function for client-side and server-side functionality.

As well, if there is a JavaScript library you really like, then it's possible to use it in Blazor. I quite like the JavaScript functionality where you can drag elements as if you were re-ordering a list. With Blazor, you can use JS Interlop to inject JavaScript into your Blazor application.

So if you are a C# developer, there is no reason why you can't make your life easier and learn to do it the Blazor way.

Want More ASP.NET Core Coding Tutorials?

Subscribe to my YouTube channel to get more ASP.NET Core coding tutorials.

You'll get videos where I share my screen and implement a how-to guide on a topic related to ASP.NET Core.

You can expect to see videos from the following technologies:

  • Blazor
  • Web APIs
  • SQL Server
  • Entity Framework
  • SignalR
  • and many more...

By subscribing, you can get access to all my ASP.NET Core coding tutorials completely free!

And so you never miss out on a new video, you have the option to be notified every time a new video is published.

So what are you waiting for?

To subscribe, click here to view my YouTube channel, and click on the red "Subscribe" button.

David Grace

David Grace

I am a .NET developer, building web applications in .NET Framework and .NET Core with a SQL Server database.

Some of the .NET packages I have used include Entity Framework and MVC.

I've also used many JavaScript frameworks such as React and jQuery, and have experience building CSS in SASS.

Twitter Feed