I am using asp.net core 3, I have a view with two tabs.When I change tab, I call a function form server and load a PartialView in my tab. but it is slow, I found that when it wants to render list, it gets slow
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>