在 Kendo UI MVC Grid 上排序

Question

我正在使用带有 MVC 5 的 Kendo UI Grid 进行开发。我发现我似乎无法在我的列上进行排序 - 我已经阅读了这里的线程 - http://www.telerik.com/forums/grid-sorting-filtering---doesn-t-work 但是查看我的 Bundle 配置看起来像我包含正确的 js 文件并查看 F12 中的网络，看起来它们已包含在内。我也在我的网站中使用 Bootstrap - 是否可能需要包含其他内容？

捆绑配置如下：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/jquery.validate.js",
                        "~/Scripts/jquery.validate.unobtrusive.js"));

 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                        "~/Scripts/bootstrap.js",
                        "~/Scripts/respond.js"));

 bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
                        "~/Scripts/kendo/kendo.all.min.js",
                        "~/Scripts/kendo/kendo.aspnetmvc.min.js"));

在我的 _Layout.cshtml 部分中有以下内容

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/kendo/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")

在 _Layout.cshtml 中的 @RenderBody() 之后，我有引导程序的包含

@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/initialize")
@RenderSection("scripts", required: false)

以下显示了我的 Grid 的配置

                @(Html.Kendo().Grid<Car.Web.Models.CarViewModel>()
                          .Name("CarView")
                          .Columns(columns =>
                          {
                              columns.Bound(c => c.Name).Width(180);
                              columns.Bound(c => c.ModelNo).Width(280);
                              columns.Bound(c => c.Colour).Width(120);
                              columns.Bound(c => c.FuelType).Width(65);
                          })
                        .HtmlAttributes(new { style = "height: 420px;" })
                        .Scrollable()
                        .Sortable(sortable => sortable
                            .AllowUnsort(true)
                            .SortMode(GridSortMode.MultipleColumn))
                        .Pageable(pageable => pageable
                        .PageSizes(true)
                        .ButtonCount(5))
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("GetCarById", "api/Car"))
                        )
                )

注意我正在使用 WebAPI 控制器 - 我的 API 文件夹中的 CarController 如下所示：

    public DataSourceResult Read([DataSourceRequest] DataSourceRequest request)
    {
        //note stubbed data 1 will need to be passed in as id
        return GetCarById(1).ToDataSourceResult(request);
    }


    public IEnumerable<CarViewModel> GetCarById(int carId)
    {
        // call to service layer to get data
        var carResponse = _carService.GetCarDataById(carId);


        // map responses to grid

        return MapCarSelectView(carResponse );
    }

    private static IEnumerable<CarViewModel> MapCarSelectView(IEnumerable<CarResponse> carResponses)
    {
        return carResponses.Select(carResponse => new CarViewModel
        {
            Id = carResponse.Id, CarName = carResponse.Name, CarModelNo = carResponse.ModelNo, Colour = carResponse .Colour, FuelType=            carResponse.FuelType
        }).ToList();
    }

数据正确返回到表中，但是当我单击列标题时，ModelNo 的数字列和名称/颜色/燃料类型的字母列都没有得到排序？我的配置中是否缺少某些内容？

Answer 1

您正在使用 WebAPI - 这意味着您必须编写自定义模型绑定器。有关 WebAPI 案例的事实已涵盖here。要查看演示，您应该查看this code library。