【发布时间】：2021-04-01 06:10:22
【问题描述】：
我是 ASP.NET Core 的新手，从事 ASP.NET Core 项目，我需要使用从 sql server 接收数据的数据表。在没有子行的情况下我没有问题，但我必须显示具有多个子行的数据表。我无法显示具有子行的数据表。 ajax 有很多例子，但我找不到任何来自 sql server 在 asp.net core 中的数据的例子。
如果我们简单谈谈数据库结构，有 2 个表：Order 和 OrderList。
Order:OrderId(PK-int),Customer(string),OrderDate(datetime)
OrderList:KimlikId(PK-int),OrderId(int),Product(string),Color(string),Qntty(int)
Order INNER JOIN OrderList ON Order.OrderId = OrderList.OrderId
我的模型类 OrderList 是这样的：
public class OrderList
{
public int OrderId { get; set; }
public int KimlikId { get; set; }
public string Customer { get; set; }
public string OrderDate { get; set; }
public string Product { get; set; }
public string Color { get; set; }
public int Qntty { get; set; }
}
我的控制器类 OrderController 是这样的：
public class OrderController : Controller
{
public IEnumerable<OrderList> GetAllOrderList()
{
string connectionString = "My Connection String of sql server";
List<OrderList> sipList = new List<OrderList>();
using (SqlConnection con = new SqlConnection(connectionString))
{
SqlCommand cmd = new SqlCommand("SELECT * FROM Order INNER JOIN OrderList ON Order.OrderId = OrderList.OrderId ORDER BY OrderList.OrderId DESC;", con);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
OrderList sip = new OrderList();
sip.OrderId = Convert.ToInt32(dr["OrderId"].ToString());
sip.Customer = dr["Customer"].ToString();
sip.OrderDate = DateTime.Parse(dr["OrderDate"].ToString()).ToString("dd/MM/yyyy");
sip.Product = dr["Product"].ToString();
sip.Color = dr["Color"].ToString();
sip.Qntty = Int32.Parse(dr["Qntty"].ToString());
sipList.Add(sip);
}
con.Close();
}
return sipList;
}
public IActionResult OrderIndex()
{
List<OrderList> sipList = new List<OrderList>();
sipList = GetAllOrderList().ToList();
return View(sipList);
}
}
我的视图是这样的 OrderIndex.cshtml：
@model IEnumerable<AlplerCRM.Models.OrderList>
@{
ViewData["Title"] = "Ordesr";
Layout = "~/Views/Shared/_AnaLayout.cshtml";
}
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>OrderId</th>
<th>Customer</th>
<th>OrderDate</th>
</tr>
</thead>
</table>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
function format(d) {
return '<table id="childtable" cellpadding="5" cellspacing="0" border="0" style="padding-left: 50px; ">' +
'<tr>' +
'<td>Kimlik No</td>' +
'<td>Product Detail</td>' +
'<td>Product Color</td>' +
'<td>Product Quantity</td>' +
'</tr><tr>' +
'<td>' + d.KimlikId + '</td>' +
'<td>' + d.Product + '</td>' +
'<td>' + d.Color + '</td>' +
'<td>' + d.Qntty + '</td>' +
'</tr>' +
'</table>';
}
$(document).ready(function () {
var table = $("#example").dataTable({
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "OrderId" },
{ "data": "Customer" },
{ "data": "OrderDate" },
],
"order": [[0, 'desc']]
});
});
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
</script>
}
【问题讨论】：
-
我不知道这会有多高效，但是您可以将子行值存储在父
tr的data-属性中并使用该 as shown here。但我建议使用 datatable ajax 进行数据加载，因为它更快、更容易，并且您可以更好地控制 datatable 功能。 -
你的意思是你已经得到了截图呈现的结果（使用 JQuery ajax 和 JQuery dataTable 插件，Ajax 用于从控制器加载数据），现在你不想使用 Ajax 加载数据？如果是这种情况，您可以使用 ViewData 或 ViewBag 将数据传递给查看，然后，在查看页面中使用以下代码获取值：
var data = JSON.parse('@Html.Raw(ViewData["json"])'); //json string var items = JSON.parse('@Html.Raw(JsonSerializer.Serialize(ViewData["data"]))'); //object list。然后，您可以使用 jquery 数据表插件显示数据。 -
截图只是我目标的一个说明，成千上万的数据将来自数据库。我想我需要使用 Ajax 加载。通过ajax获取1个数据库表数据的datatable例子很多，但是我需要通过获取2个表的union数据来获取ajax数据。
标签： javascript jquery sql-server asp.net-core datatables