如何使用模型中的数据绑定为Kendo数据源 [英] How to use data from Model to bind as kendo datasource

问题描述

我有一个空的div，我想使用来自Model ..的数据初始化为kendo网格.它应该类似于以下内容，但是我无法加载数据

i have an empty div that i want to initialize into a kendo grid using data from Model..it should be something like the following but i am unable to load data

$("#mapsDiv").kendoGrid({
    sortable: true,
    dataSource: {
                    transport: {
                                   read:"/Home/About",
                                   dataType: "odata"
                               },
                    pageSize: 5
                },
    pageable: true,
    resizable: true,
    columnMenu: true,
    scrollable:true,
    navigatable: true,
    editable: "incell"
});

About.cshtml

@model List<KendoExample.Entities.ShortStudent>

<div class="row">
<div class="col-md-12 table-responsive" id="mapsDiv">        
</div>

我的家庭控制器如下

List<ShortStudent> students = new List<ShortStudent>();

ShortStudent student1 = new ShortStudent();
student1.birthdate = new DateTime(1999, 4, 30);
student1.classname = "1B";
student1.firstname = "Fredie";
student1.surname = "Fletcher";
student1.studentid = 1;

ShortStudent student2 = new ShortStudent();
student2.birthdate = new DateTime(2010, 5, 4);
student2.classname = "1B";
student2.firstname = "Lee";
student2.surname = "Hobbs";
student2.studentid = 2;

students.Add(student1);
students.Add(student2);

return View(students);

我看过使用json而不是odata的示例...

I have seen examples using json but not odata...

此外，还有一些像

@(Html.Kendo().Scheduler<MeetingViewModel>()
.Name("scheduler")
.Editable(false)
.DataSource(ds => ds
    .Custom()
    .Batch(true)
    .Schema(schema => schema
        .Model(m =>
        {
            m.Id(f => f.MeetingID);
            m.Field("title", typeof(string)).DefaultValue("No title").From("Title");
            m.Field("start", typeof(DateTime)).From("Start");
            m.Field("end", typeof(DateTime)).From("End");
            m.Field("description", typeof(string)).From("Description");
            m.Field("recurrenceID", typeof(int)).From("RecurrenceID");
            m.Field("recurrenceRule", typeof(string)).From("RecurrenceRule");
            m.Field("recurrenceException", typeof(string)).From("RecurrenceException");
            m.Field("isAllDay", typeof(bool)).From("IsAllDay");
            m.Field("startTimezone", typeof(string)).From("StartTimezone");
            m.Field("endTimezone", typeof(string)).From("EndTimezone");
        }))
    .Transport(new {
        //the ClientHandlerDescriptor is a special type that allows code rendering as-is (not as a string)
        read = new Kendo.Mvc.ClientHandlerDescriptor() {HandlerName = "customRead" }
    })
)
)

我无法理解/实现，因此请忽略这种解决方案.

which i am unable to understand/implement so please ignore this kind of a solution.

当前，我看到一个网格页脚，上面显示(4852个项目中的1-2个)屏幕上没有任何标题或内容(数据行).我在做什么错了?

Currently i see a grid footer that says (1 - 2 of 4852 items) without any header or content(datarows) on my screen. What am I doing wrong?

更新

  var dataSource = new kendo.data.DataSource(
       {
           transport: {
               read: {
                   url: '@Url.Action("About", "Home")',
                   contentType: "application/json",
                   dataType: "json"
               }
           },
           schema: {
               model: {
                   fields: {
                       firstname: { type: "string" },
                       surname: { type: "string" },
                       birthdate: { type: "date" },
                       classname: { type: "string" }
                   }
               }
           },
           type: "json",
           serverPaging: false,
           serverFiltering: true,
           serverSorting: false
       }
    );

 $("#mapsDiv")
        .kendoGrid(
    {

        sortable: true,
        dataSource: {

            transport: {
                read: dataSource
            },
            pageSize: 2
        },
        pageable: true,
        resizable: false,
        columnMenu: true,
        scrollable:true,
        navigatable: true,
        editable: "incell",
        columns:[{
            field: "firstname",
        },{
            field: "surname",
        },{
            field: "classname",
        },{
            field: "age",
        }]
    });

HomeController

 public ActionResult About()
    {
   ....
     return View(students);
 }

现在有带标题的网格，但是没有数据. 如果我将操作更改为json，它将在页面上返回纯json

Now the grid with header is there but no data is present.. If i change action to json, it returns plain json on the page

public ActionResult About()
    {
   ....
     return Json(students, JsonRequestBehavior.AllowGet);
 }

推荐答案

所以这是我发现应该直接进行的操作:)

So here is what i found what should have been straight forward :)

var values = @Html.Raw(Json.Encode(@Model));

 $("#MapDetails")
        .kendoGrid(
    {
        sortable: true,
        dataSource: {
            data:values,
            pageSize: 2
        },
        pageable: true,
        resizable: false,
        columnMenu: true,
        scrollable:true,
        navigatable: true,
        editable: "incell",
        columns:[{
            field: "firstname",
        },{
            field: "surname",
        },{
            field: "classname",
        },{
            field
        : "age",
        }]

    });

这篇关于如何使用模型中的数据绑定为Kendo数据源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！