如何在mvc4中绑定Kendo网格 [英] How to bind Kendo grid in mvc4

问题描述

如何使用kendo Ui绑定网格，



以及如何使用kendo UI操作mvc4中的CRUD操作

解决方案

这很简单。我不发表非常好看。你可以从这里阅读一步一步的教程

如何使用ASP.NET MVC Html5绑定Kendu UI网格









步骤1：在Home Controller内部通过此代码覆盖关于功能。

 publicActionResult关于（）{
 
 BLC_DEVEntitiesob = newBLC_DEVEntities（）; 
 
 var result = ob.Sys_Grade.ToList（）; 
 
 returnJson（结果）; 
 
} 
 
 publicActionResultKendoGrid（）
 
 {
 
 return View（）; 
 
} 

此函数返回Json格式化的等级表数据列表。右键单击KendoGrid（）函数并添加单击以添加新视图。







步骤2：在KendoGrid.cshtml页面中将创建。过去的轰鸣声代码。











< divid>



< divid>



< divid>







< script>

（document）.ready（function（）{

varsourceGridDataSource = newkendo.data.DataSource（{

架构：{

型号：{

id：GradeID，

字段：{

GradeID ：{type：int，editable：false，validation：{required：false，min：1}}，

GradeName：{type：string，editable：true，validation：{required ：true，min：1}}



}

}

}，

运输：{

读取：{

url：@ Url.Action（关于，主页），

dataType：JSON，



方法：POST，

}

}，

批次：true，

pageSize：10

}）;

（＃grid）。kendoGrid（{

dataSource：sourceGridDataSource，

可选：行，

可导航：true，

可过滤：true，

身高：300，

toolbar：[create]，

sortable：true，

resizable：true，

pageable：true，

列：[

{字段：GradeID，标题：ID，宽度：120px，可过滤：true，headerAttributes：{class：gridHeader，样式：font-weight：bold; font-size：13px;}}，

{field：GradeName，title：GradeName，width：120px，filterable：false，headerAttributes ：{class：gridHeader，样式：font-weight：bold; font-size：13px;}}

]，

可编辑：内联

}）;

}）;

< / script>











第3步：



现在运行这个代码和宾果游戏。











下载源代码：Bind Kendo Grid ASP.NET MVC



如果您有任何疑惑或有任何疑问可以随意写在评论部分。我会尽力回答。感谢

How to bind grid by using kendo Ui,

and how to manipulate CRUD operations in mvc4 by using kendo UI

解决方案

This is qit easy. I dont post very lookrative. You can read step by step tutorial from here
How to Bind Kendu UI Grid with ASP.NET MVC Html5




Step 1:Inside Home Controller past this code to overriding About function.

publicActionResult About(){

BLC_DEVEntitiesob = newBLC_DEVEntities();

var result = ob.Sys_Grade.ToList();

returnJson(result);

}

publicActionResultKendoGrid()

{

return View();

}

This function return list of Json formatted ‘Grade’ Table data. Right click on KendoGrid() function and add click to add new View.



Step 2: In KendoGrid.cshtml page will created. Past bellow code in it.





<divid>

<divid>

<divid>



<script>

(document).ready(function () { varsourceGridDataSource = newkendo.data.DataSource({ schema: { model: { id: "GradeID", fields: { GradeID: { type: "int", editable: false, validation: { required: false, min: 1 } }, GradeName: { type: "string", editable: true, validation: { required: true, min: 1 } } } } }, transport: { read: { url: "@Url.Action("About", "Home")", dataType: "JSON", method: "POST", } }, batch: true, pageSize: 10 });

("#grid").kendoGrid({ dataSource: sourceGridDataSource, selectable: "row", navigatable: true, filterable: true, height: 300, toolbar: ["create"], sortable: true, resizable: true, pageable: true, columns: [ { field: "GradeID", title: "ID", width: "120px", filterable: true, headerAttributes: { "class": "gridHeader", style: "font-weight: bold;font-size: 13px;" } }, { field: "GradeName", title: "GradeName", width: "120px", filterable: false, headerAttributes: { "class": "gridHeader", style: "font-weight: bold;font-size: 13px;" } } ], editable: "inline" }); });

</script>





Step 3:

Now run this code and bingo.





Download Source Code: Bind Kendo Grid ASP.NET MVC

If you have any confusion or have any question feel free to write on comments section. I will try to answer it. Thanks

这篇关于如何在mvc4中绑定Kendo网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！