title: Type Error in JqGrid in ASP.Net MVC3 Razor
body: <p>In my ASP.Net MVC3 Razor project.I have to implement Jqgrid to list my employee details. So from the tutorial <a href="http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx" rel="nofollow noreferrer">Using jQuery Grid With ASP.NET MVC</a> i have created action for my Employee Class.Now the problem is that,my View page is not rendering the jqgrid Script file.Form the chrome browser file it is  found that the error is </p>
  
  <blockquote>
    <p>uncaught typeerror object has no method jqgrid</p>
  </blockquote>
  
  <p>I am attaching my browser output.
  <img src="https://i.stack.imgur.com/3Ojdq.jpg" alt="Browser Screenshot"></p>
  
  <p><strong>My Controller Code</strong></p>
  
  <pre><code> [HttpGet]
          public ActionResult ViewEmployeeData()
          {
  
              return View();
          }
         [HttpPost]
          public ActionResult ViewEmployeeData(string Eord, string Empid, int page,  int rows)
          {
  
              ElixirERPContext empdata = new ElixirERPContext();
              var query = from emp in empdata.EmpData
                          select emp;
              var count = query.Count();
              var resultquery = new
              {
                  tottal = 1,
                  page = page,
                  records = count,
                  rows = query.Select(x =&gt; new { x.EmpId, x.FirstName, x.MiddleName, x.LastName, x.Address, x.DateOfJoining, x.Department, x.Position }).ToList()
                       .Select(x =&gt; new { id = x.EmpId,Date=x.DateOfJoining, cell = new string[] { x.EmpId.ToString(), x.FirstName, x.MiddleName, x.LastName, x.Address, x.DateOfJoining.ToString(), x.Department, x.Position } }).ToArray(),
              };
              return Json(resultquery, JsonRequestBehavior.AllowGet);
  
              //return View();
          }
  </code></pre>
  
  <p>When i am using debugger it not entering ito the script section.ie,just rendering only the view page.</p>
  
  <p><strong>Layout Page</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;META Http-Equiv="Cache-Control" Content="no-cache"&gt;
  &lt;META Http-Equiv="Pragma" Content="no-cache"&gt;
  &lt;META Http-Equiv="Expires" Content="0"&gt;
  
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
       &lt;link href="@Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="@Url.Content("~/Content/ui.multiselect.css")" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="@Url.Content("~/Content/css/datepicker.css")" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="@Url.Content("~/Content/css/daterangepicker.css")" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="@Url.Content("~/Content/css/font-alpona.css")" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="@Url.Content("~/Content/css/bootstrap.css")" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="@Url.Content("~/Content/css/prettify.css")" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="@Url.Content("~/Content/css/styles.css")" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="@Url.Content("~/Content/css/bootstrap-reset.css")" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="@Url.Content("~/Content/ico/favicon.ico")" rel="SHORTCUT ICON" type="image/ico" /&gt;
      &lt;link href="@Url.Content("~/Content/ico/apple-touch-icon-144-precomposed.png")" rel="apple-touch-icon-precomposed" sizes="144x144" type="image/png" /&gt;
      &lt;link href="@Url.Content("~/Content/ico/apple-touch-icon-114-precomposed.png")" rel="apple-touch-icon-precomposed" sizes="114x114" type="image/png" /&gt;
      &lt;link href="@Url.Content("~/Content/ico/apple-touch-icon-72-precomposed.png")" rel="apple-touch-icon-precomposed" sizes="72x72" type="image/png" /&gt;
      &lt;link href="@Url.Content("~/Content/ico/apple-touch-icon-57-precomposed.png")" rel="apple-touch-icon-precomposed"  type="image/png" /&gt;
  
      &lt;script src="@Url.Content("~/Scripts/jquery-1.5.2.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/js/i18n/grid.locale-en.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/js/jquery.js")" type="text/javascript"&gt;&lt;/script&gt;
      @*&lt;script src="@Url.Content("~/Scripts/js/jbootstrap.min.js")" type="text/javascript"&gt;&lt;/script&gt;*@
      &lt;script src="@Url.Content("~/Scripts/js/jquery-ui-1.10.3.custom.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/js/bootstrap.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/js/prettify.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/js/jquery.nicescroll.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/js/jquery.cookie.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/js/jquery.hoverIntent.minified.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/js/jquery.dcjqaccordion.2.7.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/js/jquery.sparkline.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="https://www.google.com/jsapi" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/js/common-script.js")" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="main-wrapper"&gt;
          &lt;div class="scroll-top"&gt;
              &lt;a href="#" class="tip-top" title="Go Top"&gt;&lt;i class="icon-arrow-up"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
          @*Top Bar*@
          &lt;div class="top-bar"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-sm-4 col-md-4"&gt;
                          &lt;a href="#" class="left-toggle"&gt;&lt;i class="icon-menu-2 "&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;!-- LOGO --&gt;
                          &lt;div class="branding"&gt;
                              &lt;a href="#"&gt;
                                  &lt;img src="@Url.Content("~/Content/images/alpona-logo.png")" alt="Alpona Logo"&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-4 col-md-4 responsive-notification-mnu"&gt;
                        &lt;!---Edited Content Folder Id Top bar Notice--&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-4 col-md-4 clearfix responsive-log-mnu"&gt;
                          &lt;!-- ADMIN DRODOWN MENU --&gt;
                          &lt;div class="loged-nav pull-right"&gt;
                              &lt;ul class="clearfix"&gt;
                                  &lt;li class="log-nav dropdown pull-right"&gt;&lt;a class="dropdown-toggle clearfix" data-toggle="dropdown"&gt;
                                      &lt;span class="pull-left loged-user-name"&gt;Admin&lt;/span&gt;&lt;span class="logged-user-thumb pull-right"&gt;&lt;img class="img-circle" src="@Url.Content("~/Content/images//admin-avatar.jpg")" alt="Admin"&gt;&lt;/span&gt;&lt;/a&gt;
                                      &lt;div class="dropdown-menu"&gt;
                                          &lt;ul class="pull-right"&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;kjamanebr@gmail.com&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Edit Profile&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#"&gt;Inbox&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="divider"&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;i class="icon-lock-3"&gt;&lt;/i&gt;@Html.ActionLink("Logout", "Logout", "Home", new {@class="logout-link" })&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/div&gt;
                                      @*&lt;li&gt;&lt;i class="icon-user"&gt;&lt;/i&gt;@Html.TextBoxFor(Model =&gt; Model.UserName, new { @class = "login-user-input", autocomplete = "off",placeholder="User Name" })&lt;/li&gt;*@
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
             &lt;/div&gt;
          &lt;/div&gt;
          @*Left-Nav-Menu*@
           &lt;div class="left-bar merge-left"&gt;
          &lt;div class="left-nav"&gt;
          @RenderSection("leftnav",required:false)
  
          &lt;/div&gt;
  
        &lt;/div&gt;
          &lt;div class="main-container"&gt;
          &lt;div class="container"&gt;
           @RenderBody()
  
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
       &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Employee Data Vew Page</strong></p>
  
  <pre><code>@{
      ViewBag.Title = "ViewEmployeeData";
      Layout = "~/Views/Shared/_LayoutUser.cshtml";
  }
  
    @* Script For Jqgrid*@
    &lt;script type="text/javascript"&gt;
  jQuery(document).ready(function () {
      jQuery("#list").jqGrid({
          url: '/Home/ViewEmployeeData',
          datatype: 'json',
          mtype: 'GET',
          colNames: ['EmpId', 'FirstName', 'MiddleName', 'LastName', 'Address', 'DateOfJoining', 'Department', 'Position'],
          colModel: [
        { name: 'EmpId', index: 'EmpId', width: 40, align: 'left' },
        { name: 'FirstName', index: 'FirstName', width: 40, align: 'left' },
        { name: 'MiddleName', index: 'MiddleName', width: 200, align: 'left'},
        { name: 'LastName', index: 'LastName', width: 200, align: 'left'},
        { name: 'Address', index: 'Address', width: 200, align: 'left'},
        { name: 'DateOfJoining', index: 'DateOfJoining', width: 200, align: 'left'},
        { name: 'Department', index: 'Department', width: 200, align: 'left'},
        { name: 'Position', index: 'Position', width: 200, align: 'left'}],
          pager: jQuery('#pager'),
          width: 660,
          height: 'auto',
          rowNum: 10,
          rowList: [5, 10, 20, 50],
          sortname: 'EmpId',
          sortorder: "desc",
          viewrecords: true,
          caption: 'Employee Information'
      });
  }); 
  &lt;/script&gt;
  &lt;h2&gt;ViewEmployeeData&lt;/h2&gt;
  &lt;table id="list" &gt;&lt;/table&gt;
  &lt;div id="pager"&gt;&lt;/div&gt;
  </code></pre>