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.
