0

我正在尝试使用

  • 数据表插件，
  • mvc3 框架和
  • 实体框架

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

[{"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

控制器：

    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>




    }

查询：

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

        });
4

2 回答 2

0

我不确定问题是什么。我将向您展示我是如何做到的，然后您可以相应地对其进行修改。我的方式没有排序、过滤等花哨的功能。我的代码还没有 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);
}

数据表参数视图模型：

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

     public int iDisplayStart { get; set; }

     public int iDisplayLength { get; set; }
}

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

这是一篇关于代码项目的文章，您可以阅读，该系列中有几篇：

使用 jQuery DataTables 插件增强 HTML 表格

于 2012-08-07T07:29:04.700 回答
0

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

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

@Brendan Vogt 您的回答对我有帮助，谢谢

于 2012-08-07T12:02:13.830 回答