javascript - Syncfusion ejGrid 不显示来自 Web Api 源的数据

Question

我有以下 Controller ，编码如下，返回 JSON:

public class CustomersController : ApiController
{
    public object Get()
    {
        NorthwindEntities db = new NorthwindEntities();
        var data = db.Customers.ToList();
        return data;
    }

我通过将其添加到我的 WebApiConfig.cs 文件来确保我的序列化程序使用 JSON:

        config.Formatters.Remove(config.Formatters.XmlFormatter);
        config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json"));
        config.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;

现在我使用 Syncfusion Javascript ejGrid 尝试了以下代码:

        $('#Grid').ejGrid({
            dataSource: ej.DataManager({ url: "http://localhost:54027/api/Customers/" }),
            toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] },
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
            isResponsive: true,
            enableResponsiveRow: true,
            allowPaging: true,
            allowFiltering: true,
            allowGrouping: true,
            allowResizing: true,
            allowSorting: true,
            columns: [
                { field: "CustomerID", isPrimaryKey: true, headerText: 'CustomerID', validationRules: { required: true, minlength: 30 }, width: 100 },

                { field: "CompanyName", headerText: 'CompanyName', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "ContactName", headerText: 'ContactName', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "ContactTitle", headerText: 'ContactTitle', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "Address", headerText: 'Address', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "City", headerText: 'City', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "Region", headerText: 'Region', validationRules: { required: true, minlength: 30 }, width: 100 },
                { field: "PostalCode", headerText: 'PostalCode', validationRules: { required: true, minlength: 10 }, width: 70, priority: 3 },
                { field: "Country", headerText: 'Country', validationRules: { required: true, minlength: 30 }, width: 100 },
                {
                    headerText: "Manage Records",
                    commands: [
                        { type: ej.Grid.UnboundType.Edit, buttonOptions: { contentType: "imageonly", prefixIcon: "e-edit" } },
                        { type: ej.Grid.UnboundType.Delete, buttonOptions: { contentType: "imageonly", prefixIcon: "e-delete" } },
                        { type: ej.Grid.UnboundType.Save, buttonOptions: { contentType: "imageonly", prefixIcon: "e-save" } },
                        { type: ej.Grid.UnboundType.Cancel, buttonOptions: { contentType: "imageonly", prefixIcon: "e-cancel" } }
                    ],
                    isUnbound: true
                }
            ]
        });

当我运行这个时，网格是空的。我认为问题出在数据源中，因为 Chrome 控制台报告错误:无法读取未定义的属性“长度”。或者，因为列表是空的，所以它试图获取空内容的长度。

Answer 1

您应该以 Item 和 Count 的形式返回数据，并且在绑定(bind)数据源时还需要设置适配器。我在这里发布了代码。

var dataManager = ej.DataManager({
url:"/api/订单",
适配器:new ej.WebApiAdaptor()
});

C#

return new {
            Items = data, Count = data.Count()
        };

如需更多引用，请访问此链接。

https://help.syncfusion.com/js/grid/data-binding#webapi

问候，苏尼尔·普拉巴卡 C