jqGrid在MVC中不顯示json數據

Question

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既不顯示任何數據，也不顯示空的記錄標簽。 任何想法如何解決這個問題？

Answer 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>