In this article I will explain with an example, how to perform Delete Row with Confirmation in WebGrid in ASP.Net Core (.Net Core 8) MVC.
Note: For beginners in ASP.Net Core (.Net Core 8) MVC, please refer my article ASP.Net Core 8: Hello World Tutorial with Sample Program example.
 
 

Database

I have made use of the following table Customers with the schema as follow.
ASP.Net Core WebGrid: Delete Row with Confirmation
 
I have already inserted few records in the table.
ASP.Net Core WebGrid: Delete Row with Confirmation
 
Note: You can download the database table SQL by clicking the download link below.
           Download SQL file
 
 

Model

The Model class consists of following properties.
public class Customer
{
    public int CustomerId { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
}
 
 

Database Context

Once the Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
Note: For beginners in ASP.Net Core (.Net Core 8) MVC and Entity Framework, please refer my article ASP.Net Core: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework with ASP.Net Core (.Net Core 8) MVC.
 
using Microsoft.EntityFrameworkCore;
 
namespace Delete_Confirmation_WebGrid_Core
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
        }
 
        public DbSet<Customer> Customers { get; set; }
    }
}
 
 

Controller

Inside the Controller, first a private property (Context) of DbContext is created.
Then, the DbContext class is injected into the Constructor (HomeController) using Dependency Injection method.
Finally, the injected object is assigned to the private property Context.
The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, all the records from the Customers table are fetched using Entity Framework and returned to the View as a Generic List collection.
Before returning to the View, a dummy (empty) record is added to the Generic List collection at first position (Index).
 

Action method for Deleting

Inside this Action method, the CustomerId value is received as parameter. The CustomerId value is used to reference the Customer record in the Customer Entities.
Once the record is referenced, the Customer record is deleted from the Customers table using Entity Framework and the updated Customer object is returned back to the View as JSON object.
public class HomeController : Controller
{
    private DBCtx Context { get; }
 
    public HomeController(DBCtx _context)
    {
        this.Context = _context;
    }
 
    public IActionResult Index()
    {
        List<Customer> customers = this.Context.Customers.ToList();
        return View(customers);
    }
 
    [HttpPost]
    public ActionResult DeleteCustomer(int customerId)
    {
        Customer customer = (from c in this.Context.Customers
                             where c.CustomerId == customerId
                             select c).FirstOrDefault();
        this.Context.Customers.Remove(customer);
        this.Context.SaveChanges();
        return Json(customer);
    }
}
 
 

View

HTML Markup

Inside the View, in the very first line the Customer Entity is declared as IEnumerable which specifies that the Model will be available as a Collection.

Display

The WebGrid is initialized with the Model i.e. IEnumerable collection of Customer Model class object which is passed to the Grid function of the MVC6 Grid HTML Helper class.
Note: For more information on usage of WebGrid in ASP.Net Core, please refer WebGrid Step By Step Tutorial with example in ASP.Net Core MVC.
 

Delete

When the Delete Button is clicked, the reference of the HTML Table row is determined and the value of the CustomerId is fetched and passed to the DeleteCustomer Action method using jQuery AJAX call.
Once the response is received the respective row is removed from the HTML Table row.
@model IEnumerable<Delete_Confirmation_WebGrid_Core.Models.Customer>
@addTagHelper*,Microsoft.AspNetCore.Mvc.TagHelpers
@using NonFactors.Mvc.Grid;
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div id="WebGrid" style="width:600px;">
        @(Html.Grid(Model).Build(columns =>
                {
                    columns.Add().Titled("Customer Id").Css("CustomerId")
                    .RenderedAs(model => Html.Raw($"<span class='label'>" + model.CustomerId + "</span>"));
 
                    columns.Add().Titled("Name").Css("Name")
                    .RenderedAs(model => Html.Raw($"<span><span class='label'>" + model.Name + "</span>" +
                    "<input class='text' type='text' value='" + model.Name + "' style='display:none' /></span>"));
 
                    columns.Add().Titled("Country").Css("Country")
                    .RenderedAs(model => Html.Raw($"<span><span class='label'>" + model.Country + "</span>" +
                    "<input class='text' type='text' value='" + model.Country + "' style='display:none' /></span>"));
 
                    columns.Add()
                    .RenderedAs(model => Html.Raw($"<span class='link'>" +
                    "<a class='Delete' href='javascript:;'>Delete</a>" +
                    "</span>"));
                })
                )
    </div>
    <br />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        //Delete event handler.
        $("body").on("click", "#WebGrid TBODY .Delete", function () {
            if (confirm("Do you want to delete this row?")) {
                var row = $(this).closest("tr");
                var customerId = row.find(".label").html();
                $.ajax({
                    type: "POST",
                    url: "/Home/DeleteCustomer",
                    data: { CustomerId: customerId },
                    success: function (response) {
                        if ($("#WebGrid TBODY tr").length == 1) {
                            row.find(".label").html("");
                            row.find(".text").val("");
                            row.find(".link").hide();
                        } else {
                            row.remove();
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net Core WebGrid: Delete Row with Confirmation
 
 

Downloads

Download Code