title: mvc3 datatables plugin and json
body: <p>I am trying to use the </p>
  
  <ul>
  <li>datatables  plugin,</li>
  <li>mvc3 framework and </li>
  <li>entity framework</li>
  </ul>
  
  <p>for some reason it didn't render well 
  the result of this code is an output of the data on  the browser  like that </p>
  
  <blockquote>
    <p>[{"ServiceId":"8e651711-c837-4012-99f5-496549308b95","ServiceInstanceId":"312bf47d-5952-4c32-b1a8-ffdeb30507df","MessageRole":2,"Datetime":"/Date(1342699946063)/","Message":null,"Status":null,"ESBErrorCode":null,"ESBTecnicalErrorCode":null,"ErrorDescription":null,"PortName":null,"MachineName":null,"Exte</p>
  </blockquote>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>    public JsonResult Index()
      {
          var tracks = db.Tracks.Include(t =&gt; t.Message).
              Select(n =&gt; new
              {
                  ServiceId = n.ServiceId,
                  ServiceInstanceId = n.ServiceInstanceId,
                  MessageRole = n.MessageRole,
                  Datetime = n.Datetime,
                  Message = n.Message,
                  Status = n.Status,
                  ESBErrorCode = n.ESBErrorCode,
                  ESBTecnicalErrorCode = n.ESBTecnicalErrorCode,
                  ErrorDescription = n.ErrorDescription,
                  PortName = n.PortName,
                  MachineName = n.MachineName,
                  ExternalId = n.ExternalId,
                  ConsumerMachineName = n.ConsumerMachineName,
                  ServiceBehavior = n.ServiceBehavior,
                  RouterConsumerId = n.RouterConsumerId
              }); ;
  
          return Json(tracks.ToList(), JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p><strong>View:</strong></p>
  
  <pre><code>@model IEnumerable&lt;Fnx.ESB2.Infra.DataTier.Model.Track&gt;
  @{
  ViewBag.Title = "ServiceMonitor2.0";
  }
  
  
   @{
     AjaxOptions ajaxOpts = new AjaxOptions
     {
  
      UpdateTargetId = "MainTable",
      InsertionMode = InsertionMode.Replace,
      Url = Url.Action("Refresh", "MainScreen"),
      LoadingElementId = "loading",
      LoadingElementDuration = 10000
  
  
  
  };        
     }
     @using (Ajax.BeginForm(ajaxOpts))
      { 
  
  
  
  &lt;div id="loading" style="display: none; color: Red; font-weight: bold"&gt;
      &lt;p&gt;
          Loading Data...&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="header "&gt;
      &lt;form class="well form-search"&gt;
      ServicID
      &lt;input type="text" class="input-medium search-query"&gt;
      &lt;br /&gt;
      &lt;button type="submit" class="btn"&gt;
          Search&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  
  
  
  
  &lt;table cellpadding="0" cellspacing="0" border="0" width="50%" class="well form-inline" id="MainTable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  ServiceId
              &lt;/th&gt;
              &lt;th&gt;
                  ServiceInstanceId
              &lt;/th&gt;
              &lt;th&gt;
                  MessageRole
              &lt;/th&gt;
              &lt;th&gt;
                  Datetime
              &lt;/th&gt;
              &lt;th&gt;
                  Message
              &lt;/th&gt;
              &lt;th&gt;
                  Status
              &lt;/th&gt;
              &lt;th&gt;
                  ESBErrorCode
              &lt;/th&gt;
              &lt;th&gt;
                  ESBTecnicalErrorCode
              &lt;/th&gt;
              &lt;th&gt;
                  ErrorDescription
              &lt;/th&gt;
              &lt;th&gt;
                  PortName
              &lt;/th&gt;
              &lt;th&gt;
                  MachineName
              &lt;/th&gt;
              &lt;th&gt;
                  ConsumerId
              &lt;/th&gt;
              &lt;th&gt;
                  ExternalId
              &lt;/th&gt;
              &lt;th&gt;
                  ConsumerMachineName
              &lt;/th&gt;
              &lt;th&gt;
                  ServiceBehavior
              &lt;/th&gt;
              &lt;th&gt;
                  RouterConsumerId
              &lt;/th&gt;
              &lt;th&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
  
              &lt;tbody&gt;
  
            &lt;/tbody&gt;
  
  
  &lt;/table&gt;
  
  
  
  
      }
  </code></pre>
  
  <p><strong>Jquery :</strong></p>
  
  <pre><code>     $(document).ready(function () {
        $('#MainTable').dataTable({
       //        "bServerSide": true,
       //        "sAjaxSource": "MainScreen/Index",
       "sAjaxSource": '@Url.Action("Index", "MainScreen")'
  
      "bProcessing": true,
      "aoColumns": [
                      { "sName": "ServiceId"},
                      { "sName": "ServiceInstanceId"},
                      { "sName": "MessageRole"},
                      { "sName": "Datetime"},
                      { "sName": "Message"},
                      { "sName": "Status"},
                      { "sName": "ESBErrorCode"},
                      { "sName": "ESBTecnicalErrorCode"},
                      { "sName": "ErrorDescription"},
                      { "sName": "PortName"},
                      { "sName": "MachineName"},
                      { "sName": "ExternalId"},
                      { "sName": "ConsumerMachineName"},
                      { "sName": "ServiceBehavior"},
                      { "sName": "RouterConsumerId"}
  ]
         });
  
          });
  </code></pre>