hello Kendo UI grid - use @Html.Kendo().Grid()

Posted on 2020-04-12 Edited on 2023-11-24 In Kendo UI Views: Disqus:

範例如下

一、Model

model 的部份，我是用 ADO.NET Entity Data Model 方式

去使用北風資料庫，此範例只會用到 Product 資料表

二、Controller

HomeController 的內容為

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(db.Products.ToList());
        }
    }
}

三、View

Index.cshtml 的內容為

@{
    ViewBag.Title = "Home Page";
}

@model IEnumerable<WebApplication1.Models.Product>

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

@(Html.Kendo().Grid(Model) //Bind the grid to ViewBag.Products
    .Name("grid")
    .Columns(columns =>
    {
        //Create a column bound to the ProductID property.
        columns.Bound(product => product.ProductName);
    })
    .Pageable() //Enable the paging.
    .Sortable() //Enable the sorting.
)

四、執行結果

在執行後的畫面如下，可以很明顯地看到有分頁功能