看不到 Kendo Grid 的输出

Question

我正在努力在 asp.net mvc4 中使用 Kendo Grid。这是用 contrller 和 view 编写的代码。但是我没有在输出中得到 Kendo Grid。有人可以帮我吗？ 我已经使用 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>

Answer 1

Json 方法将数据封装到JsonResult already 中。您的回复是双重包装的。将数据直接传递到Json 方法中。

您需要两项操作，一项用于静态视图，一项用于JsonResult：

public class HomeController : Controller
{
    public ActionResult GridView()
    {
        return this.View();
    }

    public JsonResult Getjsondata()
    {
        var Contacts = db.Contacts.ToList();
        return Json(Contacts, JsonRequestBehavior.AllowGet);
    }
}

对于视图，您需要一个GridView.cshtml：

@* 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>

页面的网址是~/Home/GridView。打开页面时，控制器只返回静态页面GridView.cshtml。在客户端（您的浏览器）加载页面后，JavaScript 代码将运行并向 ~/Home/Getjsondata 操作发出 AJAX 请求，以加载剑道网格的数据。

Answer 2

我发现我正在手动加载脚本 jquery.js，我认为默认情况下会在浏览器中加载它。另外我发现脚本和 css 文件只需要在共享布局文件中提及，而无需在看法。

jquery asp.net-mvc