Getting Started with Blazor

As a C# developer, being able to implement a single page app (SPA) in C# without having to learn a new Javascript library sounds perfect! But to investigate if Blazor is the framework to invest time in and build applications with, I needed to get to know it a little better and have some reassurance it's the right framework and will be around for a while! So, I thought I would document my investigations as I go...

 

Firstly, what at the advantages to using Blazor, why would we want to put C# in the browser? Here is a snippet from the Blazor docs:

Using .NET for client-side web development offers the following advantages:

• Write code in C# instead of JavaScript.
• Leverage the existing .NET ecosystem of .NET libraries.
• Share app logic across server and client.
• Benefit from .NET's performance, reliability, and security.
• Stay productive with Visual Studio on Windows, Linux, and macOS.
• Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

 

Blazor Implementation Options

There are 2 implementations of Blazor: Client side (WebAssembly) and Server side. 

Blazor Server side communicates with the backend C# code via SignalR to keep the application up to date.

Blazor Webassembly runs the C# code in browser by downloading the assemblies and .Net runtime to browser on page load.

We’ll focus on Blazor Webassembly in this blog post. WebAssembly is an open web standard and supported in web browsers without plugins. WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability. 

Getting Started with a Blazor App!

Using visual studio 2019, select “Create a New Project” -> “Blazor App”

Give your project a name and decide where you should save it:

Now you will be asked which type of Blazor project you would like to create, in this case we will select “Blazor WebAssembly App”.

Visual Studio will now launch with the framework for a Blazor application. Have a look around the project file structure, this is a good way to understand how the application hangs together.

 

• /wwwroot - as you may expect this is the website folder. The main Index.html that launches the application and the css to style the web app are here.
• /Pages - This folder contains the Blazor pages within the application.
• /Shared -  Here is the collection of files that will be used across the application, not just belonging to one page.

The App.razor file shows us that the app should use MainLayout.razor as it’s shared layout for the application. This layout utilises a shared component NavMenu, this component is defined in a separate file NavLayout.razor. The specific content of each page we navigate to within the application is rendered by the @Body code in this file.

Now let’s run the application. There are several ways to host Blazor apps (which I will cover in future blog posts) but for now, you can use the “run in IISExpress” option in Visual Studio.

Let’s have a look at the “counter” page in the application. This is a simple page, with a count that increments when clicking the button, but a good way to show how the pages are built and integrated to the application logic.

This all works on the client side, using the C# code in the  @code{} section. The IncrementCount method is called when the button is clicked and the currentCount variable is updated and as this is used on the page (using @currentCount) it is dynamically updated.

You will notice our C# is right there in the razor file along side the HTML, but separated in to a @code{} area of the file to separate the .Net code from the markup.

And there is a quick tour on getting started in the Blazor WebAssembly template created in Visual Studio. Now I recommend having a look around the solution, change things and see what happens! Don't be afraid to break things, that's what learning a new framework is all about :)

 

Hopefully this was a useful quick intro to Blazor. In future posts I hope to share how we can get started in creating our own custom Blazor pages and components.

I have also given a talk on Getting Started in Blazor at Azure Thursdays meetup. Check it out here!

 

As always, get in touch on Twitter to say hello or let me know how you get on in your Blazor adventure!