Viewing/Adding/Editing/Removing Records from MySQL using ASP.NET DataGrid control

Overview
In the previous tutorial (Accessing MySQL Database with ASP.NET), we learned how to obtain, install, configure and run MySQL on Windows. Later we learned how to create new tables and display records using ASP.NET DataGrid control.

In this tutorial we'll learn how to display, insert, edit and delete records from MySQL database using the same ASP.NET DataGrid control on a single ASP.NET page. We'll also learn how to validate user input using ASP.NET Validation controls.

Once you go through this tutorial, you'd have learned enough about ASP.NET DataGrid control that'll make displaying, inserting, editing and deleting records from MySQL, a breeze.

How will the finished ASP.NET page look like?
Before delving into the code, let me first show you how the page will look like when first viewed from the browser and how the add, edit and delete forms will look like.

1. ASP.NET page displaying all records
   
   If you followed the previous tutorial you'll know that 'Names' table in the 'test' database of MySQL, contained 6 rows of first and last names. This is how those names will look like when first viewed from the ASP.NET page:
   
   
   
   Viewing all records in the 'Names' table
   
   
   
2. Adding new record
   
   We can use the form to add new first and last name pair. This is how it looks like when we type in the new name:
   
   
   
   Adding new name
   
   
   And this is how it looks when we click the 'Add' link:
   
   
   
   New name visible in the 'Names' table
   
   
   Our new name is shown at the bottom of 'Names' table.
   
   
3. Editing a record
   
   What if you are jealous to see my name (Faisal Khan) among the top guys and want to change it to your name? Well this is also easy. Just have a look at the following form to see what happens when the 'Edit' link at the side of the name 'Faisal Khan' is clicked:
   
   
   
   Editing the name 'Faisal Khan'
   
   
   We edit the name to 'Your Name':
   
   
   
   Changing to 'Your Name'
   
   
   Clicking the 'Update' link will change 'Faisal Khan' to 'Your Name' as shown below:
   
   
   
   Changing to 'Your Name'
   
   
   
4. Deleting a record
   
   What if you are an honest guy and think that neither 'Faisal Khan' nor 'Your Name' belong in table containing names of top technology entrepreneurs. So this is how it'll look when you click the 'Delete' link at the side of 'Your Name':
   
   
   
   Deleting 'Your Name'
   
   
   'Your Name' has been removed from the 'Names' table.