Load ListView data while scrolling page down with jQuery in ASP.Net

nauna

SOLVED CLOSED ACTIVE ANSWERED
User: nauna
Posted: on Jun 15, 2017 04:38 AM
Forum: Data Controls
Answer: 1
Views: 10210
Sample Code: Download

hi,

i have following control in my page

1. listview

2. datapager with has pagesize 10

3. link button (show more)

4. on click on link button i am adding + 10 in the current data page size to add more records in listview.

it works fine.

what i want is that when user reach the last scrolling point of page Link button (show more) automatically click so user does not need to click it

here is my source code please advice

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
    <ItemTemplate>
        <asp:Label ID="Label6" runat="server" Text='<%# Eval("CountryId") %>' ></asp:Label> 
        <asp:Label ID="Label3" runat="server" Text='<%# Eval("CountryName") %>'></asp:Label> 
        <br> </br>       
    </ItemTemplate>                
</asp:ListView>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Show More</asp:LinkButton>
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="10"></asp:DataPager>

protected void LinkButton1_Click(object sender, EventArgs e)
{
    int currentpage= int.Parse (DataPager1.PageSize.ToString());
    DataPager1.PageSize = currentpage + 10;
}

AnandM

0 1

Reply
User: AnandM
Replied: on Jun 15, 2017 07:07 AM
Report

Hi nauna,

Refer below article

Load on demand data in GridView on scroll using ASP.Net and jQuery AJAX

nauna

0 2

Reply
User: nauna
Replied: on Jun 15, 2017 07:17 AM
Report

hi,

thank you i do not want page load solution on scroll i just want that on scroll the link button automatically clicked please advice

AnandM

0 3

Reply
User: AnandM
Replied: on Jun 15, 2017 07:55 AM
Report

Hi nauna,

You can achieve your requirement with the help of jQuery and you need to replace linkbutton with button because linkbutton renders as Anchor Tag which cant run the server side code with help of jQuery while Button tag renders as Submit so it postback the pages and server side code gets executed.

nauna says:
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">

           <ItemTemplate>

             <asp:Label ID="Label6" runat="server" Text='<%# Eval("CountryId") %>' ></asp:Label>

                        <asp:Label ID="Label3" runat="server" Text='<%# Eval("CountryName") %>'></asp:Label>

               <br> </br>



               </ItemTemplate>



                </asp:ListView>

       <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Show More</asp:LinkButton>

       <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="10"></asp:DataPager>

replace above code with below

<div>
    <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
        <ItemTemplate>
            <asp:Label ID="Label6" runat="server" Text='<%# Eval("CountryId") %>'></asp:Label>
            <asp:Label ID="Label3" runat="server" Text='<%# Eval("CountryName") %>'></asp:Label>
            <br></br>
        </ItemTemplate>
    </asp:ListView>
    <asp:Button ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" Text="Show More">
    </asp:Button>
    <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="10">
    </asp:DataPager>
</div>
<div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                    $('[id*=LinkButton1]').click();
                }
            });
        });
    </script>
</div>

nauna

0 4

Reply
User: nauna
Replied: on Jun 15, 2017 10:34 AM
Report

hi,

this is my revised code but it is not automatically working on scrolling please advice

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testing.aspx.cs" Inherits="testing" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                    $('[id*=LinkButton1]').click();
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DefaultConnection %>" ProviderName="<%$ ConnectionStrings:DefaultConnection.ProviderName %>" SelectCommand="SELECT Countryid, CountryName FROM dbo.Country"></asp:SqlDataSource>
    </div>
        <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">

            <ItemTemplate>
              <asp:Label ID="Label6" runat="server" Text='<%# Eval("CountryId") %>' ></asp:Label> 
                         <asp:Label ID="Label3" runat="server" Text='<%# Eval("CountryName") %>'></asp:Label> 
                <br> </br>
       
                </ItemTemplate>
                
                 </asp:ListView>
      <asp:Button ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" Text="Show More">
    </asp:Button>
        <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="30"></asp:DataPager>

    </form>
</body>
</html>

AnandM

0 6

Reply
User: AnandM
Replied: on Jun 16, 2017 01:56 AM
Modified: on Jun 16, 2017 01:57 AM
Report

nauna says:

this is my revised code but it is not automatically working on scrolling please advice

i m bit confused with your statement now first you said that when you reach at the bottom of the page button should be clicked automatically and records should be displayed but now you are saying something different. what actually you are up to?

Load ListView data while scrolling page down with jQuery in ASP.Net

Company

Explore

Follow us

Contact Us