对列表进行排序MVC视图页面中的对象 [英] Sorting a List<T> object in MVC view page

问题描述

我有一个ShoeItem类，在其中存储了一些Shoe属性，例如Model，Price，Color ..

I have a ShoeItem class where I store a few Shoe attributes such as Model, Price, Color..

在我的ShoeController的Index视图中，我向用户显示了他/他使用某些过滤器请求的shoes的List，这里没有问题..

In the Index view of my ShoeController, I show the user a List of the shoes s/he requested using some filters, there is no problem here..

该列表显示在默认的MVC 3.0列表视图中.视图页面的我的@Model("Index.cshtml")类型为List<ShoeItem>

The list is shown in the default MVC 3.0 list view.. My @Model of the view page ("Index.cshtml") is of type List<ShoeItem>

但是，我希望用户能够根据这些属性的升序或降序对结果列表进行排序，但我不能.

However, I want the user to be able to sort the resulting list according to those attributes both ascending or descending but I can not..

我尝试通过将List<ShoeItem>作为参数发送回Ajax.BeginForm中的List<ShoeItem>来从ShoeController调用PartialViewResult，在那里对其进行排序，并显示具有此排序列表的PartialView，但是List参数出现在控制器为null.

I tried calling a PartialViewResult from the ShoeController by sending back the List<ShoeItem> as parameter within Ajax.BeginForm, sort it back there and show a PartialView with this sorted list but the List parameter comes to the controller as null..

我也尝试使用jQuery在客户端进行排序，但是我无法从jQuery到达List<ShoeItem>对象.如果您愿意，我可以发布代码，但这很简单..

I also tried jQuery to do the sorting client-side but I could not reach the List<ShoeItem> object from jQuery.. I may post the code if you would like to see but it's simple..

有什么想法吗?

推荐答案

有2个选项

1. 向服务器发出AJAX请求，并传递排序参数，例如/shoes/?sort=model&dir=asc.将这些参数带入控制器动作，检索项目，对它们进行排序，然后返回JsonResult.通过JavaScript呈现新列表.
2. 使用排序参数向服务器发出AJAX/整页请求.将这些参数带入控制器操作中，检索各项并返回AJAX的PartialView和全页请求的ViewResult.

1. Make an AJAX request to the server passing the sort parameters e.g. /shoes/?sort=model&dir=asc. Take these parameteres into the controller action, retrieve the items, sort them and return a JsonResult. Render the new list via JavaScript.
2. Make an AJAX/full page request to the server with the sort params. Take these parameteres into the controller action, retrieve the items and return a PartialView for AJAX and a ViewResult for full page request.

当您最终从两个不同的位置(服务器和客户端)进行渲染时，第一种方法很难维护.尽管可以通过使用诸如moustache之类的模板库来简化此操作: https://github.com/janl/mustache.js .

The first method is harder to maintain as you end up rendering from 2 different places - server and client. Although this would be made easier by using some kind of templating library like moustache: https://github.com/janl/mustache.js.

对于第二个选项，您的控制器将如下所示.我做了一些假设，可能可以简化，但有帮助的它将帮助您入门.如果您的鞋子存储在数据库中，请确保对IQueryable进行过滤和排序-这样数据库服务器将执行过滤和排序，而不是将数据返回到.NET，然后对其进行过滤.

For the second option you controller would look like the following. I've made some assumptions and it could probably be streamlined but helpfully it will get you started. If your shoes are stored in a database, make sure you do the filtering and ordering on an IQueryable - that way the database server will do it, rather than the data being returned to .NET, then filtering it.

public ViewResult Index(int? colour, string sort, string dir)
{
    IQueryable<Shoe> shoes = shoeService.GetAllShoes();

    // Filter by something
    if(colour.HasValue)
        shoes = shoes.Where(s => s.Colour = colour);

    // Order the items
    switch((sort ?? "").ToLower())
    {
        case "colour":
            if(dir == "desc")
                shoes = shoes.OrderByDescending(s => s.Colour.Name);
            else
                shoes = shoes.OrderBy(s => s.Colour.Name);
            break;
    }

    if(Request.IsAjaxRequest())
        return PartialView(shoes.ToList());
    return View(shoes.ToList());
}

这篇关于对列表进行排序MVC视图页面中的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！