نحوه ایجاد اسکرول بی نهایت با استفاده از jQuery Ajax و MVC

در این مقاله، نحوه پیاده سازی Infinite scrolling (اسکرول بی نهایت) را می آموزیم. برای ساخت این برنامه ، از jQuery Ajax و ASP.NET MVC استفاده خواهیم کرد. مراحل کار به صورت کامل توضیح داده شده اند.

برنامه های تحت وب مانند Facebook و Twitter از تکنیکی استفاده می کنند که با نام infinite scrollin و یا endless scrolling شناخته می شود. در این تکنیک زمانی که کاربر، صفحه را به سمت پایین اسکرول می کند، (پیمایش می کند) ، داده ها بارگذاری می شوند. پلاگین های زیادی در jquery وجود دارند که فعال سازی این قابلیت را برای شما امکان پذیر می کنند. اگر چه ممکن است شما بخواهید این اسکرول بی نهایت را با کدهای خودتان و بدون استفاده از پلاگین ها پیاده سازی کنید. ما در این مقاله ، نحوه انجام این کار را برای شما شرح خواهیم داد.

منطق پیاده سازی infinite scrolling مشابه صفحه بندی مبتنی بر Ajax است. اگرچه، بر خلاف صفحه بندی، در اینجا ما باید موقعیت scroll را پیدا کرده و در صورت نیاز داده ها را به صورت خودکار، بارگذاری کنیم.

با ساخت یک ASP.NET MVC web application شروع می کنیم. سپس HomeController و Index view را در برنامه ایجاد شده بسازید.

سپس Index view را باز کنید و کدهای زیر را در آن قرار بدهید.

<body>
    <div id="container"></div>
    <div id="progress" style="display:none">
        <h4>Loading...</h4>
    </div>
</body>

بخش اصلی کد، شامل دو عنصر div است که در حقیقت داده ها نیز در همین container div بارگذاری و نمایش داده می شوند.

سپس یک مرجع به کتابخانه ی jQuery ای که به برنامه اضافه می کنید، باید در برنامه و در قسمت <head> گذاشته شود. سپس کدهای زیر را در یک تگ <script> زیر مرجع jquery اضافه نمایید.

<script src="~/Scripts/jquery-1.10.2.js"></script>

<script type="text/javascript">

    var pageSize = 10;
    var pageIndex = 0;

    $(document).ready(function () {
        GetData();

        $(window).scroll(function () {
            if ($(window).scrollTop() == 
               $(document).height() - $(window).height()) {
                GetData();
            }
        });
    });

    function GetData() {
        $.ajax({
            type: 'GET',
            url: '/home/GetData',
            data:{"pageindex":pageIndex,"pagesize":pageSize},
            dataType: 'json',
            success: function (data) {
                if (data != null) {
                    for (var i = 0; i < data.length; i++) {
                        $("#container").append("<h2>" + 
                        data[i].CompanyName + "</h2>");
                    }
                    pageIndex++;
                }
            },
            beforeSend : function () {
                $("#progress").show();
            },
            complete : function () {
                $("#progress").hide();
            },
            error: function () {
                alert("Error while retrieving data!");
            }
        });
    }
</script>

در کد، دو متغیر سراسری تعریف شده است، pageSize و pageIndex. برای نگهداری تعداد رکوردهایی که می خواهیم در یک فراخوانی ajax بارگذاری شوند و در متغیر بعدی، اندیس جاری صفحه ی داده ها نگهداری می شود.

ready() handler ، تابع GetData() را فراخوانی می کند که یک فراخوانی ajax به سرور ارسال می کند و داده های اولیه را برای نمایش ، دریافت می کند.

به تکه کد زیر دقت کنید:

$(window).scroll(function () {
            if ($(window).scrollTop() == 
               $(document).height() - $(window).height()) {
                GetData();
            }
        });

در این تکه کد می توانید جادوی رخ دادن infinite scrolling را ببینید. این کد یک scroll event handler را برای شی window به کار می گیرد . برای این که تصمیم بگیریم آیا کاربر به پایین صفحه رسیده است یا خیر، از scrollTop() و height() استفاده می کنیم. اگر کاربر به انتهای صفحه رسیده باشد، GetData() را فراخوانی می کنیم تا مجموعه ی بعدی داده ها را بازیابی کند.

تابع GetData() از متد jQuery $.ajax() برای فراخوانیGetData() action method در HomeController استفاده می کند . متد سمت سرور GetData() با استفاده از یک درخواست GET پیاده سازی شده است و با pageSize و pageIndex به سمت سرور فرستاده می شود.

اگر درخواست موفقیت آمیز باشد، داده ها در قالب آرایه بازیابی می شوند. در این برنامه، ما از جدول Customers در پایگاه داده ی NorthWind استفاده می کنیم. حلقه For درون داده ها پیمایش می شود مقدار CompanyName را به محتویات <div> با استفاده از متد append() می چسباند.

فراخوانی های beforeSend و complete به سادگی، progress indicator را با استفاده از متدهای show() و hide() پنهان کرده و دوباره به نمایش در می آورند. error callback نیز در صورت بروز خطا، پیغام خطا را به کاربر نشان می دهد.

متد سمت سرور GetData() که در تابع GetData() سمت کاربر استفاده شده است، در درون HomeController قرار می گیرد:

public ActionResult GetData(int pageIndex,int pageSize)
{
    System.Threading.Thread.Sleep(4000);
    NorthwindEntities db = new NorthwindEntities();
    var query = (from c in db.Customers
                    orderby c.CompanyName ascending
                    select c)
                 .Skip(pageIndex * pageSize)
                 .Take(pageSize);
    return Json(query.ToList(), JsonRequestBehavior.AllowGet);
}

GetData() داده ها را از جدول Customers می گیرد. توجه داشته باشید که از Skip() و Take() برای گرفتن داده ها در تعداد مورد نیازمان استفاده می کنیم. رکوردها در قالب JSON به سمت کاربر فرستاده می شوند. این کار با استفاده از Json() method انجام می شود. Sleep() فقط برای تست کردن progress indicator قرار داده شده است. شما می توانید آن ها را از کد پاک کنید.

برنامه ، حالا به صورت کامل ساخته شده است و می توانیم آن را تست کنیم.