kendo.data.DataSource - transport.read.data

 

本文章展示 transport.read.data 屬性的使用方式

 

一、Model

資料庫來源是使用北風資料庫。

 

二、Controller

HomeController.cs 的內容為

using System.Linq;
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(int UnitPrice, int CategoryID)
        {
            return JsonNetResult(db.Products.Where(n => n.UnitPrice < UnitPrice && n.CategoryID == CategoryID));
        }

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

    }
}

 

三、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",
                        data: {
                            UnitPrice: 10,
                            CategoryID: 1
                        }
                    }
                }
            });

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

執行畫面為

 

說明：

transport.read.data 屬性值的指定，其 object 會被當作參數傳到對應的 action GetProducts 裡。

 

參考資料：

transport.read.data