我正在尝试显示可通过此 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> 

请您参考如下方法:

尝试以下代码:

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(); 
});