Jul 26, 2011

Creating filter links for an ASP.Net MVC 3 List View

I’ve started dabbling with ASP.NET MVC 3 recently and have been following Jon Galloway’s “ASP.NET MVC Music Store Tutorial”. It’s a great place to start if you have little or no experience with ASP.NET MVC (like me).
The tutorial shows you how to create a music store application and has an administrative section that lets us add albums and classify them by genre. The code samples come with a substantial amount of seed data as well so I was a littler overwhelmed when I first created the landing page of the administration and saw a sprawling table and a huge vertical scroll.

I wanted to be able to filter down the list based on Genre because that’s what I base my collection of music on. So as my first experiment with MVC, I decided to put filter links on top and I may even put in paging and search features later and write posts about it to keep you updated Dear Reader. As of now, this is what is was aiming for:

To give you a little background details on the current implementation, I have an Album, Genre, and Artist class in my Model. The Genre class has a GenreID which I plan to use in my URL to filter the results that are displayed.
E.g.: If Classical has GenreID 1, the URL will look something like: /StoreManager/Index/1 and initially when no filter is applied, it will look like: /StoreManager
MVC follows a lot of “Convention over Configuration” so when you create an app with default route settings in Global.asax, the controller takes Index as the default action. My Index action presently looks like:

Now to filter this list based on GenreID, I’m going to do the following things:
  • Send a list of Genre to the View (To display the filter links)
  • Add Filter links to the View
  • Pass a parameter ID to the Index method which I’ll keep as nullable
  • Filter the list based on supplied ID (if present)
There are multiple ways you can send data from the controller to the view, I’m gonna using the ViewBag.
Then in my view index.cshtml (I’m using the razor view engine), I loop through the list to display my filter links:

I’ve used the ActionLink Html helper to display the links which show the Genre Name as the link text and redirect the user to the Index view with GenreID being passed to the Action as a parameter named ID. This would render a link like
Now in my Index method, I add a nullable integer parameter and filter the list based on the supplied value. My Index method now looks like:

Note the parameter declaration, the ? specifies that id is a nullable. As we may view the list without any filters, we must first check if id has a value and only then filter the list. Now when I browse to the URL StoreManager/Index/1, I see only classical albums and when I browse to /StoreManager I see all Genres.

1 comment:

Anonymous said...

It is very simple and helpful.thanks