Hi ghaamae,
I have created a sample which full fill your requirement you need to modify the code according to your need and please go through sample thoroughly as there are workarounds you need to do as per your need.
For this sample I am using Customers and Orders Tables of Microsoft’s Northwind SQL Server database. You can download the Northwind database using the link below.
Download Northwind Database
I have taken reference from below article.
Refer below sample code.
HTML
<div>
<table>
<tr>
<td>
<div id="dvCustomers">
<asp:Repeater ID="rptCustomers" runat="server" OnItemDataBound="OnItemDataBound">
<ItemTemplate>
<table>
<tr>
<td>
<b><u><span class="name">
<%# Eval("ContactName") %></span></u></b>
<asp:HiddenField ID="hfCustomerId" Value='<%# Eval("CustomerID") %>' runat="server" />
</td>
</tr>
<tr>
<td>
<div id="dvOrders">
<asp:Repeater ID="rptOrders" runat="server">
<ItemTemplate>
<table>
<tr>
<td>
<b>OrderID: </b><span class="orderId">
<%# Eval("OrderID")%></span><br />
<b>ShipName: </b><span class="shipName">
<%# Eval("ShipName")%></span><br />
<b>ShipAddress: </b><span class="shipAddress">
<%# Eval("ShipAddress")%></span><br />
<b>ShipCountry: </b><span class="shipCountry">
<%# Eval("ShipCountry")%></span><br />
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</div>
</td>
</tr>
</table>
<br />
</ItemTemplate>
</asp:Repeater>
</div>
</td>
<td valign="bottom">
<img id="loader" alt="" src="loading.gif" style="display: none" />
</td>
</tr>
</table>
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var pageIndex = 1;
var pageCount;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
GetRecords();
}
});
function GetRecords() {
pageIndex++;
if (pageIndex == 2 || pageIndex <= pageCount) {
$("#loader").show();
$.ajax({
type: "POST",
url: "CS.aspx/GetCustomers",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var customers = xml.find("Customers");
customers.each(function () {
var customer = $(this);
var table = $("#dvCustomers table").eq(0).find('td').eq(0).clone(true);
var customerId = customer.find("CustomerID").text();
$(".name", table).html(customer.find("ContactName").text());
NestedData(customerId, table);
$("#dvCustomers").append(table).append("<br />");
});
$("#loader").hide();
}
function NestedData(customerId, table) {
$.ajax({
type: "POST",
url: "CS.aspx/GetOrders",
data: '{customerId: "' + customerId + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (respon) {
var xmlDoc = $.parseXML(respon.d);
var xml = $(xmlDoc);
var orders = xml.find("Orders");
orders.each(function () {
var order = $(this);
var rptOrders = $('#dvOrders table').eq(0).clone(true);
$(".orderId", rptOrders).html(order.find("OrderID").text());
$(".shipName", rptOrders).html(order.find("ShipName").text());
$(".shipAddress", rptOrders).html(order.find("ShipAddress").text());
$(".shipCountry", rptOrders).html(order.find("ShipCountry").text());
$(table).append(rptOrders).append("<br />");
});
},
failure: function (respon) {
alert(respon.d);
},
error: function (respon) {
alert(respon.d);
}
});
}
</script>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
rptCustomers.DataSource = GetCustomersData(1);
rptCustomers.DataBind();
}
}
protected void OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
string customerId = (e.Item.FindControl("hfCustomerId") as HiddenField).Value;
Repeater rptOrders = e.Item.FindControl("rptOrders") as Repeater;
rptOrders.DataSource = GetNestedData(customerId);
rptOrders.DataBind();
}
}
public static DataSet GetCustomersData(int pageIndex)
{
string query = "[GetCustomersPageWise]";
SqlCommand cmd = new SqlCommand(query);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
cmd.Parameters.AddWithValue("@PageSize", 10);
cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
return GetData(cmd);
}
private static DataSet GetData(SqlCommand cmd)
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds, "Customers");
DataTable dt = new DataTable("PageCount");
dt.Columns.Add("PageCount");
dt.Rows.Add();
dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;
ds.Tables.Add(dt);
return ds;
}
}
}
}
[WebMethod]
public static string GetCustomers(int pageIndex)
{
return GetCustomersData(pageIndex).GetXml();
}
public static DataSet GetNestedData(string customerId)
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
SqlCommand cmd = new SqlCommand("SELECT TOP 2 * FROM Orders WHERE CustomerId=@CustomerId");
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Parameters.AddWithValue("@CustomerId", customerId);
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
DataTable dt = new DataTable("Orders");
sda.Fill(dt);
ds.Tables.Add(dt);
return ds;
}
}
}
}
[WebMethod]
public static string GetOrders(string customerId)
{
return GetNestedData(customerId).GetXml();
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
rptCustomers.DataSource = GetCustomersData(1)
rptCustomers.DataBind()
End If
End Sub
Public Shared Function GetCustomersData(ByVal pageIndex As Integer) As DataSet
Dim query As String = "[GetCustomersPageWise]"
Dim cmd As SqlCommand = New SqlCommand(query)
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
cmd.Parameters.AddWithValue("@PageSize", 10)
cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output
Return GetData(cmd)
End Function
Private Shared Function GetData(ByVal cmd As SqlCommand) As DataSet
Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim con As SqlConnection = New SqlConnection(strConnString)
Dim sda As SqlDataAdapter = New SqlDataAdapter
cmd.Connection = con
sda.SelectCommand = cmd
Dim ds As DataSet = New DataSet
sda.Fill(ds, "Customers")
Dim dt As DataTable = New DataTable("PageCount")
dt.Columns.Add("PageCount")
dt.Rows.Add()
dt.Rows(0)(0) = cmd.Parameters("@PageCount").Value
ds.Tables.Add(dt)
Return ds
End Function
<WebMethod()> _
Public Shared Function GetCustomers(ByVal pageIndex As Integer) As String
Return GetCustomersData(pageIndex).GetXml
End Function
Protected Sub OnItemDataBound(sender As Object, e As RepeaterItemEventArgs)
If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
Dim customerId As String = TryCast(e.Item.FindControl("hfCustomerId"), HiddenField).Value
Dim rptOrders As Repeater = TryCast(e.Item.FindControl("rptOrders"), Repeater)
rptOrders.DataSource = GetNestedData(customerId)
rptOrders.DataBind()
End If
End Sub
Public Shared Function GetNestedData(customerId As String) As DataSet
Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(strConnString)
Dim cmd As New SqlCommand("SELECT TOP 2 * FROM Orders WHERE CustomerId=@CustomerId")
Using sda As New SqlDataAdapter()
cmd.Parameters.AddWithValue("@CustomerId", customerId)
cmd.Connection = con
sda.SelectCommand = cmd
Using ds As New DataSet()
Dim dt As New DataTable("Orders")
sda.Fill(dt)
ds.Tables.Add(dt)
Return ds
End Using
End Using
End Using
End Function
<WebMethod()> _
Public Shared Function GetOrders(customerId As String) As String
Return GetNestedData(customerId).GetXml()
End Function
ScreenShot
