无法显示从asp中的ajax请求接收的数据表。网络网络

时间:2016-04-21 10:32:17

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

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

  

/ SMART / API /建造/ 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>

1 个答案:

答案 0 :(得分: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'/>" },
    }]
});

}

最后:

调用函数definitionUserGrid()

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