DataSourceRequest、DataSourceResult、serverpaging 基本框架

 

本範例示範簡單的 serverpaging 作法，當中不去特別操作 DataSourceRequest 物件實體。

 

一、Model

Model 的部份為使用北風資料庫的 Product table。

 

二、Controller

HomeController.cs 的內容為

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using System.Collections.Generic;
using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        private NorthwindEntities db = new NorthwindEntities();
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult GetProducts([DataSourceRequest] DataSourceRequest request)
        {
            //request 物件可視為從前端傳來的 sort、filter 條件因子
            //本例不會去特別操作 request 物件，而只是將 request 物件原封不動地做成 DataSourceResult 結果
            DataSourceResult result = db.Products.ToDataSourceResult(request);

            //將 result 相關數值傳回給前端
            ProductView ProductView = new ProductView();
            ProductView.Items = (IEnumerable<Product>)result.Data;
            ProductView.TotalCount = result.Total;

            return JsonNetResult(ProductView);
        }

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

說明：

1、request 物件可視為從前端傳來的 sort、paging、filter 條件因子。

2、本例不會去特別操作 request 物件，而只是將 request 物件原封不動地做成 DataSourceResult 結果。

 

三、View

Index.cshtml 的內容為

@{
    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({
                transport: {
                    read: {
                        datatype: "json",
                        type: "post",
                        url: "/Home/GetProducts"
                    }
                },
                schema: {
                    data: 'Items',
                    total: 'TotalCount'
                },
                pageSize: 10,
                serverPaging: true,
            });

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

說明：

由於 paging 方式改成 server paging，故 dataSource 裡的 schema.data、schema.total 值也都要定義。

上例的黃色、藍色框框都是改成 server paging 後，都要加上去的。

 

執行結果

 

四、DataSourceRequest、DataSourceResult 類別參考

DataSourceRequest 的內容為

namespace Kendo.Mvc.UI
{
    public class DataSourceRequest
    {
        public DataSourceRequest();

        public int Page { get; set; }
        public int PageSize { get; set; }
        public IList<SortDescriptor> Sorts { get; set; }
        public IList<IFilterDescriptor> Filters { get; set; }
        public IList<GroupDescriptor> Groups { get; set; }
        public IList<AggregateDescriptor> Aggregates { get; set; }
    }
}

 

DataSourceResult 的內容為

namespace Kendo.Mvc.UI
{
    public class DataSourceResult
    {
        public DataSourceResult();

        public IEnumerable Data { get; set; }
        public int Total { get; set; }
        public IEnumerable<AggregateResult> AggregateResults { get; set; }
        public object Errors { get; set; }
    }
}

 

參考資料：

Ajax Binding

Custom Binding