我正在使用 asp.net mvc razor 该页面必须显示一个很长的列表。电话簿员工 - 约 500 人。由于实体太多,页面加载速度太慢。 如何通过后台加载前 50 个条目,然后加载其他 450 个条目? 非常感谢!
页面上的代码:
@model WarehouseSearch.Controllers.PhonesList
@{
string LastFirstChar = "";
}
<div id="main-content">
<div class="container">
<div class="row">
<div class="col-md-10">
<h2>Phonebook </h2>
</div>
<div class="col-md-4">
</div>
</div>
<div class="row">
<div class="col-md-8" style="border:1px solid #ddd;background-color:white">
<div class="row" style="background-color:rgba(247, 225, 181, 1);margin-bottom:1em;padding:0.5em;">
<div class="col-md-7 text-left" style="padding-left: 1em; padding-top: 0.2em; padding-right: 1em; padding-bottom: 0.3em;">
<span class="fa fa-user fa-2x blue"></span> <input type="text" name="Search" id="search_input" placeholder="search ..." class="search_input" />
</div>
<div class="col-md-3">
</div>
</div>
<ul id="phones" class="interleave">
@foreach (WarehouseSearch.GetPeoplePhonesListResult p in Model.allphones)
{
<li style="padding-top:2em;" class="row">
<div class="col-md-2">
@if (LastFirstChar != @p.FirstChar)
{
<span style="background-color:#41a7e2;color:white;position:relative;left:-4em;font-size:210%;padding:0.3em;" class="text-right"><b>@p.FirstChar</b></span>
LastFirstChar = p.FirstChar;
}
<img style="width: 85%; display: block;" src="@p.BigPhoto" /><br />
</div>
<div class="col-md-5">
<a href="@Url.Action("Card", "PeoplePhones", new { p_no = p.p_no })"><h3 class="phone smarttlink" style="margin-bottom:0.1em;margin-top:0;">@p.Family</h3></a>
<div>@p.FirstMiddleName</div>
<br />
<small style="color:#666">@p.Title</small>
</div>
.... some other info about people....
</li>
}
</ul>
</div>
</div>
</div>
</div>
<script>
$('#search_input').animate({
//"width": "100%",
//"padding": "4px",
"opacity": 1
}, 300, function () {
$(this).focus();
});
$(function () {
$(function () {
$('#search_input').fastLiveFilter('#phones'
, {
selector: ".phone, .phone2"
, callback: function (total) {
$('.phone').unhighlight();
searchTerm = $('#search_input').val();
if (searchTerm.length > 0) {
$('.phone').highlight(searchTerm);
}
}
, translit : true
}
);
});
});
</script>
在 Controller 中: :
public ActionResult List()
{
using (WarehouseSearch.sqldbDataContext sqldb = new WarehouseSearch.sqldbDataContext())
{
PhonesList pl = new PhonesList();
pl.allphones = sqldb.GetPeoplePhonesList().ToList<GetPeoplePhonesListResult>();
return View("~/Views/Home/PeoplePhones.cshtml", pl);
}
}
最佳答案
首先,我建议您使用外部 CSS 文件而不是内联样式。 这样 CSS 就可以缓存在浏览器中,并可能帮助您提高性能。
此外,在具有“row”类的 div 中,您只有 12 列,应该是这样的。
<div class="row">
<div class="col-md-10">
<h2>Phonebook </h2>
</div>
<div class="col-md-2">
</div>
</div>
我会尝试更改此操作以获取前 50 个
public ActionResult List()
{
using (WarehouseSearch.sqldbDataContext sqldb = new WarehouseSearch.sqldbDataContext())
{
PhonesList pl = new PhonesList();
pl.allphones = sqldb.GetPeoplePhonesList().Take(50).ToList<GetPeoplePhonesListResult>();
return View("~/Views/Home/PeoplePhones.cshtml", pl);
}
}
稍后在 View 中完成对前 50 部手机的迭代后 从 Controller 调用另一个函数来检索其余的手机。
@{
((HomeController)this.ViewContext.Controller).GetLast450();
}
并重申,这里的部分 View 可能会很好。
关于javascript - asp.net mvc 加载第一个条目和其他条目 - 迟到,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38049825/