Asp.net mvc 4 如何显示数据库表'；s网格使用开源剑道网格？

我需要使用开源的KendoUI网格显示来自modal的列表。但这不是成功。我连接数据库并将数据作为控制器类中的列表。我需要从数据库中获取数据来完成这个网格

 $("#gridd").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "report/GetData",
                        type:"json"
                    }
                },
                sortable: true,
                pageable: {
                    input: true,
                    numeric: false
                }, height: 430,
                selectable: "multiple",
                columns: [
                            { field: "Users.uName", title: "Kullanıcı", width: "80px" },
                            { field: "Locations.locName", title: "Oda", width: "80px" },
                            { field: "Devices.devName", title: "Cihaz", width: "80px" },
                            { field: "Commands.cName", title: "Komut", width: "80px" },
                            { field: "gasValue", title: "Gaz", width: "80px" },
                            { field: "tempValue", title: "Sıcaklık", width: "130px" },
                            { field: "humValue", title: "Nem", width: "80px" },
                            { field: "AlarmCodes.aName", title: "Alarm", width: "80px" },
                            { field: "ReasonCodes.rName", title: "Nedeni", width: "80px" }]
            }
        });

还有我的控制器类

public JsonResult GetData()
{
    var reports = db.ActivityLog.OrderBy(c => c.dateTime).ToList();
    return Json(reports, JsonRequestBehavior.AllowGet);
}

---

我编辑我当前的代码。现在我看到了网格，但我看不到里面的数据。如何显示它们？

您必须在视图的控制器中提供一个操作，并在网格的read方法中将其作为JSon对象返回。下面的代码显示了使用Razor引擎的示例：

@(Html.Kendo().Grid<System.Data.DataRow>()
        .Name("grdLocations")
        .Columns(columns =>
            {
                columns.Bound("LocationId").Visible(false);
                columns.Bound("Name").Title("Nombre").ClientTemplate("<strong>#:Name # </strong>");
                columns.Bound("Latitude").Title("Latitud").Format("{0:n6}");
                columns.Bound("Longitude").Title("Longitud").Format("{0:n6}");
                columns.Bound("Altitude").Title("Altitud");
                columns.Bound("Comments").Title("Comentario");

                columns.Command(cmd => { }).Width(90);
            })            
        .Pageable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .ServerOperation(false)
            .Model(model =>
            {
                model.Id("LocationId");
                model.Field("LocationId", typeof(int));
                model.Field("Name", typeof(string));
                model.Field("Latitude", typeof(decimal));
                model.Field("Longitude", typeof(decimal));
                model.Field("Altitude", typeof(decimal));
                model.Field("Comments", typeof(string));
            })
            .Read(read => read.Action("Read", "Location"))
        ))

类“Location”有一个静态方法，它返回从数据库填充的数据表。

---

希望有帮助

我终于找到了。这是工作。我重新组织我的控制器端和视图端。我在脚本数据源代码中写了一个错误。现在是工作了

<div id="grid" ></div>
    <div id="details"></div>
    <script>
        var wnd, detailsTemplate;
        $(document).ready(function () {
            $("#grid").kendoGrid({
                sortable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                height: 430,
                selectable: "multiple",
                dataSource: {
                    transport: {
                            read: "/Index/Getdata",
                            type: "json"
                        }
                },
                columns: [
                                { field: "username", title: "User", width: "80px" },
                                { field: "location", title: "Location", width: "80px" },
                                { field: "gas", title: "Gas Value", width: "80px" },
                                { field: "temp", title: "Temp Value", width: "130px" },
                                { field: "hum", title: "Hum Value", width: "80px" }]
              });
         });

---

我必须在javascript命令中完成。该模型是否可能连接到javascript？因为我不能使用Html.Kendo（），它会给出语法错误。如果您使用的是Kendo引擎，您是否在“Kendo”之前写“@”，如果您使用的是ASP。。。请记住，服务器代码以这个字符开头。此外，您必须解析位于模型中的类“Location”中的所有逻辑。

<div id="grid" ></div>
    <div id="details"></div>
    <script>
        var wnd, detailsTemplate;
        $(document).ready(function () {
            $("#grid").kendoGrid({
                sortable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                height: 430,
                selectable: "multiple",
                dataSource: {
                    transport: {
                            read: "/Index/Getdata",
                            type: "json"
                        }
                },
                columns: [
                                { field: "username", title: "User", width: "80px" },
                                { field: "location", title: "Location", width: "80px" },
                                { field: "gas", title: "Gas Value", width: "80px" },
                                { field: "temp", title: "Temp Value", width: "130px" },
                                { field: "hum", title: "Hum Value", width: "80px" }]
              });
         });

public JsonResult Getdata()
        {
            var reports = db.ActivityLog.OrderBy(c => c.dateTime).ToList();
            var collection = reports.Select(x => new
            {
                username = x.Users.uName,
                location = x.Locations.locName,
                gas = x.gasValue,
                temp = x.tempValue,
                hum = x.humValue
            });
            return Json(collection, JsonRequestBehavior.AllowGet);
        }