Writing your first Blazor Server App in Visual Studio for Mac

If you have not read my previous post on Visual Studio 2019 for Mac, do read it as it will help in learning about the new features, installation and troubleshooting of the Visual Studio 2019 for Mac version 8.4. If you already read that article you will find that the very first feature I have mentioned is that the Microsoft team has added support for developing Blazor Server Applications.

In this post we will learn on writing your first Blazor Server app in Visual Studio for Mac. Let’s get started.

A short primer on Blazor

It is a framework for creating client-side web UI with .NET which are interactive in nature:

  • Server-side and client-side app logic can be shared.
  • Create web UIs using C# and not JavaScript.
  • More browser support.

Components are the basis on which apps are created using Blazor. A component in Blazor is a UI element such as a dialog or a page. Components are .NET assembly classes that

  • Manage user events.
  • Can be reused.
  • Can be distributed and shared Razor class libraries or NuGet packages.

Blazor Server App in Visual Studio Project Structure

The following folders / files constitute a Blazor app generated from a Blazor template:

  • Program.cs – Entry point for the app that sets up the ASP.NET Core host.
  • Startup.cs – Startup logic for the app.
  • wwwroot/index.html – The root page of the app as an HTML page. Also called Blazor WebAssembly
  • Pages/_Host.cshtml – The root page of the app as a Razor Page
  • App.razor – The intercepter root component of the app that sets up client-side routing
  • Pages folder – Contains components/pages
  • Shared folder – Contains misc UI components
  • _Imports.razor – Contains common directives
  • Data folder – Contains classes
  • wwwroot – The web root folder containing assets / resources

appsettings.json – App configuration settings

Creating a new Blazor Server Project

On starting Visual Studio for Mac you will see the following dialog box.

blazor server app new solution
Image source: https://devblogs.microsoft.com/

Click New. Elseyou can also use File>New Solution as shown.

blazor server app new solution
Image source: https://devblogs.microsoft.com/

Now the New Project Dialog will appear. To create the Blazor Server app navigate to section .NET Core > App >Blazor Server App.

blazor server app choose template
Image source: https://devblogs.microsoft.com/

Click Next
It will prompt you for selecting the .NET Core version.
Select the default value.
For Blazor apps, .NET Core 3.0+ is required.
After selecting the version click Next.

The wizard will show the next page where you can mention the name of your new project. The example given on the official Microsoft Visual Studio Blog names it as ‘HelloBlazor’, hence we will keep it as is. This blog is also the source of this post.

blazor server app configuration
Image source: https://devblogs.microsoft.com/

After you have completed the configuration of the new Blazor project, click Create to create the project.
Once the project is created the IDE will display the files and structure. In the below screenshot we can see the Index.razor file in the mac editor.

index.razor file
Image source: https://devblogs.microsoft.com/

Now you should run your application to see that it is working fine.
You can start it as Run > Start Debugging or Run > Start without Debugging.

app debugging
Image source: https://devblogs.microsoft.com/

Once the project builds, it will open in the browser. Now we can change some code.In the ‘Counter’razor page,we can enable the user to specify the value to be incremented. To do this

  • Add an input field to the Counter page.
  • Bind it to a new increment property used to increment the counter.
  • The updated code for Counter.razor can be seen in the below screenshot.
counter.razor file
Image source: https://devblogs.microsoft.com/

Code source: https://devblogs.microsoft.com/visualstudio/getting-started-with-blazor-server-apps-in-visual-studio-for-mac/

You can use the below code snippet in your project.

@page "/counter"
 
<h1>Counter</h1>
 
<input type="number" min="1" step="1" @bind-value="increment" />
<p>Current count: @currentCount</p>
 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
@code {
    public int increment = 1;
    private int currentCount = 0;
 
    private void IncrementCount()
    {
        currentCount += increment;
    }
}

In the highlighted code on line 5 above, a new input field is added so that the user running this application can configure the value. For this a new property named ‘increment’is used to store the incremented value. Also there is a modified line to use the incremented value instead of the hard coded increment by 1.

Run the application again by putting the debugger to check the values.

run app on mac
Image source: https://devblogs.microsoft.com/
run app on mac counter page
Image source: https://devblogs.microsoft.com/

On rebuilding and running the application, you can check that the increment value is now taken from the input field in the Counter page. This indicated that our new Blazor application is running correctly.

Summary

In this post we learnt how to create a new Blazor Server app, build and run it with the Visual Studio for Mac editor. If you would like to read more on Visual Studio you can find the relevant posts here.

Hitesh Boricha

I have a little over a decade experience in the IT industry. Having worked in various roles in this industry, I am passionate about technology.

One thought to “Writing your first Blazor Server App in Visual Studio for Mac”

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.