نحوه پیاده سازی صفحه بندی در Web API

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

نحوه پیاده سازی صفحه بندی در Web API

اگر Iphone  را در نظر بگیریم ، آن از Api  استفاده میکند ، تبلت Surface ویندوز از Api استفاده میکند ، در اینترنت اشیاء (IoT) نیز از Api  استفاده میشود.به عبارت دیگر API اکنون در همه جا مورد نیاز است.با این Api ها ، ما یک ردیف از داده ها را ارسال نمی کنیم، در واقع ما قطعات زیادی از داده ها را ارسال می کنیم و برای نمایش این داده ها ، ما نیاز به استفاده از صفحه بندی داریم.

برای انجام این دمو ، ما باید از ابزار های زیر استفاده کنیم:

Visual Studio 2015

SQL Server 2008

Entity Framework 6

اکنون شروع کنیم.

Database first

ما یک پایگاه داده ساده به نام CustomerDB برای هدف آزمایشی ایجاد کرده ایم.

در داخل آن ما یک جدول با نام CustomerTB اضافه کردیم.

ساختار جدول CustomerTB

پس از ایجاد پایگاه داده مشتری و جدول، اکنون یک  Web API application  ساده در ویژوال استودیو 2015 ایجاد می کنیم.

ایجاد پروژه Web API

محیط Visual Studio را ایجاد کرده و در صفحه نخست بر روی New Project کلیک کنید.

بعد از انتخاب لینک پروژه جدید ، دیالوگ  "New Project" ظاهر میشود.

در داخل آن  Templates >> Visual C# را انتخاب کنید.

در داخل آن، Web را انتخاب کرده و "ASP.NET Web Application" را مشاهده خواهید کرد.

اکنون، پروژه خود را به عنوان "DemoPaging" نامگذاری کنید و در نهایت روی دکمه OK برای ایجاد یک پروژه کلیک کنید.

انتخاب Template ها

بعد از کلیک کردن بر روی دکمه OK یک ویزارد انتخاب قالب پروژه با نام  “New ASP.NET Project” به صورت پاپ اپ باز خواهد شد.

در این الگو، Web API Template را انتخاب کنید.

ما نمی خواهیم تست واحد برای این پروژه ایجاد کنیم، بنابراین این گزینه را انتخاب نکنید و در نهایت بر روی دکمه OK کلیک کنید.

بعد از انتخاب کردن تمام گزینه ها که در بالا توضیح دادیم بر روی OK کلیک کنید.پروژه شما ایجاد خواهد شد.

ساختار پروژه بعد از ایجاد شدن پروژه DemoPaging 

بعد از ایجاد کردن پروژه ، ما قصد داریم فولدری با نام EFModel به پروژه اضافه کنیم.در این فولدر قصد داریم که فایل

 Entity Framework (Database First).edmx را بیفزاییم.

افزودن ADO.NET Entity Framework

بعد از کلیک بر روی ADO.NET Entity Data Model،از شما نام ADO.NET Entity Data Model درخواست میشود.ما قصد داریم که نام آن را EfCustomer قرار دهیم.

به محض اینکه روی OK کلیک میکنید، ویزارد جدید Entity Data Model ظاهر خواهد شد.

در آن، گزینه "EF Designer from Database" را از گزینه های بالا انتخاب کنید و روی دکمه Next  کلیک کنید.

سپس یک ویزارد دیگر برای اتصال به پایگاه داده ظاهر میشود.

بر روی New Connection کلیک کنید ، تنظیمات اتصال به صورت پاپ آپ باز میشود.در این قسمت تمام جزئیات را تکمیل کنید.

با توجه به تصویر ، شما آن چه را که قرار است پر کنید را میبینید.

پس از وارد کردن جزئیات نام کاربری و رمز عبور، یک لیست از نام های پایگاه داده به صورت پاپ آپ خواهد آمد.

در اینجا ما پایگاه داده مان را به طور معمول انتخاب می کنیم، اما برای این نسخه ی نمایشی، CustomerDB را انتخاب می کنیم.

بر روی دکمه Test Connectionکلیک کنید تا اتصال پایگاه داده را اعتبارسنجی کند و در نهایت ، اگر تنظیمات اتصال پایگاه داده معتبر بود بر روی دکمه OK کلیک کنید.

سپس، شما می توانید تمام تغییرات در Entity Connection String را که انتخاب کرده اید مشاهده کنید.

شما همچنین میتوانید در تنظیمات Web.config نام رشته اتصال را با تغییر دادن  متغییر “Save connection settings in Web.Config” تغییر دهید.

گزینه آخر انتخاب برای انتخاب نمایش داده های حساس در رشته اتصال است.بر روی Yes کلیک کنید.

شی مورد نظر را انتخاب کنید.

جدول ها را انتخاب کنید.در داخل آن ، جدول CustomerTB را انتخاب کنید و بر روی دکمه Finish کلیک کنید.

حالا ، مدل EFCustomer Entity Data ساخته خواهد شد.

EFModel Viewبعد از افزودن Entity Data Model

سپس ، بعد از افزودن EFCustomer Entity Data Model ، ما قصد افزودن API Controller را داریم.

افزودن API Controller 

در این قسمت ، قصد داریم که یک API Controller خالی با نام CustomerInformation ایجاد کنیم.

بعد از افزودن API Controller ، ما قصد داریم یک مدل اضافه کنیم.

افزودن مدل (PagingParameterModel)

ما قصد داریم یک مدل با نام PagingParameterModel در فولدر Models اضافه کنیم و در آن property صفحه بندی را قرار می دهیم.

کدهای مربوط به PagingParameterModel

namespace DemoPaging.Models  
{  
    public class PagingParameterModel  
    {  
        const int maxPageSize = 20;  
  
        public int pageNumber { get; set; } = 1;  
  
        public int _pageSize { get; set; } = 10;  
  
        public int pageSize  
        {  
  
            get { return _pageSize; }  
            set  
            {  
                _pageSize = (value > maxPageSize) ? maxPageSize : value;  
            }  
        }  
    }  
}  

ما قصد داریم از این مدل به عنوان ورودی استفاده کنیم.

سپس ، یک اکشن متد با نام CustomerInformation به API Controller اضافه کنیم.

افزودن اکشن متد GetCustomer  به  API Controller با نام CustomerInformation 

اکشن متد GetCustomer  را برای کنترل کردن درخواست های HTTP Get  می افزاییم و پارامتری از نوع PagingParameterModel دریافت میکند.

توجه داشته باشید که AsQueryable فقط یک کوئری ایجاد میکند.

دستورالعمل ها نیاز به دریافت یک لیست دارند.

بعدا می توانید تغییرات بیشتری در query ایجاد کنید، مانند :افزودن یک عبارت Where.

کدهای CustomerInformationController

در این بخش ، ابتدا ، ما قصد داریم که یک درخواست به Apiبرای جمع آوری مدل به همراه داده ارسال کنیم.

بعد از این ها ، ما قصد داریم که لیستی از Customer ها را دریافت کنیم و سپس برای کوئری های بیشتر ، ما قصد داریم آن را به صورت AsQueryable بسازیم.پس از آن، ابتدا، تعداد ("Total no of Customer") را برای شمارش متغیر دریافت می کنیم.

بعد، ما میخواهیم یک مقدار را به متغیر CurrentPage اختصاص دهیم که از مدل PagingParameterModel باشد.این دارای خصیصه propertyNumber است و به همان شیوه ، ما میخواهیم مقداری را به ویژگی PageSize اختصاص دهیم.پس از آن، ما TotalPages را محاسبه میکنیم ، ما میخواهیم یک جستجو را اعمال کنیم و اپراتورها را به منبع که یک لیست Paged از مشتری ها برمیگرداند منتقل کنیم.در نهایت ، ما قصد داریم که شی paginationMetadata را ایجاد کنیم و میخواهیم که آن را از طریق هدر درخواستی که لیستی از Customer را برمیگرداند ارسال کنیم.

using DemoPaging.EFModel;  
using DemoPaging.Models;  
using Newtonsoft.Json;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Http;  
  
namespace DemoPaging.Controllers  
{  
public class CustomerInformationController : ApiController  
{  
/// <summary>  
/// Constructor for Creating instance of CustomerDBEntities   
/// </summary>  
CustomerDBEntities _context;  
public CustomerInformationController()  
{  
    _context = new EFModel.CustomerDBEntities();  
}  
  
  
[HttpGet]  
public IEnumerable<CustomerTB> GetCustomer([FromUri]PagingParameterModel pagingparametermodel)  
{  
     
    // Return List of Customer  
    var source = (from customer in _context.CustomerTBs.  
                    OrderBy(a => a.Country)  
                  select customer).AsQueryable();  
  
    // Get's No of Rows Count   
    int count = source.Count();  
  
    // Parameter is passed from Query string if it is null then it default Value will be pageNumber:1  
    int CurrentPage = pagingparametermodel.pageNumber;  
  
    // Parameter is passed from Query string if it is null then it default Value will be pageSize:20  
    int PageSize = pagingparametermodel.pageSize;  
  
    // Display TotalCount to Records to User  
    int TotalCount = count;  
  
    // Calculating Totalpage by Dividing (No of Records / Pagesize)  
    int TotalPages = (int)Math.Ceiling(count / (double)PageSize);  
  
    // Returns List of Customer after applying Paging   
    var items = source.Skip((CurrentPage - 1) * PageSize).Take(PageSize).ToList();  
  
    // if CurrentPage is greater than 1 means it has previousPage  
    var previousPage = CurrentPage > 1 ? "Yes" : "No";  
  
    // if TotalPages is greater than CurrentPage means it has nextPage  
    var nextPage = CurrentPage < TotalPages ? "Yes" : "No";  
  
    // Object which we are going to send in header   
    var paginationMetadata = new  
    {  
        totalCount = TotalCount,  
        pageSize = PageSize,  
        currentPage = CurrentPage,  
        totalPages = TotalPages,  
        previousPage,  
        nextPage  
    };  
  
    // Setting Header  
    HttpContext.Current.Response.Headers.Add("Paging-Headers", JsonConvert.SerializeObject (paginationMetadata));  
    // Returing List of Customers Collections  
    return items;   
      
}  
  
}  
}  

در حال حاضر بخش coding را تکمیل کردیم.بیاییدبر روی یک مثال واقعی تلاش کنیم.ابتدا برای فراخوانی Web Api ، متد API/GetCustomer ، قصد داریم از Postman Web Debugger استفاده کنیم.

برنامه Postman Chrome نصب کنید

برای اطلاع از دستورالعمل نصب آن به این لینک مراجعه کنید.

https://www.getpostman.com/docs/introduction

بعد از نصب این برنامه ، شما میتواند PostMan را باز کنید.در زیر تصویری از این برنامه آورده شده است.

وارد کردن آدرس درخواست

سپس ما میخواهیم آدرس GetCustomer API را فراخوانی کنیم.برای انجام این کار ، ما آدرس را با فرمت زیر وارد میکنیم.

توجه)“#####” این درواقع port number است.

آدرس : http://localhost:#####/api/CustomerInformation

کوئری استرینگ:?&pageNumber=1&pageSize=5

آدرس ای پی ای : http://localhost:#####/api/CustomerInformation?&pageNumber=1&pageSize=5

ما [page number =1] و  [PageSize=5] را به صورت کوئری استرینگ ارسال کرده ایم.

بعد از وارد کردن آدرس ، نیاز است تا هدر را تنظیم کنیم.ما Content-Type را به صورت application/json که برای هدر درخواست است تنظیم میکنیم.

بعد از تنظیم کردن هدر ، برای ارسال درخواست فقط کافیست بر روی SEND کلیک کنید.

اشکال زدایی ریل تایم اکشن متد GetCustomer 

در مدل pagingparametermodel ، شما میتوانید ببینید که توسط مقادیر کوئری استرینگی که ما ارسال کردیم پر شده است.

پاسخ اکشن متد GetCustomer 

در داخل پاسخ ، ما فقط 5 ردیف را میخواهیم چون میخواهیم سایز صفحه ارسالی 5 باشد.

هدر پاسخ اکشن متد GetCustomer

در پاسخ ، ما همچنین هدر را دریافت میکنیم که یک خلاصه ای از وضعیت تعداد ردیف های موجود  همانند : pagesize و currentpage و totalPages و در کنار این ها previousPage و nextPage را نیز به ما میدهد و به ما میگوید که آیا درخواست داده ما previousPage و next page را دارد یا خیر.

حالا ما نحوه صفحه بندی با  Web API  را در چند قدم ساده اموختیم.

فایل های ضمیمه
دانلود نسخه ی PDF این مطلب