ASP.NET Core 2.0 - Using JQuery DataTables - Filtering (VSCode)

Hello guys.
I’m going to continue with the post related to how to use jquery datatables, it will give you more context, because now we are going to filter the information retrieved by the dataTables from the backend and we are going to use asp.net core 2.0.

Prerequisites

Install .net core and aspnet .net core sdk’s, you can get them here.
Let’s create the web application, I’m going to use VS Code.

Creating web app based on template

First we have to create a folder in any location in our local PC, going to use C:\aspnetCoreJQueryDataTables-2.0, so let’s Run Visual Studio Code and open Terminal
VS Code - Terminal

Now using Terminal we can run some commands in .net Core CLI to create our project using templates.
Here you can check all the commands, in this case we are going to use dotnet new to create a web application based on a template.

In Terminal type dotnet new mvc -n Abc.Web (mvc: template, -n: name of the application folder), run it
VS Code - Terminal

Now we have our application structure from the mvc template
VS Code - mvc template

Don’t forget to install Debugger for Chrome extension, (as the name says, allows us to debug using chrome)
VS Code - Extensions

Just search for debugger in the search input of Extensions Pane, then install it.
VS Code - Debugger for Chrome

To use the debugger we have to configure it using some files located at .vscode folder, the steps are detailed in this link (very useful documentation), or just use those two files that I’m going to create in .vscode folder
tasks.json, is going to make a build before doing a debugging
VS Code - tasks.json

launch.json is going to run chrome and use a parameterized url to make a request to finally start debugging our application
VS Code - launch.json

Filtering JQuery-DataTables

I’m going to reuse some code from the previous post to ease this one.

In Models folder, let’s create an Item Model
VS Code - Item Model

Let’s create an api folder, inside create a file ItemsController.cs
VS Code - ItemsController

We are going to use in /Home/Views/Index view this code
VS Code - Index view

Add a new parameter to support searching
VS Code - setting up JQuery DataTable

Let’s do some changes on Items Api to support searching
In ProcessCollection method we are going to check for another form data item “search[value]”
VS Code - ProcessCollection method

Now we are going to add Where linq code, in this case we are going to when Name or Description contains the search criteria.
VS Code - where linq

Now we have to get total records filtered, we use GetTotalRecordsFiltered method for it.
VS Code - GetTotalRecordsFiltered method

The request should look like this
VS Code - post request

Let’s run it, click on debug icon then click on Start debugging
VS Code - Start Debugging

Now we’ll see a new search input field, when we type it will automatically filter
Now it's Filtering from backend side

You can download the source code from the repository.

Bonus:

Taking someone’s words, Luther Allison was strong influence for blues 60’s musicians. Great solo with a really cool effect, with this song for the first time I heard the octave pedal, unique…
Luther Allison - Bad News Is Coming (live Montreaux 76-94)