In this article I will explain with an example, how to perform CRUD i.e. Create, Read, Update and Delete operations with MySQL database using Dapper library in ASP.Net Core (.Net) MVC.
Note: For more details on how to use MySQL database in ASP.Net Core (.Net Core 7), please refer my article ASP.Net Core: Using MySql Database with MySql Connector Tutorial with 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.
ASP.Net Core: CRUD operations with MySql Database using Dapper
 
I have already inserted few records in the table.
ASP.Net Core: CRUD operations with MySql Database using Dapper
 
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 MySql.Data.MySqlClient;
 
 

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.
 
Then, using Query method of Dapper library, records from the Customers Table are fetched and stored as a Generic List collection of CustomerModel class.
Then, new instance of CustomerModel class is added to the list at 0th index which means the new customer will be the first element in the list.
Finally, the Generic List collection of CustomerModel class object is returned to the View.
 

Action method for handling Insert operation

Inside this Action method, the CustomerModel class object is received as parameter.
Then, the SQL query and CustomerModel class object is passed to the Execute method of the Dapper library which then inserts the record in the Customers Table.
Note: For more details on ExecuteScalar method, please refer my article Understanding Dapper ExecuteScalar in MySQL in C# and VB.Net.
 
Finally, the CustomerModel class object with generated CustomerId is returned back to the View (HTML) as JSON object.
 

Action method for handling Update operation

Inside this Action method, the CustomerModel class object is received as parameter.
Then, the SQL query and CustomerModel class object is passed to the Execute method of the Dapper library which then updates the record in the Customers Table.
Note: For more details on Execute method, please refer my article Understanding Dapper Execute in MySQL in C# and VB.Net.
 
Finally, the EmptyResult (NULL) is returned.
 

Action method for handling Delete operation

Inside this Action method, the CustomerId is received as parameter.
Then, the SQL query and CustomerModel class object is passed to the Execute method of the Dapper library which then deletes the record from Customers Table.
Finally, the EmptyResult (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 (MySqlConnection con = new MySqlConnection(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 (Name, Country) VALUES (@Name, @Country);";
        sql += "SELECT LAST_INSERT_ID();";
        string constr = this.Configuration.GetSection("ConnectionStrings")["MyConn"];
        using (MySqlConnection con = new MySqlConnection(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 (MySqlConnection con = new MySqlConnection(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 (MySqlConnection con = new MySqlConnection(constr))
        {
            con.Execute(sql, new { CustomerId });
        }
        return new EmptyResult();
    }
}
 
 

View

HTML Markup

Inside the View, in the very first line the Generic List collection of CustomerModel class is declared as Model for the View.

Display

For displaying the records, an HTML Table is used. A FOR EACH 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 Country values are fetched from their respective TextBoxes and then passed to the InsertCustomer Action method using jQuery AJAX call.
Note: For more details on how to make jQuery AJAX call in ASP.Net Core (.Net Core 7), please refer my article .Net Core 7: Using jQuery AJAX in ASP.Net Core.
 
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 and the CustomerId is determined from the HTML SPAN element of the Customer Id 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 Dapper_CRUD_MySQL_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(".Edit").hide();
                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();
            row.find(".Edit").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(".Edit").hide();
                            row.find("span").html('&nbsp;');
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net Core: CRUD operations with MySql Database using Dapper
 
 

Downloads

Download Code