چه تکنولوژی می‌خواهید یاد بگیرید؟

نظرات و انتقادات خود را با ما در میان بگذارید.

آپدیت روزانه

بیش از 1000 پست آموزشی

نیازهای روز

صفحه بندی در ASP.Net MVC

در این مقاله در خصوص صفحه بندی به صورت Ajax با استفاده از کتابخانه jQuery آشنا خواهید شد. در صورتی که آشنایی ندارید لازم می‌دانم درباره آن کمی توضیح دهم، در نظر بگیرید بانک اطلاعاتی شما دارای هزار رکورد باشد و ما بخواهیم تمام هزار رکورد را بعد از لود اولیه به کاربر نمایش دهیم این کار امکان پذیر نخواهد بود. چاره چیست؟ اولین انتخاب برنامه‌نویسان وب مایکروسافتی برای عدم بروز مشکلات در این خصوص در برنامه، استفاده از گرید ویوو است اما در این مقاله قصد بر این است بعد از اینکه کاربر به انتهای صفحه اسکرول نمود صفحات بعدی را نمایش دهیم بدون اینکه صفحه پست بک شود.

مقدمه:

در این مقاله با نحوه صدا زدن یک متد با استفاده از رخداد اسکرول آشنا خواهید شد. فرض کنید ما میخواهیم یک متد جاوااسکریپت را صدا بزنیم یا اینکه درخواستی به سرور ارسال نمایم در صورتی که کاربر به انتهای صفحه اسکرول نماید.

در مثال زیر یک دیالوگ به کاربر نمایش داده خواهد شد زمانی که اسکرول به انتهای صفحه برسد:

 <script>
    $(window).scroll(function () {
        if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
            alert("پایان صفــــــحه");
        }
    });
</script>

یک مثال واقعی، در صورتی که نخواهیم از Paging استفاده نمایم و لازم باشد بعد از اینکه کاربر به انتهای صفحه اسکرول کرد اطلاعات بیشتری از سرور خوانده شود کد زیر را پیاده سازی خواهیم کرد.

 <script type="text/javascript">
    var sIndex = 11, offSet = 10, isPreviousEventComplete = true, isDataAvailable = true; 
    $(window).scroll(function () {
     if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
      if (isPreviousEventComplete && isDataAvailable) {
        isPreviousEventComplete = false;
        $(".LoaderImage").css("display", "block");
        $.ajax({
          type: "GET",
          url: 'getMorePosts.ashx?startIndex=' + sIndex + '&offset=' + offSet + '',
          success: function (result) {
            $(".divContent").append(result);
            sIndex = sIndex + offSet;
            isPreviousEventComplete = true;
            if (result == '') //When data is not available
                isDataAvailable = false;
            $(".LoaderImage").css("display", "none");
          },
          error: function (error) {
              alert(error);
          }
        });
      }
     }
    });
</script>

...

امید نصری

0 نظر:

تعداد دیدگاه‌های کاربران : 0 دیدگاه
مهمان گرامی! برای ارسال نظر نیاز است وارد سایت شوید.


You must ورود to comment.