Kendo网格MVVM不显示数据 [英] Kendo grid MVVM not displaying data
本文介绍了Kendo网格MVVM不显示数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Kendo UI的新手，我很遗憾为什么我的网格不会显示JSON数据。请帮助
我的HTML
I am new to Kendo UI and I am lost as to why my grid wont display JSON data. Please help
My HTML
<head>
<title></title>
<link href="include/libraries/kendo/css/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="include/libraries/kendo/css/kendo.common-bootstrap.min.css" rel="stylesheet" />
<script src="include/libraries/jquery/jquery-2.2.2.min.js"></script>
<script src="include/libraries/kendo/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div>
<h4>Add or update a record</h4>
<div data-role="grid">
data-editable="true"
data-toolbar="['create', 'save']"
data-columns="[
{ 'field': 'CourseID', 'width': 270 },
{ 'field': 'CourseName' },
{ 'field': 'IsActive' },
]"
data-bind="source: courses,
visible: isVisible,
events: {
save: onSave
}"
style="height: 200px"></div>
</div>
</div>
<script>
var viewModel = kendo.observable({
isVisible: true,
courses: new kendo.data.DataSource({
schema: {
model: {
id: "CourseID",
fields: {
CourseID: { type: "number" },
CourseName: { type: "string" },
IsActive: { type: "boolean" }
}
}
},
batch: true,
transport: {
read: {
type: "GET",
cache:false,
url: "http://localhost:51447/api/Courses",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: JSON.stringify(options.models) };
}
}
}
})
});
kendo.bind($("#example"), viewModel);
</script>
</div>
</body>
我的控制器代码
My Controller Code
// GET: api/Courses
public IQueryable<object> GetCourses()
{
return db.Courses.Select(
o => new
{
CourseID = o.CourseID,
CourseName = o.CourseName,
IsActive = o.IsActive
});
}
我的JSON数据被退回
My JSON data being returned
[{"CourseID":1,"CourseName":"Beauty Therapy","IsActive":true},{"CourseID":2,"CourseName":"Software Development","IsActive":true},{"CourseID":3,"CourseName":"Bookkeeping and Accounting","IsActive":true}]
我的尝试：
我按照Telerik网站上的示例http://demos.telerik.com/kendo-ui/grid/mvvm
What I have tried:
I followed the example on Telerik's website http://demos.telerik.com/kendo-ui/grid/mvvm
推荐答案
（ ＃example），viewModel）;
< / script >
< / div >
< / body >
("#example"), viewModel); </script> </div> </body>
我的控制器代码
My Controller Code
// GET: api/Courses
public IQueryable<object> GetCourses()
{
return db.Courses.Select(
o => new
{
CourseID = o.CourseID,
CourseName = o.CourseName,
IsActive = o.IsActive
});
}
我的JSON数据被退回
My JSON data being returned
[{"CourseID":1,"CourseName":"Beauty Therapy","IsActive":true},{"CourseID":2,"CourseName":"Software Development","IsActive":true},{"CourseID":3,"CourseName":"Bookkeeping and Accounting","IsActive":true}]
我的尝试：
我按照Telerik网站上的示例http://demos.telerik.com/kendo-ui/grid/mvvm
What I have tried:
I followed the example on Telerik's website http://demos.telerik.com/kendo-ui/grid/mvvm
I终于搞定了。我的解决方案的结构是这样的，它有一个WebAPI和一个Web应用程序。所以在WebApiConfig.cs文件中，我用粗体添加了这行。它是有效的。
I finally got this fixed. The structure of my solution is such that it has a WebAPI and a Web app. So in the WebApiConfig.cs file I added the line in bold and it worked.
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
config.EnableCors();
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
这篇关于Kendo网格MVVM不显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
