无法看到剑道网格的输出

我在asp.net mvc4中使用Kendo Grid。以下是用contller和view编写的代码。但我没有得到剑道网格的输出。有人能帮我吗？我已经使用ADO.NET实体模型形成了一个名为Contacts的类来连接到数据库在控制器中，我已经将来自Contacts类的数据转换为json。

控制器：

public class HomeController : Controller
 {
        public PersonaEntities db = new PersonaEntities();
        public ActionResult Index()
        {
            return View();
        }
        [AllowAnonymous]
        [HttpGet]
        public JsonResult Getjsondata()
        {
            ViewBag.Title = "Hello World";
            JsonResult jsonResult = new JsonResult();
            var Contacts = db.Contacts.ToList();
            jsonResult.Data = Contacts;
            return Json(jsonResult,JsonRequestBehavior.AllowGet);
        }

然后，我尝试在视图中显示剑道网格，将其数据源作为控制器操作方法。但是我没有得到剑道格的输出。

视图：

@{
    ViewBag.Title = "Getjsondata";
}
<h2>Getjsondata</h2>
<link href="~/Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/kendo/2014.2.716/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/kendo/2014.2.716/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="~/Scripts/kendo/2014.2.716/angular.min.js"></script>
<script src="~/Scripts/kendo/2014.2.716/jquery.min.js"></script>
<script src="~/Scripts/kendo/2014.2.716/kendo.all.min.js"></script>
<script>
    $(document).ready(function () {
        var dataSource = new kendo.data.DataSource({
            transport: { read: { url: "Home/Getjsondata", dataType: "json" } },
            schema: {
                data: function (data) {
                    return data;
                }
            }
        })

        $("#Grid").kendoGrid({
            dataSource: dataSource,
            columns: [
                {
                    field: "id",
                    title: "id"
                },
                {
                    field: "fname",
                    title: "fname"
                },
                {
                    field: "lname",
                    title: "lname"
                },
                {
                    field: "phone",
                    title: "phone"
                }

            ]
        });
    });
</script>
<div id="Grid"></div>

public class HomeController : Controller
{
    public ActionResult GridView()
    {
        return this.View();
    }
    public JsonResult Getjsondata()
    {
        var Contacts = db.Contacts.ToList();
        return Json(Contacts, JsonRequestBehavior.AllowGet);
    }
}

@* css and js imports omitted *@
<script>
    $(document).ready(function () {
        $("#Grid").kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        url: '@Url.Action("Getjsondata")',
                        type: 'GET', // should be POST, though
                    }
                },
                schema: {
                    type: "json",
                    model: {
                        id: "id",
                        fields: {
                            'id' : { type: 'number', editable: false},
                            'fname': { type: 'string' },
                            'lname': { type: 'string' },
                            'phone': { type: 'string' }
                        }
                    }
                }
            },
            columns: [
                {
                    field: "id",
                    title: "id"
                },
                {
                    field: "fname",
                    title: "fname"
                },
                {
                    field: "lname",
                    title: "lname"
                },
                {
                    field: "phone",
                    title: "phone"
                }
            ]
        });
    });
</script>
<div id="Grid"></div>