我正在尝试使用Asp.NET MVC和Angularjs开发kendo网格。我的代码如下所述。
Index.cshtml
<div ng-controller="telerikGridController">
<kendo-grid options="mainGridOptions">
<div k-detail-template>
<kendo-tabstrip>
<ul>
<li class="k-state-active">Orders</li>
<li>Contact information</li>
</ul>
<div>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</div>
<div>
<ul>
<li>Country: <input ng-model="dataItem.Country" /></li>
<li>City: <input ng-model="dataItem.City"/></li>
<li>Address: {{dataItem.Address}}</li>
<li>Home phone: {{dataItem.Phone}}</li>
</ul>
</div>
</kendo-tabstrip>
</div>
</kendo-grid>
</div>
AngularJS控制器（telerikGridController）
'use strict';
var app = angular.module('myApp', ['kendo.directives', 'ui.bootstrap']);
app.controller('telerikGridController', ['$scope', function telerikGridController($scope) {
$scope.mainGridOptions = {
dataSource: {
type: "json",
transport: {
read: "Grid/Departments"
},
pageSize: 2,
serverPaging: true,
serverSorting: true
},
sortable: true,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "DepartmentName",
title: "Department Name",
width: "120px"
}, {
field: "Country",
title: "Country",
width: "120px"
}, {
field: "City",
width: "120px"
}, {
field: "Phone",
width: "120px"
}, {
field: "Description"
}
]
};
$scope.detailGridOptions = function(dataItem) {
return {
dataSource: {
type: "json",
transport: {
read: "Grid/GetEmployees"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 2,
filter: { field: "DeptId", operator: "eq", value: dataItem.DeptId }
},
scrollable: false,
sortable: true,
pageable: true,
filterable:true,
columns: [
{ field: "FirstName", title: "First Name", width: "56px" },
{ field: "LastName", title: "Last Name", width: "110px" },
{ field: "Address", title: "Address" },
{ field: "Phone", title: "Phone", width: "190px" }
]
};
}
}
]);
ASP.NET MVC控制器：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using KendoGridApp.Models;
using Kendo.Mvc;
using Kendo.Mvc.UI;
namespace KendoGridApp.Controllers
{
public class GridController : Controller
{
List<Employee> employees = new List<Employee>();
List<Department> deptList = new List<Department>();
public GridController()
{
Employee employe = new Employee();
employe.FirstName = "First Name";
employe.LastName = "Last Name";
employe.Phone = "+92 302 8888 777";
employe.Address = " Pakistan";
employe.DeptId = 1;
var employe2 = new Employee();
employe2.FirstName = "First Name 2";
employe2.LastName = "Last Name 2";
employe2.Phone = "+92 333 4444 779";
employe2.Address = "UAE";
employe2.DeptId = 2;
var employe3 = new Employee();
employe3.FirstName = "First Name 3";
employe3.LastName = "Last Name 3";
employe3.Phone = "+92 302 4444 779";
employe3.Address = "Sydney,Australia";
employe3.DeptId = 3;
var employe4 = new Employee();
employe4.FirstName = "First Name 4";
employe4.LastName = "Last Name 4";
employe4.Phone = "+92 302 4444 999";
employe4.Address = "Sydney, Australia";
employe4.DeptId = 4;
var employe5 = new Employee();
employe5.FirstName = "First Name 5";
employe5.LastName = "Last Name 5";
employe5.Phone = "+92 302 1111 779";
employe5.Address = "Dubai, UAE";
employe5.DeptId = 5;
var employe6 = new Employee();
employe6.FirstName = "First Name 6";
employe6.LastName = "Last Name 6";
employe6.Phone = "+92 302 0000 779";
employe6.Address = "Dehli, India";
employe6.DeptId = 6;
employees.Add(employe);
employees.Add(employe2);
employees.Add(employe3);
employees.Add(employe4);
employees.Add(employe5);
employees.Add(employe6);
}
// GET: Grid
public ActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult GetEmployees(DataSourceRequest command)
{
int deptId = Convert.ToInt16(Request.Params["filter[filters][0][value]"]);
employees = employees.Where(x => x.DeptId == deptId).ToList();
return Json(employees, JsonRequestBehavior.AllowGet);
}
[HttpGet]
public JsonResult Departments()
{
Department dept = new Department();
dept.DeptId = 1;
dept.DepartmentName = "Information Technology";
dept.Phone = "+1 111 111 111";
dept.Country = "Pakistan";
dept.City = "Lahore";
dept.Description = "This is Description Text 1";
Department dept2 = new Department();
dept2.DeptId = 2;
dept2.DepartmentName = "Mechnical Engineering";
dept2.Phone = "+1 222 111 111";
dept2.Country = "India";
dept2.City = "Dehli";
dept2.Description = "This is Description Text 2";
Department dept3 = new Department();
dept3.DeptId = 3;
dept3.DepartmentName = "Civil Engineering";
dept3.Phone = "+1 111 000 111";
dept3.Country = "Pakistan";
dept3.City = "Islamabad";
dept3.Description = "This is Description Text 3";
Department dept4 = new Department();
dept4.DeptId = 4;
dept4.DepartmentName = "Radiology";
dept4.Phone = "+1 111 222 000";
dept4.Country = "UAE";
dept4.City = "Dubai";
dept4.Description = "This is Description Text 4";
Department dept5 = new Department();
dept5.DeptId = 5;
dept5.DepartmentName = "Defence";
dept5.Phone = "+1 555 888 999";
dept5.Country = "Australia";
dept5.City = "Sydney";
dept5.Description = "This is Description Text 5";
Department dept6 = new Department();
dept6.DeptId = 6;
dept6.DepartmentName = "Socialogy";
dept6.Phone = "+1 555 777 000";
dept6.Country = "United States";
dept6.City = "New York";
dept6.Description = "This is Description Text 6";
deptList.Add(dept);
deptList.Add(dept2);
deptList.Add(dept3);
deptList.Add(dept4);
deptList.Add(dept5);
deptList.Add(dept6);
return Json(deptList, JsonRequestBehavior.AllowGet);
}
}
}
问题：
我面临的问题是在GetEmployees JsonResult函数中，DataSourceRequest命令始终为Filters = null。鉴于，我的请求是显示请求，
查询字符串参数：
take:2
skip:0
page:1
pageSize:2
filter[logic]:and
filter[filters][0][field]:DeptId
filter[filters][0][operator]:eq
filter[filters][0][value]:3
和请求链接就像，
GetEmployees?take=2&skip=0&page=1&pageSize=2&filter%5Blogic%5D=and&filter%5Bfilters%5D%5B0%5D%5Bfield%5D=DeptId&filter%5Bfilters%5D%5B0%5D%5Boperator%5D=eq&filter%5Bfilters%5D%5B0%5D%5Bvalue%5D=3
目前我可以使用HttpRequestWrapper在服务器端获取过滤器，如GetEmployees JsonResult中所述
int deptId = Convert.ToInt16(Request.Params["filter[filters][0][value]"]);
但有没有更好的方法在服务器端获得这些过滤器？例如，使用DataSourceRequest？
感谢。
答案 0 :(得分：0)
这适用于我的服务器端过滤。尝试在变量类型之前添加[DataSourceRequest]标记以解决过滤器绑定问题并处理过滤，您可以使用由ToDataSourceResult()提供的扩展Kendo.Mvc.Extensions。
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
// removed for brevity
// .......
return Json(viewModels.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
希望得到这个帮助。
答案 1 :(得分：0)
在您的dataSource中使用type: "aspnetmvc-ajax",代替type: "json",，并使用控制器中的[DataSourceRequest]属性。
public JsonResult GetEmployees([DataSourceRequest]DataSourceRequest command)
答案 2 :(得分：0)
最后，经过长时间的锤击我找到了解决方案。
在我上面提到的代码中，
替换$ scope.detailGridOptions：（telerikGridController）
dataSource: {
type: "json",
transport: {
read: "Grid/GetEmployees"
},
pageSize: 2,
serverPaging: true,
serverSorting: true
},
。通过
dataSource: {
type: "aspnetmvc-ajax",
transport: {
read: "Grid/GetEmployees",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8"
},
schema:
{
data: "Data",
total: "Total",
errors: "Errors"
},
pageSize: 2,
serverPaging: true,
serverSorting: true
},
在Asp.NET MVC控制器中：
替换
[HttpGet]
public JsonResult GetEmployees(DataSourceRequest command)
。通过
[HttpPost]
public JsonResult GetEmployees(DataSourceRequest command)
一切都将开始工作。您将在DataSourceRequest对象中收到过滤器/排序等。