title: JQGrid Will Not Display in MVC4 CSHTML View
body: <p>I am having difficulties getting a jqgrid to display in my MVC 4 web application view. I have tested the exact same view code in a standard html document and the grid displays, however only the h2 tag shows up in my Index view. I've even managed to get the model information to display in html document, so I'm really confused as to why the grid won't even load in my MVC view.</p>
  
  <p>My controller code for my grid data is as follows:</p>
  
  <pre><code>    public ActionResult GridData()
      {
          var query = (from u in db.Users
  
                       join ur in db.User_Relationship on u.User_ID equals ur.Child_ID
  
                       join lu in db.Lookups on u.First_LanguageID equals lu.LookupID
  
                       join ut in db.User_Tests on u.User_ID equals ut.User_ID into ps
                       from ut in ps.DefaultIfEmpty()
  
                       where ur.Parent_ID == 45875
  
                       group new { u, lu } by new
                       {
                           u.User_ID, u.Forename, u.Surname, u.Client_Code,
                           u.User_Name, u.Password, u.Email, u.Gender,
                           u.Report_date, u.EmailDate, u.Job_Function,
                           lu.LookupValue
                       } into g
  
                       select new UserViewModel
                       {
                           User_ID = g.Key.User_ID,
                           Forename = g.Key.Forename,
                           Surname = g.Key.Surname,
                           Client_Code = g.Key.Client_Code,
                           User_Name = g.Key.User_Name,
                           Password = g.Key.Password,
                           Email = g.Key.Email,
                           Gender = g.Key.Gender,
                           Report_Date = g.Key.Report_date,
                           Email_Date = g.Key.EmailDate,
                           Job_Function = g.Key.Job_Function,
                           Lookup_Value = g.Key.LookupValue
                       });
  
          var jsonData = new 
          {
              total = 10,  
              page = 1,
              records = 50, 
  
              rows = query.Select(x =&gt; new 
              {
                  x.User_ID, x.Forename, x.Surname, x.Client_Code, x.User_Name,
                  x.Password, x.Email, x.Gender, x.Report_Date, x.Email_Date,
                  x.Job_Function, x.Lookup_Value
              }).ToList().Select(x =&gt; new
              {
                  id = x.User_ID,
                  cell = new string[]
                  {
                      x.User_ID.ToString(),
                      x.Forename,
                      x.Surname,
                      x.Client_Code.ToString(),
                      x.User_Name,
                      x.Password,
                      x.Email,
                      x.Gender,
                      x.Report_Date.ToString(),
                      x.Email_Date.ToString(),
                      x.Job_Function,
                      x.Lookup_Value
                  }}).ToArray(),             
          };
          return Json(jsonData, JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>The method for Index is as follows:</p>
  
  <pre><code>    public ActionResult Index()
      {
          return View();
      }
  </code></pre>
  
  <p>My view code for Index.cshtml is as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;My First Grid&lt;/title&gt;
  
  &lt;link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /&gt;
  
  &lt;script src="js/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/i18n/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      jQuery(document).ready(function ()
      {
          jQuery("#list").jqGrid(
              {
                  url: '/WebFormUserList/GridData',
              datatype: 'json',
              mtype: 'GET',
              colNames:
                  [
                      'User_ID', 'Forename', 'Surname', 'Client_Code', 'User_Name',
                      'Password', 'Email', 'Gender', 'Report_Date', 'Email_Date',
                      'Job_Function', 'Lookup_Value'
                  ],
              colModel:
                  [
                      { name: 'User_ID', index: 'User_ID', width: '50', align: 'centre' },
                      { name: 'Forename', index: 'Forename', width: '50', align: 'centre' },
                      { name: 'Surname', index: 'Surname', width: '50', align: 'centre' },
                      { name: 'Client_Code', index: 'Client_Code', width: '50', align: 'centre' },
                      { name: 'User_Name', index: 'User_Name', width: '50', align: 'centre' },
                      { name: 'Password', index: 'Password', width: '50', align: 'centre' },
                      { name: 'Email', index: 'Email', width: '50', align: 'centre' },
                      { name: 'Gender', index: 'Gender', width: '50', align: 'centre' },
                      { name: 'Report_Date', index: 'Report_Date', width: '50', align: 'centre' },
                      { name: 'Email_Date', index: 'Email_Date', width: '50', align: 'centre' },
                      //{ name: 'Test_Count', index: 'Test_Count', width: '50', align: 'centre' },
                      //{ name: 'Test_Completed', index: 'Test_Completed', width: '50', align: 'centre' },
                      { name: 'Job_Function', index: 'Job_Function', width: '50', align: 'centre' },
                      { name: 'Lookup_Value', index: 'Lookup_Value', width: '50', align: 'centre' },
                  ],
  
              pager: jQuery('#pager'),
              height: 'auto',
              width: '1000',
              rowNum: 10,
              jsonReader: { repeatitems: false },
              rowList: [5, 10, 20, 50],
              sortname: 'Id',
              sortorder: "desc",
              viewrecords: true,
              imgpath: '/css/ui-lightness/images',
              caption: 'My first grid'
          });
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h2&gt;My Grid Data&lt;/h2&gt;
  &lt;table id="list" class="scroll" cellpadding="0" cellspacing="0"&gt;&lt;/table&gt;
  &lt;div id="pager" class="scroll" style="text-align:center;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated as I'm not exactly sure what is going wrong. I'm fairly certain the json returned is in the correct format as the html document happily accepts it. </p>
  
  <p>My only thoughts is that because the grid won't even load, that something is happening to interrupt its creation within the _layout.html of MVC4.</p>
  
  <p>Again, thanks in advance.</p>