 <p>It finally worked. Thank you @Oleg! I saw another post here <a href="http://goo.gl/Pg5CMn" rel="nofollow">http://goo.gl/Pg5CMn</a></p> <p>Additionally, I figured that I was making another mistake. I forgot to enclose btnContactList in double quotes. After debugging in Internet explorer, I found that out. Secondly, as @Oleg suggested that the jsonReader attribute is required. Probably because of the version of jqGrid that I am using.</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function () { //alert("this is a test"); $("#btnContactList").click(function () { $("#ContactTable").jqGrid({ url: "/Contact/ContactList", datatype: "json", colNames: ["ID", "First Name", "Last Name", "EMail"], colModel: [ { name: "ContactId", index: "ContactId", width: 80 }, { name: "FirstName", index: "FirstName", width: 100 }, { name: "LastName", index: "LastName", width: 100 }, { name: "EMail", index: "EMail", width: 200 } ], //data: result, mtype: 'GET', loadonce: true, viewrecords: true, gridview: true, caption: "List Contact Details", emptyrecords: "No records to display", jsonReader: { repeatitems: false, //page: function () { return 1; }, root: function (obj) { return obj; }, //records: function (obj) { return obj.length; } }, loadComplete: function () { alert("Complete ok!") }, 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); } }); alert("after completion"); }); }); &lt;/script&gt; </code></pre>