无法在 asp 中显示从 ajax 请求接收到的数据表。网络接口答案

【问题标题】：cannot display a table of data received from an ajax request in asp. net web api无法在 asp 中显示从 ajax 请求接收到的数据表。网络接口
【发布时间】：2016-08-14 11:53:13
【问题描述】：

我正在尝试显示由该 url 可访问的以下 restful web api 服务返回的数据表。问题是它只显示表格的标题而不显示内容。

/SMART/api/Build/GetAll

这个 url 将作为输出返回一个名为 release 的对象的 IList，我已经对此进行了测试。发布对象的结构如下。

 [Table("releases")]
    public class Release
    {

        [Key]
        public int Id { get; set; }

        [StringLength(10)]
        [Column("Name")]
        public string Name { get; set; }

        [StringLength(10)]
        [Column("Type")]
        public string Type { get; set; }
        [Column("to_be_displayed")]
        public bool ToBeDisplayed { get; set; }

    }

这是我的 javascript 代码

$.ajax({
    type: 'GET',
    url: '/SMART/api/Build/GetAll',
    dataType: 'json',
    contentType: "application/json",
    success: function (data) {
        alert(data);
        // Get the JSON Data
        var Data = new kendo.data.DataSource({

            schema: {
                model: {
                    id: "release.id",
                    fields: {
                        id: { type: "string" },
                        Name: { type: "string" },
                        Type : {type : "string"},
                        ToBeDisplayed: { type: "boolean" },


                    }
                }
            }
        });
        //Create a tab for the wip release



        $('#listGrid').kendoGrid({
            scrollable: false,
            sortable: true,
            resizable: true,
            filterable: true,
            autoSync: true,
            dataSource: Data,
            columns: [
            { field: "release.id", title: "Id" },
            { field: "release.Name", title: "Name" },
            { field: "release.ToBeDisplayed", title: "To be displayed", template: "<input name='ToBeDisplayed' type='checkbox' data-bind='checked: ToBeDisplayed' #= ToBeDisplayed ? checked='checked' : '' # class='build-tobedisplayed-checkbox'/>" },

            ]
        });
    }
});

这是我的cshtml代码

<div id="listGrid" class="k-grid-content">
    <div class="k-loading-mask" style="width:100%;height:100%"><span class="k-loading-text">Loading...</span><div class="k-loading-image"><div class="k-loading-color"></div></div></div>
</div>

【问题讨论】：

我不是剑道 UI 专家，但很明显，您的 data 变量从未分配给任何东西。如果你不在DataSource 中分配它，你怎么能在你的网格中显示它？

标签： javascript asp.net ajax asp.net-web-api kendo-ui

【解决方案1】：

试试下面的代码：

function definitionUserGrid() {

var baseUrl = '/SMART/api/Build/GetAll';
var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: baseUrl,
            dataType: "json"
        },
        parameterMap: function (options, operation) {
            if (operation !== "read" && options.models) {
                return {
                    models: kendo.stringify(options.models)
                };
            }
        }
    },
    batch: true,
    pageSize: 15
});

$("#listGrid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    reorderable: true,
    resizable: true,
    sortable: true,
    filterable: {
        mode: "row"
    },
    columns: [
    {field: "Id",
        title: "Id",
    }, {
        filterable: {
            cell: {
                enabled: true,
                showOperators: false,
                operator: "contains"
            }
        },
        field: "Name",
        title: "Name"
    }, {
        filterable: {
            cell: {
                enabled: true,
                showOperators: false,
                operator: "contains"
            }
        },
        field: "ToBeDisplayed",
        title: "To be displayed",
        template: "<input name='ToBeDisplayed' type='checkbox' data-bind='checked: ToBeDisplayed' #= ToBeDisplayed ? checked='checked' : '' # class='build-tobedisplayed-checkbox'/>" },
    }]
});

}

最后：

调用函数定义UserGrid()

$(function(){
    definitionUserGrid();
});

【讨论】：