Published: 12 Mar 2010
By: Devesh Kumar
Download Sample Code

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.

Contents [hide]

Introduction

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.

Real world may be Amazon.com. The > Or < symbols are used to navigate to different pages.

What I have done

  1. I have created a MVC application.
  2. Added a custom HTML helper to display a collection with AJAX navigation.

The Code

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.

Action 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.

Clicking >> / << will output the next/previous set of records doing asynchronous call and returns partial view.

Figure 2: First set of output

First set of output

Figure 3: After click on >>

After click on >>

Figure 4: Final

Final

Summary

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.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Devesh Kumar

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.

Other articles in this category


Code First Approach using Entity Framework 4.1, Inversion of Control, Unity Framework, Repository and Unit of Work Patterns, and MVC3 Razor View
A detailed introduction about the code first approach using Entity Framework 4.1, Inversion of Contr...
jQuery Mobile ListView
In this article, we're going to look at what JQuery Mobile uses to represent lists, and how capable ...
Exception Handling and .Net (A practical approach)
Error Handling has always been crucial for an application in a number of ways. It may affect the exe...
JQuery Mobile Widgets Overview
An overview of widgets in jQuery Mobile.
Book Review: SignalR: Real-time Application Development
A book review of SignalR by Simone.

You might also be interested in the following related blog posts


Make SharePoint 2007 Act Like SharePoint 2010, Updated read more
Silverlight Related Skills Post 2 read more
DevConnections Spring Slides and Demos read more
LINQ To SQL: Support for Eager Loading, Really? read more
Composing entities in a SOA using LINQ. read more
Speed Development Time by 50% read more
Adjusting drop-down list width on the fly read more
December 16th Links: ASP.NET, ASP.NET AJAX, ASP.NET MVC, VS, .NET, IIS7, WPF read more
The Wait is Over: ASP.NET 3.5 Extensions Preview Posted read more
Linq Data Services and the Business Logic Layer read more
Top
 
 
 

Please login to rate or to leave a comment.