Monday, 10 February 2014

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
2. Now Create a table from which you want to fetch data and display in index.html. You can see my table in the image above.

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>

  To read flow see this image


 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..