ASP.NET GridView control demo (CSASPNETGridView)

Introduction

This CSASPNETGridView project describes how to populate ASP.NET GridView control and how to implement
Insert, Edit, Update,
Delete, Paging and Sorting functions in ASP.NET GridView control. We have received many posts in forums about this popular web control, so this sample provides a complete sample for showing how to implement these basic
functions of this control. The sample demonstrates data source from both database and memory.

Building the Sample

For this sample to work, you must install the SqlServer 2008 R2 Express. This sample contains a SqlServer database file, if you do not install SqlServer, The DataInMemory.aspx page can also works fine. More information about SqlServer 2008 R2 Express and
download links can be found here:

Running the Sample

Please follow these demonstration steps below.

Step 1: Open the CSASPNETGridView.sln. Expand the CSASPNETGridView web application and press Ctrl + F5 to show the DataFromDatabase.aspx.

Step 2: We will see a GirdView control on the page, you can add, edit, delete the columns of the GridView control, the data is come from App_Data/GridView.mdf file, and the GridView's status is stored in ViewState for persisting data across postbacks.

Step 3: The GridView the page size is 15, you need insert 16 Persons in this GridView to see the next page. Please click the title of the GridView to sort the result by PersonID, LastName or FirstName properties.

Step 4: Please press Ctrl+F5 to show DataInMemory.aspx page, the test steps just like DataFromDataBase.aspx.

Step 5: Validation finished.

Using the Code

Code Logical:

Step 1. Create a C# "ASP.NET Empty Web Application" in Visual Studio 2010 or Visual Web Developer 2010. Name it as "CSASPNETGridView ". The project includes two web form pages for demonstrating two ways to bind data source with the GridView,
name them as "DataFromDataBase.aspx", "DataInMemory.aspx".

Step 2. Before we start to write code, we need install SqlServer 2008 R2 Express and create a database file as the data source of GridView control. Add an Asp.net folder "App_Data" and create a Sql Server Database,"GridView.mdf". Add
"Person" table with three fields "PersonID","FirstName","LastName", PersonID is the primary key of the table, and you can insert some default values in Person table.

Step 3. Drag and drop a GridView control, two LinkButton controls, two TextBox controls and a Panel control into DataFromDataBase.aspx page. The GridView is used to display, edit and delete the data of database file, the TextBox and LinkButton are used to
insert new items to the data table. In the first step, check your controls and rename them and set some basic properties of the GridView, such as GridView's templates and events.

The following Html code is showing the GridView's necessary events (onpageindexchanging, onrowcancelingedit,onrowdatabound, etc), GridView's TemplateField and other controls:

Step 4. Copy the Page_Load and BindGridView methods of the sample and paste them to your DataFromDataBase.aspx.cs file, and navigator to the Property panel and switch to Event. Double click on the following event and generate the Event Handlers, after that,
fill the generated methods with the sample code.

Step 5. Double click on the Click event of LinkButton control to generate the event handler and fill the generated methods with the sample, these two button are used to add new items to the database file and cancel the insert operate.

The following code shows how to insert new items to the database file.

Step 6. The DataInMemory.aspx page is pretty much the same with DataFromDataBase.aspx page, this web page get data from memory, instead of database file. So we only need to add a new method "InitializeDataSource" for generating the DataTable variable,
then we need to modify the BindGridView method to bind new the DataTable with GridView.

The following code is use initialize the DataTable and stores it in ViewState.