.Net CoreBlazorC#

Blazor, run C# code inside web browser


I never really liked writing JavaScript and doing web browser DOM interaction. For me, dealing with JavaScript has always been a pain, a-must when developing web applications . In contrast, I always enjoyed to write C# code.

Back in Silverlight times, C# was – for a relative short period – one possibility to write web client apps. With introduction of HTML5 days were numbered for web browser plugins like Flash and Silverlight. So, everything came back to the vanilla JavaScript (an assembler language of the web) or some JavaScript frameworks like React, Angular, Vue.js and related.

With WebAssembly and Microsoft implementation Blazor WebAssembly, maybe this time C# has chance to be back in game for writing rich web client side applications. Why I think this is right time: WebAssembly-Wasm (technology/specification on which Blazor is based on) is under W3C Consortium (https://www.w3.org, World Wide Web Consortium). Wasm working group at W3C is made of major players, like: Apple, Microsoft, Google, Mozilla Foundation, Facebook, Huawei, etc…

So what is WebAssembly: a size- and load-time-efficient format and execution environment. To be more plastic, WebAssembly provides a way to run code written in multiple languages on the web at near native speed, with client apps running on the web that previously couldn’t have done so.

WebAssembly is by no mean designed to replace JavaScript, it’s designed to complement and run alongside JavaScript – to enrich client side web development experience!

In general this means that compact binary format application can run inside web browser. This – assembly like binary format – can be created with different programming languages, like C/C++, Rust, C#. WebAssembly(ies) can be created with various programming languages, and one of the implementation is from Microsoft. Its name is BLAZOR!

Enter Blazor

Blazor is a client web UI framework based on .NET and WebAssembly. It basically allows to execute .NET code inside the browser. It is part of ASP.NET Core web stack.

Blazor can run on client side or on server side. Both hosting models share the same programming model.

  • Blazor Server runs on the server on top of SignalR.
  • Blazor WebAssembly runs client-side on WebAssembly.

Server side was included in .NET Core 3.0, client side Blazor WebAssembly is still in preview and will be included in the next versions of .NET.

In this blog post I will focus on client side Blazor WebAssembly. I will address Blazor Server with real-time SignalR in one of the next blog posts.

If you need more details, here is the official site: https://blazor.net

Let’s try some basic experiments

I was eager to try some C# code inside web browser, so I made some experiments. I created Blazor App in Visual Studio 2019.

Example #1: Security – symmetric encryption and hash function.

My first experiment is some basic security stuff, like playing around with asymmetric encryption and hash calculation with Blazor. All processing is done on the client side, .i.e. inside web browser. Normally, for average .NET (web) developer this would be relative difficult task to do. It would required good knowledge of JavaScript in order to complete the task. But with Blazor, .NET developers can reuse existing C# code. Let’s take a look.

The working application looks like this:

blazor security example

I was shocked how fine this works and how easy task this is with C# and Blazor. Keep in mind that all this is executed inside web browser sandbox. Awesome.

Example #2: Blazor to JavaScript interop

Every good abstraction layer or framework must enable easy and full access to the underlying native runtime. Blazor WebAssembly has very nice interop with JavaScript. Developer just need to include JavaScript file (or include JavaScript code in script block), and inject JSRuntime in razor page.

For demo, I put two JavaScript functions inside hosting html page: AlertFunction() and BrowserInfoFunction().

I extended razor page and injected (@inject directive) IJSRuntime and called InvokeAsync() function with correct attributes, e.g.

The output is as follows:

blazor javascript interop

Pretty awesome, right? This way I can extent or reuse existing JavaScript code with Blazor.

Experiment #3: Using Html5 LocalStorage from Blazor

With web storage (local storage and session storage) web applications can store data locally within the user’s browser. Same is with Blazor – C# code can use the same mechanism to persists some data. Let’s take a look.

For this, I used external library. I referenced NuGet package Cloudcrate.AspNetCore.Blazor.Browser.Storage

then I was able to use local storage in my razor page, e.g.:

The browser output is as follows:

blazor local storage

Experiment #4: Reusable components

Sharing and reusing code is very nice feature for any development environment. Blazor use component based model to share code. Let’s take a look. I created TimerComponent and ParameterComponent razor components:

Timer component:

Component with input parameter:

Integration into hosting razor page:

and browser output:

or components

This way complex applications can be decomposed to smaller, more manageable parts.

Experiment #5: State management

Blazor apps are by design stateless, meaning that if you navigate from one page to another state is not persisted. State maintenance can be simple implemented this way: First define state holder, in my case I created StateDto class in Models folder/namespace:

In Startup class I used built in dependency injection mechanism by calling AddScoped() function.

AddScoped() instantiate singleton object per user session. So, if i put this into hosting razor page, like this:

state maintenance will be preserved even I navigate from this page. Super awesome.

In this blog post I presented just some simple experiments with Blazor WebAssembly. Possibilities are enormous. You must give it a try, and play around with Blazor.

You can find source code here: https://github.com/josipx/Jenx.Experiments

Important links

Just for the record, I put some links related to this debate here:


At first, I was a bit skeptic about client side Blazor WebAssembly. Let’s face it: web is (was) all about HTML5 and JavaScript. I hope this will no longer be the only option, and web developers will have more possibilities to create rich web client applications.

Now, I am more optimistic about WebAssembly technology, why?

  • WebAssembly – underlying technology used by Blazor is under W3C umbrella. Technical Working Group consist from all big players: Google, Apple, Microsoft, Mozilla, etc…
  • Microsoft already put release version of server-side Blazor (based on SignalR) and it’s planning to put also client side Blazor as part upcoming of .NET version.
  • Community is interest in WebAssembly.
  • Long-missing good all-around runtime/abstraction for web client side runtime/development.
  • Several development possibilities/ecosystems for client side web development.
  • Popular component vendors like Telerik, DevExpress, and Syncfusion also actively participate in development of Blazor UI components.
  • Everything is open source, similar as everything related to .NET Core.

If you haven’t tried Blazor yet, you should give it a try.

One thing is sure: I will follow Blazor and the Asp.Net team around Daniel Roth. Interesting times for .NET developers ahead.

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.