Timothy Xue September 02, 2021
There a many different approaches when it comes to filtering elements in a MVC style web application, in this article, I am going show you my approach on how to filter and sort items in a ASP.NET MVC project.
In my projects I usually like to leave any logic related to displaying sorting of the displayed elements and filtering to front end logic, If the project front end is made using react and the back end an API things would be slightly easier, all you’ll have to do is on page load react should call the API with a HTTP get, fetching all the data in the form of JSON, then we can operate on the data however we see fit.
Things gets slightly trickier when we are using razor pages or razor views, in this case we would need to use a JavaScript file to take care of sorting, filtering and pagination.
Here is an example from one of my project
First, we would grab the list of all the item that’s available in the database and pass it to the View, I like to place all the filtering logic to do with the core logic of the app here, such as weather or not the item is active, and the stock volume of the product to see if the stock is empty. This is necessary for my app because the inventory and the product are two separate classes thus it would make life much easier to implement the check in the back-end where I have access to all the Entity models.
The second step in the process would be to pass List from the view to our JavaScript file, a easy way to do this is just place some JavaScript code on page like shown above, we can simple pass the List straight in as a JSON data and save it to a variable, and now we can access the list from our JavaScript file, which I name sort.js.
Next we would need to display the items using JavaScript, first we grab the div element where we are going to insert our displayed items the we run the foreach function on the list variable that we declared in our view page in the foreach function we’re going to pass in a second function called displayCardFunc which we are going to declare below.
Inside the displayCardFunc we first would pass in the parameter prod which represents the product Object stored in the list, then we would create the card using the prod and placing it in a variable in the form of HTML, with that done we can simply insert the html content into our div reserved for displaying. And thus the displaying of our list using JavaScript is done.
Now to filter the elements we would need to do a couple of things back in the view first.
In my example I’m going to be using checkbox for filtering it is crucial that we give the check box an id that is the attribute we are trying to filter in my case its the brand title.
Then we would would trigger a reDisplay function either on click of a filter button or a on change of the checkbox, the reDisplay function would first call the filte function and passing in the filterByBrand function the filterByBrand function then returns the item if the checkbox with the product’s brand’s title is checked, this is why we have to give an id that matches the attribute we are trying to filter. Then the reDisplay function would re-display the page using the freshly filtered list.
End results:
before filter
after filter
If the displaying and filtering logic has to be in the back end such as in the case that you’re using a CMS framework, I also have a solution for you:
Here we have a list of filtered being passed back to a controller using a Ajax call.
The controller then stores the list in session data.
The page is then re-displayed, before it displays the page checks if there is any filter data stored in the session data it’ll then use the session data to filter and display the page and clearing the session data when done.