C# .Net MVC-JQXGrid-显示为空行的有效数据

我的JQXGrid正确加载了JSON。我已经确认，在每个步骤中，数据都是有效和正确的。我有一个简单的查询，它从SQL数据库加载所有记录并将它们放在JQXGrid中。db只有一个用于测试的元素

您可以在分页器上看到网格具有正确数量的1个元素。我突出显示了表中唯一存在的行。在每列中，数据再次显示为空白，我已确认数据是正确的。我还确认了数据字段是正确的

JQXGrid：

 <script type="text/javascript">

$("#txtSearch").bind("keypress", {}, keypressInBox);

function keypressInBox(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) { //Enter keycode
        e.preventDefault();

        loadGrid();
    }
};

$(document).ready(function () {

    loadGrid();

});

function loadGrid() {
    var search = $("#txtSearch").val();

    var url = "/AIR/GetAIRs/?search=" + search;

    // prepare the data
    var source =
    {
        datatype: "json",
        datafields: [

             { text:  'EditLink', type: 'string'},
            { text: 'emissionUnit', type: 'string' },
            { text:  'emissionDesc', type: 'string' },
            { text:  'Process', type: 'string' },
            { text:  'ProcessDescription', type: 'string' },
            { text:  'Buildings', type: 'string' },
            { text: 'LastUpdateDate', type: 'date' },

            { text: 'DeleteLink', type: 'string' }
],
        url: url,
        pager: function (pagenum, pagesize, oldpagenum) {
            // callback called when a page or page size is changed.
        }
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#jqxgrid").jqxGrid(
    {
        width: '100%',
        source: dataAdapter,
        selectionmode: 'multiplerowsextended',
        sortable: true,
        pageable: true,
        filterable: true,
        filtermode: 'excel',
        autoheight: true,
        columnsheight: 45,
        columnsresize: true,
        autorowheight: true,
        pagerheight: 60,

        columns: [
             { text: "", datafield: "EditLink", width: 80 },
            { text: "Emission Unit", datafield: "emissionUnit", width: 125 },
            { text: "Emission Description", datafield: "emissionDesc", width: 200 },
            { text: "Process", datafield: "Process", width: 125 },
            { text: "Process Description", datafield: "ProcessDescription", width: 200 },
            { text: "Buildings", datafield: "Buildings", width: 150 },
            { text: "Last Update Date", datafield: "LastUpdateDate", cellsformat: 'd', width: 150 },

            { text: "", datafield: "DeleteLink", width: 80 }

        ]
    });
};

控制器：

        public JsonResult GetAIRs(string search)
    {
        var surveys = dashboardService.GetAIRList();
        var json = Json(surveys, JsonRequestBehavior.AllowGet);
        return json;
    }

达尔：

TL；博士

---

我确认发送到JQXGrid的JSON既有效又正确。JSON包含1行数据。该表以正确的行数呈现，但整行为空。请给出建议或想法。

我发现您的javascript源代码部分存在问题。根据他们对将json数据绑定到网格的定义，数据字段的每个成员都应该有名称和可选类型。但是在您的实现中，您使用文本代替名称

所以应该是这样的：

// prepare the data
    var source =
    {
        datatype: "json",
        datafields: [    
            { name: 'EditLink', type: 'string'},
            { name: 'emissionUnit', type: 'string' },
            { name: 'emissionDesc', type: 'string' },
            { name: 'Process', type: 'string' },
            { name: 'ProcessDescription', type: 'string' },
            { name: 'Buildings', type: 'string' },
            { name: 'LastUpdateDate', type: 'date' },    
            { name: 'DeleteLink', type: 'string' }
        ],
        url: url,
        pager: function (pagenum, pagesize, oldpagenum) {
            // callback called when a page or page size is changed.
        }
    };

---

非常注意细节！

        public List<EmissionUnitMatrixModel> GetAIRList()
    {


        var query = emuserivce.GetAll();



        return query.ToList();
    }

// prepare the data
    var source =
    {
        datatype: "json",
        datafields: [    
            { name: 'EditLink', type: 'string'},
            { name: 'emissionUnit', type: 'string' },
            { name: 'emissionDesc', type: 'string' },
            { name: 'Process', type: 'string' },
            { name: 'ProcessDescription', type: 'string' },
            { name: 'Buildings', type: 'string' },
            { name: 'LastUpdateDate', type: 'date' },    
            { name: 'DeleteLink', type: 'string' }
        ],
        url: url,
        pager: function (pagenum, pagesize, oldpagenum) {
            // callback called when a page or page size is changed.
        }
    };