Making Waves – Blazor, a smart new jacket for WEB App development.

Microsoft ASP.Net Core

So what is Blazor? It is actually part of the new ASP .NET Core package from Microsoft. It is available as part of the Visual Studio 2022 IDE or can be downloaded from HERE and used in a standalone editor of your choice. Minimum download version is .Net 6.0 to be able to use Blazor. In effect Blazor is an easier way of creating web apps and web api’s without the need to use additional code such as JSCode or Javascript. In fact it could be described as C# on steroids. It is essential that you have a previous knowledge of HTML as Blazor is a combination of both C# and HTML.

So let’s take a look at a simple “Hello World” app as a demonstration of how easy it is:

Start by creating a new Blazor Web App in Visual Studio 2022, name it HelloWorldBlazor and click next. Make sure you set the .NET version to 6.0 (min) and click <<Create>>. Visual Studio will create a new app for you which includes the following pages: Counter.razor, Fetchdata.razor and Index.razor which you will see in Solution Explorer on the right under <<Pages>>. Right click on pages and click add new razor component. Name the component “HelloWorld.razor” and the new page will be created for you with a little code included.

Obviously, as it stands this isn’t going to do much so let’s add some code to make it do something. Replace the current code with the following:

@page "/HelloWorld"
@using System.IO
@using System.Globalization

<h3>Hello World</h3>

<p>
    <label>
        Enter your name: 
        <input @bind="name" />
    </label>
    <button class="btn btn-primary" @onclick="Name">Click me</button>

</p>
    <p role="status">Hello World! Nice to meet you @name1</p>


@code {
    private string name { get; set; }
    private string name1;

    private void Name()
    {
        name1 = name; 
    }

}

Now what does this code actually do? The @page directive makes the page routable – it can be called from another page or via a menu item (we will do this later). Remember, this is going to run in a web browser not as a desktop app. Any code other than HTML is preceded by an @ as are the two using directives that follow. You then have a block of HTML starting with <H3>Hello World</H3>. This is a heading for the page.

The following bit of HTML:

<p>
    <label>
        Enter your name: 
        <input @bind="name" />
    </label>
    <button class="btn btn-primary" @onclick="Name">Click me</button>

</p>

provides an on screen label “Enter your name: ” and then an input command to allow you to enter your name which you will bind to the C# string variable “name”. After the label there is a button with “Click me” written on it which will jump to the C# “Name” method before returning to the next HTML statement

<p role="status">Hello World! Nice to meet you @name1</p>

which outputs “Hello World! Nice to meet you <<your name>>” to the screen.

The C# bit is as follows:

@code {
    private string name { get; set; }
    private string name1;

    private void Name()
    {
        name1 = name; 
    }

}

You will note that the whole block is preceded by @code and then enclosed in curly braces. This tells the runtime compiler to compile this code into html runtime code for either the server side or client side browser to understand. The first line is

private string name { get; set; }

you will note that this is the string variable that we used to bind the HTML input statement to. It reads your input and sets the value of name. You then have a second string – name1 – which is empty until the Name method is accessed (by clicking the button). It is then given the same value as name and returned for the output at the end of the “Hello World” statement.

If you now try to run the app from within Visual Studio (<F5> to debug or <Ctrl><F5> to run without debugging) you will see nothing of the page you have just created. This is because you haven’t yet set up the navigation routine to it. Stop the app (<Ctrl><C>) and return to Visual Studio. In solution explorer click on <shared> to open it up and then double click on NavMenu.razor to open it in the editor. In the second block of code below the other navigation buttons add the following:

<div class="nav-item px-3">
            <NavLink class="nav-link" href="HelloWorld">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Hello World
            </NavLink>
        </div>

This will add a navigation button to the home page (index) menu to enable access to the Hello World page that you have created. run the app again and try it out.

You will note that throughout this app creation you never needed to write one piece of Javascript, CSS, PHP or any other code normally associated with web page creation. This seriously makes the creation of web apps much easier – instead of separate code for front end, middleware and back end it is all in one place and if you understand C# then there it is. Obviously this is a very simple demonstration and the way forward is to use more complex code but all the hard work is done using C#. It is also cross platform so instead of just being a Windows desktop thing this can be accessed on Linux, Chrome, MacOS or whatever platform you are using.