ارسال نظر برای این مطلب
سید محمد میرعالی
امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.
دسته بندی مطالب
آمار سایت
کل مطالب : 39
کل نظرات : 6
افراد آنلاین : 1
تعداد اعضا : 0
آی پی امروز : 12
آی پی دیروز : 27
بازدید امروز : 52
باردید دیروز : 48
گوگل امروز : 0
گوگل دیروز : 1
بازدید هفته : 52
بازدید ماه : 217
بازدید سال : 2,459
بازدید کلی : 240,207
آموزش لود اطلاعات با اسکرول کردن در ASP.net MVC
در این مطلب از سايت ميرممد برای شما عزیزان لود شدن اطلاعات با اسکرول کردن توسط AJAX در ASP.net MVC همراه با نمونه کد رو توضیح میدم.
توضیح کلی : اول باید یک تابع داشته باشیم که وقتی اسکرول کردیم و به آخر مرورگر رسیدیم به ما اطلاع بده.دوم باید در تابع فرآخوانی مطالب رو بنویسیم که با AJAX اطلاعات رو بگیره.سوم باید اطلاعات گرفته شده رو در صفحه قرار بده.
قدم اول یک تابع که وقتی اسکرول کردیم و به آخر صفحه رسیدیم به ما اطلاع بده :
این تابع رو من با جی کوئری نوشتم و پس باید حتما کتابخانه جی کوئری در صفحه شما موجود باشه تا کار کنه ، این هم کد قدم اول :
$(document).ready(function () {
$(window).scroll(function () {
var docHeight = $(document).height();
var winScrolled = $(window).height() + $(window).scrollTop();
if ((docHeight - winScrolled) < 50){
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 صدا زده نشه و برای لود شدن اطلاعات لودینگ بذارید و... که دیگه به سلیقه خودتون میتونید انجام بدید.
اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد
ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.
پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :