Sorting in Blazor WebAssembly, as in any other type of application, is a common functionality when we show the data fetched from the server-side application. Of course, it is not enough to implement only the client-side (Blazor WebAssembly side) sorting functionality, we have to do the same for the Web API part. And that’s exactly what we are going to do in this article.

To download the source code for this article, you can visit the Sorting in Blazor WebAssembly repository.

For the complete navigation for this series, you can visit the Blazor Series page.

We are going to divide this article into the following topics:

So, let’s get down to business.

Sorting Implementation in the Web API

To start things off, we are going to modify the ProductParameters class by adding a new property:

As you can see, we add only one property that will accept the query string parameter from the client side and pass it to the server-side action. Additionally, we set the value for this property to the name as default sorting value.

To continue, we are going to install the System.Linq.Dynamic.Core library, to help us with the server-side sorting logic:

We have to mention that we have an article about sorting and we won’t dive deep into explanations in this article. If you want to learn in more detail about this feature on the web api side, feel free to read the article.

Now, let’s modify the RepositoryProductExtensions class by adding a sorting logic:

In this code, we dynamically create our orderQuery by using Reflection and the StringBuilder class and call the OrderBy method from the Linq.Dynamic.Core namespace, to execute that query. Again, to learn more about this logic, please read the mentioned article.

For this logic to work, we have to include several namespaces:

Finishing and Testing Web API’s Sorting Implementation

All we have left to do is to call this method in the ProductRepository class:


Let’s test this:

Testing Sort functionality with Postman

And we have our correct result. We can see only four products because the paging returns only 4 items per page, and we can see they are sorted by the price in descending order.

Now, let’s continue to the implementation of Sorting in BlazorWebAssembly.

Sorting in Blazor WebAssembly Application

The first thing we are going to do is to create new Sort.razor and .cs files in the Components folder:

Files for sorting in Blazor WebAssembly

Then, let’s add our select control in the razor file:

This is a simple drop-down list with a couple of options to use for the sorting purpose. We can notice the @onChange event that is going to trigger the ApplySort method as soon as we choose any of our options.

After this, we have to modify the class file as well:

We have a single event callback parameter and the ApplySort method with the ChangeEventArgs parameter. As soon as we pick our sorting option, the ApplySort method will trigger and if the value is different from -1, we call the OnSortChanged event callback and execute the parent function with the sorting value.

That said, we have to modify the Products page as well.

Let’s start with the razor file:

And continue with the class file, by adding a new method:

This method is going to be invoked from the Sort component with the OnSortChanged event callback and will accept the orderBy parameter. Then, we just log that value (for testing purpose), set the OrderBy property of the _productParameters object, and call the GetProducts function to refresh the product list on the screen.

Applying a QueryString Parameter

Of course, we have to apply this orderBy value to our HTTP request as a query string. To do that, we are going to modify the GetProducts method in the ProductHttpRepository class:

That’s all it takes.

Testing Our Application

Finally, we can start the server-side and the client-side applications, navigate to the Products page, and test all of the functionalities:

Test Sorting in Blazor WebAssembly

As we can see, everything is working without a problem.



We have learned how to implement Sorting in Blazor WebAssembly application.

So, we are ready to continue with the Blazor WebAssembly Forms and Validation. And that’s exactly what we are going to learn about in the next article.