MVC4和Kendo UI Grid。连接到数据源的问题(Kendo UI Open Source)

时间:2013-08-14 12:12:56

标签: asp.net-mvc-4 kendo-ui kendo-grid

我正在使用带有MVC4项目和实体框架的Kendo-UI的OpenSource版本。有人可以解释如何在我的.cshtml文件中将kendo-ui网格连接到我的数据源。我习惯于只是创建一个视图并使用@model从我的控制器中提取信息。因为我没有Kendo-UI的ASP.NET服务器标签。在数据源之后我会放什么:在javascript中声明我的网格时的一部分?

1 个答案:

答案 0 :(得分:0)

请尝试使用以下代码段。 如果有任何疑虑,请告诉我。

查看

<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="Grid">
</div>
<script>
$(document).ready(function () {

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "Home/GetDummydata",
                dataType: "json"
            }
        }
        ,
        schema: {
            data: function (data) {
                return data;
            }
        }
    });


    $("#Grid").kendoGrid({
        dataSource: dataSource,
        columns: [
           {
               field: "ID",
               title: "ID"
           },
           {
               field: "Name",
               title: "Name"
           }
       ]
    });
});


</script>

<强> CONTROLLER

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }


    [AllowAnonymous]
    [HttpGet]
    public JsonResult GetDummydata()
    {
        List<TestModels> models = new List<TestModels>();

        for (int i = 1; i < 6; i++)
        {
            TestModels t1 = new TestModels();
            t1.ID = i;
            t1.Name = "Name" + i;

            models.Add(t1);
        }

        return Json(models, JsonRequestBehavior.AllowGet);
    }

}

<强> MODEL

public class TestModels
{
    public int ID { get; set; }
    public string Name { get; set; }

}