我在AngularJS中使用了一个kendo ui调度程序。最初加载调度程序时,应用程序不使用任何过滤器。当向用户显示调度程序时,用户必须能够设置一些过滤器并将这些过滤器提交给web api。但是我无法接收参数。
requestStatus的值可以通过多选:
填充<select ng-model="requestStatus" id="requestStatus" name="requestStatus" class="form-control" multiple>
<option value="0" label="Open">Open/option>
<option value="1" label="Closed">Closed</option>
<button ng-click="filterPlanboard()" class="btn btn-primary">Submit</button>
我的angularjs控制器是这样的:
var requestStatus = "";
$scope.filterPlanboard = function () {
console.log($scope.requestStatus);
var requestStatus = $scope.requestStatus;
console.log(requestStatus); //shows: Array ["0","1"] when all items are selected
$scope.schedulerOptions.dataSource.read({
"Status": requestStatus,
"Type": ["70"]
});
//$scope.schedulerOptions.refresh();
};
$scope.$watch("planboardId", function () {
var schedulerDs = new kendo.data.SchedulerDataSource({
//batch: true,
transport: {
read: {
url: "http://localhost:51714/api/Events/Read/" + $scope.planboardId,//"//demos.telerik.com/kendo-ui/service/tasks",
type: "POST",
dataType: "json",
//data: kendo.stringify({"Color": "Green"}),
contentType: "application/json; charset=utf-8"
},
update: {
url: "http://localhost:51714/api/Events/Update",//"//demos.telerik.com/kendo-ui/service/tasks/update",
dataType: "json",
type: "PUT",
contentType: "application/json"
},
create: {
url: "//demos.telerik.com/kendo-ui/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "//demos.telerik.com/kendo-ui/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
}
else if (operation === "update") {
return kendo.stringify({ planboardId: $scope.planboardId, planboardEvent: options });
}
return kendo.stringify(options);
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "Id" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
//startTimezone: { from: "StartTimezone" },
//endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
//recurrenceId: { from: "RecurrenceID" },
//recurrenceRule: { from: "RecurrenceRule" },
//recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
eventColor: { from: "EventColor", defaultValue: "#333333" }
//isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
});
$scope.schedulerOptions = {
date: new Date("2016/6/26"),
startTime: new Date("2016/6/26 07:00 AM"),
height: 600,
views: planboardViewService.getViews(),
timezone: "Etc/UTC",
eventTemplate: $('#event-template').html(),
ataSource: schedulerDs,
resources: [
{
field: "ownerId",
name: "Owner",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
};
My Web Api就像这样:
[HttpPost]
public IEnumerable<PlanboardEventViewModel> Read(int id, [FromBody] FilterModel filterModel)
{
return _peRepo.GetEvents(id);
}
我的FilterModel:
public class FilterModel
{
public string Status {get;set;}
public string Type {get;set;}
}
当我按下提交按钮时,我可以在fiddler中看到显示以下json字符串(在TextView中):
{"Status":["0","1"],"Type":["70"]}