ASP.net Pagination - Adding a pagination system to a Web API

pagination in asp.net core applications is incredibly important and Powerful so in this short video you will learn how to implement a pagination system into a asp.net web API [Music] let me see that right here we can specify page let's say three and we want to have let's say 15 elements on that page I can simply hit execute and I will get the third page of my collection with all its elements let's get started so let's take a look at the project that I got right here it's a simple ASP Net 7 web API and I have a single controller here which is called products controller and there's a data model I have products right over here so product class with ID name and price now inside of the products controller you can see that it's an API controller and we have a specified route right here and then we just create some mock product so we are not making use of a real database because it's not important for this video so here I got a list of products and just when we submit the request and we create the scope of the products controller in the background inside of the Constructor of that controller we simply create 100 mock products you can see that right here just I from that for Loop product I and then any price calculated by I again so as I said it's not really important what we show it's more about the concept of pagination itself so here we got our get endpoint which is an HTTP get request for sure and we are returning an i enumerable which could be like an array or a list or any other collection of type product and it's simply taking all of our products you can see that here product stable right so in a real application that would be like your Entity framework table for example right from your SQL database we simply take that entire table all the products inside of it and return it as a list so when we start our application we have open API and Swagger enabled this is why we immediately can see our Swagger API test environment here and when I now open that up click on try it out and then hit execute you can see that I will get a lot of products right so here I got 100 now 100 could be fine but what happens if we have a thousand or one hundred thousand which is not really uncommon so in that way we would need to have some pagination maybe you only want to show 10 products maybe you want to show 5 25 50 whatever right let's get started implementing our pagination system if you're looking for a powerful and easy to use UI framework for your Blazer applications go ahead and check out Blazer eyes they're using Frameworks like bootstrap Bulma material and and design and they recently added one of the most popular CSS Frameworks which is called Tailwind CSS I'm pretty sure you already have heard about it well another cool feature is they're fully customized validation system to help verify your data by using Blazer rise UI components you'll be able to create stunning and functional interfaces in no time you can find the link in the description below or popping up right now at the top right corner now in order to add pagination to our endpoint right here so that we can say right get the items of page 3 and page five and all of that we have to think about the logic first so first of all let's extend our request or our method right here by a parameter which we call Page and the initial page for sure is one so we can set a default value for the parameter we will set it to one now next up we have a page size let's set it to 10. now the page size basically means that how many elements do we want to show on that page so if we want to have 10 elements on a page we will set the page size to 10 if we want to have 500 elements on a single page we will set it to 500 so just as an example alrighty now let me remove that VAR products here because we should rename it let's call it our products per page now I will now set it to zero and return that VAR products per page there we go first of all we should know how many total products we have so let's say VAR total count equals to products or products table dot count so we again access our table with all the products and simply take the count of it now since we're using a mock data for Loop here we know that we have 100 elements so next up we should know how many total Pages we then have so if we have a page size of 10 and we have 100 products we will have 10 total pages right on each page 10 products 10 times 10 is 100 so we can calculate that by saying our total pages equals to now first up let's get started pretty simple we take the total count and divide it by the page size right now in order to make it working we want to have an integer so what we do is we simply take that result from that Division and now we round it up to the nearest whole number by using math dot ceiling now let's take a look he's complaining right now he's providing uh he wants to see a decimal so this is why we have to make a cast right here we will cast into a decimal now we don't want to have a decimal finally we want to have an integer so this is where we have to convert or cast into an integer right so now we know that we have total Pages let's say we have 10 or 5 right we don't want to have any floating point value we want to know we have three pages five pages and all of that so here we have the correct calculation for that now finally we can now calculate all the products or we can grab all the products that we want to have so we take our products table and then say dot skip so that we can skip over some elements now we want to skip our page first of all so let's say page minus one I will explain that just in a second we have our page minus one let's just put that in parentheses let's multiply it with our total page size that we have right here and now afterwards let's is called take so that we can take the amount of elements or products in that case that we want to have which is defined by our page size you can see that here page size and then finally let's return it as a list first of all let me just put that into separate lines of code or three there we go this is something that you will see pretty often in real world applications so first of all we skip over the previous pages of data by multiplying the current page number by the page size and subtracting one right here now afterwards we call the take method to get only the number of products we want to show on that page awesome so in that way we can now start our application open up our endpoint click on try out again let's say our page is three and we want to have 20 products in total let's hit execute and you should be able to see that we have our products starting from 41 up to let's see where we end let's see at 60 right so this is because for sure if we have 20 elements on each page the first page will have 20 the second page will have 20 well up to 40 and the third page which we are requesting starts at 41 just as you can see right here awesome so this is how you can Implement pagination in an asp.net core web API if you want to become an awesome asp.net core or general full stack developer check out our c-sharp progress Academy which is a self-paced online course that teaches you asp.net for angular unit testing and c-sharp software design patterns in depth well we offer 14 day money back guarantee and I'm absolutely sure that this is the fastest way on how you can progress as a developer so go ahead check out the link in the description below or popping up right now at the top right corner awesome and that's it for this video if you want to see more please go ahead and watch our introduction on Entity framework for example or our video on understanding your queries by understanding I enamorable and I queryables those are really great videos but you will learn a lot I'm pretty sure well and if you haven't subscribed to our Channel already go ahead and subscribe right now and I'll be happy to see you back in the next video have a good one [Music] laughs

Channel: tutorialsEU - C#

Views: 9,264

Keywords: c#, .net, c-sharp, csharp, programming, visual studio, c sharp, learn c#, c# programming, c# tutorial, c# for beginners, learn c# programming, c# course, tutorial, coding, .net core, core, software engineering, rest api, api, development, how to code, dotnet, web api, dot net, asp.net core 6, microsoft mvp, asp.net core, .net 6, .netcore, javascript, java, rest, what is api, restful api, backend, chatgpt, chatgpt api, pagination, swagger, page, pages, filter, filtering, blazorize, web api c#

Id: fhomCI3bsIM

Length: 8min 50sec (530 seconds)

Published: Fri Mar 24 2023