0

I have this code below of my razor page that contains some information to be displayed in a table. I have named the headers as below and the data that are to be displayed under the headers. Now I do not know how to sort the data in ascending and descending order when I click on the column header respectively? I have a code bind razor.cs page to do some basic operations. How do I achieve this sorting function?

Here is my code below in my razor page:

<div class="col-12 col-xl-10 mt-2">
    <div class="row">
        <div class="col">
            <div class="table-responsive">
                <table class="table table-hover table-sm" id="item_list">
                    <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Amount</th>
                        <th scope="col">Profit</th>
                        <th scope="col">Registration</th>
                        <th scopt="col">Description</th>
                        <th scopt="col">Particulars</th>
                        <th scopt="col"></th>
                    </tr>
                    </thead>
                    <tbody>
                    @for(int i = 0; i < ViewModel.Count; i++)
                    {
                        var item = ViewModel[i];
                        var j = i;
                        if(item.IsDeleted)
                        {
                            continue;
                        }
                        <tr id="item_list_row_@j">
                            <td style="width: 20%;">@item.Pricing.Name</td>
                            <td style="width: 10%">@item.Pricing.RiskPricing.Amount</td>
                            <td style="width: 10%">@(item.Pricing.RiskPricing.Profit > 0? item.Pricing.RiskPricing.Profit : (item.MotorCoverPricing.RiskPricing.Amount * (item.Pricing.RiskPricing.Rate/100)))</td>
                            <td style="width: 10%">@item.Detail.Registration</td>
                            <td style="width: 10%">@item.Detail.Description</td>
                            <td style="width: 10%">@item.Detail.Particulars</td>
                            
                        </tr>
                    }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
Nisha
  • 11
  • 2
  • 5
  • *"How do I achieve this sorting function?"* - depends, really. you can achieve it with [javascript](https://stackoverflow.com/q/3160277/4648586), using c#, or a mix of both. – Bagus Tesa May 22 '22 at 06:55
  • there is no way to do that using only with html also consider using js or c# – spzvtbg May 22 '22 at 06:56
  • How do I do it with c#? Any sample I can use to refer pls? Thank you – Nisha May 22 '22 at 07:01

0 Answers0