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

Filter-Records-in-MVC.png

View

Filter-Records-in-MVC1.png

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.

Filter-Records-in-MVC2.png

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:

Filter-Records-in-MVC3.png

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

Filter-Records-in-MVC4.png

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:

Filter-Records-in-MVC5.png

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

Filter-Records-in-MVC6.png

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:

Filter-Records-in-MVC7.png

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:

Filter-Records-in-MVC8.png

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.

Filter-Records-in-MVC9.png

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:

Filter-Records-in-MVC10.png

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:

Filter-Records-in-MVC11.png

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.

Filter-Records-in-MVC12.png

Here is the output:

Filter-Records-in-MVC13.png

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:

Filter-Records-in-MVC14.png

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

Filter-Records-in-MVC15.png

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

Filter-Records-in-MVC16.png

Hope it helps. Thanks.