لود شدن اطلاعات از دیتابیس هنگام اسکرول شدن صفحه در Asp.Net MVC 5

در این پست آموزش نحوه نمایش اطلاعات از دیتابیس به هنگام اسکرول شدن صفحه در Asp.Net MVC 5 را قرار داده ایم.

برای این کار ابتدا یک کنترلر به نام LoadingData ایجاد کنید و کدهای داخل آن را به صورت زیر تغییر دهید.

public class LoadingDataController : Controller
{
    ApplicationDbContext db = new ApplicationDbContext();

    // GET: LoadingData
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetData(int pageIndex, int pageSize)
    {
        db.Configuration.LazyLoadingEnabled = false;

        var skipRecords = pageIndex * pageSize;
        var query = (from p in db.Posts
                     orderby p.PostId descending
                     select p)
                     .Skip(skipRecords)
                     .Take(pageSize);

        return Json(query.ToList(), JsonRequestBehavior.AllowGet);
    }
}

اگر به کدهای بالا نگاه کند یک اکشن متد به نام index داریم که فقط یک view را نمایش می دهد. بس با کلیک راست بر روی نام اکشن متد index یک view برای آن ایجاد کنید.

اکشن متد GetData

کار این اکشن متد ارسال اطلاعات به صورت json می باشد.

اکشن متد GetData دو ورودی از نوع int دریافت می کند .

pageIndex

شمار صفحه را مشخص می کند.

pageSize

تعداد نمایش اطلاعات در هر صفحه را مشخص می کند.

اگر به کوئری مورد نظر نگاه کنید از دو دستور skip و take استفاده شده از skip برای نادیده گرفتن قسمتی از داده استفاده می شود و از take برای نمایش تعداد سطرهای مورد نظر استفاده می شود.

نکته:

زمانی که از دستور skip استفاده می کنید حتما باید از دستور orderby هم استفاده کنید که در اینجا ما داده را به صورت descending مرتب سازی کردیم.

کدهای قسمت view

@{
    ViewBag.Title = "Loading Data";
}


<div id="container">
</div>
<div id="progress" class="text-center" style="display:none">
    <h4>در حال بارگذاری</h4>
    <img src="~/Images/loadingAnimation.gif" class="img-responsive img-thumbnail" />
</div>


@section scripts
{
    <script type="text/javascript" language="javascript">

        var pageSize = 10;
        var pageIndex = -1;
        $(document).ready(function () {
            GetData();

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

        });

        function GetData() {
            pageIndex++;
            $.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('<h1>"' + data[i].PostName + '"</h1>');
                        }
                    }
                },
                beforeSend: function () {
                    $("#progress").show();
                },
                complete: function () {
                    $("#progress").hide();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR + textStatus + errorThrown);
                }
            });
        }
    </script>
}

در کدهای بالا یک دیو با آی دی container قرار دادیم که هنگام نمایش اطلاعات داخل این دیو نمایش دهیم. سپس یک دیو دیگر به آی دی progress قرار دادیم و همچنین یک تصویر داخل آن قرار دادیم که در حالت معمولی این دیو نمایش داده نمی شود و هنگام اسکرول شدن صفحه این دیو نمایش داده می شود.

حال به بررسی کدهای jquery می پردازیم.

ابتدا دو متغیر به نام pageSize و pageIndex تعریف کردیم و مقدار اولیه pageSize را برابر 10 قرار دادیم که یعنی هنگام نمایش اطلاعات هر دفعه 10 رکورد را نمایش دهد.

ابتدا تابع GetData را فراخوانی می کنیم تا اطلاعات 10 سطر اول را نمایش دهیم. سپس زمانی که اسکرول صفحه به سمت پایین کشیده شود دوباره تابع GetData را فرخوانی می کنیم.

تابع GetData

Type : نوع داده ارسالی را مشخص می کند که از نوع get می باشد.

url : آدرس اکشن متد مورد نظر را مشخص می کنیم.

Data : داده با داده های ارسالی به سمت سرور را در این قسمت مشخص می کنیم. ما در این قسمت pageSize و pageIndex را به به اکشن متد GetData ارسال می کنیم.

در صورتی که اطلاعات ارسالی از سمت سرور نال نباشد توسط یک دستور for آن را نمایش می دهیم. ما در این قسمت فقط نام پست را نمایش می دهیم.

در نهایت بعد از خاتمه حلقه for یک واحد به pageIndex اضافه می کنیم تا در دفعه بعد 10 رکورد بعدی را نمایش دهیم.