میرممد

آموزش برنامه نویسی همراه با تکه کد های کاربردی از زبان های مختلف برنامه نویسی
سید محمد میرعالی

سید محمد میرعالی

امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.

دسته بندی مطالب آمار سایت
  • کل مطالب : 24
  • کل نظرات : 3
  • افراد آنلاین : 4
  • تعداد اعضا : 0
  • آی پی امروز : 16
  • آی پی دیروز : 49
  • بازدید امروز : 19
  • باردید دیروز : 67
  • گوگل امروز : 1
  • گوگل دیروز : 6
  • بازدید هفته : 86
  • بازدید ماه : 1,845
  • بازدید سال : 23,657
  • بازدید کلی : 46,950
  • آموزش لود اطلاعات با اسکرول کردن در ASP.net MVC


    در این مطلب از سايت ميرممد برای شما عزیزان لود شدن اطلاعات با اسکرول کردن توسط AJAX در ASP.net MVC همراه با نمونه کد رو توضیح میدم.

    توضیح کلی : اول باید یک تابع داشته باشیم که وقتی اسکرول کردیم و به آخر مرورگر رسیدیم به ما اطلاع بده.دوم باید در تابع فرآخوانی مطالب رو بنویسیم که با AJAX  اطلاعات رو بگیره.سوم باید اطلاعات گرفته شده رو در صفحه قرار بده.

    قدم اول یک تابع که وقتی اسکرول کردیم و به آخر صفحه رسیدیم به ما اطلاع بده :

    این تابع رو من با جی کوئری نوشتم و پس باید حتما کتابخانه جی کوئری در صفحه شما موجود باشه تا کار کنه ، این هم کد قدم اول :


    $(document).ready(function () {
                $(window).scroll(function () {
                    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                               alert('پایان');
                    }
                });
            });

    در کد بالا من فقط برای دیدن اینکه تابع درست کار میکنه یک پیغام پایان رو گذاشتم که بهمون نشون بده.

    قدم دوم یک تابع AJAX که اطلاعات رو از سرور بگیره :

    خب در کد زیر ما ابتدا یک اکشن در کنترلرمون درست میکنیم تا اطلاعات مد نظرمونو با استفاده از Json ازش بگیریم (18 رکورد) ، این نمونه کد اکشن :


    public JsonResult FetchBook()
            {
                try
                {
                    data = db.Books.OrderByDescending(x => x.ID).Take(18).ToList();
                        return Json(new { items = data,JsonRequestBehavior.AllowGet);
                }
                catch (Exception ex)
                {
                    Response.StatusCode = (int)HttpStatusCode.BadRequest;
                    return Json(ex.Message);
                }
            }

    برای استفاده ، کد خودتون رو به جای خط های سبز رنگ قرار بدین و بعد باید با یک تابع AJAX اطلاعات رو دریافت کنیم ، این هم کد AJAX گرفتن اطلاعات :

    function FetchBook() {
                    $.ajax({
                        type: "GET",
                        url: '@Url.Action("FetchBook")',
                        contentType: "application/json;charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            $.each(data.items, function (index, item) {
                               alert(item.ID);
                            });
                        }
                    });
            }


    در کد بالا تمامی ID های لیست رو به ترتیب در پیغام به ما نشون میده.در نتیجه اولین کد ما به این شکل تغییر میکنه :

     

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

     

    قدم سوم قرار دادن اطلاعات دریافتی در صفحه :

    خب با استفاده از جی کوئری اطلاعت رو در صفحه قرار میدیم که باید این کد ها در بخش success تابع AJAX بالا نوشته بشه(یعنی به جای alert(item.ID) ).

     

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

     

    اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد

    ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.



    پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :

    پخش اتوماتیک ویدئو در مرورگر های فایرفاکس،کروم و اپرا

    آموزش مخفی کردن اسکرول بار همراه با کد

    آموزش DocType در HTML 5

    صفحه بندی در Bootstrap 4

    آموزش کار با Progress Bar در Bootstrap 4

    آموزش کار با Badge در Bootstrap 4

    آموزش کار با Button در Bootstrap 4

    آموزش کار با Alerts در Bootstrap 4

    آموزش کار با Jumbotron در Bootstrap 4

    آموزش کار با جداول در Bootstrap 4

    بازدید : 181 شنبه 13 بهمن 1397 : 14:31 نظرات ()
    ارسال نظر برای این مطلب

    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی