Blazor Tutorial

Why Blazor Webassembly?

Learn a little more about why Blazor is so exciting for dotNET developers.

Browsers are slowly moving away from JavaScript and towards the use of WebAssembly (Wasm). The goal is to move away from JavaScript, allowing the development of apps with the performance characteristics of native applications.

Blazor allows you to run client-side C# directly in a browser, using WebAssembly.

Since it uses the same language as the server-side, the C# code can be compiled into the same binary as the server-side. The C# code is run in the browser, without any JavaScript being run on the client.

Blazor is a new technology, and as such there are not many libraries available but it is growing fast.

 What is Blazor?

Blazor is a framework that allows you to build client-side web applications in C#.

The idea is that you build your web application in C#, compile it into a WASM binary and run it in the browser.

Blazor components are the basic building blocks for a Blazor application. Blazor components are the equivalent of MVC views in ASP.NET.

They are also the equivalent of Razor views in ASP.NET, but are actually written in C#.

Blazor components are built using C# and the Razor syntax.

They are rendered to the browser as HTML and CSS.

What is WebAssembly?

Blazor WebAssembly is a new exciting Microsoft UI technology that gives developers a new way to create single-page applications using C# and and .NET

WebAssembly (WASM) is an open standard for lightweight, secure, fast and cross-platform apps and games.

Creating a Blazor App

Since Blazor is a component-based architecture, it can be run on any device or browser.

In order to create a Blazor application, you must have a project that has the Blazor components and a `Program.cs` file.

1. Open/Launch Visual Studio 2022.

2. On the “Create new project” screen, search for “blazor” and/or select select C# and Web in the drop down lists. 

Both Blazor WebAssembly and Blazor Server-Side should be shown in the list.

3. Select the “Blazor WebAssembly App” ( top option ) 

4. Select the “Next” button.

Blazor Tutorial - Create New Project

5. Name your project ‘BlazorDictionary’ or anything else you wish to create.

6. Select a location for it to be created in.

7. Select the “Next” button.

Blazor Tutorial - Configure Your New Blazor Project

8. Select the required Framework, .NET 6.0 (LTS) was the latest available at the time of writing this.

9. Leave the other options as they are for now.

10. Select the “Create” button.

Blazor Tutorial - Create Blazor App Additional Information

When the project is created, you should see a screen similar to the the following:

Blazor Tutorial - VS 2022 Blazor App Created

If you got this far and everything is fine then you can just press F5 to run the app.  Give it a few seconds depending on your machine and then your browser will be launched and the “Infamous” Blazor test App will be shown.

Blazor Tutorial - App Launched

Happy Blazoring :)

Want to start learning Blazor?

Here at Blazor Tutorial, I want to share my passion and show you what you could achieve.

Blazor Quickgrid a Simple Data Grid

Blazor Quickgrid Learn a little more about Blazor Quickgrid a Simple Data Grid Blazor QuickGrid sole aim is to provide a simple, convienet and extremely

Dot Net Developer

DOT NET developer builds the software using Microsoft’s .NET to design, implement and develop software products.

Want to start learning Blazor?

Here at Blazor Tutorial, I want to share my passion and show you what you could achieve.