خانه \\ MVC 5 & 6 \\ بررسی Infinite Scroll در ASP.NET MVC بر اساس Jquery Ajax

  • بررسی Infinite Scroll در ASP.NET MVC بر اساس Jquery Ajax
بررسی Infinite Scroll در ASP.NET MVC بر اساس Jquery Ajax
1395/08/30 - 23:52:15 // MVC 5 & 6 // 0 نظر // 4205 بازدید

در این مقاله به صورت سریع و ساده قصد داریم به بررسی چگونگی پیاده سازی Infinite Scrolling در ASP.NET MVC با کمک Jquery بپردازیم.

بسمه تعالی

بررسی Infinite Scroll در ASP.NET MVC

در این مقاله به صورت سریع و ساده قصد داریم به بررسی چگونگی پیاده سازی Infinite Scrolling در ASP.NET MVC با کمک Jquery بپردازیم.

در ابتدا اجازه بدهید به شرح و صورت مساله بپردازیم. اصلن این Infinite Scroll چیست ؟. پاسخ بسیار ساده است. دیگر برای Scroll شدن صفحه و نمایش داده های جدید و صدا زدن آنها از دیتابیس لازم نیست سیستم شماره گزاری و اجبار کاربر به Click بر روی شماره صفحه یا کلیدهای قبل و بعد و ... باشد. تنها کافی است کاربر با Scroll Down ، به من و شمای برنامه نویس نشان دهد داده های صفحه بعد را به عنوان مثال نیاز دارد.

حال باید دیدچگونه باید این سناریو را پیاده کرد. در ابتدا یک پروژه جدید ASP.NET MVC 5 ایجاد کنید، ولی وضهیت Authentication را روی None قرار دهید تا بیهوده View و Controller اضافی و بی مورد ایجاد نگردد.

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

  1. <book id="bk101">  
  2.       <author>Gambardella, Matthew</author>  
  3.       <title>XML Developer's Guide</title>  
  4.       <genre>Computer</genre>  
  5.       <price>44.95</price>  
  6.       <publish_date>2000-10-01</publish_date>  
  7.       <description>An in-depth look at creating applications with XML.</description>  
  8.    </book>  
  9.    <book id="bk102">  
  10.       <author>Ralls, Kim</author>  
  11.       <title>Midnight Rain</title>  
  12.       <genre>Fantasy</genre>  
  13.       <price>5.95</price>  
  14.       <publish_date>2000-12-16</publish_date>  
  15.       <description>A former architect battles corporate zombies, an evil sorceress,   
  16.       and he own childhood to become queen of the world.</description>  
  17.    </book>     
 

برای شروع به Model نیاز داریم که به شکل زیر خواهد بود.

public class Book
{
    public string ID { get; set; }
    public string Author { get; set; }
    public string Title { get; set; }
    public string Genre { get; set; }
    public string Price { get; set; }
    public string PublishDate { get; set; }
    public string Description { get; set; }
}
 

خوب اگر مثلن اطلاعات 5 کتاب نمایش داده شود،با Scroll 5 تای بعدی نمایش داده خواهد شد. در اینجا من BlockSize را 5 و BlockNumber را 1 قرار میدهم و با هر Scroll به این مقدار اضافه شده و 5 تای بعدی نمایش داده خواهد شد.

در این پروژه من درون Model یک کلاس به نام DataManager ساخته ام و از کلیه امور اعم از ایجاد Model و بحث صفحه بندی و ... را درون این کلاس پیاده سازی کرده ام.

  1. public static class DataManager  
  2. {  
  3.     /// <summary>  
  4.     /// Returns one block of book items  
  5.     /// </summary>  
  6.     /// <param name="BlockNumber">Starting from 1</param>  
  7.     /// <param name="BlockSize">Items count in a block</param>  
  8.     /// <returns></returns>  
  9.     public static List<Book> GetBooks(int BlockNumber, int BlockSize)  
  10.     {  
  11.         int startIndex = (BlockNumber - 1) * BlockSize;  
  12.   
  13.         var filePath = AppDomain.CurrentDomain.BaseDirectory + "testData.xml";  
  14.         var doc = XDocument.Load(filePath);  
  15.   
  16.         var books = (from p in doc.Descendants("book")  
  17.                     select new Book  
  18.                     {  
  19.                         ID = p.Attributes("id").Single().Value,  
  20.                         Author = p.Element("author").Value,  
  21.                         Title = p.Element("title").Value,  
  22.                         Genre = p.Element("genre").Value,  
  23.                         Price = p.Element("price").Value,  
  24.                         PublishDate = p.Element("publish_date").Value,  
  25.                         Description = p.Element("description").Value,  
  26.                     }).Skip(startIndex).Take(BlockSize).ToList();  
  27.   
  28.         return books;  
  29.     }  
  30. }  
 
 

در متد GetBooks داده ها از فایل XML خوانده شده و سپس بر اساس شماره صفحه محاسبه و از طریق دو Extension Method به نامهای Skip و Take میتوان از روی رکوردها پرش کرد و در عمل صفحه بندی داشت.

حال نوبت به Controller و Action Method ها میرسد که باید به درستی پیاده سازی گردند. به یک PartialView به نام BookList هم نیاز داریم. متد اول به شکل زیر خواهد بود.

[ChildActionOnly]
public ActionResult BookList(List<Book> Model)
{
    return PartialView(Model);
}
 

چون این متد درون متد دیگری صدا زده میشود و نیازی به فراخوانی از بیرون ندارد، آنرا به صورت ChildAction تعریف کرده ایم.

محتویات BookList Partial View آنچنان پیچیده نیست و فقط یک Loop ساده برای نمایش داده هاست.

  1. @model List<mvcajaxinfinitescroll.Models.Book>  
  2.    
  3. @foreach (var item in Model)  
  4. {  
  5.     <div style="height: 300px; background-color: #F3F3F3; margin-bottom: 30px;">  
  6.         <div style="padding: 30px; font-size: 25px; color: #7b4f9d">@item.Title</div>  
  7.         <div style="padding-left: 30px; font-size: 18px;">Author: @item.Author</div>  
  8.         <div style="padding-left: 30px; font-size: 18px;">Genre: @item.Genre</div>  
  9.         <div style="padding-left: 30px; font-size: 18px;">Price: @item.Price $</div>  
  10.         <div style="padding-left: 30px; font-size: 18px;">Publish Date: @item.PublishDate</div>  
  11.         <div style="padding-left: 30px; padding-right: 30px; font-size: 18px;">Description: @item.Description</div>  
  12.     </div>  
  13. }  
 

اگر میبینید کمی شلوغ شده، فقط برای CSS و شکل دادن و بهبود نمایش در حالت اجراست، وگرنه از یک Loop ساده چیزی بیشتر وجود ندارد.

خوب Index Action هم بسیار ساده و به شکل زیر خواهد بود.

  1. public ActionResult Index()  
  2.         {  
  3.             int BlockSize = 5;  
  4.             var books = DataManager.GetBooks(1, BlockSize);  
  5.             return View(books);  
  6.         }  
 
درون View به شکل زیر میتوان از این متد BookList استفاده کرد. 
  1. <div id="bookListDiv">  
  2.     @{Html.RenderAction("BookList", "Home", new { ModelModel = Model });}  
  3. </div>  
  حال نوبت متد اصلی که از نوع HttpPost است خواهد بود.
  1. public ActionResult InfinateScroll(int BlockNumber)  
  2.        {  
  3.            //////////////////////////////////////////////////////////////////////////           
  4.            System.Threading.Thread.Sleep(3000);  
  5.            //////////////////////////////////////////////////////////////////////////   
  6.            int BlockSize = 5;  
  7.            var books = DataManager.GetBooks(BlockNumber, BlockSize);  
  8.    
  9.            JsonModel jsonModel = new JsonModel();  
  10.            jsonModel.NoMoreData = books.Count < BlockSize;  
  11.            jsonModel.HTMLString = RenderPartialViewToString("BookList", books);  
  12.    
  13.            return Json(jsonModel);  
  14.        }  
 

یک Sleep Thread داریم برای کند کردن روال Load داده ها که در حالات واقعی باید حذف شود.

یک مدل جدید به نام JsonModel به شکل زیر ایجاد کنید.

 
  1. public class JsonModel  
  2.     {  
  3.         public string HTMLString { get; set; }  
  4.         public bool NoMoreData { get; set; }  
  5.     }   

فیلد NoMoreData تایین کننده آن است که به صفحه آخر رسیده ایم یا نه و تکلیف HtmlString هم که مشخص است که باید حاوی داده های تولیدی باشد. یک متد به نام RenderPartialViewtoSrting وظیفه تبدیل داده ها به Json را بر عهده دارد که البته راههای دیگری هم برای این امر وجود دارد.

  1. protected string RenderPartialViewToString(string viewName, object model)  
  2.         {  
  3.             if (string.IsNullOrEmpty(viewName))  
  4.                 viewName = ControllerContext.RouteData.GetRequiredString("action");  
  5.   
  6.             ViewData.Model = model;  
  7.   
  8.             using (StringWriter sw = new StringWriter())  
  9.             {  
  10.                 ViewEngineResult viewResult =   
  11.                 ViewEngines.Engines.FindPartialView(ControllerContext, viewName);  
  12.                 ViewContext viewContext = new ViewContext  
  13.                 (ControllerContext, viewResult.View, ViewData, TempData, sw);  
  14.                 viewResult.View.Render(viewContext, sw);  
  15.   
  16.                 return sw.GetStringBuilder().ToString();  
  17.             }  
  18.         }  
 

خوب حالا نوبت یک Ajax ساده و صدا زدن متد سمت سرور توسط Jquery است .

  1. <script type="text/javascript">  
  2.     var BlockNumber = 2;  //Infinate Scroll starts from second block  
  3.     var NoMoreData = false;  
  4.     var inProgress = false;  
  5.   
  6.     $(window).scroll(function () {  
  7.         if ($(window).scrollTop() == $(document).height() -   
  8.         $(window).height() && !NoMoreData && !inProgress) {  
  9.   
  10.             inProgress = true;  
  11.             $("#loadingDiv").show();  
  12.               
  13.             $.post("@Url.Action("InfinateScroll",   
  14.             "Home")", { "BlockNumber": BlockNumber },  
  15.                     function (data) {  
  16.                           
  17.                         BlockNumber = BlockNumber + 1;  
  18.                         NoMoreData = data.NoMoreData;  
  19.                         $("#bookListDiv").append(data.HTMLString);  
  20.                         $("#loadingDiv").hide();  
  21.                         inProgress = false;  
  22.                     });  
  23.         }  
  24.     });  
  25. </script>  

البته یک Loading هم داریم که یک Div ساده است و نکته خاصی ندارد.

وجود سورس پروژه، درک مبحث را ساده تر میکند، چون به هر حال باید بتوانید آنرا اجرا و نتیجه را مشاهده و از آن در پروژه های دیگر استفاده کنید.

سورس پروژه : دانلود سورس پروژه

 
 
 
علی کلاهدوزان
معرفی نویسنده : علی کلاهدوزان

سلام بر دوستان ،
شاید رایج است به عنوان پروفایل کاربر ، چند خطی راجع به خودم بنویسم ، ولی وضعیت کاری و سوابق من با یک جستجوی ساده در گوگل مشخص خواهد شد ، لذا سرتان را با مطالب بی مورد به درد نیاورم بهتر است . اگر نکته خاصی لازم بود بدانید در قسمت "ایلیا سافت در یک نگاه" به احتمال زیاد یافت خواهد شد . جزئیات بیشتر را سوال کنید ، آدرس ایمیل Ali@Kolahdoozan.com همیشه جوابگوی شماست .امیدوارم از مطالب سایت استفاده کرده باشید . شاد و پیروز باشید .

امتیاز به مطلب
           
برچسب ها
Infinite Scroll   Ajax ASP.NET MVC 
مطالب مرتبط
نظرات کاربران
ارسال نظر