如何使用模型属性对该表进行排序

Question

因此，我想在页面上添加功能，如果用户单击某列，则必须根据该列对表格进行排序（不确定我是否很清楚，因为我的英语水平也很差，所以这里有一个示例我要：点击“年龄”列=将所有用户（年龄从小到大）排序）

这是我的桌子

<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>

这是我的控制器：

` 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

我可能还会建议

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

您可以尝试如下操作：

1）更改表标题并添加链接以使用某些路由值打开相同的操作

...
// @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>
...

请阅读本 ，以更好地了解@Html.ActionLink方法的实际作用。 上面的示例将产生以下标记： <a href="/home/clients/age">Age</a>

2）现在您需要在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
}

由于您只提供了标记，所以我的答案有些猜测，但是您的Controller实际上应该像上面的那样。 我希望你能适应一些东西。 如果您有任何疑问，请告诉我。