How to Build Web App with Blazor Framework?

What is Blazor Framework?

Web App with Blazor Framework is an open-source web framework for building interactive clientside Web UI with .Net. It enables Developers to make rich interactive UIs using C# and HTML rather than Javascript. C# code is executed both on the server-side and client browser which means developers can reuse their C# code rather than learning a new javascript framework.

Blazor can run C# code by using WebAssembly. WebAssembly relies on open web standards, so for Blazor applications to figure, there’s no need for any extra plugin like in the past days.

1. Create Your First Web app with Blazor Framework

In your prompt, run the next command to make your app:

Dotnet new blazorserver -o FirstBlazorApp

You can navigate to FirstBlazorApp with the following command:

Cd FirstBlazorApp

2. First Blazor Framework Web App Structure

The following files were created with the FirstBlazorApp directory:

• Program.cs: This file is the entry point of FirstBlazorApp. It includes all the main methods of the App.
• WWWRoot: It includes all static files like stylesheets, images, etc.
• app.razor: It’s a root component of the Application. It uses a built-In Router component and handles client-side routing.
• Pages Folder: The folder contains example web pages of App.
• Shared Folder: Because the name implies it contains shared components. It includes MainLayout.razor, MainLayout.razor.css, NavMenu.razor, NavMenu.razor.css.
• appsettings.json: This contains the configuration of the app.
• FirstBlazorApp.csproj: Defines app project and its dependencies.
• launchSettings.json: Contains profile Settings.
• _Imports.razor: Includes common namespaces.

3. Run your Blazor Framework Web App

Write this command in the prompt to run your app.

Dotnet watch

This command will build and run your app. Whenever you create changes in code it’ll update your app by itself. If you get this page then you’ve successfully run your App.

The first page that’s shown below is defined by Index. a razor that’s in Pages Folder.

@page "/"
		<PageTitle>Index</PageTitle>
		<h1>Hello, world!</h1>
		Welcome to your new app.
		<SurveyPrompt Title="How is Blazor working for you?" />

You can see the Counter tab on the left sidebar. You will be navigated to the counter page by selecting the counter tab.

Select the Click me button to increment a counter. Incrementing counter is completed by C# rather than javascript.

Every time you click the Click me button Onclick event is fired and the Increment method is called. Increment method increments current count variable

@page "/counter"
		<PageTitle>Counter</PageTitle>
		<h1>Counter</h1>
		<p role="status">Current count: @currentCount</p>
		<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
		@code {
		private int currentCount = 0;
		private void IncrementCount()
		{
		currentCount++;
		}
		}

4. Add Component to Page

If you wish the Counter component on your first page you simply add <Counter/> element on the Index.razor page.

@page "/"
		<PageTitle>Index</PageTitle>
		<h1>Hello, world!</h1>
		Welcome to your new app.
		<SurveyPrompt Title="How is Blazor working for you?" />
		<Counter></Counter>