Blazor Server App CRUD With Entity Framework Core In .Net 5

In this article, we will learn what Blazor is and how we can set up Blazor by making a basic CRUD Application with Entity Framework Core Code first approach in .Net 5 (the latest version).

Prerequisites

Install the latest .NET 5.0 SDK from here.
Install the latest version of Visual Studio 2019 from here.

What we are going to cover in this?

What is Blazor and why it is exciting for C# Developers?
Difference between Blazor Server — Blazor Web Assembly
Setup the CRUD App using Blazor
Run and Test

What is Blazor and why is it exciting for C# Developers?

Blazor is a .NET web system that runs in the program. Think Angular or React however controlled by C# and Razor. Designers make Blazor applications utilizing a combination of C#, Razor, and HTML. These applications execute .NET congregations utilizing the Mono .NET runtime carried out through WebAssembly. Blazor utilizes the most recent web guidelines and requires no extra modules or additional items to run, this is not another Silverlight.

Blazor Server App

In the worker side facilitating model (Blazor Server-Side), Blazor is executed on the worker from inside an ASP.NET Core application. UI refreshes, occasion dealing with, and JavaScript brings are taken care of over a SignalR association.

Blazor also supports features of the SPA(Single Page Application) framework such as,

Routing
Layouts
Forms and validation
JavaScript interop
Build on save during development
Server-side rendering
Dependency Injection

Blazor Server-Side — Fig

Blazor Web Assembly

In the customer-side model (Blazor WebAssembly), the Blazor application, its conditions, and the .NET runtime are downloaded to the program, and the application is executed straightforwardly on the program UI string. All UI updates and occasions taking care of occur inside a similar cycle.

Blazor WASM Model-Fig

Setup

Create a Blazor Server App.

Fig-1

Add the project name for your Application

Fig-2

Make sure you have .Net 5.0 installed in your machine and then it will automatically be added in the dropdown select target framework as .Net 5.0

FIg-3

A basic scaffolded template will generate here is the project structure.

Fig-4

Create a class in the Data folder to act as a table in the database to store all our CRUD Operations.

Employee.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorCRUD.Data
{
    public class Employee    
    {        
        [Key]
        public int Id { get; set; }
        public string EmployeName { get; set; }
        public string Gender { get; set; }
        public string City { get; set; }
        public string Designation { get; set; }    
    }
}

Create a DB context file to set up the configuration with Database.

AppDbContext.cs

using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorCRUD.Data
{
    public class AppDBContext : DbContext    
    {
        public AppDBContext(DbContextOptions<AppDBContext> options) : base(options)        
        {        
        }
        public DbSet<Employee> Employees { get; set; }    
    }
}

Create an employee service with all the business logic inside this service.

Setup a connection string in the appsettings.json file.

appsettings.json

{
    "Logging": {
        "LogLevel": {
            "Default": "Information",
            "Microsoft": "Warning",
            "Microsoft.Hosting.Lifetime": "Information"    
        }  
    },
    "AllowedHosts": "*",
    "ConnectionStrings": {
        "myconn": "server= Your Server name; database=BlazorCRUD;Trusted_Connection=True;"  
    }
}

EmployeeService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;

namespace BlazorCRUD.Data
{
    public class EmployeeService    
    {        
        #region Property
        private readonly AppDBContext_appDBContext;        
        #endregion        
        
        #region Constructor
        public EmployeeService(AppDBContextappDBContext)        
        {
            _appDBContext=appDBContext;        
        }        
        #endregion        
        
        #region Get List of Employees
        public async Task<List<Employee>> GetAllEmployeesAsync()        
        {
            return await _appDBContext.Employees.ToListAsync();        
        }        
        #endregion        
        
        #region Insert Employee
        public async Task<bool> InsertEmployeeAsync(Employeeemployee)        
        {
            await _appDBContext.Employees.AddAsync(employee);
            await _appDBContext.SaveChangesAsync();
            return true;        
        }        
        #endregion        
        
        #region Get Employee by Id
        public async Task<Employee> GetEmployeeAsync(int Id)        
        {
        Employee employee = await 
        _appDBContext.Employees.FirstOrDefaultAsync(c=>c.Id.Equals(Id));
            returnemployee;        
        }        
        #endregion        
        
        #region Update Employee
        public async Task<bool> UpdateEmployeeAsync(Employeeemployee)        
        {
            _appDBContext.Employees.Update(employee);
            await _appDBContext.SaveChangesAsync();
            return true;        
        }        
        #endregion        
        
        #region DeleteEmployee
        public async Task<bool> DeleteEmployeeAsync(Employeeemployee)        
        {
            _appDBContext.Remove(employee);
            await _appDBContext.SaveChangesAsync();
            return true;        
        }        
        #endregion    
    }

Configure the connection setup and inject the EmployeeService in Configure Services method in a startup.cs file.

Startup.cs

public void ConfigureServices(IServiceCollectionservices)        
{
    services.AddRazorPages();services.AddServerSideBlazor();
    services.AddSingleton<WeatherForecastService>();
    services.AddScoped<EmployeeService>();            
    
    #regionConnection String
    services.AddDbContext<AppDBContext>(item=>item.UseSqlServer(Configuration.GetConnectionString("myconn")));            
    #endregion        
}

Create the table by using these commands in Package Console Manager

Commands

Add-Migration ‘Your Migration Name’ Update-Database

Now the actual binding of Data will see once we create the Razor pages inside the Pages folder lets create pages and for each form. Will create the Employee Form where it will have the data table to show all the Saved information in it.

To create a Razor component Right Click on pages -> Click on Add -> Click on Razor Component then create a page with the Employee.Razor.

Employees.Razor

@page "/Employees"
@usingBlazorCRUD.Data
@inject EmployeeService employeeService

<Nav Link class="nav-link"href="AddEmployee">    
    <spanclass="oi oi-plus"aria-hidden="true">Add New</span>
</NavLink>

<h1>Employee Info</h1>
@if (EmpObjisnull)
{    
    <p><em>Loading... !</em></p>
}
else
{    
    <tableclass="table">            
        <thead>                
            <tr>                    
                <th>EmpId</th>                    
                <th>EmployeeName</th>                    
                <th>Gender</th>                    
                <th>Designation</th>                    
                <th>City</th>                    
                <th>Action</th>                
            </tr>            
        </thead>        
    <tbody>
        @foreach(varempinEmpObj)
        {            
        <tr>                
            <td>@emp.Id</td>                
            <td>@emp.EmployeName</td>                
            <td>@emp.Gender</td>                
            <td>@emp.Designation</td>                
            <td>@emp.City</td>                
            <td>                    
                <aclass="nav-link"href="EditEmployee/@emp.Id">                        
                    <spanclass="oi oi-pencil"aria-hidden="true">
                                                    Edit</span>                   
                 </a>                    
                 <aclass="nav-link"href="Delete/@emp.Id">                            
                     <spanclass="oi oi-trash"aria-hidden="true">
                                                     Delete</span>                    
                 </a>                
             </td>            
         </tr>}        
      </tbody>    
   </table>
}

@code{
    List<Employee> EmpObj;
    protected override async TaskOnInitializedAsync()    
    {
        EmpObj = await Task.Run(() =>employeeService.GetAllEmployeesAsync());    
    }

@page — the actual navigation page name

@inject — Injection of Service layer here to have interaction with Business logic

@code — Where we call the service method to bind all the values inside the Razor component.

AddEmployee.Razor

Injected the NavigateManager to navigate from one page to another with the page names.

@page "/AddEmployee"
@using BlazorCRUD.Data
@inject EmployeeService employeeService
@inject NavigationManager NavigationManager

<h2>Add Employee</h2>
<hr />

<form>    
    <div class="row">        
        <div class="col-md-8">            
            <div class="form-group">                
                <label for="Name" class="control-label">Name</label>                
                <input form="Name" class="form-control" 
                                        @bind="@obj.EmployeName" />            
            </div>            
            <div class="form-group">                
                <label for="Gender" class="control-label"></label>                
                <select @bind="@obj.Gender" class="form-control">                    
                    <option value="">-Select Gender</option>                    
                    <option value="Male">Male</option>                    
                    <option value="Female">Female</option>                
                </select>            
            </div>            
            <div class="form-group">                
                <label for="Designation" class="control-
                                    label">Designation</label>                
                <input form="Designation" class="form-control" 
                                        @bind="@obj.Designation" />            
            </div>            
            <div class="form-group">                
               <label for="City" class="control-label">City</label>                
              <input form="City" class="form-control" @bind="@obj.City" />            
            </div>        
        </div>    
     </div>    
     <div class="row">        
         <div class="col-md-4">            
             <div class="form-group">                
                 <input type="button" class="btn btn-primary" 
                         @onclick="@CreateEmployee" value="Save"/>                
                 <input type="button" class="btn btn-primary" 
                         @onclick="@Cancel" value="Cancel"/>            
             </div>        
         </div>    
     </div>
</form>

@code {    
    Employee obj = new Employee();    
    protected async void CreateEmployee()    
    {        
        await employeeService.InsertEmployeeAsync(obj);        
        NavigationManager.NavigateTo("Employees");    
    }    
    void Cancel()    
    {        
        NavigationManager.NavigateTo("Employees");    
    }
}

EditEmployee.razor

@page "/EditEmployee/{Id}"
@usingBlazorCRUD.Data
@inject EmployeeService employeeService
@inject NavigationManager NavigationManager

<h2>Edit Employee</h2>
<hr />

<form>    
    <divclass="row">        
        <divclass="col-md-8">            
            <divclass="form-group">                
                <inputform="Name"class="form-control"@bind="@obj.Id" />            
            </div>            
            <divclass="form-group">                
                <labelfor="Name"class="control-label">Name</label>                
                <inputform="Name"class="form-
                            control"@bind="@obj.EmployeName" />            
            </div>            
            <divclass="form-group">                
                <labelfor="Gender"class="control-label"></label>                
                <select@bind="@obj.Gender"class="form-control">                    
                    <optionvalue="">-Select Gender</option>                    
                    <optionvalue="Male">Male</option>                    
                    <optionvalue="Female">Female</option>                
                </select>            
            </div>            
            <divclass="form-group">                
                <labelfor="Designation"class="control-
                                        label">Designation</label>                
                <inputform="Designation"class="form-
                                control"@bind="@obj.Designation" />            
            </div>            
            <divclass="form-group">                
                <labelfor="City"class="control-label">City</label>                
                <inputform="City"class="form-control"@bind="@obj.City" />            
            </div>        
        </div>    
     </div>    
     <divclass="row">        
         <divclass="col-md-4">            
             <divclass="form-group">                
                 <inputtype="button"class="btn btn-
                     primary"@onclick="@UpdateEmployee"value="Update" />                
                 <inputtype="button"class="btn btn-
                     primary"@onclick="@Cancel"value="Cancel" />            
             </div>        
         </div>    
     </div>
</form>

@code{    
    [Parameter]
    public stringId{get; set; }
    Employeeobj = new Employee();
    protected override async TaskOnInitializedAsync()    
    {
        obj = await Task.Run(() =>employeeService.GetEmployeeAsync(Convert.ToInt32(Id)));    
    }
    
    protected async voidUpdateEmployee()    
    {
        await employeeService.UpdateEmployeeAsync(obj);
        NavigationManager.NavigateTo("Employees");    
    }
    void Cancel()    
    {
        NavigationManager.NavigateTo("Employees");    
    }
}

Actually, we used to pass the Id for Edit employee to fetch the details from the database and to store them in the edit employee form.

Delete.Razor

@page "/Delete/{Id}"
@using BlazorCRUD.Data
@inject EmployeeService employeeService
@inject NavigationManager NavigationManager

<h2>Delete Employee</h2>
<hr />
<h3>Are you sure want to delete this?</h3>
<form>    
    <divclass="row">        
        <divclass=" col-md-8">            
            <divclass="form-group">                
                <label>Employee Id:</label>                
                <label>@obj.Id</label>            
            </div>            
            <divclass="form-group">                
                <label>Employee Name:</label>                
                <label>@obj.EmployeName</label>            
            </div>           
            <divclass="form-group">                
                <label>Desigation:</label>                
                <label>@obj.Designation</label>            
            </div>            
            <divclass="form-group">                
                <label>Gender:</label>                
                <label>@obj.Gender</label>            
            </div>            
            <divclass="form-group">                
                <label>City:</label>                
                <label>@obj.City</label>            
            </div>        
        </div>    
    </div>    
    <divclass="row">        
        <divclass="col-md-4">            
            <divclass="form-group">                
                <inputtype="button"class="btn btn-danger"
                            @onclick="@DeleteEmployee"value="Delete" />                
                <inputtype="button"class="btn btn-primary"
                                @onclick="@Cancel"value="Cancel" />            
            </div>        
         </div>    
    </div>
</form>

@code{    
    [Parameter]
    public stringId{get; set; }
    Employeeobj = new Employee();
    protected override asyncTaskOnInitializedAsync()    
    {
        obj = await Task.Run(() =>employeeService.GetEmployeeAsync(Convert.ToInt32(Id)));    
    }
    protected async void DeleteEmployee()    
    {
        await employeeService.DeleteEmployeeAsync(obj);
        NavigationManager.NavigateTo("Employees");    
    }
    void Cancel()    
    {
        NavigationManager.NavigateTo("Employees");    
    }
}

Run and test the application

Click on the employee tab you will see all the existing details in the grid

Blazor Crud

Thanks for staying till the end and also Thank you for reading, please let me know your questions, thoughts, or feedback in the comments section. I appreciate your feedback and encouragement.

Source: Medium - Jay Krishna Reddy

The Tech Platform

Blazor Server App CRUD With Entity Framework Core In .Net 5

What is Blazor and why is it exciting for C# Developers?

Blazor Server App

Blazor Web Assembly

Setup

Recent Posts

Share

Learn

Ask

Contact US