Running C# code in the browser: pt 2

Building an app with Blazor WebAssembly

Let us take a deeper look at what it means to run C# in the browser using Blazor. Picture a scenario where we have a number of factories producing cars around the world and every day they each report the number of cars that have left the assembly line during the last 24 hour. The company wants a web page to get a quick glance of the current numbers and the possibility to download the data in an excel file (because everyone loves excel) for further analysis. The data is aggregated and available through an api call.

If it wasn’t for the excel requirement it would have been a very simple app to develop with some html and javascript. But with excel support you probably need a slightly more experienced developer, if you want to finish in a reasonable amount of time. If your developer is most comfortable writing C# then it probably makes more sense to develop and maintain a .NET application. Let’s see if Blazor is the right tool for the job.

Using the dotnet cli we generate a sample Blazor WebAssembly application by running the command:

>dotnet new blazorwasm

We continue by adding the dotnet library EPPlus for creating and working with excel documents with the following command:

>dotnet add package EPPlus

If we look into the standard entry point of a .NET application, the Program.cs file we see a mix of both familiar and some new stuff. We have a service provider where we register services for dependency injection, nothing special there but instead of the common host builder we have a WebAssemblyHostBuilder.

The builder is instructed which component will make up the root component, in this case App and where in the html it should be placed, here a tag named app. Comparing to React.js it is pretty similar, where you would do something like this

ReactDOM.render(<App />, document.getElementById(‘app’));

Another similarity with modern javascript frameworks is that Blazor is also component-based. Let us have a look at the index component:

The page directive at the top instructs the router when to render this component, we inject the registered HttpClient and we specify in html how the component should look. It is also possible to change the rendered html using logic expressed in C#. Those familiar with ASP.NET MVC and the Razor syntax will recognize the concepts.

But the most interesting part is in the code directive where we write pure C#. The components have lifecycle hooks that we can override and in this case, we fetch the report data and parse the json into a list of POCO:s. When this is done the result table is rendered and the List is passed into our custom component, the ExcelDownload-component.

In the ExcelDownload-component we find a more tangible example of what is really possible with Blazor:

Here we have annotated the Results list with a Parameter attribute to allow parent components to pass in a list of results. In the html we add a button with a click handler that will call the OnClickDownloadButton-method in our code section. Since Blazor is still a bit rough around the edges and lacks some functionality that we are used to when working with the web, we have to use some javascript to download the actual file that we generate. Thankfully there is built-in support for making interops between the .NET runtime and the javascript engine.

The final application looks like below and please note that the data in the table is completely made up by me.

Pressing download gives us an excel file and when we open it using google sheets it looks like this:

The full code example can be found here.