Blazor WebAssembly Client App Getting Started

This post is a simple quick start on how to setup a Blazor WebAssembly Client App. Detailed instructions are available in this Microsoft Learn module: Build a web app with Blazor WebAssembly and Visual Studio Code. I am only demonstrating a summary of what you can learn from that module.

If you are entirely new to Blazor be sure to check out the Blazor homepage and Introduction to ASP.NET Core Blazor.

Get up and going in less than 10 minutes

This quickstart will walk you thru the following steps:

1. Install the necessary extensions for VS Code
2. Create a new blazorwasm project
3. Add a new razor file to your project
4. Hook the new razor page up to a nav menu
5. Wire up the new razor page with some basic functionality
6. Run and test your application

Doing this with VS Code is pretty easy to setup and you should be able to be up and going in 10 minutes or less if you are comfortable working with VS Code and dotnet.

Getting Started

When using VS Code, to get started with a Blazor WebAssembly there are a few extensions that are needed to get started.

1. Install .NET Core 3.1 by downloading the latest version from https://dotnet.microsoft.com/download/dotnet-core/3.1 for your operating system
2. In VS Code install the following extensions:
   1. C# for Visual Studio Code (powered by OmniSharp)
   2. JavaScript Debugger (Nightly)
3. At the time of this writing you will need to enable a preview feature for the JavaScript Debugger extension
   1. Right click on the JavaScript Debugger (Nightly) extension and go to Extension Settings
   2. Scroll and find Debug > JavaScript: Use Preview
   3. Check Use the new in-preview JavaScript debugger for Node.js and Chrome

Create a new Blazor WebAssembly app

When it comes to creating Blazor apps, there are a few templates you can choose from as noted at ASP.NET Core Blazor templates. In this exercise we are going to use the blazorwasm template to create a Blazor WebAssembly app.

1. Open a terminal or command prompt window
2. In the command prompt or terminal enter the following

     dotnet new blazorwasm -o CICalc
   

3. Navigate to the CICalc sub folder
4. In the command prompt or termianl enter

     dotnet run
   

5. Open a web browser and navigate to https://localhost:5001
6. Confirm that the app runs correctly with the blazorwasm template

Add a new page to the app

1. Navigate to the folder where CICalc project was created and enter code . to launch VS Code
2. Expand the folders in the project explorer
3. Right-click on Pages and select New File
4. Name the new page CompoundInterest.razor
5. Open the newly created razor file
6. At the top of the file add the following

    @page "/compoundinterest"
   
    <h1>Compound Interest</h1>
   

7. Open the Shared folder
8. Open NavMenu.razor
9. Add a fourth list item that will point to the newly created razor page

    <li class="nav-item px-3">
        <NavLink class="nav-link" href="compoundinterest">
            <span class="oi oi-plus" aria-hidden="true"></span> Compound Interest
        </NavLink>
    </li>
   

10. In the VS Code terminal enter dotnet run to launch the application
11. Open a web browser and navigate to https://localhost:5001
12. Click on the Conversions menu to confirm it redirects to the newly created page

Adding code to the page

1. In the CompoundInterest.razor file add the following code just beneath the <h1>

    <table class="table">
        <tr>
            <th>Initial Principal</th>
            <th></th>
        </tr>
        <tr>
            <th>Years</th>
            <th></th>
        </tr>
        <tr>
            <th>Annual Interest Rate (%)</th>
            <th></th>
        </tr>
        <tr>
            <th>Total:</th>
            <th></th>
        </tr>
    </table>
    <button class="btn btn-primary">Calculate</button>
   

2. Next we add the inline code to the page in an @code block just beneath the HTML added in the prior step. Code can either be inline in the same razor file or can be in a separate .cs file entirely. In this example we will add inline

    @code
    {
        private double Principal { get; set; } = 5000;
        private double InterestRate { get; set; } = 5;
        private int Years { get; set; } = 10;
        private double total { get; set; } = 0;
        private string Total { get; set; }
   
        private void Calculate()
        {
            var total = Principal * Math.Pow(1 + InterestRate / (1200.0), Years * 12);
            Total = total.ToString("C");
        }
    }
   

3. Now that the code is in place the bindings need to be added to hook up the HTML to the C# code. The updated HTML will look like this, note the addition of @bind and @onclick

    <table class="table">
        <tr>
            <th>Initial Principal</th>
            <th><input @bind="Principal" /></th>
        </tr>
        <tr>
            <th>Years</th>
            <th><input @bind="Years" /></th>
        </tr>
        <tr>
            <th>Annual Interest Rate (%)</th>
            <th><input @bind="InterestRate" /></th>
        </tr>
        <tr>
            <th>Total:</th>
            <th>@Total</th>
        </tr>
    </table>
    <button class="btn btn-primary" @onclick="Calculate">Calculate</button>
   

4. Run the app using dotnet run in the terminal and test out the functionality

Next Steps

The next steps are to become aquainted with Blazor and what all it has to offer. Below are some references to start with. If you are used to coding in C# the good news is you should be able to pick up working with Blazor pretty quickly. Introduction to ASP.NET Core Blazor is a good place to start to get a sense of everything.

Moving on from there the Razor syntax reference for ASP.NET Core is the next place to have bookmarked to dive into this. For the simple code used in this article the following were used in the razor syntax which are only a few of the many options available:

• Directives
  • @code
  • @page
• Directive Attributes
  • @bind
  • @on{EVENT}

References

• Build a web app with Blazor WebAssembly and Visual Studio Code
• Blazor homepage
• Introduction to ASP.NET Core Blazor
• Razor syntax reference for ASP.NET Core
• Host and deploy ASP.NET Core Blazor WebAssembly
• Project structure for Blazor apps
• Build Progressive Web Applications with ASP.NET Core Blazor WebAssembly