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

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

你可以尝试这样的事情：

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

打开相同的动作，请阅读this，以更好地了解什么样的， @Html.ActionLink方法实际上。上面会的例子会产生这种标记：<a href="/home/clients/age">Age</a>

2）现在，你需要将逻辑添加到您的动作在控制器

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实际上应该看起来像上面那个。我希望你能适应一些事情。如果您有任何问题，请告诉我。

Answer 2

我可以建议也

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