Spotlight on Blazor

By   Calendar icon Sep 21, 2019   Level 1 icon

Description:

In this article, we present Blazor with a C#-based .NET Core framework for creating fullstack web applications.

Preferencesoft

Image by Gerd Altmann de Pixabay

For now, Blazor is not officially released, but experimental versions are available with .NET Core version 3.0. Developers can already use it to create single-page web applications.

Introdution to Blazor

Blazor is a web UI framework that allows developers to fully design pages with C# and Razor syntax.

Front-end web applications are usually done in JavaScript/TypeScript which makes it necessary to change the programming language if we use C# on server side.

Blazor allows developers to create components via C# classes or as a Razor page. Blazor thus takes up the idea of assembling components developed by JavaScript frameworks such as Angular, React or Vue.
This allows you to reuse its components or use those that other developers have designed.

But now, no browser can run C#-code natively, unless you create a plugin as there was for Java on older browsers. Let's sign that this technology is becoming obsolete and the new browsers are based entirely on JavaScript and WebAssembly (Wasm). In fact, some parts of the C# code of a Blazor page are compiled into Wasm/ JavaScript code.

This will allow developers to do without JavaScript.
The arrival of Blazor is good news for those who are programming in C# on the .NET platform with Razor, since they will be able to create web applications entirely in C#.

Getting started with Blazor

It is possible to create a Blazor application with Visual Studio 2017, 2019 or Visual Studio Code.There are some differences in installing the framework between these IDEs, but you will need to download and install the following SDKs and tools:
Install .NET Core 3.0.100-rc1-014190 SDK (the latest version).
For Visual Studio, install:
Blazor Language Services extension from the Visual Studio Marketplace.

Let's now create a project with Visual Studio Code. For a Blazor application, enter the following command in a shell command:

dotnet new blazorwasm -o WebAppBlazor01

We can then edit the project with Visual Studio Code by placing us in the WebAppBlazor01 directory.
We can run the application by typing the command:

dotnet run

In a browser, navigate to the specified URL (https://localhost: 5001).

Here are the .razor extension files created.

Index.razor

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

FetchData.razor

@page "/fetchdata"
@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

The following is an overview of the Click program when running.
click


Programming

Categories

Share

Follow


KodFor Privacy Policy