Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Load More Data (Records) on Button Click in Asp.Net Repeater from Database in C#, VB.NET

May 18, 2015
Introduction

Here I will explain how use
jQuery to load more records or data on button click in asp.net repeater from database using jQuery ajax method in c#, vb.net or jQuery load more data in  asp.net repeater on button click from database without postback in c#, vb.net.

Description:
  
In previous articles I explained Asp.net scrollable repeater with fixed header, jQuery bind data to html table from database using JSON Ajax method, display data in html table from database using asp.net,
change gridview header dynamically in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to load more data on button click in asp.net repeater from database using jQuery ajax method in c#, vb.net.

Before we implement this example first design one table userdetails in your database like as shown below

Column Name
Data Type
Allow Nulls
UserId
Int(IDENTITY=TRUE)
No
UserName
varchar(50)
Yes
Education
varchar(50)
Yes
Location
varchar(250)
Yes
Once we design table in our database enter some dummy data like as shown below


Now open your aspx page and write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Load More Records in Repeater on button click in Asp.net with Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {

$('#btnLoad').click(function () {
var nextval = $('#tbDetails tr').length - 1;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "LoadmoreRecordsinRepeater.aspx/BindDatatable",
data: "{'count':'" + nextval + "'}",
dataType: "json",
success: function (data) {
if (data.d.length > 0) {
for (var i = 0; i < data.d.length; i++) {
$("#tbDetails").append("<tr><td>" + data.d[i].UserId + "</td><td>" + data.d[i].UserName + "</td><td>" + data.d[i].Education + "</td><td>" + data.d[i].Location + "</td></tr>");
}
}
else
alert('No More Records to Load')
},
error: function (result) {
alert("Error");
}
});
})
});
</script>
<style type="text/css">
.hrefclass
{
color:White;
font-weight:bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="rptUserData" runat="server">
<HeaderTemplate>
<table id="tbDetails" style="width:500px; border-collapse: collapse;" border="1" cellpadding="5" cellspacing="0" >
<tr style="background-color: #df5015; height: 30px;" align="left">
<th>UserId</th>
<th>UserName</th>
<th>Education</th>
<th>Location</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr style="height: 25px;">
<td><%#Eval("UserId")%></td>
<td><%#Eval("UserName")%></td>
<td><%#Eval("Education")%></td>
<td><%#Eval("Location")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
<input type="button" id="btnLoad" value="Load More Data" />
</form>
</body>
</html>

Now add following namespaces in code behind

C# Code


using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Collections.Generic;

After completion of adding namespaces you need to write the code like as shown below


protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
rptUserData.DataSource = BindRepeater(0);
rptUserData.DataBind();
}
}
private static DataTable BindRepeater(int count)
{
DataTable dtresult = new DataTable();
using (SqlConnection con = new SqlConnection("Data Source=Suresh;Integrated Security=true;Initial Catalog=MySampleDB"))
{
con.Open();
SqlCommand cmd = new SqlCommand("select  top 2 * from userdetails where UserId NOT IN (select  top ("+count+") UserId from userdetails order by UserId asc) order by UserId asc", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dtresult);
}
return dtresult;
}
[WebMethod]
public static UserDetails[] BindDatatable(int count)
{
List<UserDetails> details = new List<UserDetails>();
DataTable dt = new DataTable();
dt = BindRepeater(count);
foreach (DataRow dtrow in dt.Rows)
{
UserDetails user = new UserDetails();
user.UserId = dtrow["UserId"].ToString();
user.UserName = dtrow["UserName"].ToString();
user.Education = dtrow["Education"].ToString();
user.Location = dtrow["Location"].ToString();
details.Add(user);
}
return details.ToArray();
}
public class UserDetails
{
public string UserId { get; set; }
public string UserName { get; set; }
public string Education { get; set; }
public string Location { get; set; }
}

VB.NET Code


Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Imports System.Collections.Generic

Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
rptUserData.DataSource = BindRepeater(0)
rptUserData.DataBind()
End If
End Sub
Private Shared Function BindRepeater(ByVal count As Integer) As DataTable
Dim dtresult As New DataTable()
Using con As New SqlConnection("Data Source=Suresh;Integrated Security=true;Initial Catalog=MySampleDB")
con.Open()
Dim cmd As New SqlCommand("select  top 2 * from userdetails where UserId NOT IN (select  top (" & count & ") UserId from userdetails order by UserId asc) order by UserId asc", con)
Dim da As New SqlDataAdapter(cmd)
da.Fill(dtresult)
End Using
Return dtresult
End Function
<WebMethod()> _
Public Shared Function BindDatatable(ByVal count As Integer) As UserDetails()
Dim details As New List(Of UserDetails)()
Dim dt As New DataTable()
dt = BindRepeater(count)
For Each dtrow As DataRow In dt.Rows
Dim user As New UserDetails()
user.UserId = dtrow("UserId").ToString()
user.UserName = dtrow("UserName").ToString()
user.Education = dtrow("Education").ToString()
user.Location = dtrow("Location").ToString()
details.Add(user)
Next
Return details.ToArray()
End Function
Public Class UserDetails
Public Property UserId() As String
Get
Return m_UserId
End Get
Set(ByVal value As String)
m_UserId = Value
End Set
End Property
Private m_UserId As String
Public Property UserName() As String
Get
Return m_UserName
End Get
Set(ByVal value As String)
m_UserName = Value
End Set
End Property
Private m_UserName As String
Public Property Education() As String
Get
Return m_Education
End Get
Set(ByVal value As String)
m_Education = Value
End Set
End Property
Private m_Education As String
Public Property Location() As String
Get
Return m_Location
End Get
Set(ByVal value As String)
m_Location = Value
End Set
End Property
Private m_Location As String
End Class
End Class

Demo


Download Sample Code Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

7 comments :

P&P Infotech said...
This comment has been removed by a blog administrator.
Anonymous said...

i need to display this table only for location= chennei , how can i wrote.

Anonymous said...

Hello reply please

Unknown said...
This comment has been removed by the author.
Unknown said...

hello..it says error when i click the loadmore button pls help!!!

Anonymous said...

it work s localhost but not working on server

Anonymous said...

Please can you give this example with images?
It means how to load more images on click ....

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.