使用CORS使用ASP.NET Core WebAPI数据填充JQwidgets DataAdapter



我正在尝试使用CORS从ASP.NET Core WebAPI项目中填充JQX.DataAdapter,并且能够看到数据传递到JQWidgets项目,直到我尝试填充填充DataAdapter。JQX.DataAdapter.Records不填充JQX.DataAdapter.RecorDids将填充8个预期的行。

WebAPI项目:

// GET api/changelog
[HttpGet]
public JsonResult Get()
{
    IEnumerable<ApplicationChangeEntryExtension> results = null;
    try
    {
       results = (from x in db.tblApplicationChangeLogEntries
                  select new ApplicationChangeEntryExtension()
                  {
                      ID = x.ID,
                      Application = x.Application,
                      Version = x.Version,
                      ReleaseCandidate = x.ReleaseCandidate,
                      IsReleaseCandidate = x.IsReleaseCandidate,
                      CustomerContent = x.CustomerContent,
                      InternalContent = x.InternalContent,
                      DevDate = x.DevDate,
                      TestDate = x.TestDate,
                      PreReleaseDate = x.PreReleaseDate,
                      PreProductionDate = x.PreProductionDate,
                      DeployDate = x.DeployDate
                  });
    }
    catch(Exception exc)
    {
        Console.WriteLine(exc);
    }
    return Json(results);
}

jqwidgets项目:

$('#ChangeLogLink').on('click', function (event) {
    $('#popupwindowChangeLog').jqxWindow({
        showCollapseButton: false,
        showCloseButton: true,
        draggable: false,
        isModal: true,
        autoOpen: false,
        height: 500,
        width: 850,
        theme: _Theme,
        modalOpacity: 0,
        initContent: function () {
            var _source = {
                type: 'GET',
                datatype: 'json',
                root: 'results',
                datafields: [
                    { name: 'ID', type: 'integer' },
                    { name: 'Application', type: 'string' },
                    { name: 'Version', type: 'string' },
                    { name: 'ReleaseCandidate', type: 'integer' },
                    { name: 'IsReleaseCandidate', type: 'boolean' },
                    { name: 'CustomerContent', type: 'string' },
                    { name: 'InternalContent', type: 'string' },
                    { name: 'DevDate', type: 'date' },
                    { name: 'TestDate', type: 'date' },
                    { name: 'PreReleaseDate', type: 'date' },
                    { name: 'PreProductionDate', type: 'date' },
                    { name: 'DeployDate', type: 'date' }
                ],
                url: 'http://localhost:2512/api/changelog',
                id: 'ID'
            };
            var _dataAdapter = new $.jqx.dataAdapter(_source);
            $("#divChangeLogListContainer").html('<div id="divChangeLogList"></div>');
            $("#divChangeLogList").jqxDataTable({
                source: _dataAdapter,
                width: '100%',
                height: '100%',
                theme: _integronTheme,
                pageable: true,
                pagerButtonsCount: 5,
                sortable: true,
                filterable: false,
                columnsResize: true,
                pageSize: 25,
                altRows: true,
                columns: [
                    { text: 'ID', datafield: 'ID'},
                    { text: 'Application', datafield: 'Application'},
                    { text: 'Version', datafield: 'Version'},
                    { text: 'Release Candidate', datafield: 'ReleaseCandidate'},
                    { text: 'Is Release Candidate', datafield: 'IsReleaseCandidate'},
                    { text: 'Customer Content', datafield: 'CustomerContent'},
                    { text: 'Internal Content', datafield: 'InternalContent'},
                    { text: 'Customer Order #', datafield: 'CustomerOrderID'},
                    { text: 'Dev Date', datafield: 'DevDate', cellsformat: 'M/d/yyyy', cellsalign: 'center', align: 'center'},
                    { text: 'Test Date', datafield: 'TestDate', cellsformat: 'M/d/yyyy', cellsalign: 'center', align: 'center'},
                    { text: 'PreRelease Date', datafield: 'PreReleaseDate', cellsformat: 'M/d/yyyy', cellsalign: 'center', align: 'center'},
                    { text: 'PreProduction Date', datafield: 'PreProductionDate', cellsformat: 'M/d/yyyy', cellsalign: 'center', align: 'center'},
                    { text: 'Deploy Date', datafield: 'DeployDate', cellsformat: 'M/d/yyyy', cellsalign: 'center', align: 'center'}
                ]
            });
        }
    });
    $('#popupwindowChangeLog').jqxWindow('open');
});

我认为您在创建数据适配器或调用其dataBind()方法时错过了autoBind参数。

另外,您还可以使用异步加载创建数据表。

请参见JQWidgets.com上的每种方法的示例

最新更新