how to sort this table with a model property

Question

So I would like to add a feature to my page, if the user click on a column, the table has to be ordered according to this column (not sure if i'm clear since my English is also poor so here's an example of what I want : click on age column = sort all users from younger to older one)

Here is my table

<table id="table1" >
    <caption>Affectation d'Opacif</caption>
                <!--Header du tableau (1ere ligne avec intitulés des champs : )-->
    <thead>
        <tr>
            <th>Date</th>
            <th>N° Client</th>
            <th>Nom</th>
            <th>Naf</th>
            <th>Siret</th>
            <th>Raison Sociale</th>
            <th>Opacif</th>
        </tr>
    </thead>
                <!--Body du tableau -->
    <tbody>         
            @for (int i = 0; i < Model.beneficiaries.Count; i++)
            {
                <tr>
                    <td>@Model.beneficiaries[i].date</td>
                    <td class="taille100">@Model.beneficiaries[i].id</td>
                    <td>@Model.beneficiaries[i].lastname <br />
                        @Model.beneficiaries[i].firstname </td>
                    <td class="taille80">@Model.beneficiaries[i].naf</td>
                    <td>@Model.beneficiaries[i].siret</td>
                    <td class="taille300">@Model.beneficiaries[i].raisonsociale</td>
                    <td class="taille200">@Html.DropDownListFor(m => m.beneficiaries[i].opacif, new SelectList(Model.opacifs), "Selectionner un Opacif", new { @onchange = "CallChangefunc(this)", @naf= @Model.beneficiaries[i].naf, @siret= @Model.beneficiaries[i].siret })</td>
                </tr>
            }
    </tbody>
</table>

Here is my controller :

` public ActionResult Index()
    {
        var service = new OpacifService();
        var beneficiaries = service.searchBeneficiaries();
        var opacifs = service.searchOpacifs();
        var viewModel = new OpacifViewModels { opacifs = opacifs, beneficiaries = beneficiaries };
        return View(viewModel);         
    }

    [HttpGet]
    public JsonResult UpdateOpacif(string naf, string opacif, string siret)
    {
        JsonResult result = null;
        var service = new OpacifService();
        var valid = service.updateBeneficiary(naf, opacif, siret);
        if (valid)
        {
            result = Json(new { code = 200, message = "Mise à jour effectuée !" }, JsonRequestBehavior.AllowGet);
        }
        else
        {
            result = Json(new { code = 417, message = "Une erreur est survenue lors de la mise à jour... Réessayez ou contactez l'administrateur" }, JsonRequestBehavior.AllowGet);
        }

        return result;
    }
}`

Answer 1

Might I suggest also

foreach (var bc in Model.beneficiaries)
            {
                <tr>
                    <td>@bc.date</td>
                    <td class="taille100">@bc.id</td>
                    <td>@bc.lastname <br />
                        @bc.firstname </td>
                    <td class="taille80">@bc.naf</td>
                    <td>@Model.beneficiaries[i].siret</td>
                    <td class="taille300">@bc.raisonsociale</td>
                    <td class="taille200">@Html.DropDownListFor(m => m.beneficiaries[i].opacif, new SelectList(Model.opacifs), "Selectionner un Opacif", new { @onchange = "CallChangefunc(this)", @naf= @Model.beneficiaries[i].naf, @siret= @bc.siret })</td>
                </tr>
            }

Answer 2

You can try something like this:

1) Change the Table Header and add a link to open the same Action with some route values

...
// @Html.ActionLink(Linktext, Actionname, Controllername, Routevalues, Html Attributes) 
<th> @Html.ActionLink("Age", "clients", "home", new { sortBy= "age" }, null) </th>
<th> @Html.ActionLink("Name", "clients", "home", new { sortBy= "name" }, null) </th>
...

Please read this, to get a better understanding, of what the @Html.ActionLink Method actually does. The example above will produces this Markup: <a href="/home/clients/age">Age</a>

2) Now you need to add the logic to your Action in the Controller

public ActionResult ActionName(string sortBy) {
    // Do whatever is needed to collect the values. Let's call it valueCollection
    Model.beneficiaries = valueCollection;

    switch(sortBy) {
       case "age":
           Model.beneficiaries.orderBy(client => client.age);
           break;
       case "name": 
           Model.beneficiaries.orderBy(client => client.name);
           break;
    }
    // You can add more sort options of course
}

There is some guessing in my answer, since you only provided the markup, but your Controller actually should look like the one above. I hope you can adapt something. If you have any questions, let me know.