Click here to Skip to main content
15,867,141 members
Articles / Web Development / ASP.NET

Load More Records in ASP.NET Gridview on Button Click from SQL Server Table

Rate me:
Please Sign up or sign in to vote.
4.62/5 (16 votes)
1 Jun 2014CPOL2 min read 33.7K   24   7
In this article, I am going to demonstrate how to get more data on demand i.e. On every click of button fetch more records from SQL Server database table and load in GridView with wait/progress/loading image as shown in image in ASP.NET using both C# and VB languages.

Introduction

Basically you will learn the following through this article:

  • How to initially bind specified number of records from SQL Server database table to Gridview.
  • How to bind some data in Gridview and on every click of "Load More Databutton" fetch more data and load in Gridview.
  • How to show wait/progress loading image using Ajax "UpdateProgress" and "ProgressTemplate" while fetching more data from SQL Server table and binding to gridview.

Image 1

Using the Code

Implementation: Let's create a demo website to demonstrate the concept.

First of all, create a database in SQL Server and name it, e.g. "DB_Student" and in this database, create a table with the following Columns and Data type as shown below and name this table "Tbl_Student".

Column Name Data Type
StudentId Int(Primary Key. So set is identity=true)
StudentName varchar(100)
Class varchar(50)
Age Int
Gender varchar(50)
Address varchar(500)

Create a stored procedure to get student details to be filled in GridView Data Control.

SQL
CREATE  PROCEDURE [dbo].[GetStudentDetails_SP]
                @topVal INT
AS
BEGIN
--if @topVal=2 then the below query will become SELECT top (2) * FROM dbo.Tbl_Student and get 2 records
                SELECT top (@topVal) * FROM dbo.Tbl_Student
END

Create another stored procedure to count the number of rows present in table:

SQL
CREATE PROCEDURE [dbo].[GetStudentDetailsCount_SP]             
AS
BEGIN
                SELECT COUNT(*) FROM dbo.Tbl_Student
END 

Now let's connect our ASP.NET application with SQL Server database.

So in the <configuration> tag of web.config file, create the connection string as:

SQL
<connectionStrings>
    <add name="conStr" connectionString="Data Source=LALIT;_
    Initial Catalog=DB_Student;Integrated Security=True"/>
  </connectionStrings>

Note: Replace the Data Source and Initial Catalog as per your database settings.

ASP.NET C# Section

Below is the HTML source of the Default.aspx page.

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="Default.aspx.cs"Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>       
<fieldset style="width:370px;">
    <legend>Load more data on demand in GridView</legend>
    <table>
    <tr>
    <td>
     <asp:GridView ID="grdStudentDetails" runat="server" AutoGenerateColumns="False"
            CellPadding="4" ForeColor="#333333" GridLines="None">
         <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <Columns>
        <asp:BoundField HeaderText="Student Name"  DataField="StudentName" />
        <asp:BoundField HeaderText="Class"  DataField="Class" />
        <asp:BoundField HeaderText="Age"  DataField="Age" />
        <asp:BoundField HeaderText="Gender"  DataField="Gender" />
        <asp:BoundField HeaderText="Address"  DataField="Address" />    
        </Columns>
         <EditRowStyle BackColor="#999999" />
         <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
         <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
         <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
         <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
         <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
         <SortedAscendingCellStyle BackColor="#E9E7E2" />
         <SortedAscendingHeaderStyle BackColor="#506C8C" />
         <SortedDescendingCellStyle BackColor="#FFFDF8" />
         <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
        </asp:GridView>        
    </td>
    </tr>
    <tr>
    <td align="center">
        <asp:Button ID="btnLoadMore" runat="server" Text="Load More Data"
            onclick="btnLoadMore_Click" />
            </td>
            </tr>
            <tr>
            <td align="center">
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" 
            ClientIDMode="Static"DisplayAfter="10">
    <ProgressTemplate>
        <img src="ajax-loader.gif" alt="wait image" />   
    </ProgressTemplate>
    </asp:UpdateProgress>
            </td></tr>
    </table>
    </fieldset>
    </ContentTemplate>   
        </asp:UpdatePanel>   
    </div>
    </form>
</body>
</html>

Note: You need to search on the internet and download any wait/progress GIF image of your choice and name it "ajax-loader.gif" and paste in root folder of your project.

ASP.NET C# Code Section

In code behind file (default.aspx.cs), write the code as:

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public partial class _Default: System.Web.UI.Page
{ 
    SqlConnection con = newSqlConnection(ConfigurationManager.ConnectionStrings["conStr"].ConnectionString);

   int num = 0;

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
          //Set the num variable equal to the value that you want to load data in GridView.
          //e.g if initially you want to load 2 rows in Gridview then set num=2.
            num = 2;
          //Store this num variable value in ViewState so that we can get this value on Load more button click
            ViewState["num"]=num;
            BindGridView(num);
        }
    }

    private void BindGridView(int numOfRows)
    {
        DataTable dt = new DataTable();
        SqlCommand cmd = null;
        SqlDataAdapter adp = null;
        try
        {
            //get number rows in table by calling the rowCount function i created.
            int rCount = rowCount();

            // hide the "Load More Data button" if the number of requested rows becomes greater than the rows in table
            if (numOfRows > rCount)
            {
                btnLoadMore.Visible = false;
            }
            cmd = new SqlCommand("GetStudentDetails_SP", con);

            //Passs numOfRows variable value to stored procedure to get desired number of rows

            cmd.Parameters.AddWithValue("@topVal", numOfRows);
            cmd.CommandType = CommandType.StoredProcedure;
            adp = new SqlDataAdapter(cmd);
            adp.Fill(dt);

            if (dt.Rows.Count > 0)
            {
                grdStudentDetails.DataSource = dt;
                grdStudentDetails.DataBind();
            }
            else
            {
                grdStudentDetails.DataSource = null;
                grdStudentDetails.DataBind();
            }
        }
        catch (Exception ex)
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "Message", 
            "alert('Oops!! Error occured: " + ex.Message.ToString() + "');", true);
        }
        finally
        {
            con.Close();
            cmd.Dispose();
            adp = null;
            dt.Clear();
            dt.Dispose();
        }
    }

    protected int rowCount()
    {
        int NoOfRows = 0;
        SqlCommand cmd = new SqlCommand("GetStudentDetailsCount_SP", con);
        cmd.CommandType = CommandType.StoredProcedure;

        try
        {
            con.Open();
            NoOfRows = Convert.ToInt32(cmd.ExecuteScalar());
        }
        catch (Exception ex)
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "Message", 
            "alert('Oops!! Error occured: " + ex.Message.ToString() + "');", true);
        }
        finally
        {
            con.Close();
            cmd.Dispose();
        }
        return NoOfRows;
    }

    protected void btnLoadMore_Click(object sender, EventArgs e)
    {
        //On every click of this button it will add 2 to the ViewState["num"]
        //whose value was set to 2 initially on page load. So numval is 4 now.

        int numVal = Convert.ToInt32(ViewState["num"])+ 2;

        //Now pass numVal whose value is 4 to the BindGridView function to get 4 rows.

        BindGridView(numVal);

        //Set ViewState["num"] equal to the numVal i.e. 4 so that 
        //when we again click this button it will be 4 + 2= 6 and so on.

        ViewState["num"]= numVal;
    }
}

ASP.NET VB Section

Design the page (default.aspx) as in above ASP.NET C# section, but replace the lines:

ASP.NET
<asp:Button ID="btnLoadMore" runat="server" Text="Load More Data"
onclick="btnLoadMore_Click" />

with the following line:

ASP.NET
<asp:Button ID="btnLoadMore" 
runat="server" Text="Load More Data" />

In the code behind file (e.g. default.aspx.vb), write the code as:

SQL
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Partial Class _Default
    Inherits System.Web.UI.Page

    Dim con As NewSqlConnection(ConfigurationManager.ConnectionStrings("conStr").ConnectionString)

    Dim num As Integer = 0


Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load

        If Not Page.IsPostBack Then
            'Set the num variable equal to the value that you want to load data in gridView
            'e.g if initially you want to load 2 rows in GridView then set num=2.

            num = 2

            'Store this num variable value in ViewState so that we can get this value on Load More Data button click

            ViewState("num")=2
            BindGridView(num)
        End If
    End Sub


    Private Sub BindGridView(numOfRows As Integer)
        Dim dt As New DataTable()
        Dim cmd As SqlCommand = Nothing
        Dim adp As SqlDataAdapter = Nothing

        Try
            'get number rows in table by calling the rowCount function i created.
            Dim rCount As Integer = rowCount()

            'hide the "Load More Data button" 
            'if the number of requested rows becomes greater than the rows in table

            If numOfRows > rCount Then
                btnLoadMore.Visible = False
            End If

            cmd = New SqlCommand("GetStudentDetails_SP", con)

            'Passs numOfRows variable value to stored procedure to get desired number of rows

            cmd.Parameters.AddWithValue("@topVal", numOfRows)
            cmd.CommandType = CommandType.StoredProcedure
            adp = New SqlDataAdapter(cmd)
            adp.Fill(dt)

            If dt.Rows.Count > 0 Then
                grdStudentDetails.DataSource = dt
                grdStudentDetails.DataBind()
            Else
                grdStudentDetails.DataSource = Nothing
                grdStudentDetails.DataBind()
            End If
        Catch ex As Exception
            ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "Message", _
            "alert('Oops!! Error occured: " + ex.Message.ToString() + "');", True)

        Finally
            con.Close()
            cmd.Dispose()
            adp = Nothing
            dt.Clear()
            dt.Dispose()
        End Try
    End Sub

    Protected Function rowCount() As Integer
        Dim NoOfRows As Integer = 0
        Dim cmd As New SqlCommand("GetStudentDetailsCount_SP", con)
        cmd.CommandType = CommandType.StoredProcedure

        Try
            con.Open()
            NoOfRows = Convert.ToInt32(cmd.ExecuteScalar())
        Catch ex As Exception
            ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "Message", _
            "alert('Oops!! Error occured: " + ex.Message.ToString() + "');", True)

        Finally
            con.Close()
            cmd.Dispose()
        End Try
        Return NoOfRows
    End Function

    Protected Sub btnLoadMore_Click(sender As Object, e As System.EventArgs) HandlesbtnLoadMore.Click

        'On every click of this button it will add 2 to the ViewState("num") 
        'whose value was set to 2 initially on page load. So numval is 4 now.

        Dim numVal As Integer = Convert.ToInt32(ViewState("num")) + 2

        'Now pass numVal whose value is 4 to the BindGridView function to get 4 rows.

        BindGridView(numVal)

        'Set ViewState("num") equal to the numVal i.e. 4 so that 
        'when we again click this button it will be 4 + 2= 6 and so on.

        ViewState("num") = numVal
    End Sub
End Class

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) www.webcodeexpert.com
India India
I am a passionate programmer and a Software Engineer love blogging and developing applications in Microsoft Technologies.
I have a blog https://www.webcodeexpert.com/
It is a collection of code snippets for web programmers, including code for Asp.Net, Sql Server, C#.Net, VB.Net, Ajax,LINQ, Jquery, JavaScript, XML, WCF Services, C, C++, Interview Questions and answers and more!

Comments and Discussions

 
QuestionHi Pin
patelmaulesh24-Oct-18 3:29
patelmaulesh24-Oct-18 3:29 
GeneralMy vote of 5 Pin
Heriberto Lugo13-Jul-14 6:27
Heriberto Lugo13-Jul-14 6:27 
GeneralRe: My vote of 5 Pin
Webcodeexpert.com14-Jul-14 7:35
professionalWebcodeexpert.com14-Jul-14 7:35 
Thanks for your positive feedback..
GeneralMy vote of 3 Pin
ThanhTrungDo4-Jun-14 19:12
professionalThanhTrungDo4-Jun-14 19:12 
GeneralRe: My vote of 3 Pin
Webcodeexpert.com5-Jun-14 5:01
professionalWebcodeexpert.com5-Jun-14 5:01 
GeneralRe: My vote of 3 Pin
Heriberto Lugo13-Jul-14 6:26
Heriberto Lugo13-Jul-14 6:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.