• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / Angular / How to sort record using Angular 6 and ASP.NET Core 2.0

How to sort record using Angular 6 and ASP.NET Core 2.0

July 1, 2018 by mebakar1005 Leave a Comment

In this tutorial, we will discuss how to sort record using Angular 6 and ASP.NET Core. We will create generic logic using Dictionary for sorting the record. There are lots of other techniques or third-party tools like ng2-table, ngx-data table and others. But we will create our own logic.

Previous Tutorials of Angular 6 and ASP.NET Core Series

  • How to set up a project using Angular 6 and ASP.NET Core
  • How to create CRUD Operations using Angular 6 and ASP.NET Core
  • How to implement client-side filtering using Angular 6 and ASP.NET Core
  • How to implement server-side filtration using Angular 6 and ASP.NET Core

Note:- In this tutorial, we will not create a new project. We will add changes in our previous project which we have created in one of the previous tutorials.

Step # 1 => Add properties to model class

First-of-all, we will add properties in our model. So, go to project folder structure => then model => and then open “Filter.cs” class.

Then add the below properties in the filter model class.

public string SortBy { get; set; }
publicbool IsSortAscending { get; set; }

Step # 2 => Add properties to resource class.

Now, go to project folder structure => then Controllers=> and then open “FilterResource.cs” class.

Then add the below properties in the filter Resource class.

public string SortBy { get; set; }
public bool IsSortAscending { get; set; }

Step # 3 => Add Interface

Now, in this step, we will add the interface with the name of IQueryObject.  So, to do this, just open the terminal window and then create a new folder using this below command.

mkdir Extensions

After creating the Extensions folder, just right click the folder and add a new interface with the name of “IQueryObject”. Then add the code as you see in below file.

Note:- Don’t forget to inherit the filter class from IQueryObject interface.

See also  How to deploy Angular 6 & Asp Net Core App to Azure using FileZilla

Step # 4 => Add logic for Sorting

Now in this step, we will add a new class with the name of IQueryExtensions under the “Extensions” folder. So, go to project folder structure => then right click on the newly created folder “Extensions” => then choose option “New C# Class” => then add the name (E.g. IQueryableExtensions) => then add the code as you see in below file.

Let’s understand the above code,

Line # 14: this line of code will check the existence of a key.

Line # 17: if the filter Resource object sorted ascending, then it will return the query as appropriate using the expression is used in below line.

Line # 20: It is the vice versa of the line # 17.

Step # 5 => Add Dictionary for mapping.

Now in this step, we will add a new dictionary which is used for mapping. So, go to BookstoreController and then add the code as you see in below.

Line # 10 to 16: Declaring a dictionary with column names.

Line # 17: This line of code is calling a method with parameters which we have created in the IQueryExtensions class.

Step # 6 => Add Click event to table headings.

So, go to bookstore-list.html file and some changes as you see in below code.

Step # 7 => Add logic of click events.

Now, in this step, we will add the logic for click events. So, when a user clicks on the header of the table, then it will sort the list. So, go to bookstore-list.component.ts file, and then add the below code in your file.

Now, run your project and you will see the result as you need.

How to implement Server-Side filtration in Angular & ASP.NET Core App
Search, sort and pagination in Angular 6 and ASP.NET Core

Related

Filed Under: Angular, Angular 5, Angular 6, ASP.NET Core Tagged With: .NET CORE, ANGULAR, Angular 6 Tutorial, ASP.NET Core 2.1, Dotnet Core

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • Top LINQ interview questions and answers.
  • Difference between .NET Core and .NET Framework
  • Top 10 Programming Languages of the Future.
  • Top MVC Interview Questions & Answers
  • 20 best Data Science Books: Beginner to Advanced Level
  • 10 Best Machine Learning Laptops
Copyright © 2022