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. }
  18. }
  21. publicvoidrefreshdata()
  22. {
  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);
  29. DataTabledt = newDataTable();
  30. sda.Fill(dt);
  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.