Hi jovceka,
Check this sample. now take its reference.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.pdtimg
{
width: 100px;
height: 100px;
}
.modal
{
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.center
{
z-index: 1000;
margin: 100px auto;
padding: 10px;
width: 130px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}
.center img
{
height: 128px;
width: 128px;
}
</style>
<script type="text/javascript">
var currentPage = 0;
var TotalPage;
$(window).scroll(function () {
if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * .8) {
getproductdata();
}
});
$(document).ready(function () {
getproductdata(currentPage);
});
function getproductdata() {
currentPage++;
if (currentPage == 1 || currentPage <= TotalPage) {
$.ajax({
url: 'WebService.asmx/GetProductpage',
method: 'post',
dataType: "json",
async: false,
data: { pageNumber: currentPage, pageSize: 3 },
success: function (data) {
if (data.length > 0) {
TotalPage = data[0].PageCount;
var table = $('#tblImages');
var rows = "";
$(data).each(function (index, emp) {
var coupon = emp.coupon;
rows += "<div class=trclass>"
+ "<tr><td class=tdcolumn>"
+ "<div class=tabledivprod>"
rows += '<img class=pdtimg src="data:image/jpg;base64,' + emp.Prodimage + '" />'
+ "<div style=display:none class=couponcode>" + emp.couponcode + "</div>"
rows += "</div>" + "</td></tr>" + "</div><br/>"
});
table.append(rows);
}
},
beforeSend: function () {
$(".modal").show();
},
complete: function () {
setTimeout(function () {
$(".modal").hide();
}, 1000);
},
error: function (err) {
alert(err);
}
});
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="tblImages">
</div>
<div class="modal" style="display: none">
<div class="center">
<img alt="" src="Loader.gif" />
</div>
</div>
</div>
</form>
</body>
</html>
WebService
C#
[WebMethod]
public void GetProductpage(int pageNumber, int pageSize)
{
//System.Threading.Thread.Sleep(1000);
List<Products> details = new List<Products>();
string cs = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("sp_products_page", con);
cmd.CommandType = System.Data.CommandType.StoredProcedure;
cmd.Parameters.Add(new SqlParameter()
{
ParameterName = "@PageNumber",
Value = pageNumber
});
cmd.Parameters.Add(new SqlParameter()
{
ParameterName = "@PageSize",
Value = pageSize
});
cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
using (var sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
DataTable TableData = new DataTable();
TableData.Clear();
sda.Fill(TableData);
foreach (DataRow dtrow in TableData.Rows)
{
Products user = new Products();
byte[] arrpicture = new byte[0];
user.Productid = Convert.ToInt32(dtrow["Id"].ToString());
user.Productname = dtrow["Name"].ToString();
arrpicture = (byte[])dtrow["Data"];
user.Prodimage = Convert.ToBase64String(arrpicture);
user.PageCount = Convert.ToInt32(cmd.Parameters["@PageCount"].Value);
details.Add(user);
}
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(details));
}
public class Products
{
public int Productid;
public string Prodimage;
public string Productname;
public int PageCount;
}
VB.Net
<WebMethod()> _
Public Sub GetProductpage(ByVal pageNumber As Integer, ByVal pageSize As Integer)
Dim details As List(Of Products) = New List(Of Products)()
Dim cs As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(cs)
Dim cmd As SqlCommand = New SqlCommand("sp_products_page", con)
cmd.CommandType = System.Data.CommandType.StoredProcedure
cmd.Parameters.Add(New SqlParameter() With {
.ParameterName = "@PageNumber",
.Value = pageNumber
})
cmd.Parameters.Add(New SqlParameter() With {
.ParameterName = "@PageSize",
.Value = pageSize
})
cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output
Using sda = New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Dim TableData As DataTable = New DataTable()
TableData.Clear()
sda.Fill(TableData)
For Each dtrow As DataRow In TableData.Rows
Dim user As Products = New Products()
Dim arrpicture As Byte() = New Byte(-1) {}
user.Productid = Convert.ToInt32(dtrow("Id").ToString())
user.Productname = dtrow("Name").ToString()
arrpicture = CType(dtrow("Data"), Byte())
user.Prodimage = Convert.ToBase64String(arrpicture)
user.PageCount = Convert.ToInt32(cmd.Parameters("@PageCount").Value)
details.Add(user)
Next
End Using
End Using
Dim js As JavaScriptSerializer = New JavaScriptSerializer()
Context.Response.Write(js.Serialize(details))
End Sub
Public Class Products
Public Productid As Integer
Public Prodimage As String
Public Productname As String
Public PageCount As Integer
End Class
Screenshot
