Understanding CRUD Operation in Blazor

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 TABLE [dbo].[userdetails](
    [userid] [int] IDENTITY(1,1) NOT NULL,
    [username] [nvarchar](100) NULL,
    [address] [nvarchar](500) NULL,
    [cellnumber] [nvarchar](50) NULL,
    [emailid] [nvarchar](50) NULL,
    CONSTRAINT [PK_userdetails] PRIMARY KEY CLUSTERED
    (
        [userid] ASC
    )
)

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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace BlazorApp.Shared.Models
{
    public class User
    {
        public int Userid { get; set; }
        public string Username { get; set; } = null!;
        public string Address { get; set; } = null!;
        public string Cellnumber { get; set; } = null!;
        public string Emailid { get; set; } = null!;
    }
}

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.

using BlazorApp.Shared.Models;
using Microsoft.EntityFrameworkCore;
namespace BlazorApp.Server.Models
{
    public partial class DatabaseContext : DbContext
    {
        public DatabaseContext()
        {
        }
        public DatabaseContext(DbContextOptions<DatabaseContext> options)
            : base(options)
        {
        }
        public virtual DbSet<User> Users { get; set; } = null!;
        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<User>(entity =>
            {
                entity.ToTable("userdetails");
                entity.Property(e => e.Userid).HasColumnName("Userid");
                entity.Property(e => e.Username)
                    .HasMaxLength(100)
                    .IsUnicode(false);
                entity.Property(e => e.Address)
                    .HasMaxLength(500)
                    .IsUnicode(false);
                entity.Property(e => e.Cellnumber)
                    .HasMaxLength(50)
                    .IsUnicode(false);
                entity.Property(e => e.Emailid)
                    .HasMaxLength(50)
                    .IsUnicode(false);
            });
            OnModelCreatingPartial(modelBuilder);
        }
        partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
    }
}

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.

using BlazorApp.Shared.Models;
namespace BlazorApp.Server.Interfaces
{
    public interface IUser
    {
        public List<User> GetUserDetails();
        public void AddUser(User user);
        public void UpdateUserDetails(User user);
        public User GetUserData(int id);
        public void DeleteUser(int id);
    }
}

Now add a class name as “UserManager.cs” to the “Services” folder, which will inherit “IUser” interface and put the below code to it.

using BlazorApp.Server.Interfaces;
using BlazorApp.Server.Models;
using BlazorApp.Shared.Models;
using Microsoft.EntityFrameworkCore;
namespace BlazorApp.Server.Services
{
    public class UserManager : IUser
    {
        readonly DatabaseContext _dbContext = new();
        public UserManager(DatabaseContext dbContext)
        {
            _dbContext = dbContext;
        }
        //To Get all user details  
        public List<User> GetUserDetails()
        {
            try
            {
                return _dbContext.Users.ToList();
            }
            catch
            {
                throw;
            }
        }
        //To Add new user record    
        public void AddUser(User user)
        {
            try
            {
                _dbContext.Users.Add(user);
                _dbContext.SaveChanges();
            }
            catch
            {
                throw;
            }
        }
        //To Update the records of a particluar user   
        public void UpdateUserDetails(User user)
        {
            try
            {
                _dbContext.Entry(user).State = EntityState.Modified;
                _dbContext.SaveChanges();
            }
            catch
            {
                throw;
            }
        }
        //Get the details of a particular user
        public User GetUserData(int id)
        {
            try
            {
                User? user = _dbContext.Users.Find(id);
                if (user != null)
                {
                    return user;
                }
                else
                {
                    throw new ArgumentNullException();
                }
            }
            catch
            {
                throw;
            }
        }
        //To Delete the record of a particular user
        public void DeleteUser(int id)
        {
            try
            {
                User? user = _dbContext.Users.Find(id);
                if (user != null)
                {
                    _dbContext.Users.Remove(user);
                    _dbContext.SaveChanges();
                }
                else
                {
                    throw new ArgumentNullException();
                }
            }
            catch
            {
                throw;
            }
        }
    }
}

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.

using BlazorApp.Server.Interfaces;
using BlazorApp.Server.Models;
using BlazorApp.Server.Services;
using Microsoft.AspNetCore.ResponseCompression;
using Microsoft.EntityFrameworkCore;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
//Donot forgot to add ConnectionStrings as "DefaultConnection" to the appsetting.json file
builder.Services.AddDbContext<DatabaseContext>
    (options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));
builder.Services.AddTransient<IUser, UserManager>();
builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
app.UseRouting();
app.MapRazorPages();
app.MapControllers();
app.MapFallbackToFile("index.html");
app.Run();

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.

using BlazorApp.Server.Interfaces;
using BlazorApp.Shared.Models;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
namespace BlazorApp.Server.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class UserController : ControllerBase
    {
        private readonly IUser _IUser;
        public UserController(IUser iUser)
        {
            _IUser = iUser;
        }
        [HttpGet]
        public async Task<List<User>> Get()
        {
            return await Task.FromResult(_IUser.GetUserDetails());
        }
        [HttpGet("{id}")]
        public IActionResult Get(int id)
        {
            User user = _IUser.GetUserData(id);
            if (user != null)
            {
                return Ok(user);
            }
            return NotFound();
        }
        [HttpPost]
        public void Post(User user)
        {
            _IUser.AddUser(user);
        }
        [HttpPut]
        public void Put(User user)
        {
            _IUser.UpdateUserDetails(user);
        }
        [HttpDelete("{id}")]
        public IActionResult Delete(int id)
        {
            _IUser.DeleteUser(id);
            return Ok();
        }
    }
}

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.

@page "/fetchuserdetails"
@using BlazorApp.Shared.Models
@inject HttpClient Http
<h1>User Data</h1>
<p>Blazor CRUD operation</p>
<div class="row">
    <div class="col-md-6">
        <a href='/user/add' class="btn btn-primary" role="button">
            <i class="fas fa-user-plus"></i>
            Add User
        </a>
    </div>
    <div class="input-group col">
        <input type="text" class="form-control" placeholder="Search user by name"
               @bind="SearchString" @bind:event="oninput" @onkeyup="FilterUser" />
        @if (SearchString.Length > 0)
        {
            <div class="input-group-append">
                <button class="btn btn-danger" @onclick="ResetSearch">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        }
    </div>
</div>
<br />
@if (userList == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table table-striped align-middle table-bordered">
        <thead class="table-success">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Address</th>
                <th>Department</th>
                <th>Cell No</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var user in userList)
            {
                <tr>
                    <td>@user.Userid</td>
                    <td>@user.Username</td>
                    <td>@user.Address</td>
                    <td>@user.Cellnumber</td>
                    <td>@user.Emailid</td>
                    <td>
                        <a href='/user/edit/@user.Userid' class="btn btn-outline-dark" role="button">
                            Edit
                        </a>
                        <a href='/user/delete/@user.Userid' class="btn btn-outline-danger" role="button">
                            Delete
                        </a>
                    </td>
                </tr>
            }
        </tbody>

    </table>
}
@code {
    protected List<User> userList = new();
    protected List<User> searchUserData = new();
    protected User user = new();
    protected string SearchString { get; set; } = string.Empty;
    protected override async Task OnInitializedAsync()
    {
        await GetUser();
    }
    protected async Task GetUser()
    {
        userList = await Http.GetFromJsonAsync<List<User>>("api/User");
        searchUserData = userList;
    }
    protected void FilterUser()
    {
        if (!string.IsNullOrEmpty(SearchString))
        {
            userList = searchUserData
                .Where(x => x.Username.IndexOf(SearchString, StringComparison.OrdinalIgnoreCase) != -1)
                .ToList();
        }
        else
        {
            userList = searchUserData;
        }
    }
    protected void DeleteConfirm(int userID)
    {
        user = userList.FirstOrDefault(x => x.Userid == userID);
    }
    public void ResetSearch()
    {
        SearchString = string.Empty;
        userList = searchUserData;
    }
}

Now open “AddUser.razor” page and put the below code to it, where we can add a new user and also edit user details.

@page "/user/add"
@page "/user/edit/{userId:int}"
@using BlazorApp.Shared.Models
@inject HttpClient Http
@inject NavigationManager NavigationManager
<h1>@Title User</h1>
<hr />
<EditForm Model="@user" OnValidSubmit="SaveUser">
    <DataAnnotationsValidator />
    <div class="mb-3">
        <label for="Name" class="form-label">Name</label>
        <div class="col-md-4">
            <InputText class="form-control" @bind-Value="user.Username" />
        </div>
        <ValidationMessage For="@(() => user.Username)" />
    </div>
    <div class="mb-3">
        <label for="Address" class="form-label">Address</label>
        <div class="col-md-4">
            <InputText class="form-control" @bind-Value="user.Address" />
        </div>
        <ValidationMessage For="@(() => user.Address)" />
    </div>
    <div class="mb-3">
        <label for="Cellnumber" class="form-label">Cell No</label>
        <div class="col-md-4">
            <InputText class="form-control" @bind-Value="user.Cellnumber" />
        </div>
        <ValidationMessage For="@(() => user.Cellnumber)" />
    </div>
    <div class="mb-3">
        <label for="Emailid" class="form-label">E-mail</label>
        <div class="col-md-4">
            <InputText class="form-control" @bind-Value="user.Emailid" />
        </div>
        <ValidationMessage For="@(() => user.Emailid)" />
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Save</button>
        <button class="btn btn-light" @onclick="Cancel">Cancel</button>
    </div>
</EditForm>
@code {
    [Parameter]
    public int userId { get; set; }
    protected string Title = "Add";
    protected User user = new();
    protected override async Task OnParametersSetAsync()
    {
        if (userId != 0)
        {
            Title = "Edit";
            user = await Http.GetFromJsonAsync<User>("api/User/" + userId);
        }
    }
    protected async Task SaveUser()
    {
        if (user.Userid != 0)
        {
            await Http.PutAsJsonAsync("api/User", user);
        }
        else
        {
            await Http.PostAsJsonAsync("api/User", user);
        }
        Cancel();
    }
    public void Cancel()
    {
        NavigationManager.NavigateTo("/fetchuserdetails");
    }
}

Now open the “DeleteUser.razor” page and paste below code to it.

@page "/user/delete/{userId:int}"
@using BlazorApp.Shared.Models
@inject HttpClient Http
@inject NavigationManager NavigationManager
<h2>Delete User</h2>
<br />
<div class="form-group">
    <h4>Do you want to delete this user?</h4>
    <table class="table">
        <tbody>
            <tr>
                <td>Name</td>
                <td>@user.Username</td>
            </tr>
            <tr>
                <td>Address</td>
                <td>@user.Address</td>
            </tr>
            <tr>
                <td>Cell No</td>
                <td>@user.Cellnumber</td>
            </tr>
            <tr>
                <td>E-mail</td>
                <td>@user.Emailid</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="form-group">
    <input type="submit" value="Delete" @onclick="(async () => await RemoveUser(user.Userid))" class="btn btn-danger" />
    <input type="submit" value="Cancel" @onclick="(() => Cancel())" class="btn btn-warning" />
</div>
@code {
    [Parameter]
    public int userId { get; set; }
    User user = new User();
    protected override async Task OnInitializedAsync()
    {
        user = await Http.GetFromJsonAsync<User>("/api/User/" + Convert.ToInt32(userId));
    }
    protected async Task RemoveUser(int userID)
    {
        await Http.DeleteAsync("api/User/" + userID);
        NavigationManager.NavigateTo("/fetchuserdetails");
    }
    void Cancel()
    {
        NavigationManager.NavigateTo("/fetchuserdetails");
    }
}

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.

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorApp</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchuserdetails">
                <span class="oi oi-list-rich" aria-hidden="true"></span> User Details
            </NavLink>
        </div>
    </nav>

</div>
@code {
    private bool collapseNavMenu = true;
    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

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.

Hope this will help the readers. Happy Coding!!!