加载资源失败：使用 JqGrid 时服务器响应状态为 500 (Internal Server Error)

Question

我遇到问题，因为服务器返回 500 错误。 当我在 ajax 调用中使用时，相同的 URL 正在运行

网址为 = "TestService.asmx/GetQueryInfo"

jQuery("#list2").jqGrid({
                        mtype: 'POST',
                        postData: "{ TableName: '" + TableName + "', ColumnList: '" + ColumnNames + "' }",
                        serializeGridData: function (postData) {
                            // extend the parameter which will be send to the server
                            postData = JSON.stringify(postData);
                            // serialize the parameters as JSON string
                            alert(postData);
                            return JSON.stringify(postData);
                        },
                        url: "PredictiveDialer.asmx/GetQueryInfo",
                        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                        datatype: 'json',
                        colNames: ['ID', 'Code', 'Name', 'PassWord', 'ClientLevel', 'DeptNo', 'DeptName'],
                        colModel: [
                            { name: 'id', index: 'id', width: 55 },
                            { name: 'code', index: 'code', width: 90 },
                            { name: 'name', index: 'name', width: 100 },
                            { name: 'password', index: 'password', width: 80, align: "right" },
                            { name: 'ClientLevel', index: 'ClientLevel', width: 80, align: "right" },
                            { name: 'DeptNo', index: 'DeptNo', width: 80, align: "right" },
                            { name: 'DeptName', index: 'DeptName', width: 150, sortable: false }
                        ],
                        rowNum: 10,
                        rowList: [10, 20, 30],
                        pager: '#pager2',
                        sortname: 'id',
                        viewrecords: true,
                        sortorder: "id",
                        caption: "JSON Example",
                        jsonReader: {
                            root: function (obj) { return obj.d; },
                            page: function () { return 1; },
                            total: function () { return 1; },
                            records: function (obj) { alert(obj.d.length); return obj.d.length; }
                        }                        
                    });
                    jQuery("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });

WebService 代码如下

[WebMethod]    
public String GetQueryInfo(String TableName, String ColumnList)
{
    String daresult = String.Empty;
    String SQL = String.Empty;
    SqlConnection con = new SqlConnection("MyConnectionString");       
    SQL = "Select " + ColumnList + " From "+ TableName;
    SqlDataAdapter sda = new SqlDataAdapter(SQL, con);
    DataSet ds = new DataSet();
    sda.Fill(ds);
    daresult = DataSetToJSON(ds);
    return daresult;

}

public string DataSetToJSON(DataSet ds)
{
    Dictionary<string, object> dict = new Dictionary<string, object>();
    foreach (DataTable dt in ds.Tables)
    {
        object[] arr = new object[dt.Rows.Count + 1];
        for (int i = 0; i <= dt.Rows.Count - 1; i++)
        {
            arr[i] = dt.Rows[i].ItemArray;
        }
        dict.Add(dt.TableName, arr);
    }
    JavaScriptSerializer json = new JavaScriptSerializer();
    return json.Serialize(dict);
}

上面的代码有问题吗？

更新代码

现在我使用新函数将列名与 ColumnValue inArray 相匹配

服务器端：

[WebMethod]
public Object GetQueryInfo(String TableNames, String ColumnList)
{
    Object daresult = new Object();
    String SQL = String.Empty;
    SqlConnection con = new SqlConnection("MyConnection");
    SQL = "Select top 2 " + ColumnList + " From " + TableNames;
    SqlDataAdapter sda = new SqlDataAdapter(SQL, con);
    DataSet ds = new DataSet();
    sda.Fill(ds);
    daresult = DataTableToJSON(ds.Tables[0]);
    //daresult = DataSetToJSON(ds);
    return daresult;

}

public object DataTableToJSON(DataTable table)
{     
    List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
    foreach (DataRow row in table.Rows)
    {
        Dictionary<string, object> dict = new Dictionary<string, object>();
        foreach (DataColumn col in table.Columns)
        {
            dict[col.ColumnName.ToLower()] = row[col];
        }
        list.Add(dict);
    }       
    return list;
}

客户端：

jQuery("#list2").jqGrid({
                     mtype: 'POST',
                     url: "MyService.asmx/GetQueryInfo", 
                     serializeGridData: function (postData) {
                         return JSON.stringify({
                             TableNames: TableName,
                             ColumnList: ColumnNames
                         });
                     },

                     ajaxGridOptions: { contentType: "application/json; //charset=utf-8" }, //charset=utf-8                       
                     datatype: 'json',
                     colNames: ['ID', 'Code', 'Name', 'PassWord', 'ClientLevel', 'DeptNo', 'DeptName'],
                     colModel: [
                         { name: 'ID', index: "ID", width: 55, key: true, localreader: { id: "ID" } },
                         { name: 'Code', width: 90, align: 'left' },
                         { name: 'Name', width: 100, align: 'left' },
                         { name: 'PassWord', width: 80 },
                         { name: 'ClientLevel', width: 80 },
                         { name: 'DeptNo', width: 80 },
                         { name: 'DeptName', width: 150 }
                     ],
                     jsonReader: {
                         repeatitems: false,
                         root:'d',
                         page: function (obj) { return 1; },
                         total: function (obj) { return 1; },
                         records: function (obj) { return obj.length; },
                         id : "ID"
                     },

                     autoencode: true,
                     gridview: true,
                     rowNum: 10,
                     loadonce: true,
                     rowList: [10, 20, 30],
                     pager: '#pager2',
                     viewrecords: true,
                     caption: "JSON Example",

                     loadError: function (jqXHR, textStatus, errorThrown) {
                         alert('HTTP status code: ' + jqXHR.status + '\n' +
                               'textStatus: ' + textStatus + '\n' +
                               'errorThrown: ' + errorThrown);
                         alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
                     }

                 });
                 jQuery("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });

Answer 1

您当前的代码有很多问题。主要是：您将GetQueryInfo返回的数据显式转换为错误的JSON字符串。该方法应返回Object 而不是String。 .Net 框架会自动为您将返回的对象转换为 JSON 字符串。

第二个问题是postData的错误用法。您永远不应该尝试手动将返回的对象转换为 JSON（就像使用 "{ TableName: '" + TableName + "', ColumnList: '" + ColumnNames + "' }" 一样）。取而代之的是，您可以删除 postData 并将 serializeGridData 的代码修改为类似

serializeGridData: function () {
    return JSON.stringify({
        TableName: TableName,
        ColumnList: ColumnNames
    });
}

它将替换通常发送到服务器的标准参数到TableName和ColumnList。

您永远不应信任服务器代码中的输入数据。 GetQueryInfo 的当前实现是 SQL injection 的理想方式（例如也参见 here）。此类代码不应在生产中使用。

最后一句话。您应该在 jqGrid 中添加一些选项：loadonce: true（因为您没有实现数据的服务器端分页）、gridview: true（以提高网格的性能）、autoencode: true（将输入数据解释为文本和不是 HTML 片段）。我建议您将loadError cellback 添加到网格中（请参阅the answer）。在出现 500 等服务器端错误时显示错误消息。