在ASP.NET MVC 4中使用Kendo UI Grid
Kendo UI 是Telerik推出的一套based on jQuery 的 Framework，提供了很多控件(Menu 、Grid 、Combox等...)， 底層以Html5 + jQuery 來打造，并且兼容于各大瀏覽器，包含IE7、IE8。相關介紹可以參考AJAX式數據清單的新選擇-Kendo UI Grid。
以下內容參考臺灣的黑老大的文章：在ASP.NET MVC 4中使用Kendo UI Grid
- 使用NuGet安裝KendoUIWeb及KendoGridBinder
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Drawing;
using System.Reflection;
namespace MvcApplication2.Models
{
??? public class SimMemberInfo
??? {
??????? public string UserNo; //會員編號
??????? public string UserName; //會員名稱
??????? public DateTime RegDate; //注冊日期
??????? public int Points; //累積點數
??????? //模擬數據源
??????? public static List<SimMemberInfo> SimuDataStore = null;
??????? static SimMemberInfo()
??????? {
??????????? Random rnd = new Random();
??????????? //借用具名顏色名稱來產生隨機數據
??????????? string[] colorNames = typeof(Color)
??????????????? .GetProperties(BindingFlags.Static | BindingFlags.Public)
??????????????? .Select(o => o.Name).ToArray();
??????????? SimuDataStore =
??????????????? colorNames
??????????????? .Select(cn => new SimMemberInfo()
??????????????? {
??????????????????? UserNo = string.Format("C{0:00000}", rnd.Next(99999)),
??????????????????? UserName = cn,
??????????????????? RegDate = DateTime.Today.AddDays(-rnd.Next(1000)),
??????????????????? Points = rnd.Next(9999)
??????????????? }).ToList();
??????? }
??? }
}
???????? bundles.Add(new ScriptBundle("~/bundles/kendoUI").Include("~/Scripts/kendo/2012.1.322/kendo.web.min.js"));
???????? //經實測，SytleBundle virtualPath參數使用"2012.1.322"會有問題，故向上搬移一層
???????? //將/Content/kendo/2012.1.322的內容搬至Content/kendo下???????
???????? bundles.Add(new StyleBundle("~/Content/kendo/css").Include("~/Content/kendo/kendo.common.min.css",?????
???????????? "~/Content/kendo/kendo.blueopal.min.css"
???????????? ));
? 由于CSS文件路徑會被當成圖片文件的基準，原本Kendo UI的.css及圖圖片被放在~/Content/kendo/2012.1.322/下，理論上StyleBundle應設成"~/Content/kendo/2012.1.322/css”，才能引導瀏覽器到該目錄下取用圖文件。不幸地，我發現StyleBundle的virtualPath參數出現2012.1.322時，會導致Styles.Render("~/Content/kendo/2012.1.322/css”)時傳回HTTP 404錯誤~ 為克服問題，我決定將2012.1.322目錄的內容向上搬一層，直接放在~/Content/keno目錄下，并將virtualPath設成"~/Content/kendo/css"，這樣就能避開問題。
在~/Views/Shared/_Layout.cshtml中:
<head>
??? <meta charset="utf-8" />
??? <meta name="viewport" content="width=device-width" />
??? <title>@ViewBag.Title</title>
??? @Styles.Render("~/Content/themes/base/css", "~/Content/css", "~/Content/kendo/css")?
??? @Scripts.Render("~/bundles/modernizr")??
</head>
<body>
??? @RenderBody()
??? @Scripts.Render("~/bundles/jquery", "~/bundles/kendoUI")
??? @RenderSection("scripts", required: false)
</body>
</html>
- 在Index.cshtml的代碼如下：
@section Scripts
{
??? <style>
??????? body { font-size: 9pt; }
??????? #dvGrid { width: 500px; }
??????? span.hi-lite { color: red; }
??????? #dvGrid th.k-header { text-align: center; }
??? </style>
??? <script>
??????? $(function () {
??????????? //建立數據源對象
??????????? var dataSrc = new kendo.data.DataSource({
??????????????? transport: {
??????????????????? read: {
??????????????????????? //以下其實就是$.ajax的參數
??????????????????????? type: "POST",
??????????????????????? url: "/Home/Grid",
??????????????????????? dataType: "json",
??????????????????????? data: {
??????????????????????????? //額外傳至后方的參數
??????????????????????????? keywd: function () {
??????????????????????????????? return $("#tKeyword").val();
??????????????????????????? }
??????????????????????? }
??????????????????? }
??????????????? },
??????????????? schema: {
??????????????????? //取出數據數組
??????????????????? data: function (d) { return d.data; },
??????????????????? //取出數據總筆數(計算頁數用)
??????????????????? total: function (d) { return d.total; }
??????????????? },
??????????????? pageSize: 10,
??????????????? serverPaging: true,
??????????????? serverSorting: true
??????????? });
??????????? //JSON日期轉換
??????????? var dateRegExp = /^\/Date\((.*?)\)\/$/;
??????????? window.toDate = function (value) {
??????????????? var date = dateRegExp.exec(value);
??????????????? return new Date(parseInt(date[1]));
??????????? }
??????????? $("#dvGrid").kendoGrid({
??????????????? dataSource: dataSrc,
??????????????? columns: [
??????????????????? { field: "UserNo", title: "會員編號" },
??????????????????? { field: "UserName", title: "會員名稱",
??????????????????????? template: '#= "<span class=\\"u-name\\">" + UserName + "</span>" #'
??????????????????? },
??????????????????? { field: "RegDate", title: "加入日期",
??????????????????????? template: '#= kendo.toString(toDate(RegDate), "yyyy/MM/dd")#'
??????????????????? },
??????????????????? { field: "Points", title: "累積點數" },
??????????????? ],
??????????????? sortable: true,
??????????????? pageable: true,
??????????????? dataBound: function () {
??????????????????? //AJAX數據Bind完成后觸發
??????????????????? var kw = $("#tKeyword").val();
??????????????????? //若有設關鍵詞，做Highlight處理
??????????????????? if (kw.length > 0) {
??????????????????????? var re = new RegExp(kw, "g");
??????????????????????? $(".u-name").each(function () {
??????????????????????????? var $td = $(this);
??????????????????????????? $td.html($td.text()
?????????????????????????? .replace(re, "<span class='hi-lite'>$&</span>"));
??????????????????????? });
??????????????????? }
??????????????? }
??????????? });
??????????? //按下查詢鈕
??????????? $("#bQuery").click(function () {
??????????????? //要求數據源重新讀取(并指定切至第一頁)
??????????????? dataSrc.read({ page: 1, skip: 0 });
??????????????? //Grid重新顯示數據
??????????????? $("#dvGrid").data("kendoGrid").refresh();
??????????? });
??????? });
??? </script>
}
<div style="padding: 10px;">
??? 關鍵詞:
??? <input id="tKeyword" /><input type="button" value="查詢" id="bQuery" />
</div>
<div id="dvGrid">
</div>
- HomeController.cs的Grid() Action ：
????? public JsonResult Grid(KendoGridRequest request, string keywd)
????? {
????????? var result = SimMemberInfo.SimuDataStore.Where(o => o.UserName.Contains(keywd));
????????? return Json(new KendoGrid<SimMemberInfo>(request, result));
????? }
???? 只要return Json(new KendoGrid<T>(KendoGridRequest, IEnumerable<T>))，余下的換頁、排序，甚至字段過濾功能，就都交給KendoGridBinder全權處理啰!
轉載于:https://www.cnblogs.com/shanyou/archive/2012/06/22/2558609.html
總結
以上是生活随笔為你收集整理的在ASP.NET MVC 4中使用Kendo UI Grid的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 两台电脑可以用同一IP上网吗？
- 下一篇： Apache添加mod_rewrite模