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

时间:2017-10-04 12:11:36

标签: html asp.net sorting

所以我想在我的页面添加一个功能,如果用户点击一列,则必须根据此列订购该表(不确定我是否清楚,因为我的英语也很差,所以这里是一个我想要的例子:点击年龄栏=将所有用户从年轻人分类到较旧的用户

这是我的表

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

2 个答案:

答案 0 :(得分: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>
            }

答案 1 :(得分:0)

您可以尝试这样的事情:

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)现在您需要将逻辑添加到Controller中的Action

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
}

我的答案中有一些猜测,因为你只提供了标记,但你的控制器实际应该看起来像上面的那个。我希望你能适应一些事情。如果您有任何疑问,请与我们联系。