In this article, we are going to create a web application using Blazor, .Net 6.0 with the help of Entity Framework Core perform CRUD operations hosted by Asp.Net Core.
Here I am going to use Visual Studio 2022 and SQL Server 2014.
Creating Table
We will use the “userdetails” table to perform CRUD operations. Open SQL Server and create the “userdetails” table using the below query.
Create Blazor Web Application
Here we will create a new project using Blazor WebAssembly App and .Net 6.0. Now open Visual Studio 2022 and follow the below steps.
Step 1
Step 2
In this step we will select “Blazor WebAssembly App” project type.
Step 3
Step 4
Here we will select Framework type as .NET 6.0 and also select the ASP.NET Core hosted option.
Now, our Blazor application will be created and the folder structure in Solution Explorer as given in the below image.
In the above image we can see that we have 3 project files created inside the “BlazorApp” solution.
- BlazorApp.Client – It contains the client side code and the pages that will be rendered on the browser.
- BlazorApp.Server – It contains the server side codes like database connection, operations and web API.
- BlazorApp.Shared – It contains the shared code that can be accessed by both client and server.
If now we run the application by pressing F5, then we can see a landing page of the application similar to the below image.
Install Required Nuget Packages
Go to “Tools” menu, select NuGet Package Manager > Package Manager Console
and then run the below commands to add database provider and Entity Framework Tools.
=> Install-Package Microsoft.EntityFrameworkCore.SqlServer
=> Install-Package Microsoft.EntityFrameworkCore.Tools
Adding the Model to the Application
Now we will create a Model class which will contain the User model properties.
To do that right click on “BlazorApp.Shared” project and add a New Folder as “Models”.
Then right click on “Models” folder and add a Class as “User.cs”.
Now open “User.cs” file and paste the below code to it.
Adding Data Access Layer to the Application
Now we will create a “DatabaseContext.cs” class where we define database connection. To do that right click on “BlazorApp.Server” project and add a folder as “Models”. Add “DatabaseContext.cs” file to the “Models” folder and put the below code to it.
Now we will create another two folder “Interfaces” and “Services” to handle database related operations.
Right click on “BlazorApp.Server” project and add two new folders as “Interfaces” and “Services”.
Now add an interface to the “Interfaces” folder, name it as “IUser.cs” and put the below code to it.
Now add a class name as “UserManager.cs” to the “Services” folder, which will inherit “IUser” interface and put the below code to it.
Now we will add “DatabaseContext”,“IUser” and “UserManager” reference to the “Program.cs” file of the“BlazorApp.Server” project.
Open “Program.cs” file and put the below code to it.
Adding the web API Controller to the Application
Right click on “BlazorApp.Server/Controllers” folder and select “Add” then “New Item”. It will open an “Add New Item” dialog box. Select “ASP.NET” from the left panel, then select “API Controller - Empty” from templates and put the controller class name as “UserController.cs”. Press Add to create the controller.
Now open “UserController.cs” file and put the below code into it.
Adding Razor View to the Application
Here we will add three page to the “BlazorApp.Client” project. “UserDetails.razor” for view user records, “AddUser.razor” page for add and edit user details and “DeleteUser.razor” for delete user.
Now right click on “Pages” folder of “BlazorApp.Client” project and select “Add” then “New Item”. It will open an “Add New Item” dialog box. Select “Web” from the left panel, then select “Razor Component” from templates and put name as “UserDetails.razor”. Similarly, we will add more two pages “AddUser.razor” and “DeleteUser.razor” to the “BlazorApp.Client” project.
Now open the “UserDetails.razor” file and put the below code to it.
Now open “AddUser.razor” page and put the below code to it, where we can add a new user and also edit user details.
Now open the “DeleteUser.razor” page and paste below code to it.
Now we add the “User Details” menu link to the navigation menu. To do that open “BlazorApp.Client/Shared/ NavMenu.razor” file and put the below code in it.
Now we will execute the application. When we execute the application will see a navigation link for “User Details” below the Fetch Data link in left side like below image.
When we click on “User Details” in the navigation menu, it will redirect to “User Details” view and display all the user data on the page.
On the “User Details” page we can find a button to “Add User”. It will redirect to the “Add User” page where we can add new user.
If we want to edit or delete an existing user record, then click on Edit or Delete button link of that current record. It will open respective (edit/delete) view as shown below where we can edit or delete the user data.
In the above article we have created an ASP.NET Core application using Blazor Entity Framework and .NET 6.0 and also performed the CRUD operation on it.