Post
Ask Question

Paging in GridView in ASP.Net Using C#

This article shows how to do paging in a GridView in ASP.NET using C#, where we take one GridView and SQL Server. We insert a large amount of data into the table to show how the paging works.

INITIAL CHAMBER

Step 1

Open your Visual Studio 2010 and create an empty website, provide a suitable name such as gridview_paging_demo.

Step 2

In Solution Explorer you get your empty website, then add web forms and a SQL Server database as in the following.

For Web Form

gridview_paging_demo (your empty website). Right-click and select Add New Item -> Web Form. Name it gridview_paging_demo.aspx.

For SQL Server database

gridview_paging_demo (your empty website). Right-click and select Add New Item -> SQL Server database. Add a database inside the App_Data_folder.

DATABASE CHAMBER

Step 3

In Server Explorer, click on your database (Database.mdf), then select Tables -> Add New Table. Form the table like the following:

Table tbl_data (Don't forget to make the ID as IS Identity -- True)


Figure 1: Tbl_Data

DESIGN CHAMBER

Step 4

Open the gridview_paging_demo.aspx file and write some code for the design of the application.

  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>  
  2. <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <headrunatheadrunat="server">  
  6.         <title></title>  
  7.         <styletypestyletype="text/css">  
  8. .style1  
  9. {  
  10. text-decoration: underline;  
  11. text-align: center;  
  12. }  
  13.         </style>  
  14.     </head>  
  15.     <body>  
  16.         <formidformid="form1"runat="server">  
  17.             <div>  
  18.                 <tablestyletablestyle="width:100%;">  
  19.                     <tr>  
  20.                         <td>  
  21.  </td>  
  22.                         <tdclasstdclass="style1">  
  23.                             <strong>GridView Paging Example</strong>  
  24.                         </td>  
  25.                         <td>  
  26.  </td>  
  27.                     </tr>  
  28.                     <tr>  
  29.                         <td>  
  30.  </td>  
  31.                         <td>  
  32.                             <asp:GridViewIDasp:GridViewID="GridView1"runat="server"AllowPaging="True"  
  33. AutoGenerateColumns="False"BackColor="White"BorderColor="#E7E7FF"  
  34. BorderStyle="None"BorderWidth="1px"CellPadding="3"DataKeyNames="id"  
  35. GridLines="Horizontal"onpageindexchanging="GridView1_PageIndexChanging"  
  36. PageSize="4"style="margin-left: 239px">  
  37.                                 <AlternatingRowStyleBackColorAlternatingRowStyleBackColor="#F7F7F7"/>  
  38.                                 <Columns>  
  39.                                     <asp:TemplateFieldHeaderTextasp:TemplateFieldHeaderText="Student ID">  
  40.                                         <EditItemTemplate>  
  41.                                             <asp:TextBoxIDasp:TextBoxID="TextBox1"runat="server"Text='<%# Bind("id") %>'>  
  42.                                             </asp:TextBox>  
  43.                                         </EditItemTemplate>  
  44.                                         <ItemTemplate>  
  45.                                             <asp:LabelIDasp:LabelID="Label1"runat="server"Text='<%# Bind("id") %>'>  
  46.                                             </asp:Label>  
  47.                                         </ItemTemplate>  
  48.                                     </asp:TemplateField>  
  49.                                     <asp:TemplateFieldHeaderTextasp:TemplateFieldHeaderText="Student Name">  
  50.                                         <EditItemTemplate>  
  51.                                             <asp:TextBoxIDasp:TextBoxID="TextBox2"runat="server"Text='<%# Bind("name") %>'>  
  52.                                             </asp:TextBox>  
  53.                                         </EditItemTemplate>  
  54.                                         <ItemTemplate>  
  55.                                             <asp:LabelIDasp:LabelID="Label2"runat="server"Text='<%# Bind("name") %>'>  
  56.                                             </asp:Label>  
  57.                                         </ItemTemplate>  
  58.                                     </asp:TemplateField>  
  59.                                     <asp:TemplateFieldHeaderTextasp:TemplateFieldHeaderText="Address">  
  60.                                         <EditItemTemplate>  
  61.                                             <asp:TextBoxIDasp:TextBoxID="TextBox3"runat="server"Text='<%# Bind("city") %>'>  
  62.                                             </asp:TextBox>  
  63.                                         </EditItemTemplate>  
  64.                                         <ItemTemplate>  
  65.                                             <asp:LabelIDasp:LabelID="Label3"runat="server"Text='<%# Bind("city") %>'>  
  66.                                             </asp:Label>  
  67.                                         </ItemTemplate>  
  68.                                     </asp:TemplateField>  
  69.                                 </Columns>  
  70.                                 <FooterStyleBackColorFooterStyleBackColor="#B5C7DE"ForeColor="#4A3C8C"/>  
  71.                                 <HeaderStyleBackColorHeaderStyleBackColor="#4A3C8C"Font-Bold="True"ForeColor="#F7F7F7"/>  
  72.                                 <PagerStyleBackColorPagerStyleBackColor="#E7E7FF"ForeColor="#4A3C8C"HorizontalAlign="Right"/>  
  73.                                 <RowStyleBackColorRowStyleBackColor="#E7E7FF"ForeColor="#4A3C8C"/>  
  74.                                 <SelectedRowStyleBackColorSelectedRowStyleBackColor="#738A9C"Font-Bold="True"ForeColor="#F7F7F7"/>  
  75.                                 <SortedAscendingCellStyleBackColorSortedAscendingCellStyleBackColor="#F4F4FD"/>  
  76.                                 <SortedAscendingHeaderStyleBackColorSortedAscendingHeaderStyleBackColor="#5A4C9D"/>  
  77.                                 <SortedDescendingCellStyleBackColorSortedDescendingCellStyleBackColor="#D8D8F0"/>  
  78.                                 <SortedDescendingHeaderStyleBackColorSortedDescendingHeaderStyleBackColor="#3E3277"/>  
  79.                             </asp:GridView>  
  80.                         </td>  
  81.                         <td>  
  82.  </td>  
  83.                     </tr>  
  84.                     <tr>  
  85.                         <td>  
  86.  </td>  
  87.                         <td>  
  88.  </td>  
  89.                         <td>  
  90.  </td>  
  91.                     </tr>  
  92.                 </table>  
  93.             </div>  
  94.         </form>  
  95.     </body>  
  96. </html>

This is the GridView design and the properties window where you need to include the even–page changing index and page size = 4.


Figure 2: Properties


Figure 3: GridView Paging

CODE CHAMBER

Step 5

In the code chamber we will write some code so that our application works.

gridview_paging_demo.aspx.cs

  1. using System;  
  2. usingSystem.Collections.Generic;  
  3. usingSystem.Linq;  
  4. usingSystem.Web;  
  5. usingSystem.Web.UI;  
  6. usingSystem.Web.UI.WebControls;  
  7. usingSystem.Data;  
  8. usingSystem.Data.SqlClient;  
  9. publicpartialclass_Default: System.Web.UI.Page   
  10. {  
  11.     protectedvoidPage_Load(object sender, EventArgs e)  
  12.     {  
  13.         if (!Page.IsPostBack)   
  14.         {  
  15.             refreshdata();  
  16.         }  
  17.   
  18.     }  
  19.   
  20.   
  21.     publicvoidrefreshdata()   
  22.     {  
  23.   
  24.         SqlConnection con = newSqlConnection(@  
  25.         "Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  26.         SqlCommandcmd = newSqlCommand("select * from tbl_data", con);  
  27.         SqlDataAdaptersda = newSqlDataAdapter(cmd);  
  28.   
  29.         DataTabledt = newDataTable();  
  30.         sda.Fill(dt);  
  31.   
  32.         GridView1.DataSource = dt;  
  33.         GridView1.DataBind();  
  34.     }  
  35.     protectedvoid GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)   
  36.     {  
  37.         GridView1.PageIndex = e.NewPageIndex;  
  38.         refreshdata();  
  39.     }  
  40. }
OUTPUT CHAMBER


Figure 4: Output 1


Figure 5: Output 2

I hope you liked this. Have a good day. Thank you for reading.


Similar Articles