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) Razor Pages.
Note: For beginners in ASP.Net Core (.Net Core 8) Razor Pages, please refer my article ASP.Net Core 8 Razor Pages: 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 Razor Pages WebGrid: Delete Row with Confirmation
 
I have already inserted few records in the table.
ASP.Net Core Razor Pages 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) Razor Pages and Entity Framework, please refer my article .Net Core 8: Entity Framework Tutorial in ASP.Net Core Razor Pages. It covers all the information needed for connecting and configuring Entity Framework with ASP.Net Core (.Net Core 8) Razor Pages.
 
using Delete_Confirmation_WebGrid_Core_Razor.Models;
 
namespace Delete_Confirmation_WebGrid_Core_Razor
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
        }
 
        public DbSet<Customer> Customers { get; set; }
    }
}
 
 

Razor PageModel (Code-Behind)

Inside the PageModel, first a private property (Context) of DbContext is created.
Then, the DbContext class is injected into the Constructor (IndexModel) using Dependency Injection method and the injected object is assigned to the private property Context.
Finally, a public property of Generic List collection of Customer class is created.
The PageModel consists of following Handler methods.
 

Handler method for handling GET operation

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

Handler method for Deleting

This Handler method accepts the Customer class object as parameter.

Attribute

ValidateAntiForgeryToken – The ValidateAntiForgeryToken attribute is used to prevent cross-site request forgery attacks.
Inside this Handler 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 Razor Page as JSON object.
public class IndexModel : PageModel
{
    private DBCtx Context { get; }
 
    public IndexModel(DBCtx _context)
    {
        this.Context = _context;
    }
 
    public List<Customer> Customers { get; set; }
 
    public void OnGet()
    {
        List<Customer> customers = this.Context.Customers.ToList();
        this.Customers = customers;
    }
 
    [ValidateAntiForgeryToken]
    public IActionResult OnPostDeleteCustomer(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 new JsonResult(customer);
    }
}
 
 

Razor Page (HTML)

HTML Markup

Inside the Razor Page, the Anti-Forgery Token has been added to Razor Page using the AntiForgeryToken function of the HTML Helper class.

Display

The WebGrid is initialized with the Model i.e. IEnumerable collection of Customer Model class object 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 Using MVC6 Grid in ASP.Net Core Razor Pages.
 

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 Handler method using jQuery AJAX call and URL of the Handler method is specified in this case /Index?handler= DeleteCustomer.
Once the response is received the respective row is removed from the HTML Table row.
@page
@model Delete_Confirmation_WebGrid_Core_Razor.Pages.IndexModel
@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>
    @Html.AntiForgeryToken()
    <div id="WebGrid" style="width:600px;">
        @(Html.Grid(Model.Customers).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: "/Index?handler=DeleteCustomer",
                    data: { CustomerId: customerId },
                    beforeSend:function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    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 Razor Pages WebGrid: Delete Row with Confirmation
 
 

Downloads

Download Code