How to implement Server-Side filtration in Angular & ASP.NET Core App

In this tutorial, we are going to learn how to implement server-side filtration in Angular 6 and ASP.NET Core 2.0 application. As you know there are two types of filtration such as Client-Side Filtration and Server-Side Filtration. As you we have discussed the client-side filtration in the previous tutorial. If you don’t know then just click here.

Note: – In one of the previous tutorials of Angular 6 and ASP.NET Core tutorial series, we have created a project which performs CRUD operations. So, we are not going to create another project for this tutorial, we will implement the search functionality in that project which we have created in one of the previous tutorials. So, if you want to learn how to create a project or how to implement CRUD operations in Angular 6 and ASP.NET Core, then click here.

Previous Tutorials

1. How to set up a project using Angular 6 and ASP.NET Core.
2. How to add CRUD Operations in an application using Angular 6 and ASP.NET Core.
3. How to implement Client-Side Filtration in Angular 6 and ASP.NET Core Application.

How to implement Server-Side Filtration using Angular 6 and ASP.NET Core.

Let’s start how to create an application which performs the server-side filtration functionality using Angular 6 and ASP.NET Core.

Step # 1 => Add Model Class

Go to project folder structure => then go to “Models” folder => then right click on the “Models” folder => then select “New C# Class” => then enter name (E.g. Filter.cs). So, it will create a new class with the name filter.cs in your project under the “Models” folder.

Now add the below property in your filter class.

Public int? Id {get; set;}

Note: – Question mark means it’s a nullable or optional property.

Step # 2 => Add API Resource

Now, in this section, we will add an API Resource class. So, go to folder structure => open “Resources” folder which is under the “Controllers” folder => then right click on the “Resources” folder => then choose “New C# Class” => then enter name (E.g. FilterResource). Now open this class and then add the below property in this class. This is the same property as we have added in the Filter class.

Public int? Id {get; set;}

Step # 3 => Create Mapping

Now in this section, we will map these two classes (Filter.cs class and FilterResource.cs class) using auto mapper. So, go to folder structure => then open the “Mapping” folder => then open the “MappingProfile.cs” class. Then add the below line of code in the MappingProfile class.

CreateMap<FilterResource, Filter>():

Step # 4 => Add changes in the Controller class code

Now in this section, we will add some changes in the controller code. So, go to “controllers” folder and then open the BookstoresController file. Then add some changes as you see in below code.

Line # 28: In this line, we are adding FilterResource as a parameter.

Line # 30: Here in this line, we are mapping the FilterResource and Filter classes.

Line # 31: In this line, we are getting the record from BookstoreDbContext as a Queryable. And then pass all the record to the query variable.

Line # 32: In this line, we are checking if the Id property has value or not.

Line # 33: If Id property has value, then this will get the specific record which has the same id value as in the filter id value.

Line # 35: In this line, storing the record in the bookstore variable in the form of a list.

Step # 5 => add Changes in the Service

Now in this section, we will add some changes in the service class of bookstore project. So, go to ClientApp folder => then open the “services” folder which is under the “app” folder. Then open the “bookstore.service.ts” file. And now add the code as you see in below file from line # 30 to 47.

Let’s understand the above code…

Line # 30: Passing the filter parameter.

Line # 32: In this line, we are appending the question mark (?) and the BookStoreQueryString method with the filter parameter.

Line # 38: In this line, we are iterating the properties over the objects.

Line # 40: here in this line, we are getting the value for the property.

Line # 41: checking in this line if the value is valid or not.

Line # 43: Now, in this line we are getting the property and value in the form of (E.g. property=value).

Line # 46: Now, in this line, we are joining all the properties like in this form (E.g. property1=value1&property2=value2) using & sign.

Step # 6 => add changes in the bookstore-list.component.ts file.

Now, in this component file, we will add some changes in the code. So, open the bookstore-list.component.ts file which is under the bookstore-list component.

Now add the changes as you see in the below code from line # 17 to 30.

Let’s understand the above code.

Line # 18: Passing the filter parameter.

Line # 20: just calling the populateBooks function.

Line # 23 to 26: In these lines, just getting all the record which has the same filter id value using bookstore service class.

Line # 29: Just calling the populateBooks function.

Run Project.

Now run your project using the below command.

dotnet watch run

Now, filter the record from the dropdown list. Now open the inspect element and go to network tab, and then you will see the result as you see in the below screenshot.