How to create a Blazor application in .NET 5.0 with Razor pages using EF Core framework + Code First approch with SQL EXPRESS localdb (no need to install full sql server) — part 1

Photo by Safar Safarov on Unsplash

In this article, we are going to create a Single Page Application (SPA) using Razor pages in Blazor(.NET 5.0), with the help of the Entity Framework Core database first approach.

Introduction

Single Page Application (SPAs) are web applications that load a single HTML page, and dynamically update that page as the user interacts with the app. We will be creating a sample Appointment Record Management System and perform CRUD operations on it.

We will be using Visual Studio 2019 and SQL EXPRESS localdb.

Prerequisites

• install .NET 5.0 SDK from here
• install Visual Studio 2019 v16.8.3 or above from here
• SQL Server 2008 or above (I am using SQL Server Express 2019 from here)

The Blazor framework is not supported by versions below Visual Studio 2017 v15.7.

Source code

Get the source code from GitHub.

Create the Blazor web application

Open Visual Studio and select “File” > “New” > “Project”.

After selecting the project, a “New Project” dialog will open. In the top panel, Choose C# in language and choose Web Project in project type and go for next.

Then, select Put the name of the project as “Your preferred name” and press “Create”.

After clicking on “Create”, a new dialog will open asking you to select the project template. You can observe two option in template window. Select “BLAZOR Web Assembly App” and select “ASP.NET core Hosted template” and “.NET 5.0” from dropdowns. Then, press the “Create”.

Why we choose ASP.NET Core Hosted?
If you use the standard ASP.NET core Hosted template, the application will only make calls to the server when it first loads, and then whenever it makes calls to the endpoints in the Server project, typically to get or post data, or to make use of proprietary algorithms that you prefer not to include in dlls that get downloaded to a browser. The Client and Shared projects will be downloaded to the browser/client on first request.

This is a standard implementation of client-server architecture. The version of .NET is irrelevant.

Now our BLAZOR solution will be created. You can observe the folder structure in Solution Explorer as shown in the below image.

Our application divided in three parts :

1. Client side
   manage User Interface and all the frontend side logic which we want to use on client side (in browser not need any server call)
2. Server side
   user can manage the API or database related operational logic in this module.
3. Shared repositories
   shared entities between Server and Client Projects.