CRUD Operations Using Blazor, .Net 6.0, Entity Framework Core

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!!!

32 Comments

Join the conversation! Your thoughts help the community grow.

Fritz Lenker2y ago
Great article!! exchanged "DefaultConnection": "Data Source=.\\MSSQL;Initial Catalog=TestingDatabase;User Id=sa;Password=appcloud;" (didn't connect) for my own SQL Server table. At BlazorApp.Server.Services; public List<User> GetUserDetails(); return _dbContext.Users.ToList(); I catch an exception "Invalid object name 'user_details'" for which I cannot overcome. Please help.
Qazi2y ago
When I create a project it creates only a single folder/project. It doesn't have ".Client", ".Server" and ".Shared" folders/projects like shown in step 4. Can you help me with that?
Nedim2y ago
It doesn't say anything about what to put in appsettings.json
- Amit Mohanty2y ago
  Hey Nedim, if you read the article carefully, in the Program.cs file, there's a comment reminding you not to forget adding the ConnectionStrings section with the key 'DefaultConnection' to the appsettings.json file.
Snigdha Rath2y ago
Nice article. Thank you for sharing.
Ardeshir Lak2y ago
Thank you for share this article...
email3y ago
Good working sample - thanks
mahesh vootnuri3y ago
Nice Explanation Amit
Paul Smith3y ago
Excellent, just what I have been looking for. Though would you be able to show how you would use an sql WHERE statement to load the users under certain circumstances?
Kevin Gaskin3y ago
Very shoddy. Doesn't work
Mohammad Naeem4y ago
My application is automatically closing in few minutes
spiro b4y ago
Data is not fetching from the database...
Dhiren Pathak4y ago
Perfect Tutorial Thank you, Please try to include Dropdown List and sent email from module
kumaragurubaran muthukumaraswamy4y ago
Data is not fetching from the database.
kumaragurubaran muthukumaraswamy4y ago
An unhandled error has occurred. Reload
Gustavo Torres4y ago
Can you tell me how to publish this app in iss. I tried to do it but i have and error when the aplication want to fetch the data. i put a user id and password to the db but the error continue. I recib this error: An unhandled error has occurred. Reload
Domagoj Švagelj4y ago
I remember back in 2003-2005 in ASP.NET you could make a complex CRUD app with almost no code writing needed. Everything was generated. This is insane! To do this manually for 50+ database tables!!!
Dhiren Pathak4y ago
Thanks for Nice Tutorials
- Amit Mohanty4y ago
  Thank you..
Kelvin Koyo4y ago
I'm a novice trying to learn new things. Can someone show me how to reference the database at the server/appsettings.json. Thanks
- Kelvin Koyo4y ago
  Thanks. Solved.
Michael Clinton4y ago
I am very new to this, coming from web forms. I found /server/appsettings.json, so that is where I would set the database connection. Very nice article.
- Amit Mohanty4y ago
  Thank you.
Alberto Barella4y ago
But the table name userdetail is not equal when I downlod zip. The table is user_detail.
- Amit Mohanty4y ago
  If table name is different then change it to userdetail from user_detail.
Alberto Barella4y ago
Excellent.
jose lora4y ago
Excellent article
- Amit Mohanty4y ago
  Thank you.
Roberto Mariani4y ago
Excellent thank you
- Amit Mohanty4y ago
  Thank you.
Mahesh Chand4y ago
Nice Amit.
- Amit Mohanty4y ago
  Thank you Mahesh sir.