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.
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
 |
|
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 Email
|
|||
7 comments :
i need to display this table only for location= chennei , how can i wrote.
Hello reply please
hello..it says error when i click the loadmore button pls help!!!
it work s localhost but not working on server
Please can you give this example with images?
It means how to load more images on click ....
Note: Only a member of this blog may post a comment.