记录未显示在 Kendo UI MVC 的网格中

Question

我将此代码用于网格 Kendo UI，但它没有在网格中显示数据。我跟踪代码，没错，只是在网格中没有显示记录。我不知道如何解决这个问题。

public JsonResult GridData()
    {
        var products = new List<Product>();
        for (var i = 1; i <= 100; i++)
        {
            products.Add(new Product { Id = i, Name = "Product " + i });
        }
         return Json(products, JsonRequestBehavior.AllowGet);
     }
    public class Product
    {
        public int Id { set; get; }
        public string Name { set; get; }
    }

 <link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />

    <link href="~/Content/kendo/kendo.common.core.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />
    <script src="~/Scripts/kendo/jquery.min.js"></script>

    <script src="~/Scripts/kendo/kendo.web.min.js"></script>
    <script src="~/Scripts/kendo/kendo.all.min.js"></script>

<div id="report-grid"></div>

<script type="text/javascript">
    $(function () {
        var productsDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '/Home/GridData/',
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8',
                    type: 'GET'
                },
                parameterMap: function (options) {
                    return kendo.stringify(options);
                }
            },
            schema: {
                data: "Data",
                total: "Total",
                model: {
                    fields: {
                        "Id": { type: "number" }, //تعیین نوع فیلد برای جستجوی پویا مهم است
                        "Name": { type: "string" },
                        "IsAvailable": { type: "boolean" },
                        "Price": { type: "number" }
                    }
                }
            },
            error: function (e) {
                alert(e.errorThrown.stack);
            },
            pageSize: 5,
            sort: { field: "Id", dir: "desc" },           
            serverPaging: true,
           serverFiltering: true,
           serverSorting: true
        });

        $("#report-grid").kendoGrid({
            dataSource: productsDataSource,
            autoBind: true,
            scrollable: false,
            pageable: true,
            sortable: true,
            filterable: true,
            reorderable: true,
            columnMenu: true,
            columns: [
                { field: "Id", title: "شماره", width: "130px" },
                { field: "Name", title: "نام محصول" },
                {
                    field: "IsAvailable", title: "موجود است",
                    template: '<input type="checkbox" #= IsAvailable ? checked="checked" : "" # disabled="disabled" ></input>'
                },
                { field: "Price", title: "قیمت", format: "{0:c}" }
            ]
        });
    });
</script>   

Answer 1

请尝试使用以下代码片段。

<script type="text/javascript">
    $(function () {
        var productsDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '/Home/GridData',
                    dataType: "json"
                },
                parameterMap: function (options) {
                    return kendo.stringify(options);
                }
            },
            schema: {
                model: {
                    fields: {
                        "Id": { type: "number" }, 
                        "Name": { type: "string" }
                    }
                }
            },
            error: function (e) {
                alert(e.errorThrown.stack);
            },
            pageSize: 5,
            sort: { field: "Id", dir: "desc" },
            //serverPaging: true,
            //serverFiltering: true,
            //serverSorting: true
        });

        $("#report-grid").kendoGrid({
            dataSource: productsDataSource,
            autoBind: true,
            scrollable: false,
            pageable: true,
            sortable: true,
            filterable: true,
            reorderable: true,
            columnMenu: true,
            columns: [
                { field: "Id", title: "شماره", width: "130px" },
                { field: "Name", title: "نام محصول" }
            ]
        });
    });
</script>

如有任何疑问，请告诉我。