Filter Records in MVC

Before starting let's have a quick look at a controller and view page that I will use in this article. I will be using the SQL Server Northwind sample database in this article, you can download it from the Microsoft website and set up the same project to explore it.

Controller



View



Filter using Query String

If you look at the above Index action code, there is not a parameter to accept query string(s) passed from the URL. Let's make some changes in the Index action.



Now, if you run the application and try to pass a "country" from the URL then you will get filtered records, in my case I'm passing country=switzerland and the output is here:



But the problem with the above solution is, when we pass a null value for country, we will get the following unacceptable output:



In such situations the application should return complete records (without any filter), this can be done using just a single change in the Index action, here it is:



What if we want to pass more than one URL query strings to make filtering? Let's look at this output screen again; see:



As in the above image, what changes do we need to make in the Index action to find records matching country=switzerland and city=bern. In other words we need to pass an URL, something like localhost:13544/customers?country=switzerland&city=bern and the Index action will look at the URL and find the match. Here is what we need to modify in the Index action to do this:



Good so far. But from the user's point of view it's not good. We should have some controls to help the user make the filter. Keep reading.

Filter using Hyperlink

This is one of the most common ways to filter records. Doing it this way, we actually navigate to a new URL that contains query strings.

Let's go ahead and add the following code in the Index View:



Now, run the application and when you hover the mouse on the new link (ActionLink), you will see localhost:13544/customers?country=switzerland&city=bern URL is on target.



And behind the scene, the Index action returning the model by looking at the query strings. Please note, I'm still using same Index action:



Now, the problem with the above link (ActionLink) is that we can't change it always on production server. So, we need controls like dropdown list which will allow selection of available values for "country" and "city". Keep reading.

Filter using DropDownList

This approach is also very simple, just design two drop down list boxes one for Country and another for City and then pass the list of distinct countries and cities from the Index action to view to bind it. Look at the image:



In the above example, after making the selection for Country and City, we will click on the button that will POST the selection to the Customers Index action to filter, look at view source.



Here is the output:



Now, the problem with this is that user can't bookmark the filtered result, a quick modification, that is by changing the Form's POST (which is the default) to GET in "Html.BeginForm" on view, will allow this. In other words, this will add the selected items and its values to the URL. Here is the new Index View:



Now, if you run the application you will notice the selection is being attached to the URL also; see:



If you look at view source you will see the GET method now.



Hope it helps. Thanks.