Introduction

In this tutorial, we’ll walk through the essential CRUD (Create, Read, Update, Delete) operations in ASP.NET Core MVC using Entity Framework Core. These basic actions are the foundation of most web applications, allowing you to manage data efficiently. We’ll cover how to set up each operation step by step, making it easy for you to implement CRUD functionality in your own projects. Let’s get started!

1) Download software and SDK

Please refer to this article and download the required software and SDK if you haven't already.

2) Create and setup an ASP.NET Core MVC Web Application project

Open Visual Studio 2022. Click "create a new project." Search for "asp.net core mvc." Select the ASP.NET Core Web App (Model-View-Controller). Click next.

Enter a project name. Click next. Select a .NET framework, in my case, I selected .NET 8.0. Keep authentication type as none. Click create.

3) Install NuGet packages

Right-click the solution. Click "Manage NuGet packages for solution...". Search and install the NuGet packages below.

Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.SqlServer
Microsoft.EntityFrameworkCore.Tools

4) Setup the database connection string.

Make sure you followed this article to install or update your Visual Studio. The "ASP.NET and web development" and "Data storage and processing" workloads are needed for the operations below.

Open appsettings.json.

Add the following code into appsettings.json. Replace "(localdb)\\MSSQLLocalDB" with your SQL server. Replace "CrudBasicDb" with your desired database name.

"ConnectionStrings": {
  "DefaultConnection": "Data Source=(localdb)\\MSSQLLocalDB;Initial Catalog=CrudBasicDb;"
}

To find your SQL server name, you can open SQL Server Object Explorer. As you can see from the image below, my SQL server is "(localdb)\\MSSQLLocalDB".

5) Define the Models.

Right-click on the Models folder. Click Add. Click class. Enter the file name as "ClientViewModel.cs.".

Add the code below into the ClientViewModel.cs file.

public class Client
{
    [Key]
    [MaxLength(128)]
    public string Id { get; set; } = "";
    [MaxLength(256)]
    public string Name { get; set; } = "";
    [MaxLength(256)]
    public string EmailAddress { get; set; } = "";
    [MaxLength(4000)]
    public string? Notes { get; set; }
}

public class ClientViewModel
{
    public string? Id { get; set; }

    [Required]
    public string Name { get; set; } = "";

    [Required]
    [EmailAddress]
    [Display(Name = "Email Address")]
    public string EmailAddress { get; set; } = "";

    //For optional fields, put a question mark to the data type.
    public string? Notes { get; set; }
}

6) Create a DbContext Class

Right click the project file. Click Add. Click new folder. Enter "Data" as the folder name.

Right click Data folder. Click add. Click class. Enter the file name as "DefaultDBContext.cs".

Add the code below into DefaultDBContext.cs.

public class DefaultDBContext : DbContext
{
    public DefaultDBContext(DbContextOptions options) : base(options)
    {
    }

    public DbSet<Client> Clients { get; set; }

}

This class represents a session with your database and provides all the methods you need to query and save data. It inherits from DbContext. Notice the DbSet<Client>? This is how you tell Entity Framework Core what models (tables) to work with in the database.

7) Register DbContext in Program.cs

Open Program.cs. Add the following code after var builder = WebApplication.CreateBuilder(args);

builder.Services.AddDbContext<DefaultDBContext>(options => options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

8) Code First Migrations

Click on the Tools tab on top of visual studio. Click NuGet package manager. Click Package manager console.

Type this command: add-migration InitialCreate

Enter.

Type this command: update-database

Enter.

The database should be automatically created in your database. The client table is also automatically created into the database.

9) Display the data.

Open HomeController.cs. Refer to the code below and edit the index method.

public async Task<IActionResult> Index()
{
    List<ClientViewModel> list = await _db.Clients.Select(c =>
    new ClientViewModel
    {
        Id = c.Id,
        Name = c.Name,
        EmailAddress = c.EmailAddress,
        Notes = c.Notes
    }).ToListAsync();
    return View(list);
}

Open Index.cshtml in the /Views/Home folder. Paste the code below to the Index.cshtml.

@model List<ClientViewModel>
@{
    ViewData["Title"] = "Client";
}
<h3 class="text-capitalize mb-sm-0 fw600">@ViewBag.Title</h3>
<div class="mt-2"><a class="btn btn-primary" asp-action="edit">+ Add New</a></div>
<div class="mt-2">
    <table class="table">
        <thead class="table-light">
            <tr>
                <th>Name</th>
                <th>Email Address</th>
                <th>Notes</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var client in Model)
            {
                <tr>
                    <td>@client.Name</td>
                    <td>@client.EmailAddress</td>
                    <td>@client.Notes</td>
                    <td>
                        <a asp-action="Edit" asp-route-id="@client.Id">Edit</a>&nbsp;
                        <a asp-action="Delete" asp-route-id="@client.Id"
                           onclick="return confirm('Are you sure you want to delete this client?');">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

10) Create and update data.

Open HomeController.cs. Add the following code into the controller.

The first Edit method below retrieves client data based on the provided id. If a valid id is passed, the method will load and display the specific client's details for editing. If the id is null, the method will return an empty model, allowing the user to see a blank form to create a new client.
When the user clicks the submit button, the second Edit method is triggered. It first validates the ClientViewModel to see if the name or email already exists. If the data isn't valid, it reloads the form with the current values. If everything looks good, it tries to save the record. If the save fails, the user gets a "something went wrong" message; if it's successful, they'll see a "saved successfully" notification, and the method redirects the user back to the index page.
The SaveRecord method handles saving the client's data. If the client has an Id, it fetches the existing client from the database. If not, it creates a new client with a generated Id. Then, it updates the client's name, email address, and notes. If the client exists, the method marks it for updating; otherwise, it adds a new client to the database. After saving the changes, it returns true if everything went well. If something goes wrong, it logs the error and returns false.

public IActionResult Edit(string id)
{
    ClientViewModel model = new ClientViewModel();
    if (!string.IsNullOrEmpty(id))
    {
        model = _db.Clients.AsNoTracking().Where(c => c.Id == id)
            .Select(c => new ClientViewModel { Name = c.Name, EmailAddress = c.EmailAddress, Notes = c.Notes })
            .FirstOrDefault() ?? new ClientViewModel();
        model.Id = id;
    }
    return View(model);
}

[HttpPost]
public IActionResult Edit(ClientViewModel model)
{
    try
    {
        ValidateModel(model);

        if (!ModelState.IsValid)
        {
            return View(model);
        }

        bool result = SaveRecord(model);
        if (result == false)
        {
            TempData["NotifyFailed"] = "Sorry, something wrong. Please try again later.";
        }
        else
        {
            ModelState.Clear();
            TempData["NotifySuccess"] = "Saved successfully!";
        }
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, $"{GetType().Name} - {MethodBase.GetCurrentMethod().Name} Method");
    }

    return RedirectToAction("index");
}

public void ValidateModel(ClientViewModel model)
{
    bool nameFound = false;
    nameFound = string.IsNullOrEmpty(model.Id) ? _db.Clients.Any(a => a.Name == model.Name) :
        _db.Clients.Any(a => a.Name == model.Name && a.Id != model.Id);
    bool emailFound = false;
    emailFound = string.IsNullOrEmpty(model.Id) ? _db.Clients.Any(a => a.EmailAddress == model.EmailAddress) :
        _db.Clients.Any(a => a.EmailAddress == model.EmailAddress && a.Id != model.Id);
    if (nameFound)
    {
        ModelState.AddModelError("Name", "Name already existed.");
    }
    if (emailFound)
    {
        ModelState.AddModelError("EmailAddress", "Email Address already existed.");
    }
}

public bool SaveRecord(ClientViewModel model)
{
    try
    {
        Client client = new Client();
        if (!string.IsNullOrEmpty(model.Id))
        {
            client = _db.Clients.Find(model.Id) ?? new Client();
        }
        else
        {
            client.Id = Guid.NewGuid().ToString();
        }
        client.Name = model.Name;
        client.EmailAddress = model.EmailAddress;
        client.Notes = model.Notes;
        if (!string.IsNullOrEmpty(model.Id))
        {
            _db.Entry(client).State = EntityState.Modified;
        }
        else
        {
            _db.Clients.Add(client);
        }
        _db.SaveChanges();
        return true;
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, $"{GetType().Name} - {MethodBase.GetCurrentMethod()?.Name} Method");
        return false;
    }
}

In "/Views/Home" folder. Add "Edit.cshtml" view page. Add the following code. It is the form whereby the user can create or edit client data.

@model ClientViewModel
@{
    ViewData["Title"] = string.IsNullOrEmpty(Model.Id) ? "Add New Client" : "Edit Client";
}
<h3 class="text-capitalize mb-sm-0 fw600">@ViewBag.Title</h3>
<form class="mt-3" asp-controller="Home" asp-action="Edit" method="post">
    <div class="row mb-2">
        <div class="col-lg-2">
            <label asp-for="Name" class="form-label fw-bold required"></label>
        </div>
        <div class="col-lg-10">
            <input asp-for="Name" class="form-control" />
            <div class="text-danger"><span asp-validation-for="Name"></span></div>
        </div>
    </div>

    <div class="row mb-2">
        <div class="col-lg-2">
            <label asp-for="EmailAddress" class="form-label fw-bold required"></label>
        </div>
        <div class="col-lg-10">
            <input asp-for="EmailAddress" class="form-control" />
            <div class="text-danger"><span asp-validation-for="EmailAddress"></span></div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-2">
            <label asp-for="Notes" class="form-label fw-bold"></label>
        </div>
        <div class="col-lg-10">
            <textarea asp-for="Notes" class="form-control" rows="5"></textarea>
            <div class="text-danger"><span asp-validation-for="Notes"></span></div>
        </div>
    </div>

    <div class="mt-3">
        <button type="submit" class="btn btn-primary">Submit</button>
        <a class="btn btn-secondary" asp-action="Index">Back</a>
    </div>
</form>

In "/Views/Shared" folder. Add "_Notification.cshtml" partial view. Add the following code. It will display a success or failed notification based on the TempData["NotifySuccess"] and TempData["NotifyFailed"].

@if (TempData["NotifySuccess"] != null)
{
    <div id="successtoast-container" class="position-fixed top-0 end-0 mx-auto p-4 toast-container">
        <div id="successtoast" class="toast show mx-auto bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header justify-content-between bg-success border-bottom-0">
                <div class="text-white">
                    <strong class="me-auto">Success</strong>
                </div>
                <button type="button" class="text-end border-0 bg-transparent text-white p-0" data-bs-dismiss="toast" aria-label="Close">X</button>
            </div>
            <div class="toast-body bg-success text-white border-0">
                @TempData["NotifySuccess"]
            </div>
        </div>
    </div>
}

@if (TempData["NotifyFailed"] != null)
{
    <div id="failedtoast-container" class="position-fixed top-0 end-0 mx-auto p-4 toast-container">
        <div id="failedtoast" class="toast show mx-auto bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header justify-content-between bg-danger border-bottom-0">
                <div class="text-white">
                    <strong class="me-auto">Oops! Something went wrong.</strong>
                </div>
                <button type="button" class="text-end border-0 bg-transparent text-white p-0" data-bs-dismiss="toast" aria-label="Close">X</button>
            </div>
            <div class="toast-body bg-danger text-white border-0">
                @Html.Raw(TempData["NotifyFailed"])
            </div>
        </div>
    </div>
}

Open _Layout.cshtml in /Views/Shared folder. Before @RenderBody(), add the code below to include the notification partial view.

@await Html.PartialAsync("~/Views/Shared/_Notification.cshtml")
@RenderBody()

Then, scroll to the bottom of the file. Add jquery validation library after "jquery.min.js".

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!--Form validation-->
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

11) Delete data.

Open HomeController.cs. Add the delete method. In /Views/Home/Index.cshtml, we've added the delete link into the table row. When the user clicks on the delete link, it will trigger the delete method below, referring to asp-action="Delete.".

public IActionResult Delete(string id)
{
    try
    {
        if (id != null)
        {
            Client client = _db.Clients.Find(id);
            if (client != null)
            {
                _db.Clients.Remove(client);
                _db.SaveChanges();
            }
        }
        TempData["NotifySuccess"] = "Deleted successfully!";
    }
    catch (DbUpdateConcurrencyException ex)
    {
        // Handle concurrency conflict
        var entry = ex.Entries.Single();
        var databaseValues = (Client)entry.GetDatabaseValues().ToObject();
        var clientValues = (Client)entry.Entity;

        if (databaseValues != null)
        {
            // Assuming you want to reload the entity with current database values
            _db.Entry(clientValues).CurrentValues.SetValues(databaseValues);
            _db.SaveChanges();
            TempData["NotifyFailed"] = "Sorry, something wrong. Please try again later.";
        }
        _logger.LogError(ex, $"{GetType().Name} - {MethodBase.GetCurrentMethod().Name} Method");
    }
    catch (Exception ex)
    {
        TempData["NotifyFailed"] = "Sorry, something wrong. Please try again later.";
        _logger.LogError(ex, $"{GetType().Name} - {MethodBase.GetCurrentMethod().Name} Method");
    }
    return RedirectToAction("index");
}

Congratulations, it's completed! You can press CTRL + F5 to run the project! For advanced features like pagination, search, sort, and export to pdf/excel/cxv/doxc/txt, you can refer to my CrudElite project. I hope it helps! Thank you so much for your support!

0 comments

Filters in Asp.Net Core MVC

Mastering Data Validations in ASP.NET Core MVC

Asp.Net Core Mvc: How to Attach File to the Email?

How to insert demo data for the CRUD project?

How to use CRUD Elite? The FAQ about CRUD Elite

See all posts from Aura Theme