title: Controller method is not hitting in Datatables C# MVC
body: <p>I am using Datatables in my application, but to fetch the data controller method is not getting triggered.
  I am able to render the table on UI, but the data is coming is NULL.</p>
  
  <p>Here is my code</p>
  
  <p>Imported items in SITE.MASTER</p>
  
  <pre><code> &lt;link href="/Scripts/DataTables/media/css/demo_page.css" type="text/css"  rel="stylesheet" /&gt;
  
       &lt;link href="/Scripts/DataTables/media/css/demo_table.css" type="text/css"  rel="stylesheet" /&gt;
  
  
        &lt;script src="/Scripts/Lib/jquery-1.4.2.js" type="text/javascript" language="javascript"&gt;&lt;/script&gt;
  
       &lt;script type="text/javascript" charset="utf-8" src="/Scripts/DataTables/media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is my HTML Looks</p>
  
  <pre><code>!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"&gt;
  &lt;head&gt;
  &lt;title&gt;http://stackoverflow.com/questions/6946559/jqgrid-please-help&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
         &lt;script type="text/javascript" charset="utf-8"&gt;
              $(document).ready(function () {
                  $('#example').dataTable({
                      bProcessing: true,
                      sAjaxSource: '@Url.Action("GridData", "Home")'
                  });
              });
          &lt;/script&gt;
  
   &lt;/head&gt;
  &lt;div id="dynamic"&gt;
  &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th width="20%"&gt;Rendering engine&lt;/th&gt;
              &lt;th width="25%"&gt;Browser&lt;/th&gt;
              &lt;th width="25%"&gt;Platform(s)&lt;/th&gt;
              &lt;th width="15%"&gt;Engine version&lt;/th&gt;
              &lt;th width="15%"&gt;CSS grade&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  
      &lt;/tbody&gt;
  
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here how my JS file which loads HTML looks</p>
  
  <pre><code>var rptTabs = function () {
      return {
          Init: function () {
  
  
  
              var placeholder = $("#rpt-tab");
              placeholder.setTemplateURL("/Templates/Home/report.htm");
  
  
              placeholder.load("/Templates/Home/report.htm");
  
  
  
          }
      }
  } ();
  </code></pre>
  
  <p>Here how my Home controller method looks</p>
  
  <pre><code>public ActionResult GridData()
          {
              return Json(new
              {
                  aaData = new[] 
              {
                  new [] { "Trident", "Internet Explorer 4.0", "Win 95+", "4", "X" },
                  new [] { "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", "1.8", "A" },
                  new [] { "Webkit", "iPod Touch / iPhone", "iPod", "420.1", "A" }
              }
              }, JsonRequestBehavior.AllowGet);
          }
  </code></pre>
  
  <p>Please tell me what is wrong with my implementation.</p>