In today’s discussion we’ll be adding paging capabilities on our page to enable the user to get the idea of the next present records. To do, the paging in here, we need to rely on the 3rd party component, so we’ll be injecting the same from the nugget as shown below.
now, we’ll start making changes in our code to accommodate the changes, we’ll start with home controller, so instead of returning 10 records, we’ll return all and this paged list api also gives me extension method that i can use in query to get the results, and also html helpers to display the next or previous widgets.
and then, add the extension method in the query as shown below
Now, this was the server side code change, now other changes will be done in UI. so, 1st change would be to return correct model type, because now it has become IPagedList type, so we need to fix the same in our view. Now, in order to take this change effect, i need to add few more namespaces in web.config under views folder as shown below.
Now, in order to take this effect, save everything and restart visual studio.
Now, it has taken the effect. Now, from the index view, we are also rendering partial view, so we need to also go there in the partial view and change the model directive there.
now, inside here, i need to place the pager as shown below
Now, with the above changes in place, when i build the solution and refresh the page, i should be getting a page like below:-
However, CSS in this case needs to be fixed, and this is very easy fix. so if you see your content folder, you will see one pagedlist.css file which is included with pagedList package. so, we just need to include the same in the css package in the bundle and do a build. And then, when we refresh the page, we’ll get a little beautiful pager as shown below.
Now, there is one problem with this, whenever, i click on pager, it redraws the complete page, i just want to update the below div. so, with the below code i would be able to update the above section of div only.
Now, with the above code in place, now the pager will work in a desired way. So, with this i would like to wrap this module, Till then stay tuned and happy coding.
2,052 total views, 2 views today