Asp.net core mvc 使用IEnumerable模型渲染PartialView速度较慢
我使用的是Asp.net core mvc 使用IEnumerable模型渲染PartialView速度较慢,asp.net-core-mvc,razor-pages,asp.net-mvc-partialview,Asp.net Core Mvc,Razor Pages,Asp.net Mvc Partialview,我使用的是asp.net core 3，我有一个带有两个选项卡的视图。当我更改tab时，我调用一个函数表单服务器，并在我的选项卡中加载一个PartialView。但它很慢，我发现当它想要呈现列表时，它会变慢 Index.cshtml <!DOCTYPE html> <html> <body> <div class="container"> <div style="background-co
asp.net core 3tabPartialView<!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>
@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>
-
-
$（'a[data toggle=“tab”]”）。在（'click'，函数（e）{
setItem（'CurTab'，$（e.target）.attr（'href'）；
var activeTab=sessionStorage.getItem（'CurTab'）；
LoadPartial（activeTab）；
});
函数LoadPartial（类型）
{
如果（类型=“#配方”）{
url='@url.Action（“食谱”、“眼镜”）；
$（'#recipePage'）。加载（url）；
}
如果（类型=“#订单”）{
url='@url.Action（“订单”、“眼镜”）；
$（'#ordersPage'）.load（url）；
}
}
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);
}
公共异步任务订单（）
{
//这是测试用的
var orders=新列表（）；
var ord=新订单
{
Id=1，
状态=（字节）1，
Type=OrderType.Far
};
对于（int i=0；i<300；i++）
订单。添加（ord）；
返回PartialView（“订单列表”，订单）；
}
<!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>
@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>
@model IEnumerable
1.固定床头{
溢出y：自动；
最大高度：300px；
高度：自动；
}
.床头柜{
位置：粘性；
排名：0；
}
th{
背景：白色；
}
@如果（Model.Count（）>0）
{
@DisplayNameFor（model=>model.Name）
@DisplayNameFor（model=>model.State）
@DisplayNameFor（model=>model.Deposit）
@DisplayNameFor（model=>model.RemainAmount）
@DisplayNameFor（model=>model.TotalAmount）
@DisplayNameFor（model=>model.Type）
@DisplayNameFor（model=>model.mobile）
@DisplayNameFor（model=>model.OrderDate）
@DisplayNameFor（model=>model.DeliveryDate）
@DisplayNameFor（model=>model.NationalCode）
@*
@DisplayNameFor（model=>model.DeliveryDate）
*@
@foreach（模型中的var项目）
{
var索引=item.Id；
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modelItem=>item.Deposit）
@DisplayFor（modelItem=>item.RemainAmount）
@DisplayFor（modelItem=>item.TotalAmount）
@DisplayFor（modelItem=>item.mobile）
@DisplayFor（modelItem=>item.OrderDate）
@DisplayFor（modelItem=>item.DeliveryDate）
@DisplayFor（modelItem=>item.NationalCode）
}
}