Part 63 Implement paging in asp net mvc

this is part 63 of asp.net mvc tutorial in this video we'll discuss implementing paging in an mvc application please watch part 62 before proceeding we'll be working with the same example that we started in part 62. the first step is to install page list dot mvc using the nuget package manager so let's flip to visual studio click on tools library package manager manage nuget packages for solution click on the online tab and then search for paged list so notice that we have two packages here page list dot mvc and page list page list dot mvc is dependent on page list package so when we install this page list dot mvc it will automatically install this page list package as well so select page list dot mvc click install and then select the project to which you want to add these packages to in our case we want them to add to mvc demo click ok so this should add both the packages to our solution click close and if you expand references notice that it has added references to page the list dot mvc and page list assemblies all right so that's the first step the second step is to modify the index action method within the home controller to support a paging and there are two changes that we need to do the first change is to introduce this page parameter so this parameter is going to contain the number of the page that the end user wants to view and notice that this parameter is of type nullable integer because when we navigate first time to the index view there wouldn't be any page number so there are chances that you know the page number can be null that's the reason why we have chosen nullable integer as the data type for this parameter okay so that's the first change the second change is to actually return a paged list and to return a page to let's notice that we are using two page to list function okay so let's go ahead and make these changes to the controller action method now this page this two page to list function is present in those namespaces page list dot mvsa so let's go ahead and import those namespaces within our home controller so that's the first name space and the second namespace is going to be pagedlist.mvc and here we have the indexaction method within the home controller the first change is to introduce that page parameter and this is going to be of type nullable integer right so that's the first chain the second change is to return you know a paged list okay so let's go ahead and convert this list to a page to list and notice that this function is going to expect two parameters the first parameter is going to be page number and keep in mind this page number can be now okay so if it is now that means we are navigating to this page for the first time and obviously if that is not then we want to display the first page so i'm going to use null collision operator here so if this page parameter has got a value of null then use a value of 1 otherwise use whatever value that is present within this page parameter so this is null collision operator and the next parameter is the page size let's hard code the page size to be three so there will be three rows per every page that is displayed okay and let's go ahead and do the same modification in the else part as well so here we have the list let's go ahead and convert that to a paged list okay so these are the changes that we have to do the controller action method now the final change is for the view itself so within the view first let's go ahead and use those two required namespaces so let's go to index.cshtml using page list and the second one is pageless.nbc and this and the other change that we have to do is look at this at the moment the model for this view is i enumerable of employee but if you look at the index action method within the home controller what are we actually returning to the view we are returning a paged list so the model has to be i paged list so let's go ahead and use that so the model is going to be i paged list now since we have changed the model from innumerable to ipage list we have to do a slight modification to this section of the code so this is the section which displays these headings named gender email etc so we have to modify that piece of code there so the otherwise what is going to happen let's actually build the solution look at this when i navigate to this view it's going to throw an exception look at that so here we need to change that so instead of model dot name we have to do model dot first dot name okay let's do the same modification okay so let's save these changes and let's refresh this view now and see if that compilation error goes away okay so we have the issue fixed now look at that it's only displaying three rows okay but then if you look at our table there are seven rows and remember we have set the page size to three that's why we have three rows here but let's display the pager control at the bottom of the view and to do that we are going to make use of this html helper dot paged list pager okay so we give it the model object and then we specify the function which is going to you know display that pager links for us so we are passing you know we are using that url dot action hyperlink and we want to navigate to the index action okay and then we are passing this anonymous type you know the page as the parameter so let's actually look at this in action so at the bottom of the view just after the table we want to display pager control so at html dot paged list pager and the first parameter is going to be the model the i paged list and if you remember what's the model for overview it's going to be ipage list of employee so we have to pass that model to this function and the next parameter is a function okay which is going to generate those page links for us okay so that's going to be page so that will be the parameter in the url and then we are going to use you know url dot action html helper so using that we can generate hyperlinks so we are going to use url dot action and then the action that we want to navigate is the index action and then we can specify the root values using anonymous type so new okay so i'm going to pass the page parameter to that all right so let's close this save everything and let's navigate to this view and see if we get page numbers as expected so look at that i can see three page numbers here now i can go to the second page look at that i can see the second set of employees there i click on third page and i see the third set of employees and i can come back you know to the first and second all right but then there is a slight problem here remember we have implemented search functionality in part 62. now let's say i want to search all mail employees okay so when i click search look at that i i see two pages they're actually four male employees so if you look at this we have four male employees and the first three are displayed on this page and then if i go to the second page we'll have look at that what is happening first of all let me select gender and then type mail click search okay so it has given us the results correctly there are four male employees and the first page is displaying three mail employees and on the second page when i navigate to the second page i should see the fourth mail employee but is that happening no we are losing that search that we have done previously okay so to retain that search what we have to do is look at that when we search for mail employees so that's the gender select that so within the url look at that we have two query strings search by gender and search is equal to mail okay now when i click on this page number two pager link look at what's going to happen i'm going to lose these values that are present within the url and because of that you know it is going to display all the employees from the database so basically it's displaying the second set of three employees here okay now somehow we have to remember that search you know basically the search by and search string that we had in the url and the way to do that is basically using this anonymous type here so i want to use this anonymous type and specify a parameter called search by and the value of that so where am i going to get that value from that value look at this when we actually search now let's undo this change so now so when we navigate to the index view and then when we search for male employees look at that in the url we are going to have these two parameters so i mean query string search by and search query string so we need to retrieve them from the url and pass it to this action helper method okay so what is the name of the parameter going to be it's going to be search by and where is the value going to come from the value is going to come from the url so how to get the value of the query string from the url you can use the request object so request dot query string and then you can specify the name of the query string so what is the name of the query string nothing but search by and similarly we need to get the search query string value so again we are going to use that here search and then the same idea request dot query string and then it's going to be search all right so these change let's actually navigate let's search for male employee so we should get the same output and now look at this when i click on page number two look at that i remember the state and at the same time i only see that one male employee on the other hand if i don't enter anything and then click on search look at what's going to happen i get all the employees and when i go to the second page i have to say second set of three employees and on the final page there's one employee so it's working as expected now let's say i search for an employee whose name starts with s and when i click search look at that i have only one employee whose name starts with s but then i don't need this pager control here because there's only one page so there's no point in displaying pager control but this pager control is being displayed always so how do i tell to this pager not to show up if there's just one page that's very simple to do so when this is the piece of code that is generating this pager control so here there is another parameter that we can pass to this page list pager function so let's pass that so let's do that in the second line so what's the third parameter you can pass an object page the list render options object so i'm going to pass that object here so new paged list render options object and then you can specify several settings here okay so for example i want to control the display of this object and when i set the display to only if needed then it will be displayed only when it's needed that is whenever we have more than one page okay so let's select that if needed save this let's go ahead and search once again now this should disappear okay look at that on the other hand if i don't enter anything click on search i get all you know seven employees so there are three pages okay now let's say i also want to display the current page that is active and the total number of pages available let's say i want to display a message here um you know you're viewing page one of three pages something like that so how do we do that again that's very easy to do using this page list render options object so there is another property that you can specify so here there are several properties display item slice and total and similarly display page count and current location so i want to set that to true so that's going to display the current page and the total number of pages that are available so when i click search here look at what's going to happen it says page one of three so you're currently on page one of three when i click page three so i'm currently on page three of three and similarly let's say you know i want to show the total number of rows and the row and the set of rows that are viewed that we are looking at the moment again that's very easy to do there is another flag that we need to turn on um display item slice and total set that to true so there's a lot of customization that you can do this to do this pager control and to do that you can use this page list render options object so let's save that and let's refresh this once again look at that i'm viewing page one of three showing items one through three of seven similarly if i go to the second page we are weaving from four to six of seven and i am on page two of three so very useful page control all right on this slide you can find resources for asp.net c sharp and sql server interview questions that's it for today thank you for listening have a great day

Channel: kudvenkat

Views: 179,319

Keywords: implement, paging, mvc, pagination, asp.net, pager

Id: srN56uxw76s

Length: 15min 43sec (943 seconds)

Published: Sun Jul 28 2013