kendo.data.DataSource - schema.model

 

由於從後端接收來的 json 資料其本質上就是一整個字串，

也不能在前端及時區分出 key、data type …等等，

這時可用 schema.model 來對後端接收到的資料，

將其資料模型加以重定義成 kendo 想要的型式，來看以下範例。

 

特別說明，以下範例是不能執行的，其目的只是用來輔助說明 schema 與 schema.model 如何使用之概念

 

一、Model

Person.cs 的內容為

namespace WebApplication1.Models
{
    public class Person
    {
        public string id { get; set; }
        public string name { get; set; }
        public Person(string id, string name)
        {
            this.id = id;
            this.name = name;
        }
    }
}

 

PersonViewModel.cs 的內容為

using System.Collections.Generic;

namespace WebApplication1.Models
{
    public class PersonViewModel
    {
        public IEnumerable<Person> Items { get; set; }

        public int TotalCount { get; set; }
    }
}

 

二、Controller

HomeController.cs 的內容為

using System.Collections.Generic;
using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult GetUsers()
        {
            List<Person> m = new List<Person>();
            m.Add(new Person("001.20", "Tim"));
            m.Add(new Person("-001.30", "Bill"));

            PersonViewModel pv = new PersonViewModel();
            pv.Items = m;
            pv.TotalCount = m.Count;

            return JsonNetResult(pv);
        }

        private ContentResult JsonNetResult(object model)
        {
            return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model), "application/json", System.Text.Encoding.UTF8);
        }
    }
}

 

三、View

Index.cshtml

@model IEnumerable<WebApplication1.Models.Person>
@{
    ViewBag.Title = "Home Page";


}

<div id="grid"></div>

@section scripts{
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
    <script>
        $(document).ready(init);

        function init() {
            var dataSource = new kendo.data.DataSource({
                type: 'aspnetmvc-ajax', // 跟 server 端的 DataSourceRequest 技術有關
                transport: {
                    read: {
                        datatype: "json",
                        type: "post",
                        url: "/Home/GetUsers",
                    }
                },
                schema: {
                    data: 'Items', // 指定資料來源為從後端傳來的某屬性之子集合
                    total: 'TotalCount', // total 屬性值為資料的總筆數，常用來作 server paging
                    model: {
                        id: 'U_ID', // 其名稱的指定就像是指定資料表的 key 一樣，目的是做給 kendo 元件使用
                        fields: { // fields 用來重定義從 server 端傳來的資料表欄位的資料型態，目的是做給 kendo 元件使用
                            id: { type: 'number' },
                            name: { type: 'string' }
                        }
                    }
                }
            });

            $("#grid").kendoGrid({
                dataSource: dataSource
            });
        }
    </script>
}

注意，schema.model.id 的指定會影響到 grid.selectedKeyNames();出來的值

 

參考資料：

schema.model

selectedKeyNames