jqGrid没有在MVC中显示json数据

Posted 2023-05-09

【中文标题】jqGrid没有在MVC中显示json数据

【英文标题】：jqGrid not showing json data in MVC

【发布时间】：2017-12-20 17:06:01

【问题描述】：

jqGrid 没有显示从 MVC 控制器获取的 json 数据，它还有一个 emptyrecords 标签，在这种情况下也是不可见的。这是我的 jQuery 代码-

$(function () 
            $("#JQGrid1").jqGrid(
                url: "/CertificateDetails/GetCertificateDetails",
                datatype: 'json',
                mtype: 'Get',
                colNames: ['Name', 'Issuer', 'Location', 'Private Key[Yes/No]'],
                //data: dataArray,
                colModel: [
                   
                       key: false,
                       name: 'Name',
                       index: 'Name',
                       editable: false
                   ,
                   
                       key: false,
                       name: 'Issuer',
                       index: 'Issuer',
                       editable: false
                   ,
                   
                       key: false,
                       name: 'Location',
                       index: 'Location',
                       editable: false
                   ,
                   
                       key: false,
                       name: 'HasPrivateKey',
                       index: 'HasPrivateKey',
                       editable: false
                   
                ],
                height: '100%',
                viewrecords: true,
                caption: "Certificate Details",
                emptyrecords: "No record to display!!"
            );
        );

控制器代码：

CertDetails cd = new CertDetails();
        public ActionResult Index()
        
            return View();
        
        //
        // GET: /CertificateDetails/
        public ActionResult GetCertificateDetails()
        
            var stores = new Dictionary<StoreName, string>()
                
                        StoreName.My, "Personal",
                        StoreName.Root, "Trusted roots",
                        StoreName.TrustedPublisher, "Trusted publishers",
                        StoreName.AddressBook, "Address Book",
                        StoreName.AuthRoot, "Auth Root",
                        StoreName.CertificateAuthority, "Certificate authority",
                        StoreName.Disallowed, "Disallowed",
                        StoreName.TrustedPeople, "Trusted people"
                // and so on
                .Select(s => new  store = new X509Store(s.Key, StoreLocation.LocalMachine), location = s.Value ).ToArray();

            foreach (var store in stores)
                store.store.Open(OpenFlags.ReadOnly); // open each store

            var list = stores.SelectMany(s => s.store.Certificates.Cast<X509Certificate2>()
                .Select(mCert => new CertDetails
                
                    HasPrivateKey = mCert.HasPrivateKey ? "Yes" : "No",
                    Name = mCert.FriendlyName != "" ? mCert.FriendlyName : "Unavailable",
                    Location = s.location,
                    Issuer = mCert.Issuer
                )).ToList();

            return Json(list,JsonRequestBehavior.AllowGet);
        

这是控制器动作方法返回的数据-

["Name":"Unavailable","HasPrivateKey":"Yes","Location":"Personal","Issuer":"CN=Dell Issuing Certificate Authority 302, OU=MS PKI, O=Dell Inc.","Name":"IIS Express Development Certificate","HasPrivateKey":"Yes","Location":"Personal","Issuer":"CN=localhost"]

我从控制器获取 JSON 格式的数据，但 jqGrid 既没有显示任何数据，也没有显示空记录标签。知道如何解决这个问题吗？

【问题讨论】：

您使用哪个版本的jqGrid以及来自哪个fork的jqGrid（free jqGrid，商业Guriddo jqGrid JS或版本中的旧jqGrid =4.7)?您能否将您的问题附加到从服务器返回的测试数据中？您可以使用 Chrome/IE/Firefox 的开发者工具来查看确切的 HTTP 响应。

@Oleg，我正在使用 jQuery.jqGrid，可在 nuget 上免费获得，版本为 4.4.4。我在 var list 中获取数据，但它没有显示在网格中。

我建议你卸载已经死了很久的复古版本4.4.4，并在当前版本：4.14.1安装free-jqGrid NuGet包。测试 JSON 数据呢？顺便说一句，我建议您从colModel 中删除不需要的key: false,editable: false 和index 属性并添加jqGrid 选项loadonce: true, forceClientSorting: true

@Oleg，我已经在 action 方法返回的问题正文中添加了数据。

你试过免费的 jqGrid 4.14.1 吗？问题还存在吗？ JSFiddle 允许使用 Echo 服务 (url: "/echo/json/") 来模拟服务器响应。必须将json 参数与数据一起发送到服务器，服务器应返回该数据。可以使用postData: json: ... 来执行此操作。 Echo 服务需要使用 HTTP POST。您可以在演示 jsfiddle.net/OlegKi/3j7dz8aa/2 上看到对代码进行的如此微小的更改，该演示有效。您可以使用更多功能。见jsfiddle.net/OlegKi/3j7dz8aa/3。无论如何，我认为您发布的 JSON 数据没有问题。

【参考方案1】：

您可以尝试使用 jQuery DataTable 插件，如下所示：

$(document).ready(function () 
        $("#myGrid").dataTable(
            "ajax": 
                "url": "/CertificateDetails/GetCertificateDetails",
                "dataSrc": ""
            ,
            "columns": [
                "data": "Name"
            , 
                "data": "Location"
            , 
                "data": "Issuer"
            , 
                "data": "HasPrivateKey"
            ]

        );
    );

<table id="myGrid">
    <thead>
        <tr style="text-align:left;">
            <th>Name</th>
            <th>Location</th>
            <th>Issuer</th>
            <th>HasPrivateKey?</th>
        </tr>
    </thead>
      </table>

不要忘记添加引用-

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>