如何使用 ajax 或 jquery 在 asp .net 的 div 中动态显示数据？
【问题讨论】：
标签： asp.net-mvc jquery pagination
说实话，这很难帮助你 - 你应该更具体，但也许你正在寻找这样的东西： jQuery pagination plugin 和 demo here
【讨论】：
您还没有真正提出真正的问题，但也许这会有所帮助：https://github.com/TroyGoode/PagedList
【讨论】：
您可以使用 bootstrap 和 jquery 在您的 div 上创建分页。
控制器
public ActionResult Index()
{
// Tab Data
ThumbnailViewModel model = new ThumbnailViewModel();
model.ThumbnailModelList = new List<ThumbnailModel>();
// Test Details Data
List<ThumbnailDetails> _detaisllist = new List<ThumbnailDetails>();
int count = 10;
for (int i = 1; i <= count; i++)
{
ThumbnailDetails obj = new ThumbnailDetails();
obj.Details1 = "Details- Main" + i;
obj.Details2 = "Details- Main-Sub" + i;
_detaisllist.Add(obj);
}
// batch your List data for tab view i want batch by 2 you can set your value
var listOfBatches = _detaisllist.Batch(2);
int tabNo = 1;
foreach (var batchItem in listOfBatches)
{
// Generating tab
ThumbnailModel obj = new ThumbnailModel();
obj.ThumbnailLabel = "Lebel" + tabNo;
obj.ThumbnailTabId = "tab" + tabNo;
obj.ThumbnailTabNo = tabNo;
obj.Thumbnail_Aria_Controls = "tab" + tabNo;
obj.Thumbnail_Href = "#tab" + tabNo;
// batch details
obj.ThumbnailDetailsList = new List<ThumbnailDetails>();
foreach (var item in batchItem)
{
ThumbnailDetails detailsObj = new ThumbnailDetails();
detailsObj = item;
obj.ThumbnailDetailsList.Add(detailsObj);
}
model.ThumbnailModelList.Add(obj);
tabNo++;
}
// Getting first tab data
var first = model.ThumbnailModelList.FirstOrDefault();
// Getting first tab data
var last = model.ThumbnailModelList.LastOrDefault();
foreach (var item in model.ThumbnailModelList)
{
if (item.ThumbnailTabNo == first.ThumbnailTabNo)
{
item.Thumbnail_ItemPosition = "first";
}
if (item.ThumbnailTabNo == last.ThumbnailTabNo)
{
item.Thumbnail_ItemPosition = "last";
}
}
return View(model);
}
@model ThumbnailPagination.Models.ThumbnailViewModel
@{
ViewBag.Title = "Home Page";
}
<div class="container">
<div class="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3">
<div class="row">
<nav aria-label="...">
<ul class="pager" role="tablist">
<li class="previous" onclick="goTo(1);"><a href="#"><span aria-hidden="true">←</span> Previous</a></li>
@{
foreach (var item in Model.ThumbnailModelList)
{
if (item.Thumbnail_ItemPosition == "first")
{
<li class="active" id="@item.Thumbnail_ItemPosition">
<a aria-controls="@item.Thumbnail_Aria_Controls" data-toggle="tab" href="@item.Thumbnail_Href" role="tab">@item.ThumbnailTabNo</a>
</li>
}
else if (item.Thumbnail_ItemPosition == "last")
{
<li id="@item.Thumbnail_ItemPosition">
<a aria-controls="@item.Thumbnail_Aria_Controls" data-toggle="tab" href="@item.Thumbnail_Href" role="tab">@item.ThumbnailTabNo</a>
</li>
}
else
{
<li>
<a aria-controls="@item.Thumbnail_Aria_Controls" data-toggle="tab" href="@item.Thumbnail_Href" role="tab">@item.ThumbnailTabNo</a>
</li>
}
}
}
<li class="next" onclick="goTo(2);"><a href="#">Next <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
</div>
<!-- Tab panes -->
<div class="tab-content">
@{
foreach (var item in Model.ThumbnailModelList)
{
if (item.Thumbnail_ItemPosition == "first")
{
<div class="tab-pane active" id="@item.ThumbnailTabId" role="tabpanel">
@{
foreach (var detailsitem in item.ThumbnailDetailsList)
{
<div class="col-sm-6">
<div class="thumbnail">
<img alt="..." src="http://placehold.it/240x150">
<div class="caption">
<h3>@detailsitem.Details1</h3>
<p>
@detailsitem.Details2
</p>
<p>
<a class="btn btn-primary" href="#" role="button">
Read more
...
</a>
</p>
</div>
</div>
</div>
}
}
</div>
}
else
{
<div class="tab-pane" id="@item.ThumbnailTabId" role="tabpanel">
@{
foreach (var detailsitem in item.ThumbnailDetailsList)
{
<div class="col-sm-6">
<div class="thumbnail">
<img alt="..." src="http://placehold.it/240x150">
<div class="caption">
<h3>@detailsitem.Details1</h3>
<p>
@detailsitem.Details2
</p>
<p>
<a class="btn btn-primary" href="#" role="button">
Read more
...
</a>
</p>
</div>
</div>
</div>
}
}
</div>
}
}
}
</div>
</div>
</div>
<style>
.pager .active a {
background-color: #337AB7;
color: #FFF;
border: 0px;
}
</style>
<script>
function goTo(number) {
$('ul.pager li:eq(' + number + ') a').tab('show');
upgradePreNext(number);
}
function upgradePreNext(number) {
if (number > 1) {
$('ul.pager li:eq(0)').attr("onclick", "goTo(" + (number - 1) + ")");
$('ul.pager li:eq(0)').attr("class", "previous");
} else {
$('ul.pager li:eq(0)').attr("class", "disabled");
}
if (number < 5) {
$('ul.pager li:eq(6)').attr("onclick", "goTo(" + (number + 1) + ")");
$('ul.pager li:eq(6)').attr("class", "next");
} else {
$('ul.pager li:eq(6)').attr("class", "disabled");
}
}
$(document).ready(function () {
$('li a').on('click', function (e) {
goTo((e.target.innerHTML) - 0);
});
});
</script>
输出将是：
您也可以下载sample code。
【讨论】：