MVC 5 排序和过滤数据

Question

在我看来，我可以使用 Ajax.BeginForm 和 returns 部分视图来过滤显示的数据，并且只刷新 table 数据。当使用 Ajax.ActionLink 单击列 header 时，我还可以按列排序。问题是，当我使用 Ajax.ActionLink 时，我必须刷新整个页面并且我丢失了在过滤器中选择的内容（它们是自定义的多选组合控件）所以整个数据被排序和显示。

我尝试使用 ViewBag 发送 Json 数据来设置过滤器，但我失败了。我宁愿只刷新 table 即使在排序时也是如此。我对 MVC 有点陌生。如何以一种好的方式做到这一点？感谢您的帮助！

查看：

@using (Ajax.BeginForm(new AjaxOptions() {HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "exposureRecords"}))
{
    <div class="form-group">
        <select id="brands-select" name="brands" multiple="multiple">
            @{
                var brands = Model.Brands;

                foreach (var item in brands)
                {
                    <option value="@item">@item</option>
                }
            }
        </select>
    </div>
    (...similar for 3 other filters...)
    <table class="table">
        <tr>
            <th>
               @Html.ActionLink("Marka", "Index", new { sortOrder = ViewBag.BrandSortParam })
            </th>
            <th>
               @Html.ActionLink("Dyscyplina", "Index", new { sortOrder = ViewBag.DisciplineSortParm })
            </th>
            <th>
                @Html.ActionLink("Miesiąc", "Index", new { sortOrder = ViewBag.MonthSortParm })
            </th>
            <th>
                @Html.ActionLink("Liczba ekspozycji", "Index", new { sortOrder = ViewBag.QuantitySortParm })
            </th>
            <th>
                @Html.ActionLink("Ekwiwalent reklamowy", "Index", new { sortOrder = ViewBag.ValueSortParm })
            </th>
        </tr>
    </table>
}
@Html.Partial("_Table",Model)

然后在控制器中我有

   public ActionResult Index(IEnumerable<string> brands, IEnumerable<string> disciplines,
        IEnumerable<string> months,string sortOrder)
    {
        ViewBag.BrandSortParam = String.IsNullOrEmpty(sortOrder) ? "brand_desc" : "";

        ViewBag.DisciplineSortParm = sortOrder == "discipline" ? "discipline_desc" : "discipline";

        ViewBag.MonthSortParm = sortOrder == "month" ? "month_desc" : "month";

        ViewBag.QuantitySortParm = sortOrder == "quantity" ? "quantity_desc" : "quantity";

        ViewBag.ValueSortParm = sortOrder == "value" ? "value_desc" : "value";


        model.ExposureRecords = FilterExposure(brands, disciplines, months);
        model.ExposureRecords = Sort(sortOrder, model.ExposureRecords);
        if (Request.IsAjaxRequest())
            return PartialView("_Table", model);
        return View(model);
    }

Answer 1

我的建议是使用客户端库。排序可以在控制器中完成，但根据我的经验，这通常很痛苦。我最近使用 sorttable.js 在一个项目中完成了您希望完成的工作，尽管有多个选项可供选择（请参阅上面 Porschiey 的评论）。

要使用 sortable，请将 "sortable" class 添加到您的 table。此外，请务必在 ajax.beginform ajax 选项中使用 OnComplete 属性运行 "makesortable" js，这样 table 将在之后排序ajax 电话。像这样：

@using (Ajax.BeginForm(new AjaxOptions() {HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "exposureRecords", OnComplete="makesortable"}))
{
...
}

function makesortable() {
sorttable.makeSortable(document.getElementById('exposureRecords'));
};

MVC 5 排序和过滤数据

MVC 5 sorting and filtering data

javascript

c#

asp.net-mvc

asp.net-ajax

asp.net-mvc-5