Skip to content

Blazor – Getting Started

Blazor was introduced with .net core 3.0 and is a web UI single page application (SPA) framework. Developers write the code in HTML, CSS, C#, and optionally Javascript. Blazor was developed by Steve Sanderson and presented  in July 2018. The main advantage over Javascript frameworks is that you can run C# directly in the browser which should be appealing for enterprise developers who don’t want to deal with Javascript

Blazor Features

Blazor comes with the following features:

  • Run C# code inside your browser as WebAssembly (WASM)
  • Blazor is a mix of browser and Razor
  • WASM is more locked down than Javascript and therefore more secure
  • Messages between the browser and the backend are sent via SignalR
  • There is no direct DOM access but you can interact with the DOM using Javascript
  • Modern browser support WASM: Firefox, Chrome, Edge, Safari (IE 11 does not)
  • Components can be shared via Nuget

There are two different versions: Blazor Server and Blazor Webassembly. I will talk about the difference in more detail in my next post. For now, you only have to remember that the Server version runs on the server and sends code to the browser and the Webassembly version runs directly in the browser and calls APIs, like Angular or React apps.

Create your First Blazor Server App

To follow the demo you need Visual Studio 2019 and at least .net core 3.0. You can find the source of the demo on Github.

To create a new Blazor App, select the Blazor template in Visual Studio.

Select the Blazor App template
Select the Blazor App template

After entering a name and location, select Blazor Server App, and click on Create.

Create a Blazor Server App
Create a Blazor Server App

This creates the solution and also a demo application. Start the application and you will see a welcome screen and a menu on the left side. Click on Fetch data to see some information about the weather forecast or on Counter to see a button which increases the amount when you click it.

The counter function of the demo app
The counter function of the demo app

All these features are implemented with HTML, CSS, and C# only. No need for Javascript.

Create a new Component

Open the Counter.razor file in the Pages folder and you can see the whole code for the implementation of the Counter feature.

@page "/counter"
<h1>Counter</h1>
Current count: @currentCount

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

On the top, you have the page attribute which indicates the route. In this example, when you enter /counter, this page will be rendered. The logic of the functionality is in the code block and the button has an onclick event. This event calls the IncrementCount method which then increases the count of the currentCode variable.

Create a new Page

In this section, I will add a new Blazor component with a dropdown menu, event handling, and binding of a variable.

Right-click on the Pages folder and add a Blazor Component with the name DisplayProducts. Then add the following code:

@page "/products"
    
<h3>Product:</h3>

@code {
    private List<Product> Products;    

    protected override void OnInitialized()
    {
        Products = new List<Product>
        {
            new Product{Id = 1, Name = "Phone", Price = 999.99m},
            new Product{Id = 2, Name = "Book", Price = 5.99m},
            new Product{Id = 3, Name = "Car", Price = 19999.99m}
        };
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

This code sets the route to products and displays a headline. In the code block, I overwrite the OnInitialized method and create a class Product. The OnInitialized method is executed during the load of the page. You might know this from Webforms. Next, I add a dropdown menu and add each element of my Products list.

<select size="1" style="width:10%">
        @foreach (var product in Products)
        {
<option value="@product.Id.ToString()">@product.Name - $@product.Price</option>
        }
    </select>

As the last step, I add an onchange event to the dropdown menu and the code of the executed method in the code block. The selected value will be displayed below the dropdown menu. If you haven’t selected anything, the whole div tag won’t be displayed. My whole component looks like the following:

@page "/products"

@if (Products != null)
{
    
<h3>Product:</h3>

    <select @onchange="ProductSelected" size="1" style="width:10%">
        @foreach (var product in Products)
        {
<option value="@product.Id.ToString()">@product.Name - $@product.Price</option>
        }
    </select>

    if (SelectedProduct != null)
    {        
        
<div>Selected Product: @SelectedProduct.Name</div>
    }
}

@code {
    private List<Product> Products;

    Product SelectedProduct;

    void ProductSelected(ChangeEventArgs args)
    {
        SelectedProduct = (from p in Products where p.Id == Convert.ToInt32(args.Value.ToString()) select p).FirstOrDefault();
    }

    protected override void OnInitialized()
    {
        Products = new List<Product>
        {
            new Product{Id = 1, Name = "Phone", Price = 999.99m},
            new Product{Id = 2, Name = "Book", Price = 5.99m},
            new Product{Id = 3, Name = "Car", Price = 19999.99m}
        };
    }

    public class Product
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public decimal Price { get; set; }
    }
}

Run the application, navigate to /products and you will see the dropdown menu. Select a product and it will be displayed below the dropdown.

Testing my first Blazor Component
Testing my first Blazor Component

Conclusion

Blazor is a new frontend framework that enables developers to run C# in the browser. This might be a great asset for enterprises that already use .Net but don’t want to deal with Javascript frameworks.

You can find the source of the demo on Github.

Published inASP.NET MVC / CoreFrontend

Be First to Comment

    Leave a Reply

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

    RSS
    Follow by Email
    LinkedIn
    Share