Categories
Technical

Create Blazor App using Visual Studio 2019

Blazor Introduction

Blazor is a new .NET web framework which was released by Microsoft. In this article, I will walk through you to create a simple Blazor application using Visual Studio 2019.

We can create both client side Blazor app and server side Blazor apps using Visual Studio 2019 which offers both the project templates.

Server side Blazor app runs on server side ASP.NET Core app and handles user interactions using SignalR connections. On the other hand, client side Blazor app runs on WebAssembly which is supported by most modern browsers. We will see more about the difference between server side and client side Blazor app in another article.

Prerequisites

  1. Visual Studio 2019
  2. .NET Core SDK 3.1

How to create simple Blazor App using Visual Studio?

Follow the simple steps to create your first Blazor application (Server Side).

Step 1:  File -> New -> Projects

Create New Project
Create New Project

Step 2: Select Blazor App project template.

Blazor App Project Template
Blazor App Project Template

Step 3: Enter the Project Name, Here I have entered “MyFirstBlazorApp”. Then proceed with “Create” button.

My First Blazor App
My First Blazor App

Step 4: Select the Blazor Server App project template and make sure No Authentication chosen. Then proceed with “Create” button.

Blazor Server App
Blazor Server App

Note: If you want to create the Blazor Application with Authentication, you need to change the Authentication by clicking on change link. Refer below,

Change Authentication
Change Authentication

Note: You can refer the article about how to implement cookie based Authentication in ASP.NET Core application. You can apply the same logic with Blazor application.
https://karthikekblog.com/cookie-authentication-in-asp-net-core-mvc-web-application/

That’s it you have successfully created your first Blazor app using visual Studio 2019.

Blazor Application Files Explained

So, what happen once you have created the Blazor application. Yes, you need to know about the files which by default created with this Blazor project templates.

Here the following files are created,

  1. Program.cs – which is the starting point for the app that starts the server.
  2. Startup.cs – where you configure the app services and middleware.
  3. App.razor – This is the root component for the app.
  4. MyFirstBlazorApp/Pages Directory – which contains sample web pages for the app.
  5. MyFirstBlazorApp/Shared Directory – which contains sample shared layouts and components for the app.
  6. MyFirstBlazorApp/Data Directory – which contains data model required for the app.
  7. appsettings.json – Apps default settings.
  8. MyFirstBlazorApp.csproj – app project file.
Blazor Project Solution Explorer
Blazor Project Solution Explorer

Build and Run the Blazor App

You can just build and run (F5) the application to check whether everything work fine here, see what you get after the successful run,

Blazor App Output

You can navigate to different pages using left navigation menu. There are 3 pages listed, Home, Counter and Fetch data. Try to navigate to each page and check how it is working.

How to create new component in Blazor?

Blazor simplified the creation of UI components and use that components between different pages. If you are familiar with Angular, React and Vue client-side frameworks, you know how this component model works.

Like other client-side framework, Blazor also supports the component but more simple and efficient way.

Here, I have taken the simple example to create new component which will display the full name of user by getting first name and last name as input.

Step 1: Open Solution Explorer. Right click on Pages -> Add -> Razor Component

Create Blazor Component
Create Blazor Component

Step 2: Then select the Razor Component template and provide the component name. Here “UserInput.razor”.

Note: File extension should be razor.

Razor Component
Razor Component

Step 3: Once the new component file created, you have to write code to create component.

Here, I’m going to write code to create new component which will display the full name of user by getting first name and last name as input.

Refer the complete code:

<h3>Display User's Full Name</h3> <br />

<div>
    <form>
        <div class="row">
            <div class="col-sm-2">
                <label>First Name: </label>
            </div>
            <div class="col-sm-6">
                <input type="text" name="firstName" @bind="firstName" placeholder="Enter First Name" />
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-sm-2">
                <label>Last Name: </label>
            </div>
            <div class="col-sm-6">
                <input type="text" name="lastName" @bind="lastName" placeholder="Enter Last Name" />
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-sm-6">
                <button type="button" @onclick="DisplayFullName" class="btn btn-primary">Display Full Name</button>
            </div>
        </div>
    </form>
    <br />
    @if(fullName != string.Empty) { 
        <div class="row">
            <div class="col-sm-2">
                <label>Full Name: </label>
            </div>
            <div class="col-sm-6">
                @fullName
            </div>
        </div>
    }
</div>

@code {

    private string firstName = string.Empty;
    private string lastName = string.Empty;
    private string fullName = string.Empty;

    private void DisplayFullName()
    {
        if(firstName != string.Empty)
            fullName = firstName + " " + lastName;
    }

}

Code Explained:

  • It is the simple HTML code, which collect 2 inputs (first name and last name) from user.  
  • One Button click on the button will perform the function that combines first name and last name and display the result into new label.
  • Input boxes are bind with properties, so any input given in input boxes bind with the respective properties.
  • Button has defined with on click event and the function is derived in code block.

Step 4:  Now you have created new component, you can use this component in any other razor pages. To include this component, you must add the following code line.

<UserInput />

You can try this by adding the above line to Index.razor page at the bottom like below, a run the application.

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

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

<UserInput />

How to create new page in Blazor and use the components?

Step 1: This is very simple and its like creating component. You just create new Razor component like you done above. Right click on Pages -> Add -> Razor Component

Create Blazor Component
Create Blazor Component

Step 2:  Then name it “User.razor

Razor Component pages
Razor Component pages

Step 3: Once user.razor component created, you can edit that file. At the top, just add the line

@page "/user"

That’s it. You have added new page.

Then you can include the existing component which we already created above. So, User.razor file contains following codes.

@page "/user"

<UserInput />

Step 4: One more step must go, which is adding the page as in navigation menu. To add it, go to NavMenu.razor file under shared directory.

<li class="nav-item px-3">
    <NavLink class="nav-link" href="user">
          <span class="oi oi-list-rich" aria-hidden="true"></span> Users
    </NavLink>
</li>

Include the following lines to add new menu items.Step 5: Build and Run the application.

Blazor Application Output
Blazor Application Output

Conclusion:

I hope this article helps you to understand the steps to create simple Blazor App using Visual studio and how to add new components and page in Blazor app. This example shows that creating Blazor app and components and reuse that components into multiple pages can be very easy compared to other common frameworks like Angular, React and Vue.

But Blazor application should be build and run again when made any changes in razor component to reflect in browser, On the other hand, React, angular, and Vue are not required to build for each changes made.

To create React application,

https://karthikekblog.com/how-to-create-your-first-react-application-with-net-core-in-visual-studio-2017-with-simple-example/

To create Angular application,

https://karthikekblog.com/how-to-create-your-first-angular-application-with-net-core-in-visual-studio/

Leave a Reply

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