Question

我正在尝试使用

datatables插件，
mvc3框架和
实体框架

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

[{ “SERVICEID”： “8e651711-c837-4012-99f5-496549308b95”， “ServiceInstanceId”： “312bf47d-5952-4c32-b1a8-ffdeb30507df”， “MessageRole”：2 “日期时间”：“/日期（1342699946063）/ “ ”消息“：空， ”状态“：NULL， ”ESBErrorCode“：NULL， ”ESBTecnicalErrorCode“：NULL， ”ErrorDescription中“：NULL， ”端口名“：NULL， ”计算机名“：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"}
]
       });

        });

Answer 1

我不确定问题是什么。我将告诉你我是如何做到的，然后你可以相应地修改它。我的方式没有奇特的功能，如排序，过滤等。我的代码还没有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; }
}

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

这是一篇关于Code Project的文章，你可以阅读，系列中有几个：

Enhancing HTML tables using the jQuery DataTables plug-in

Answer 2

我通过添加调用JSON的方法来解决它并将索引方法留空

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

@Brendan Vogt你的回答帮助我谢谢

mvc3 datatables插件和json

2 个答案: