Jquery mvc3数据表插件和json
我正在尝试使用Jquery mvc3数据表插件和json,jquery,asp.net-mvc-3,jquery-plugins,Jquery,Asp.net Mvc 3,Jquery Plugins,我正在尝试使用 数据表插件 mvc3框架及其应用 实体框架 由于某种原因，它的效果不好 此代码的结果是在浏览器上输出数据，如下所示 [{“ServiceId”：“8e651711-c837-4012-99f5-496549308b95”，“ServiceInstanceId”：“312bf47d-5952-4c32-b1a8-ffdeb30507df”，“MessageRole”：2，“Datetime”：“/Date（134269946063）/”，“Message”：null，“Stat
- 数据表插件
- mvc3框架及其应用
- 实体框架
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"}
]
});
});
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"}
]
});
});
我不确定问题是什么。我将向您展示我是如何做到的，然后您可以相应地修改它。我的方式没有像排序、筛选等奇特的功能。我的代码还没有100%完成，我还在试验jQuery数据表 我有一个数据表，显示我所有的银行，它只显示银行的id和名称 datatable的列表视图HTML标记：
<table id="banks-datatable">
<thead>
<tr>
<th>#</th>
<th>Name</th>
</tr>
</thead>
<tfoot>
<tr>
<th>#</th>
<th>Name</th>
</tr>
</tfoot>
</table>
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 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);
}
我通过添加调用JSON的方法来解决这个问题 并将index方法留空
public ActionResult Index( )
{
return View();
}