如何使用模型屬性對此表進行排序

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