MVC3数据表插件和JSON

数据表插件，
MVC3框架和
实体框架

由于某种原因，它没有很好地渲染此代码的结果是浏览器上的数据输出，如

[{“ServiceId”：“8e651711-c837-4012-99f5-496549308b95”，“ServiceInstanceId”：“312bf47d-5952-4c32-b1a8-ffdeb30507df”，“MessageRole”：2，“Datetime”：“/ Date “null”，“Status”：null，“ESBErrorCode”：null，“ESBTecnicalErrorCode”：null，“ErrorDescription”：null，“PortName”：null，“MachineName”：null，“Exte

控制器：

public JsonResult Index() 
    { 
     var tracks = db.Tracks.Include(t => t.Message). 
      Select(n => 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); 
    }

查看：

@model IEnumerable<Fnx.ESB2.Infra.DataTier.Model.Track> 
@{ 
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)) 
    { 



<div id="loading" style="display: none; color: Red; font-weight: bold"> 
    <p> 
     Loading Data...</p> 
</div> 

<div id="header "> 
    <form class="well form-search"> 
    ServicID 
    <input type="text" class="input-medium search-query"> 
    <br /> 
    <button type="submit" class="btn"> 
     Search</button> 
    </form> 
</div> 





<table cellpadding="0" cellspacing="0" border="0" width="50%" class="well form-inline" id="MainTable"> 
    <thead> 
     <tr> 
      <th> 
       ServiceId 
      </th> 
      <th> 
       ServiceInstanceId 
      </th> 
      <th> 
       MessageRole 
      </th> 
      <th> 
       Datetime 
      </th> 
      <th> 
       Message 
      </th> 
      <th> 
       Status 
      </th> 
      <th> 
       ESBErrorCode 
      </th> 
      <th> 
       ESBTecnicalErrorCode 
      </th> 
      <th> 
       ErrorDescription 
      </th> 
      <th> 
       PortName 
      </th> 
      <th> 
       MachineName 
      </th> 
      <th> 
       ConsumerId 
      </th> 
      <th> 
       ExternalId 
      </th> 
      <th> 
       ConsumerMachineName 
      </th> 
      <th> 
       ServiceBehavior 
      </th> 
      <th> 
       RouterConsumerId 
      </th> 
      <th> 
      </th> 
     </tr> 
    </thead> 


      <tbody> 

      </tbody> 


</table> 




    }

的Jquery：

 $(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"} 
] 
     }); 

     });

来源

2012-08-07 MIkCode

@Yasser感谢编辑 – MIkCode 2012-08-07 07:09:52

我不知道是什么问题。我将向你展示我是如何做到的，然后你可以相应地修改它。我的方式没有像排序，过滤等花哨的功能。我的代码还没有100％完成，我还在试验jQuery数据表。

我有一个数据表，显示我所有的银行，它只显示银行的名称和id。

列表视图HTML标记数据表：

<table id="banks-datatable"> 
    <thead> 
      <tr> 
       <th>#</th> 
       <th>Name</th> 
      </tr> 
    </thead> 
    <tfoot> 
      <tr> 
       <th>#</th> 
       <th>Name</th> 
      </tr> 
    </tfoot> 
</table>

的jQuery：

$(document).ready(function() { 
    $('#banks-datatable').dataTable({ 
      "aoColumns": [ 
       { "mDataProp": [0], "sWidth": "15%" }, 
       { "mDataProp": [1], "sWidth": "85%" } 
      ], 
      "bAutoWidth": false, 
      "bFilter": false, 
      "bLengthChange": false, 
      "bProcessing": true, 
      "bServerSide": true, 
      "bSort": false, 
      "iDisplayLength": 50, 
      "sAjaxSource": '@Url.Action("GetAllBanks")' 
    }); 
});

列表视图的操作方法：

public ActionResult List() 
{ 
    return View(); 
}

获取所有银行的操作方法：

public ActionResult GetAllBanks(DataTableParameterViewModel parameterViewModel) 
{ 
    Check.Argument.IsNotNull(parameterViewModel, "parameterViewModel"); 

    IEnumerable<Bank> allBanks = bankRepository.FindAll(); 
    IEnumerable<Bank> filteredBanks = allBanks; 

    var result = 
      from bank in filteredBanks 
      select new[] 
      { 
       u.Id.ToString(), 
       u.Name 
      }; 

    return Json(new 
    { 
      sEcho = parameterViewModel.sEcho, 
      iTotalRecords = allBanks.Count(), 
      iTotalDisplayRecords = filteredBanks.Count(), 
      aaData = result 
    }, 
    JsonRequestBehavior.AllowGet); 
}

个

DataTableParameterViewModel：

public class DataTableParameterViewModel 
{ 
    public string sEcho { get; set; } 

    public int iDisplayStart { get; set; } 

    public int iDisplayLength { get; set; } 
}

我希望这有助于。如果它没有帮助，那么请尝试分解您发送到数据表的数据，尝试一次发送一列，以查看问题出在哪里。

这里是代码项目的文章，你可以看，有一对夫妇在系列：

Enhancing HTML tables using the jQuery DataTables plug-in

来源

2012-08-07 07:29:04

我通过添加方法调用的JSON 解决这个问题，离开了指数法空

public ActionResult Index() 
     { 
     return View(); 
     }

@Brendan沃格特你的答案帮助我感谢

来源

2012-08-07 12:02:13 MIkCode

MVC3数据表插件和JSON

回答

相关问题