Question

我正在使用asp.net mvc4中的Kendo Grid。这是用控制器和视图编写的代码。但是我没有输出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);
        }

然后我尝试在视图中通过将其数据源作为控制器操作方法来显示kendo网格。但是我没有将输出作为kendo网格。

查看：

@{
    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中。你的reposonse被双重包裹。将数据直接传递到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请求以加载kendo网格的数据。

Answer 2

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

jquery asp.net-mvc

无法看到Kendo Grid的输出

2 个答案: