Infinite Scroll in Asp.Net C# using Javascript without Third party Plugin
Infinite
Scroll is very common today in website as we all see in facebook, google+ ,
LinkedIn and many other sites, as we scroll down data from server automatically
appears in our browser without clicking any button.
How We will do it?
We
first create a database and then after that we will apply a jquery
that will execute when our scroll bar reaches bottom of the page.
For demo I will fetch YouTube video link from local server and bind that in iframe when scrolled down..
Here I will define a variable or you can say in other word a counter that will increase according to our requirement when scroll down. and that value will pass to the server so that server can send data when scrolled down.
Here in my example I am increasing counter by one and initial value is 14 since my table ID started from 14 (you know when you delete some data this happen when it is PK)
How to pass data from a page to server using jquery?
Follow these Steps:
1. Create a new project and include two page 1. index.html and 2. Default.aspx
3. Now open index.html and write the following code.
<head>
<title>Auto
Scroll</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
var j =
15;// variable j is assigened initial value
(according to my requirment you can set any value)
function
ram() {// this function increases the value of
variable j after calling function abc() that passes
abc(j); // data from
client to server and get data returned here i am passing value of J to server.
j++;
}
j = j;
function abc(k) {//
this function uses ajax to communicate with server
$.ajax({
type: 'post',
contentType: "application/json; charset=utf-8",
url: 'Default.aspx/increasediv',
//
Here InsertMethod is a function on page name datainsertusingjquery.aspx
data: "{'id':'"
+ k + "'}",//
passing value of j in k and this k to function increasediv in code behind of
Defalut.aspx
async: false,
success: function (response) {
document.getElementById('para').innerHTML = response.d;// this bind data in div which id is 'para'
},
error: function
(response) {
}
});
}
$(window).scroll(function () {// this
function check whether scroll reached at the bottom of browser
if
($(window).scrollTop() == $(document).height() - $(window).height()) {
ram();//
if it reached at botton call the function ram()
}
});
</script>
</head>
<body>
<div style="height:1000px; width:100%">
<!--<input
type="button" id="shashi" value="submit"
onclick="ram()" />-->
<div id="para"></div>
</div>
</body>
4. Now, Default.aspx.cs file should contains the increasediv function so that it is called when ajax function if fired by client. see this code.
[WebMethod]
public static string
increasediv(string id)
{
string
shashi;
StringBuilder
sb = new StringBuilder();// string builder object
SqlConnection
con = new SqlConnection("Data Source=analog-PC;Initial
Catalog=experiment;Integrated Security=True");
con.Open();//
sql connection
SqlCommand
cmd = new SqlCommand("select Youtube from Mov where ID<"+id,con);// sql query as we receive id from ajax on client side page
SqlDataReader
dr = cmd.ExecuteReader();// reader object
while
(dr.Read())
{
sb.Append("<iframe
src='"+dr[0].ToString()+"' alt=''
height='300px' width='400px'></iframe><br/>");// appending this in object in iframe
}
shashi = sb.ToString();
return
shashi;// returining this string to client page to
bind in html page....
}
You can see this video also to get helped more..
Comments
Post a Comment