Icon not updating when sorting with Blazor

Question

This is my first attempt at Blazor and I’m having an issue where an icon is not getting updated through Blazor server.

I have a list of applications in an HTML table and I’m working on setting up sorting. I’m following this article as my example.

https://www.thecodehubs.com/sorting-table-in-blazor/

The actual sorting is working but I’m trying to get it to update the icon that is displayed. I’ve made some minor changes from the article mostly because I’m using FontAwesome for my icons but I don’t think that’s the issue. The table header should have one of three icons displayed. If the column hasn’t been sorted then it displays the basic sort icon and then it will change the icon to either and up or down arrow depending on the sort order. The initial icon of being unsorted displays so I know it’s running the “SetSortIcon” function. However, once I do actually sort the column, the first icon disappears and the up or down arrow never display. If I inspect or do a “view source” on the page after sorting I can see the icon value is blank. In the article it shows the icons working but I must be missing something like a binding or something?

@page "/"
@page "/applications"
@using AppUserAdmin.Models
@using AppUserAdmin.Data
@inject AppUserAdmin.Data.DataManager db;

<style>
    .sort-th {
        cursor: pointer;
    }
    .fas {
        float: right;
    }
</style>


<h3>Applications</h3>

@if (applications == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="row">
    <div class="col-6">
        <a class="btn btn-sm btn-success" href="/application">
            <i class="fas fa-plus"></i> New
        </a>
    </div>
    <div class="col-6">
    </div>
</div>
<div class="row mt-1">
    <div class="col-12">
        <table class="table table-themed">
            <thead>
                <tr>
                    <th class="sort-th" @onclick="@(() => SortTable("Name"))">
                        App Name <i class="@(SetSortIcon("Name"))"></i>
                    </th>
                    <th>
                        App Description
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var app in applications)
                {
                    <tr>
                        <td>@app.Name</td>
                        <td>@app.Description</td>
                        <td>
                            <a class="btn btn-sm btn-primary" href="/application/@app.Id">
                                <i class="fas fa-edit"></i> Edit
                            </a>
                            <a class="btn btn-sm btn-secondary" href="/groups/@app.Id">
                                <i class="fas fa-users"></i> Groups
                            </a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>
}

@code {


    private List<App> applications;

    protected override void OnInitialized()
    {
        applications = db.GetApps();
    }

    private bool isSortedAscending;
    private string activeSortColumn;
    private void SortTable(string columnName)
    {
        if (columnName != activeSortColumn)
        {
            applications = applications.OrderBy(x => x.GetType().GetProperty(columnName).GetValue(x, null)).ToList();
            isSortedAscending = true;
            activeSortColumn = columnName;
        }
        else
        {
            if (isSortedAscending)
            {
                applications = applications.OrderByDescending(x => x.GetType().GetProperty(columnName).GetValue(x, null)).ToList();
            }
            else
            {
                applications = applications.OrderBy(x => x.GetType().GetProperty(columnName).GetValue(x, null)).ToList();
            }

            isSortedAscending = !isSortedAscending;
        }
    }

    private string SetSortIcon(string columnName)
    {
        if (activeSortColumn != columnName)
        {
            return "fas fa-sort";
        }
        if (isSortedAscending)
        {
            return "fas fa-sort-up";
        }
        else
        {
            return "fas fa-sort-down";
        }
    }
}

Answer 1

There is a lot of scope to improve coding in your project but make these changes to your SetSortIcon to get sort icons

 private string SetSortIcon(string columnName)
    {
        if (activeSortColumn != columnName)
        {
            return "fa fa-sort";
        }
        if (isSortedAscending)
        {
            return "fa fa-sort-up";
        }
        else
        {
            return "fa fa-sort-down";
        }
    }

And make sure you have included Fontawesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">