Load content (image) on page scroll using jQuery Ajax and WebService in ASP.Net

jovceka
 
on Feb 27, 2020 12:06 AM
Sample_112612.zip
1560 Views

hi.

loading image not working properly when using page number and page index.

this loading image not working in google chrome

loading image is blinking / shown repeatedly when scrollbar reaches the bottom of the page and also released from bottom of the page.

how can i solve this??

thanks in advance

    public static DataTable TableData = new DataTable();
    [WebMethod]
    public void GetProductpage(int pageNumber, int pageSize)
    {         
        List<Products> details = new List<Products>();
        string cs = ConfigurationManager.ConnectionStrings["conn"].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
            });
            using (var sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                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["Productid"].ToString());             
                    user.Productname = dtrow["Productname"].ToString();                   
                    arrpicture = (byte[])dtrow["Prodimage"];
                    user.Prodimage = Convert.ToBase64String(arrpicture);
                    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;       
    }

 

<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        var currentPage = 1;
        getproductdata(currentPage);
        $(window).scroll(function () {
            if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * .8) {
                currentPage += 1;
                getproductdata(currentPage);
            }
        });
    });
    function getproductdata(currentPageNumber) {
        $.ajax({
            url: '/WebService.asmx/GetProductpage',
            method: 'post',
            dataType: "json",
            async: false,
            data: { pageNumber: currentPageNumber, pageSize: 9 },
            success: function (data) {
                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>"
                         //   + ' <a  href="' + "//" + emp.ProductLink + '" target="_blank"><img class=pdtimgclnt onclick =Getclick("' + emp.Productid + '") src="images/loader.gif" data-echo="data:image/jpg;base64,' + emp.Prodimage + '" /></a>'
                    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>"
                });
                table.append(rows);
            },
            beforeSend: function () {
                $(".modal").show();
            },
            complete: function () {
                $(".modal").hide();
            },
            error: function (err) {
                alert(err);
            }
        });
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
<div id="tblImages">
<div class="modal" style="display: none">
    <div class="center">
        <img alt="" src="images/loader.gif" />
    </div>
</div>
</div>

 

create procedure [dbo].[sp_products_page]
@PageNumber int,
@PageSize int
as
Begin

    Declare @StartRow int
    Declare @EndRow int

    Set @StartRow = ((@PageNumber - 1) * @PageSize) + 1
    Set @EndRow = @PageNumber * @PageSize;

	 
     SELECT p.*,
             ROW_NUMBER() OVER (order by productid desc) AS ROWNUMBER
			 INTO #Results
     From    Products p status='1'
   
    SELECT *
    FROM   #Results
    WHERE ROWNUMBER BETWEEN @StartRow AND @EndRow
End
Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Mar 04, 2020 03:09 AM

Hi jovceka,

Check this example. Now please take its reference and correct your code.

SQL

ALTER PROCEDURE [dbo].[sp_products_page]
	@PageNumber INT,
	@PageSize INT,
	@PageCount INT OUTPUT
AS
BEGIN 
	DECLARE @StartRow INT
	DECLARE @EndRow INT
 
	SET @StartRow = ((@PageNumber - 1) * @PageSize) + 1
	SET @EndRow = @PageNumber * @PageSize;
      
	SELECT p.*,
			ROW_NUMBER() OVER (ORDER BY Id ASC) AS ROWNUMBER
	INTO #Results
	FROM    tblFiles p 
	WHERE	ContentType='image/jpeg'

	DECLARE @RecordCount INT
	SELECT @RecordCount = COUNT(*) FROM #Results
    
	SET @PageCount = CEILING(CAST(@RecordCount AS DECIMAL(10, 2)) / CAST(@PageSize AS DECIMAL(10, 2)))

	SELECT *
	FROM   #Results
	WHERE ROWNUMBER BETWEEN @StartRow AND @EndRow
END

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 = 1;
        var TotalPage;
        $(window).scroll(function () {
            if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
                if (currentPage < TotalPage) {
                    currentPage += 1;
                    getproductdata(currentPage);
                }
            }
        });
        $(document).ready(function () {
            getproductdata(currentPage);
        });
        function getproductdata(currentPageNumber) {
            $.ajax({
                url: 'WebService.asmx/GetProductpage',
                method: 'post',
                dataType: "json",
                data: { pageNumber: currentPageNumber, 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 () {
                    $(".modal").hide();
                },
                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

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    [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;
    }
}

Screenshot