In this article we are going to learn how to develop a custom HTML navigation helper for ASP.NET MVC. The navigation helper also demonstrates the use of ASP.NET MVC AJAX. The navigation from one set of result to another is done using AJAX. I have used VS 2008 and ASP.NET MVC 1.0
Figure 1: Real world may be Amazon.com. The > Or < symbols are used to navigate to different pages.
What I have done
- I have created a MVC application.
- Added a custom HTML helper to display a collection with AJAX navigation.
A fake collection of items to display. In real world it may be coming from a database. We can also create a custom class storing more information to display, like image, URL etc.
This is the code to fetch the limited records based on startindex. Page size can be defined in a constant file and used across methods.
Listing 1: Collection with pagination option
Page number based on the current item id:
The HTML helper displays the navigation list. The navigation list object will contain the records to display.
NextList having the return type as partial view:
The index action has the optional list id parameter. This part of code is more useful if we are showing the result on the Index.aspx page based on the navigator list option selected by the users.
Listing 2: Index Action
Import the namespace to use the custom helper extension:
Listing 3: Index view
Listing 4: NextList partial view.
>> / << will output the next/previous set of records doing asynchronous call and returns partial view.
Figure 2: First set of output
Figure 3: After click on >>
Figure 4: Final
Today we have learnt to integrate the ASP.NET MVC AJAX and custom HTML helper method to build a very basic navigation list. We can do many more enhancements like adding the image, showing the AJAX loader while next set of records are listed down etc. Please download the working ASP.NET MVC application.
I work on ASP.NET 2.0/3.5 , C# , ASP.NET AJAX , ASP.NET MVC 1.0
This author has published 2 articles on DotNetSlackers. View other articles or the complete profile here.
You might also be interested in the following related blog posts
Make SharePoint 2007 Act Like SharePoint 2010, Updated
Silverlight Related Skills Post 2
DevConnections Spring Slides and Demos
LINQ To SQL: Support for Eager Loading, Really?
Composing entities in a SOA using LINQ.
Speed Development Time by 50%
Adjusting drop-down list width on the fly
December 16th Links: ASP.NET, ASP.NET AJAX, ASP.NET MVC, VS, .NET, IIS7, WPF
The Wait is Over: ASP.NET 3.5 Extensions Preview Posted
Linq Data Services and the Business Logic Layer
Please login to rate or to leave a comment.