MVC 5 排序和过滤数据

Posted 2023-02-22

【中文标题】MVC 5 排序和过滤数据

【英文标题】：MVC 5 sorting and filtering data

【发布时间】：2015-03-21 13:52:20

【问题描述】：

在我看来，我可以使用Ajax.BeginForm 过滤显示的数据，它返回部分视图并仅刷新包含数据的表格。使用Ajax.ActionLink 单击列标题时，我还可以按列排序。问题是，当我使用Ajax.ActionLink 时，我必须刷新整个页面，并且我会丢失过滤器中选择的内容（它们是自定义多选组合控件），因此整个数据都会被排序和显示。

我尝试使用ViewBag 发送 Json 数据来设置过滤器，但我失败了。即使在排序时，我也宁愿只刷新表格。我对 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);
    

【问题讨论】：

一种方法是在服务器端呈现视图并在模型的属性中返回标记。您的链接需要更新与您的模型属性相关的隐藏字段以保存您的排序，然后调用表单的提交来触发您的 AjaxForm。您必须通过将 Model.HtmlMarkup 注入 标记或其他内容来显示您对 AjaxForms.Success 的看法。

我知道您想使用 Action Link 进行排序，但也许您可以通过在客户端使用 jQuery 进行排序来提高标准？签出：tablesorter.com/docs

谢谢！我没有考虑过。这也解决了我的其他问题。

【参考方案1】：

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

要使用可排序，请将“可排序”类添加到您的表中。此外，请务必使用 ajax.beginform ajaxoptions 中的 OnComplete 属性运行“makesortable”js，这样表格将在 ajax 调用后排序。像这样：

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

...


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