<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="testing_datalist2.WebForm1" %>
<!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>
<script src="jquery-1.11.2.js" type="text/javascript"></script>
<style type="text/css">
body, ul, li
{
margin: 0px;
padding: 0px;
}
#header
{
float: left;
width: 100%;
}
#header ul
{
list-style: none;
}
#header ul li
{
float: left;
width: 25%;
text-align: center;
background-color: Black;
color: Green;
}
#header ul li .clbtnmenu
{
display: block;
font-size: 22px;
color: Green;
text-decoration: none;
font-size: 1.3em;
font-weight: 700;
padding: 10px;
}
#header ul li .clbtnmenu:hover
{
background-color: Green;
color: Black;
}
----------------------------------------------------------------------------------------------------------------
.clblpricebrands
{
display: block; background-color: ; color: Green; padding-left: 10px;; font-size: 25px; font-weight: 700;
}
.crblpricebrands
{
background-color: ;color: Green;font-family: Arial; font-size: 20px; margin-left:0px;
}
</style>
<script type="text/javascript">
//global variables
var pageIndex = 1;
var pageCount;
var categoryid = 0;
var brandtext = null;
var pricevalue = 0;
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
GetRecords();
}
});
$('.clbtnmenu').click(function () {
pageIndex = 1;
categoryid = $(this).data('id');
alert('JQuery---CategoryId : ' + categoryid + ' , PageIndex : ' + pageIndex);
});
});
function ResetPageindex() {
pageIndex = 1;
//categoryid = document.getElementsByTagName("a")[0].getAttribute("data-id");
//categoryid = $('.clbtnmenu').data('id');
alert("Javascript---PageIndex : " + pageIndex + ' ,CategoryId : ' + categoryid);
}
function GetRecords() {
pageIndex++;
/*retrieving Text from rblbrands if checked*/
if ($('#<%=rblbrands.ClientID %> input:checked').val() != null) {
var checked_radiobrands = $("[id*=rblbrands] input:checked");
//brandsvalue = checked_radiobrands.val();
brandtext = checked_radiobrands.closest("td").find("label").html();
}
if ($('#<%=rblpricerange.ClientID %> input:checked').val() != null) {
var checked_radioprice = $("[id*=rblpricerange] input:checked");
pricevalue = checked_radioprice.val();
//pricetext = checked_radioprice.closest("td").find("label").html();
}
alert('PageIndex : ' + pageIndex + ' , Page Count : ' + pageCount + ' , CategoryId : ' + categoryid + " , BrandText : " + brandtext + " , PriceValue :" + pricevalue);
if (pageIndex == 2 || pageIndex <= pageCount) {
$("#loader").show();
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetCustomers",
data: JSON.stringify({ 'pageindex': pageIndex, 'categoryid': categoryid, 'brand': brandtext, 'price': pricevalue }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert('Hell 1');
},
error: function (response) {
alert('Hell 2');
}
});
}
}
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");
var repeatColumns = parseInt("<%=dlCustomers.RepeatColumns == 0 ? 1 : dlCustomers.RepeatColumns %>");
var rowCount = Math.ceil(customers.length / repeatColumns);
var i = 0;
while (i < repeatColumns * rowCount) {
var row = $("[id*=dlCustomers] tr").eq(0).clone(true);
for (var j = 0; j < repeatColumns; j++) {
var customer = $(customers[i]);
if (customer.length == 0) {
//alert('Bingo');
$("table:last", row).remove();
} else {
$(".name", row).eq(j).html(customer.find("Name").text());
$(".productId", row).eq(j).html(customer.find("ProductId").text());
$(".description", row).eq(j).html(customer.find("Description").text());
$(".imageUrl", row).eq(j).html(customer.find("ImageUrl").text());
$(".image", row).eq(j).attr("src", 'Images/' + customer.find("ImageUrl").text());
$(".price", row).eq(j).html(customer.find("Price").text());
$(".quantity", row).eq(j).html(customer.find("Quantity").text());
}
i++;
}
$("[id*=dlCustomers]").append(row);
}
//$("[id*=dlCustomers] tr").eq(0).remove();
$("[id*=dlCustomers]").show();
$("#loader").hide();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="main" style="width: 70%; margin: 0 auto; background-color:Aqua">
<div id="header">
<ul>
<li>
<asp:LinkButton CssClass="clbtnmenu" ID="LinkButton1" runat="server" data-id="1"
CommandArgument="1" OnClick="lbtnmenu_click" OnClientClick="ResetPageindex();">Mobile</asp:LinkButton></li>
<li>
<asp:LinkButton CssClass="clbtnmenu" ID="LinkButton2" runat="server" data-id="2"
CommandArgument="2" OnClick="lbtnmenu_click" OnClientClick="ResetPageindex();">Shoes</asp:LinkButton></li>
<li>
<asp:LinkButton CssClass="clbtnmenu" ID="LinkButton3" runat="server" data-id="3"
CommandArgument="3" OnClick="lbtnmenu_click" OnClientClick="ResetPageindex();">Bags</asp:LinkButton></li>
<li>
<asp:LinkButton CssClass="clbtnmenu" ID="LinkButton4" runat="server" data-id="4"
CommandArgument="4" OnClick="lbtnmenu_click" OnClientClick="ResetPageindex();">Clothing</asp:LinkButton></li>
</ul>
</div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<div id="content" style="width: 100%">
<div id="leftcontent" style="width: 15%; float: left;">
<div id="divbrands">
<asp:Label CssClass="clblpricebrands" ID="lblbrands" runat="server" Text="BRANDS"></asp:Label>
<asp:RadioButtonList CssClass="crblpricebrands" ID="rblbrands" runat="server" AutoPostBack="True"
RepeatLayout="Table"
onselectedindexchanged="rblbrands_SelectedIndexChanged">
</asp:RadioButtonList>
</div>
<div id="divpricerange">
<asp:Label CssClass="clblpricebrands" ID="lblpricerange" runat="server" Text="Price Range"></asp:Label>
<asp:RadioButtonList CssClass="crblpricebrands" ID="rblpricerange" runat="server"
AutoPostBack="True" Font-Size="1em" Width="100%"
onselectedindexchanged="rblpricerange_SelectedIndexChanged">
<asp:ListItem Value="1">Rs.2000 and Below</asp:ListItem>
<asp:ListItem Value="2">Rs.2001-Rs.5000</asp:ListItem>
<asp:ListItem Value="3">Rs.5001-Rs.10000</asp:ListItem>
<asp:ListItem Value="4">Rs.10001-Rs.18000</asp:ListItem>
<asp:ListItem Value="5">Rs.18001-Rs.25000</asp:ListItem>
<asp:ListItem Value="6">Rs.25001-Rs.35000</asp:ListItem>
<asp:ListItem Value="7">Rs.35001 and Above</asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
<div id="rightcontent" style="width: 85%; float: left;">
<div id="dvCustomers" style="width: 100%;overflow: auto; background-color: Black;">
<asp:DataList ID="dlCustomers" runat="server" RepeatLayout="Table" RepeatColumns="4"
RepeatDirection="Horizontal" CellPadding="0" CellSpacing="0" BackColor="Aqua"
Width="100%">
<ItemStyle Width="25%" />
<ItemTemplate>
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 300px;
border: 2px solid Blue; background-color: Green; text-align: center">
<tr>
<td>
<b><u><span class="name">
<%# Eval("Name") %></span></u></b>
</td>
</tr>
<tr>
<td>
<b>Productid: </b><span class="productId" style="font-size: 20px; color: Yellow;
font-weight: 500;">
<%# Eval("Productid") %></span><br />
<b>Description </b><span class="description">
<%# Eval("Description") %></span><br />
<b>ImageUrl: </b><span class="imageUrl">
<%# Eval("ImageUrl")%></span><br />
<img class="image" alt='' src="Images/<%# Eval("ImageUrl")%>" width="160px" height="320px" /><br />
<b>Price: </b><span class="price">
<%# Eval("Price")%></span>
<img alt="" src="star-icon.png" />
<b>Quantity: </b><span class="quantity">
<%# Eval("Quantity")%></span><br />
<button onclick="return false;">
Add To Cart</button>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
<img id="loader" alt="" src="loader.gif" style="display: none; height: 50px; margin-left: 45%" />
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>