Asp.net-Mvc

如何使用模型中的數據綁定為劍道數據源

  • May 30, 2017

我有一個空 div,我想使用模型中的數據將其初始化為劍道網格。它應該類似於以下內容,但我無法載入數據

$("#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"
});

關於.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 的範例…

此外,還有一些使用它的例子

@(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" }
   })
)
)

我無法理解/實施,所以請忽略這種解決方案。

目前,我看到一個網格頁腳,上面寫著(4852 個項目中的 1 - 2 個),而我的螢幕上沒有任何頁眉或內容(數據行)。我究竟做錯了什麼?

更新

 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",
       }]
   });

家庭控制器

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

現在帶有標題的網格在那裡但沒有數據存在..如果我將操作更改為 json,它會在頁面上返回純 json

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

您是否嘗試將欄位添加到網格中?

$("#mapsDiv")
   .kendoGrid(
{

   sortable: true,
   dataSource: {
       transport: {
          read:"/Home/About",
          dataType: "odata"
       },
       pageSize: 5
   },
                   columns: [
                       {
                           field: "classname",
                           title: "Class Name"
                       },
                       {
                           field: "firstname",
                           title: "First name"
                       },
                       {
                           field: "surname",
                           title: "Last name"
                       }
                   ],
   pageable: true,
   resizable: true,
   columnMenu: true,
   scrollable:true,
   navigatable: true,
   editable: "incell"

});

我只是訪問了telerik的展示。嘗試跟隨。希望對你有所幫助,我的朋友。或者您可以訪問此連結以參考更多資訊: http: //demos.telerik.com/kendo-ui/grid/remote-data-binding

$("#mapsDiv")
       .kendoGrid(
   {

       sortable: true,
       dataSource: {
           transport: {
              read:"/Home/About",
              dataType: "odata"
           },
           pageSize: 5
       },
      schema: {
                model: {
                       fields: {
                            studentid: { type: "number" },
                            birthdate : { type: "date" },
                            classname : { type: "string" },
                            firstname : { type: "date" },
                            surname : { type: "string" }
                                   }
                               }
                           },
       pageable: true,
       resizable: true,
       columnMenu: true,
       scrollable:true,
       navigatable: true,
       editable: "incell"

   });

引用自:https://stackoverflow.com/questions/44171551