如何解决使用IEnumerable模型渲染PartialView很慢
我正在使用asp.net core 3，我有一个带有两个选项卡的视图。更改tab时，我会调用函数形式服务器并在选项卡中加载PartialView。但是很慢，我发现当它要渲染列表时，它会变慢
Index.cshtml
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div style="background-color:white">
<nav>
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#recipe">Recipes</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#orders">Orders</a>
</li>
</ul>
</nav>
<!-- Tab panes -->
<div class="tab-content my-tab shadow">
<div id="recipe" class="tab-pane active">
<div class="text-right">
<br />
<div id="recipePage" class="text-center">
</div>
</div>
</div>
<div id="orders" class="tab-pane fade">
<br />
<div id="ordersPage">
</div>
</div>
</div>
</div>
</div>
<script>
$('a[data-toggle="tab"]').on('click',function (e) {
sessionStorage.setItem('CurTab',$(e.target).attr('href'));
var activeTab = sessionStorage.getItem('CurTab');
LoadPartial(activeTab);
});
function LoadPartial(type)
{
if (type == '#recipe') {
url = '@Url.Action("Recipes","Glasses")';
$('#recipePage').load(url);
}
if (type == '#orders') {
url = '@Url.Action("Orders","Glasses")';
$('#ordersPage').load(url);
}
}
</script>
GlassController.cs
public async Task<IActionResult> Orders()
{
// this is for test
var orders = new List<Order>();
var ord = new Order
{
Id = 1,State = (byte)1,Type = OrderType.Far
};
for (int i = 0; i < 300; i++)
orders.Add(ord);
return PartialView("OrderList",orders);
}
OrderList.cshtml
@model IEnumerable<Opto.Models.Order>
<style>
.tableFixHead {
overflow-y: auto;
max-height: 300px;
height: auto;
}
.tableFixHead thead th {
position: sticky;
top: 0;
}
th {
background: white;
}
</style>
<!DOCTYPE html>
<html>
<body>
@if (Model.Count() > 0)
{
<div class="tableFixHead">
<table class="table" style="border:1px solid;border-color:lightgrey">
<thead>
<tr>
<th></th>
<th>
@Html.displayNameFor(model => model.Name)
</th>
<th>
@Html.displayNameFor(model => model.State)
</th>
<th>
@Html.displayNameFor(model => model.Deposit)
</th>
<th>
@Html.displayNameFor(model => model.RemainAmount)
</th>
<th>
@Html.displayNameFor(model => model.TotalAmount)
</th>
<th>
@Html.displayNameFor(model => model.Type)
</th>
<th>
@Html.displayNameFor(model => model.CellPhone)
</th>
<th>
@Html.displayNameFor(model => model.OrderDate)
</th>
<th>
@Html.displayNameFor(model => model.DeliveryDate)
</th>
<th>
@Html.displayNameFor(model => model.NationalCode)
</th>
@*<th>
@Html.displayNameFor(model => model.DeliveryDate)
</th>*@
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
var index = item.Id;
<tr id="staterow@(index)">
<td rowspan="3" style="vertical-align:middle">
@Html.displayFor(modelItem => item.Name)
</td>
<td rowspan="3" style="vertical-align:middle">
@Html.displayFor(modelItem => item.Deposit)
</td>
<td rowspan="3" style="vertical-align:middle">
@Html.displayFor(modelItem => item.RemainAmount)
</td>
<td rowspan="3" style="vertical-align:middle">
@Html.displayFor(modelItem => item.TotalAmount)
</td>
<td rowspan="3" style="vertical-align:middle">
@Html.displayFor(modelItem => item.CellPhone)
</td>
<td rowspan="3" style="vertical-align:middle">
@Html.displayFor(modelItem => item.OrderDate)
</td>
<td id="deliveryDateCol" rowspan="3" style="vertical-align:middle">
@Html.displayFor(modelItem => item.DeliveryDate)
</td>
<td rowspan="3" style="vertical-align:middle">
@Html.displayFor(modelItem => item.NationalCode)
</td>
</tr>
}
</tbody>
</table>
</div>
}
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
