In this article I will explain with an example, how to perform CRUD i.e. Create, Read, Update, Delete operation using Dapper library in ASP.Net Core MVC.
Note: For beginners in ASP.Net Core (.Net Core 7), please refer my article ASP.Net Core 7: Hello World Tutorial with Sample Program example.
 
 

Installing Dapper package using Nuget

In order to install Dapper library using Nuget, please refer my article Install Dapper from Nuget in Visual Studio.
 
 

Database

I have made use of the following table Customers with the schema as follows.
Perform CRUD using Dapper in ASP.Net Core
 
I have already inserted few records in the table.
Perform CRUD using Dapper in ASP.Net Core
 
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 CustomerModel
{
    public int CustomerId { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
}
 
 

Namespaces

You will need to import the following namespaces.
using Dapper;
using System.Data.SqlClient;
 
 

Controllers

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, first the connection is read from the ConnectionStrings section of the AppSettings.json file.
Note: For more details on how to read Connection String from AppSettings.json, please refer my article .Net Core 7: Read Connection String from AppSettings.json file.
 
The, all the records from the Customers table are fetched using Query method of Dapper library is returned to the View as a Generic List collection.
 

Action method for Inserting

This Action method accepts the CustomerModel class object as parameter.
Then, using the ExecuteScalar method of Dapper library, the record is inserted into the SQL Server database.
Note: For more details on ExecuteScalar method, please refer my article Understanding Dapper ExecuteScalar in C# and VB.Net.
 
Finally, the CustomerModel class object with generated CustomerId is returned back to the View as JSON object.
Note: The following Action method handles POST call and will return JSON object and hence the return type is set to JsonResult.
 

Action method for Updating

This Action method accepts the CustomerModel class object as parameter.
Then, using the Execute method of Dapper library, the record is updated into the SQL Server database.
Note: For more details on Execute method, please refer my article Understanding Dapper Execute in C# and VB.Net.
 
Finally, the EmptyResult object (NULL) is returned.
 

Action method for Deleting

This Action method accepts the CustomerId value as parameter.
Then, using the Execute method of Dapper library, the record is deleted from the SQL Server database.
Finally, the EmptyResult object (NULL) is returned.
public class HomeController : Controller
{
    public IConfiguration Configuration { get; set; }
 
    public HomeController(IConfiguration _configuration)
    {
        this.Configuration = _configuration;
    }
    public IActionResult Index()
    {
        string sql = "SELECT CustomerId, Name, Country FROM Customers";
        string constr = this.Configuration.GetSection("ConnectionStrings")["MyConn"];
        using (SqlConnection con = new SqlConnection(constr))
        {
            List<CustomerModel> customers = con.Query<CustomerModel>(sql).ToList();
            customers.Insert(0, new CustomerModel());
            return View(customers);
        }
    }
 
    [HttpPost]
    public IActionResult InsertCustomer(CustomerModel customer)
    {
        string sql = "INSERT INTO Customers VALUES(@Name, @Country)";
        sql += "SELECT SCOPE_IDENTITY()";
        string constr = this.Configuration.GetSection("ConnectionStrings")["MyConn"];
        using (SqlConnection con = new SqlConnection(constr))
        {
            customer.CustomerId = Convert.ToInt32(con.ExecuteScalar(sql, customer));
            return Json(customer);
        }
    }
 
    [HttpPost]
    public IActionResult UpdateCustomer(CustomerModel customer)
    {
        string sql = "UPDATE Customers SET Name=@Name, Country=@Country WHERE CustomerId=@CustomerId";
        string constr = this.Configuration.GetSection("ConnectionStrings")["MyConn"];
        using (SqlConnection con = new SqlConnection(constr))
        {
            con.Execute(sql, new { customer.CustomerId, customer.Name, customer.Country });
        }
 
        return new EmptyResult();
    }
 
    [HttpPost]
    public IActionResult DeleteCustomer(int CustomerId)
    {
        string sql = "DELETE FROM Customers WHERE CustomerId=@CustomerId";
        string constr = this.Configuration.GetSection("ConnectionStrings")["MyConn"];
        using (SqlConnection con = new SqlConnection(constr))
        {
            con.Execute(sql, new { CustomerId });
        }
        return new EmptyResult();
    }
}
 
 

View

Inside the View, in the very first line the Generic List collection of CustomerModel class is declared as Model for the View.
The View consists of an HTML Table with HTML TextBoxes and a Button for inserting records into the database.
Inside the View, the following JS script is inherited:
1. jquery.min.js
 

Display

For displaying the records, an HTML Table is used. A FOREACH loop will be executed over the Model which will generate the HTML Table rows with the Customer records.
 

Insert

When the Add button is clicked the name and the country values are fetched from their respective TextBoxes and then passed to the InsertCustomer Action method using jQuery AJAX call.
Once the response is received, a new row is appended to the HTML table using the AppendRow function.
 

Edit

When the Edit Button is clicked, the reference of the HTML Table row is determined and the HTML SPAN elements are made hidden while the TextBoxes are made visible in the Name and Country columns of the HTML Table.
 

Update

When the Update Button is clicked, the reference of the HTML Table row is determined and the updated values are fetched from the respective TextBoxes of Name and Country columns while the CustomerId is determined from the HTML SPAN element of the CustomerId column.
The values of CustomerId, Name and Country are passed to the UpdateCustomer Action method using jQuery AJAX call.
Once the response is received, the HTML SPAN elements are made visible and the TextBoxes are made hidden for the Name and Country columns of the HTML Table row.
 

Cancel

When the Cancel Button is clicked, the reference of the HTML Table row is determined and the HTML SPAN elements are made visible while the TextBoxes are made hidden in the Name and Country columns of the HTML Table row.
 

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 List<CustomerModel>
@using CRUD_Dapper_Core_MVC.Models
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <table id="tblCustomers" cellpadding="0" cellspacing="0">
        <tr>
            <th style="width:100px">Customer Id</th>
            <th style="width:150px">Name</th>
            <th style="width:150px">Country</th>
            <th style="width:150px"></th>
        </tr>
        @foreach (CustomerModel customer in Model)
        {
            <tr>
                <td class="CustomerId">
                    <span>@customer.CustomerId</span>
                </td>
                <td class="Name">
                    <span>@customer.Name</span>
                    <input type="text" value="@customer.Name" style="display:none" />
                </td>
                <td class="Country">
                    <span>@customer.Country</span>
                    <input type="text" value="@customer.Country" style="display:none" />
                </td>
                <td>
                    <a class="Edit" href="javascript:;">Edit</a>
                    <a class="Update" href="javascript:;" style="display:none">Update</a>
                    <a class="Cancel" href="javascript:;" style="display:none">Cancel</a>
                    <a class="Delete" href="javascript:;">Delete</a>
                </td>
            </tr>
        }
    </table>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td style="width: 150px">
                Name<br />
                <input type="text" id="txtName" style="width:140px" />
            </td>
            <td style="width: 150px">
                Country:<br />
                <input type="text" id="txtCountry" style="width:140px" />
            </td>
            <td style="width: 200px">
                <br />
                <input type="button" id="btnAdd" value="Add" />
            </td>
        </tr>
    </table>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //Remove the dummy row if data present.
            if ($("#tblCustomers tr").length > 2) {
                $("#tblCustomers tr:eq(1)").remove();
            } else {
                var row = $("#tblCustomers tr:last-child");
                row.find(".Delete").hide();
                row.find("span").html('&nbsp;');
            }
        });
 
        //Add event handler.
        $("body").on("click", "#btnAdd", function () {
            var name = $("#txtName").val();
            var country = $("#txtCountry").val();
            $.ajax({
                type: "POST",
                url: "/Home/InsertCustomer",
                data: { Name: name, Country: country },
                success: function (r) {
                    var row = $("#tblCustomers tr:last-child");
                    if ($("#tblCustomers tr:last-child span").eq(0).html() != "&nbsp;") {
                        row = row.clone();
                    }
                    AppendRow(row, r.CustomerId, r.Name, r.Country);
                    txtName.val("");
                    txtCountry.val("");
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        });
 
        function AppendRow(row, customerId, name, country) {
            //Bind CustomerId.
            $(".CustomerId", row).find("span").html(customerId);
 
            //Bind Name.
            $(".Name", row).find("span").html(name);
            $(".Name", row).find("input").val(name);
 
            //Bind Country.
            $(".Country", row).find("span").html(country);
            $(".Country", row).find("input").val(country);
 
            row.find(".Delete").show();
            $("#tblCustomers").append(row);
        };
 
        //Edit event handler.
        $("body").on("click", "#tblCustomers .Edit", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find("input").length > 0) {
                    $(this).find("input").show();
                    $(this).find("span").hide();
                }
            });
            row.find(".Update").show();
            row.find(".Cancel").show();
            row.find(".Delete").hide();
            $(this).hide();
        });
 
        //Update event handler.
        $("body").on("click", "#tblCustomers .Update", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find("input").length > 0) {
                    var span = $(this).find("span");
                    var input = $(this).find("input");
                    span.html(input.val());
                    span.show();
                    input.hide();
                }
            });
            row.find(".Edit").show();
            row.find(".Delete").show();
            row.find(".Cancel").hide();
            $(this).hide();
 
            var customer = {};
            customer.CustomerId = row.find(".CustomerId").find("span").html();
            customer.Name = row.find(".Name").find("span").html();
            customer.Country = row.find(".Country").find("span").html();
            $.ajax({
                type: "POST",
                url: "/Home/UpdateCustomer",
                data: customer
            });
        });
 
        //Cancel event handler.
        $("body").on("click", "#tblCustomers .Cancel", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find("input").length > 0) {
                    var span = $(this).find("span");
                    var input = $(this).find("input");
                    input.val(span.html());
                    span.show();
                    input.hide();
                }
            });
            row.find(".Edit").show();
            row.find(".Delete").show();
            row.find(".Update").hide();
            $(this).hide();
        });
 
        //Delete event handler.
        $("body").on("click", "#tblCustomers .Delete", function () {
            if (confirm("Do you want to delete this row?")) {
                var row = $(this).closest("tr");
                $.ajax({
                    type: "POST",
                    url: "/Home/DeleteCustomer",
                    data: { CustomerId: row.find("span").html() },
                    success: function (response) {
                        if ($("#tblCustomers tr").length > 2) {
                            row.remove();
                        } else {
                            row.find(".Delete").hide();
                            row.find("span").html('&nbsp;');
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>
 
 

Screenshot

Perform CRUD using Dapper in ASP.Net Core
 
 

Downloads

Download Code