در این مقاله ما میخواهیم paging را مانند فیس بوک با استفاده از jQuery اموزش دهیم که بعد از بالا و پایین کردن صفحه بارگذاری به صورت اتوماتیک انجام شود.

در این مقاله میخواهیم اموزش بدهیم که چگونه paging بسازیم که بتوانیم به صورت اتوماتیک متن ها را بعد از اscrol کردن، با زدن دکمه load کنیم .

هر زمانی که به پایان صفحه برسیم ، دیتا جدید از database خواهد رسید.

ما یک محتوا static برای عمل binding در gridview استفاده میکنیم.

شما میتوانید این را در اخر مدیریت کنید. فقط کافی است که یک table و stored procedure بسازید که شما را در گرفتن داده های جدید یاری میکند.

توضیحات :

در اغاز یک صفحه ی webForm اختیار میکنیم و یک  GridView  را به ان اضافه میکنیم سپس  GridView  را با محتوای static خود bind میکنیم با استفاده از For Loop.

(ASPX page(Html

<form id="form1" runat="server">  
    <asp:ScriptManager ID="scrtmng" runat="server">  
        <Services>  
            <asp:ServiceReference Path="~/WebService.asmx" /> </Services>  
    </asp:ScriptManager>  
    <div style="margin:auto; width:50%;">  
        <asp:GridView ID="grdlst" runat="server" AutoGenerateColumns="true" Width="100%"></asp:GridView>  
        <div id="loading"> <img id="loading-image" src="loading.gif" alt="Loading..." /> </div>  
    </div>  
</form> 

CSS 

<style>  
    #loading  
    {  
        width: 100%;  
        height: 100%;  
        top: -90px;  
        left: -48px;  
        position: relative;  
        display: block;  
        opacity: 1.00;  
        background-color: #fff;  
        z-index: 99;  
        text-align: center;  
    }  
      
    #loading-image  
    {  
        position: absolute;  
        top: 100px;  
        left: 240px;  
        z-index: 100;  
    }  
</style> 

JavaScript

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>  
<script>  
    $(document).scroll(function()  
    {  
        if ($(window).scrollTop() + $(window).height() == $(document).height())  
        {  
            //if condition is true then you are reached at the bottom of web page  
            $("#loading").show().delay(4000).queue(function()  
            {  
                CallWebMethodForMoreRecords();  
                $(this).dequeue();  
            });  
        }  
    });  
  
    function CallWebMethodForMoreRecords()  
    {  
        WebService.BindGridView(onSuccess);  
    }  
  
    function onSuccess(result)  
    {  
        if (result != "")  
        {  
            $("#grdlst > tbody").append(result);  
            $("#loading").hide();  
        }  
    }  
</script>  

حالا نوبت bind کردن GridView  با data است.

public partial class _Default: System.Web.UI.Page   
{  
    protected void Page_Load(object sender, EventArgs e)  
    {  
        List < EmployeeData > lstEmp = new List < EmployeeData > ();  
        for (Int32 i = 1; i <= 50; i++)  
        {  
            EmployeeData objEmp = new EmployeeData();  
            objEmp.EmployeeId = i;  
            objEmp.EmployeeName = "Employee_" + i;  
            objEmp.Designation = "Dot Net Developer";  
            objEmp.Experience = "3 years";  
            lstEmp.Add(objEmp);  
        }  
        grdlst.DataSource = lstEmp;  
        grdlst.DataBind();  
    }  
}  
public class EmployeeData  
{  
    public Int32 EmployeeId {  
        get;  
        set;  
    }  
    public String EmployeeName {  
        get;  
        set;  
    }  
    public String Designation {  
        get;  
        set;  
    }  
    public String Experience {  
        get;  
        set;  
    }  
} 

در اینجا ما فقط یک کلاس ساده را ساختیم و چهار properties به آن اضافه کردیم و مقداری را با حلقه ی 50 تایی به آن اضافه کردیم. این یک دیتا ststic است و شما میتوانید GridView را با database، به صورت bind انجام دهید.ما مفهوم این paging را بیشتر باز میکنیم.

در اینجا ما از DATABASE برای  fast posting استفاده نکردیم.اگر شما صفحه ی web را اجرا کنید خروجی را خواهید دید.

ما نیاز به دانستن این داریم که میخواهیم در اخر تعداد داده بیشتری load شود. بنابراین ما نیاز به یک نشانه ای برای رسیدن به انتهای صفحه داریم.

ما میتوانیم در اینجا از jQuery استفاده کنیم.شما میتوانید در کد بالا ببینید که برای scroll  کردن ار یک تابع jQuery استفاده کرده ایم.

اما مرحله بعد چیست؟

ما نیاز به load بیشتری داریم هنگامی که scrollد میکنیم. اما ما نمیخواهیم که post back انجام شود.چطور میتوانیم این کار انجام بدیم؟

با استفاده از web service برای binding بیشتر در  GridView.پس ما یک web service را اختیار میکنیم و در web page ،

reference  را به web servic میدهیم. و یک تابع در  web service برای load شدن بیشتر دیتا میسازیم.

Web Service

[WebMethod]  
public string BindGridView()  
{  
    String data = String.Empty;  
    for (Int32 i = 1; i <= 50; i++)   
    {  
        data = data + "<tr>";  
        data = data + "<td>" + i + "</td>";  
        data = data + "<td>Employee_" + i + "</td>";  
        data = data + "<td>Dot Net Developer</td>";  
        data = data + "<td>3 years</td>";  
        data = data + "</tr>";  
    }  
    return data;  
} 

ما load کردیم دیتا در یک string و برگرداندیم آن string را وقتی که متد آن رائ صدا زد.

خب حالا متد صفحه ی اینترنتی ما اماده است.حال فقط نیاز به صدا زدن متد هنگامی که scroll bar به انتهای صفحه میرسد را داریم و همچنین در اخر ما یک gif loading  را قرار داده ایم.

میخواهیم در jQuery کد های زیر را وارد کنیم.

$(document).scroll(function()   
{  
    if ($(window).scrollTop() + $(window).height() == $(document).height())  
    {  
        //if condition is true then you are reached at the bottom of web page  
        $("#loading").show().delay(4000).queue(function()  
        {  
            CallWebMethodForMoreRecords();  
            $(this).dequeue();  
        });  
    }  
});  
  
function CallWebMethodForMoreRecords()  
{  
    WebService.BindGridView(onSuccess);  
}  
  
function onSuccess(result)  
{  
    if (result != "")  
    {  
        $("#grdlst > tbody").append(result);  
        $("#loading").hide();  
    }  
} 

ما یک متد به نام CallWebMethodForMoreRecords ساختیم و web service Webmetho را صدا زدیم

بعد از گرفتن رکورد ها از webmethod آن ها را در GridView بایند (bind) میکنیم که در اخر توسط بروز  به جدول. render  میشوندسپس از GridView id استفاده میکنیم.

در آخر باید فهمید که کجا باید متد را صدا بزنیم. در کد شما میبینید که ما CallWebMethodForMoreRecords را از loading event صدا میزنیم. و برای چند ثانیه تاخیر داریم واین به این دلیل است که سرعت load شدن اطلاعات بالاست و event ما نمیتواند load شدن دیتا را متوجه شود.اما ما میخواهیم که صفحه ی اینترنتی مان خوب به نظر برسد.

این loading را در 4 ثانیه  نشان خواهد داد و سپس Webmethod را صدا میزند.

در خروجی داریم: