Load dynamic data in asp.net after page scrolling using JQuery and AJAX

Sourav.Kayal
Posted by in ASP.NET AJAX category on for Beginner level | Points: 250 | Views : 10666 red flag

How to load dynamic data in page scrolling

Load dynamic data in asp.net after  page scrolling using JQuery and AJAX

In this example we are going to show how to load dynamic data during page scrolling using JQuery AJAX method. To understand this article you need to know basic of JQuery and ajax.

If you are completely new in ajax and JQuery I would suggest you to get fundamental idea of them. 

JQuery :- It’s a javaScript library used to work with HTML element of web application

AJAX:- It’s a technique to exchange data between server and client without reloading whole page or without round trip.

As it is not JQuery or AJAX tutorial I am not going to explore them. Here we will see how to use ajax function of JQuery to do this. In below I am giving content of aspx page

Step 1) Add below code to your aspx page

<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="ScrollTest.aspx.cs" Inherits="ASP.NET.ScrollTest"
%>
 
<!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="http://code.jquery.com/jquery-1.9.1.js"></script>
     <script>
        $(document).ready(function () {
 
            $(window).scroll(function () {
                if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                    sendData();
                }
            });
 
            function sendData() {
            $.ajax(
            {
            type: "POST",
            url: "ScrollTest.aspx/GetData",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: "true",
            cache: "false",
 
            success: function (msg) {
                $("#myDiv").append(msg.d);
            },
 
            Error: function (x, e) {
                alert("Some error");
            }
        });
            }
        });
 
    </script>
 
 
 
</head>
<body>
    <form id="form1" runat="server">
   
    <div id="myDiv">
                <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
        <p>Static data initially rendered.</p>
  
    </div>
 
    </form>
</body>
</html>

 Here, you can see we have JQuery CDN link in HEAD section of aspx page . So, when you will test this code please make sure to have internet connection in the system otherwise you can download same JQuery library to local system.

To detect page scrolling below code snippet will work

            $(window).scroll(function () {

                if ($(window).scrollTop() == $(document).height() - $(window).height()) {

                    sendData();

                }

            });

It’s nothing but JQuery function to detect page scrolling.

Step 2) Add below code in your .cs file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
 
namespace ASP.NET
{
    public partial class ScrollTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        [WebMethod]
        public static string GetData()
        {
            string resp = string.Empty;
            resp += "<p>This content is dynamically appended to the existing content on scrolling.</p>";
            return resp;
        }
     }
 }
 

If you want to create function which will be available from client call, you have to use [WebMethod]

Attribute just above function.

 


Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)