0

私は使用しようとしています

  • データテーブルプラグイン、
  • mvc3 フレームワークと
  • エンティティ フレームワーク

何らかの理由でうまくレンダリングされませんでしたこのコードの結果は、そのようなブラウザ上のデータの出力です

[{"ServiceId":"8e651711-c837-4012-99f5-496549308b95","ServiceInstanceId":"312bf47d-5952-4c32-b1a8-ffdeb30507df","MessageRole":2,"日時":"/Date(1342699946063) /","Message":null,"Status":null,"ESBErrorCode":null,"ESBTechnicalErrorCode":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>




    }

Jクエリ：

     $(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

JSONを呼び出すメソッドを追加して解決し、インデックスメソッドを空のままにしました

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

@Brendan Vogtあなたの答えは私を助けてくれます

于 2012-08-07T12:02:13.830 に答える
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);
}

DataTableParameterViewModel:

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

     public int iDisplayStart { get; set; }

     public int iDisplayLength { get; set; }
}

これが役立つことを願っています。問題が解決しない場合は、データテーブルに送信しているデータを分解してみてください。一度に 1 つの列を送信して、問題がどこにあるかを確認してください。

これは、あなたが読むことができるコードプロジェクトに関する記事です。シリーズにはいくつかあります:

jQuery DataTables プラグインを使用した HTML テーブルの拡張

于 2012-08-07T07:29:04.700 に答える