Paging with ASP.Net MVC

by

Hi Friends,

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.

124th

 

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.

125th

and then, add the extension method in the query as shown below

126th

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.

127th

Now, in order to take this effect, save everything and restart visual studio.

128th

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.

129th

 

now, inside here, i need to place the pager as shown below

131th

 

Now, with the above changes in place, when i build the solution and refresh the page, i should be getting a page like below:-

130th

 

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.

132th 133th 134th

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.

135th 136th

 

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.

Thanks,
Rahul
Happy coding

Thanks, Rahul Happy Coding