Lazy Load

در این مقاله میخواهیم راجب آموزش Lazy Load در ASP.NET MVC صحبت کنیم. برای شروع با تعریف Lazy Load شروع میکنیم تا اطلاعات کاملی از این ویژگی دراختیار شما قرار بدیم.

Lazy Load یک تکنیک برای نمایش داده های سایت به صورت بهینه تر و با performance بالاتری است.

به این صورت فرض کنید که در وبسایت شما مثلا ۵۰ رکورد اطلاعات وجود دارد وقتی که همه این اطلاعات را به صورت یکجا برای کاربر لود شود ممکن است کم افت سرعت یا تاخیر پیش بیاید .

روش بهتر استفاده از تکنیک Lazy Load است که کاربر با اسکرول کردن صفحه اطلاعات به ترتیب برایش Load  یا بارگزاری میشود که این روش باعث افزایش سرعت و performance بهتری میشود.

حال با استفاده از توضیحات بالا به آموزش استفاده از Lazy Load می پردازیم .

ما در این جا برای پروژه خود یک منبع داده (یک دیتابس یا یک فایل متنی) با ۵۰۰ رکورد در نظر گرفته ایم که به طور پیش فرض ۲۰ رکورد از آن را نشان میدهیم و بقیه رکورد هارا به ترتیب با اسکرول شدن نمایش میدهیم.

Lazy Load

برای استفاده از این روش (Lazy Load) :

  1. وارد پروژه خود شوید
  2. ما منبع داده یا DataSource خود را در یک فایل text به نام project.text قرار داده ایم این نکته را مد نظر بگیرید تفاوتی ندارد شما میتوانید از پایگاه داده Sql و .. استفاده کنید.

میخواهیم ابتدا ۲۰ رکورد از اطلاعات را در سایت نمایش دهیم و وقتی که کاربر با اسکرول در سایت پیمایش کرد با ارسال یک درخواست Ajax به سرور اطلاعات بعدی را درخواست کند.

برای چک کردن وضعیت اسکرول کردن کاربر روبه پایین از قطعه کد های window height  و  scroll height استفاده میکنیم

تصویر زیر یک ساختار از پروژه میباشد:

Lazy Load

Model

در این قسمت موجودیت های پروژه را ایجاد میکنیم که شامل  ID, Name, ManagerName and Email. می باشد.

public class Project  
{  
    public string ID { get; set; }  
    public string Name { get; set; }  
    public string ManagerName { get; set; }  
    public string Email { get; set; }  
}  

سپس اطلاعات را از فایل text خود فراخوانی میکنیم که شامل تمام اطلاعات مربوط به پروژه است.

پس از گرفتن محتویات فایل متنی، آن را به صورت خط به خط یک object یا شئ جدید از project می سازیم و محتویات را در داخل ان قرار مدهیم.

public ListProjectGetProjectList()  
{  
    string projectFile = HostingEnvironment.MapPath("~/App_Data/Projects.txt");  
    ListProjecttempList = new ListProject();  
  
    foreach (string line in File.ReadAllLines(projectFile))  
    {  
        var parts = line.Split('|');  
        tempList.Add(new Project()  
        {  
            ID = parts[0],  
            Name = parts[1],  
            ManagerName= parts[2],  
            Email = parts[3]  
        });  
    }  
  
    return tempList;  
}  

Controller

این قسمت شامل اقدامات زیر است :

  • Index()

این قسمت شامل این میشود که هنگامی که ما کنترلر خانه را جستجو میکنیم و به GetProject() ریدایرکت منتقل میشویم

  • GetProjects()

این تابع چک میکند که در خواست ارسال شده آیا یک AJAX معمولی است یا خیر در صورت true بودن پاسخ اطلاعات جدید را دریافت میکند در غیر اینصورت اطلاعات پیش فرض موجود در ViewBag را بر میگرداند.

  • GetRecordsForPage()

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


public const int RecordsPerPage = 20; 
public ListProjectProjectData; 
 
public HomeController() 
{ 
 ViewBag.RecordsPerPage = RecordsPerPage; 
} 
 
public ActionResult Index() 
{ 
 return RedirectToAction("GetProjects"); 
} 
 
public ActionResult GetProjects(int? pageNum) 
{ 
 pageNum = pageNum ?? 0; 
 ViewBag.IsEndOfRecords = false; 
 if (Request.IsAjaxRequest()) 
 { 
 var projects = GetRecordsForPage(pageNum.Value); 
 ViewBag.IsEndOfRecords = (projects.Any()); 
 return PartialView("_ProjectData", projects); 
 } 
 else 
 { 
 var projectRep = new ProjectRepository(); 
 ProjectData = projectRep.GetProjectList(); 
 
 ViewBag.TotalNumberProjects = ProjectData.Count; 
 ViewBag.Projects = GetRecordsForPage(pageNum.Value); 
 
 return View("Index"); 
 } 
} 
 
public ListProjectGetRecordsForPage(int pageNum) 
{ 
 var projectRep = new ProjectRepository(); 
 ProjectData = projectRep.GetProjectList(); 
 
 int from = (pageNum * RecordsPerPage); 
 
 var tempList = (from rec in ProjectData 
 select rec).Skip(from).Take(20).ToListProject(); 
 
 return tempList; 
} 

Views

برای این قسمت سه بخش about _Layout.cshtml, Index.cshtml و _Projectdata.cshtml را در نظر گرفته ایم.

_Layout.cshtml

این لایه را به عنوان قسمت اصلی در نظر گرفته ایم که حاوی کد های CSS و JS هم می باشد به عبارتی master Page در نظر گرفته شده است این قسمت.

دقت کنید که فرمت .cshtml برای سبک Razor در ASP.net میباشد.

!DOCTYPE html
html
head
meta charset="utf-8" /
meta name="viewport" content="width=device-width, initial-scale=1.0"
title@ViewBag.Title/title
img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22~%2FScripts%2Fjquery-1.10.2.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" /
img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.1.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" /
img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22~%2FScripts%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" /
link href="~/Content/bootstrap.min.css" rel="stylesheet" /
link href="~/Content/Site.css" rel="stylesheet" /
/head
body

div class="container body-content"
@RenderBody()


hr /

div id="loading"
img src='~/Content/spin.gif' /

bLoading Next.../b

/div


footer


Copyright© @DateTime.Now.Year 

/footer

/div

@RenderSection("scripts", required: false)
/body
/html

Index.cshtml

این بخش را صفحه اصلی در نظر میگیریم که از لایه Views/Home/Index.cshtml تغذیه میشود .

کد های این بخش را به این گونه مینویسیم که قابلیت طزریق اطلاعات با صورت Ajax را داشته باشد.

@using LazyLoadInMVC.Models
@{
ViewBag.Title = "LazyLoading Demo";
}

div class="jumbotron"


h1LazyLoading Demo/h1


This page is demo how to load records on demand.
Instead of loading all span class="text-primary"@ViewBag.TotalNumberProjects/span records,
let's load based on user requirement.

Scroll down the page then you will see that records are added to page.
It loads @ViewBag.RecordsPerPage records at a time and total no of records is span class="text-primary"@ViewBag.TotalNumberProjects/span.


/div

table class="table table-striped table-bordered table-condensed infinite-scroll"

thead


tr

thID #/th


thName/th

th
Manager

thManager Email/th


/tr

/thead

tbody
@Html.Partial("_ProjectData", (ViewBag.Projects as ListProject))
/tbody

/table

@section scripts{
img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22~%2FScripts%2FlazyLoading.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" /
img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%24(function%20()%20%7B%0A%24(%22div%23loading%22).hide()%3B%0A%7D)%3B%0A%0Avar%20url%20%3D%20'%40Url.RouteUrl(%22ProjectDataList%22)'%3B%0A%24(window).scroll(scrollHandler)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="script" title="script" /
}

در میان کد های قبلی Url.RouteUrl() را مشاهده میکنید .

این بخش در RouteConfig.cs  ایجاد و تعریف شده است. به این صورت:


public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute("ProjectDataList", "", new { controller = "Home", action = "GetProjects" });

routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}


ProjectData.cshtml

این قسمت برای هنگامی است که ما یک درخواست Ajax برای نمایش اطلاعات به سرور ارسال میکنیم،که اطلاعات را در داخل یک حلقه به صورت جدولی قرار میدهد.

@model List;LazyLoadInMVC.Models.Project

@foreach (var cust in Model)
{

tr

@cust.ID;/td

@cust.Name;/td

@cust.ManagerName;/td

@cust.Email;/td

/tr

}


اکنون زمان استفاده از کد های javascript برای LazyLoading است.

کد ها به این صورت هستند scrollHandler() یک تابع برای اینکه چه زمانی اسکرول در صفحه انجام میشود، و چک میکند که مقدار Window height و  Scroll height از scrollTop() بیشتر است یا خیر .

اگر جواب True باشد. درخواست Ajax بر اساس PageNumber  یا شماره صفحه برای سرور ارسال میشود.و بر اساس آن داده های جدید به جدول اضافه میشوند.

var page = 0,
inCallback = false,
isReachedScrollEnd = false;

var scrollHandler = function () {
if (isReachedScrollEnd == false 
($(document).scrollTop() = $(document).height() - $(window).height())) { loadProjectData(url); } } function loadProjectData(loadMoreRowsUrl) { if (page -1 !inCallback) {
inCallback = true;
page++;
$("div#loading").show();

$.ajax({
type: 'GET',
url: loadMoreRowsUrl,
data: "pageNum=" + page,
success: function (data, textstatus) {
if (data != '') {
$("table.infinite-scroll tbody").append(data);
$("table.infinite-scroll tbody tr:even").addClass("alt-row-class");
$("table.infinite-scroll tbody tr:odd").removeClass("alt-row-class");
}
else {
page = -1;
}

inCallback = false;
$("div#loading").hide();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
}

خروجی 

با استفاده از کد های بالا با هر بار اسکرول کردن روبه پایین ۲۰ رکورد بعدی نمایش داده میشوند مانند

Lazy Load در ASP.NET MVC

امیدواریم از آموزش رضایت داشته باشین و استفاده کنین.

کیوان غلامی

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    mojtabasiadat پاسخ

    با سلام
    لینک دانلود موجود نیست!!!

      مسعود شریفی پاسخ

      به صورت مقاله ارائه شده است.