我正在使用asp.net-mvc并且在我的项目中有一个来自https://github.com/TroyGoode/PagedList的PageList,它工作正常,但我希望能够在设定的时间间隔内自动切换页面。我正在使用的页面有一定数量的手风琴项目,想知道如何在没有人工干预的情况下切换页码。喜欢使用带有pagedList的幻灯片。是否有更好的使用或这可能吗?
我的Index.cshtml
@model PagedList.IPagedList<ComputerDownTimeTracker.Models.DashboardTicketListVM>
@using PagedList.Mvc;
<body>
<div class="list1">
<div id="accordion">
@foreach (var item in Model)
{
<div class="header">
<b> Equipment: </b>@item.ComputerName <br />
<b> Location: </b>@item.Location
@switch (item.RunningStatus)
{
case 1: imagePath = down;
break;
case 2: imagePath = running;
break;
case 3: imagePath = waiting;
break;
case 4: imagePath = waiting;
break;
default: imagePath = running;
break;
}
<img class="status" src="@imagePath" alt="" />
<ul class="timeStat">
<li><b class="time">Computer Down At :</b> @item.OnClickTimeStamp</li>
@if (@item.RunningStatus == 4)
{
<li> <b class="time"> Maintenance On issue :</b> @item.EditTimeStamp</li>
}
@if (@item.RunningStatus == 3)
{
<li> <b class="time">Waiting For Parts :</b> @item.EditTimeStamp</li>
}
@if (@item.RunningStatus == 2)
{
<li> <b class="time">Computer Restarted :</b> @item.EditTimeStamp</li>
}
</ul>
</div>@*//computer name and status div*@
<div><p>@Html.Raw(@item.ComputerStatus)</p></div>
}
@(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
@Html.PagedListPager(Model, page => Url.Action("Index",new { page }))
</div>
</div>
我的家庭控制器索引方法
public ActionResult Index(int? page)
{
var time = DateTime.Now;
time = time.AddSeconds(-100);
var ViewModel = _ComputerDB.Database.SqlQuery<DashboardTicketListVM>(listQuery).ToList();
var remove_running = ViewModel.Where(x => x.OnRestartTimeStamp >= time || x.OnRestartTimeStamp == null);
int pageSize = 8;
int pageNumber = (page ?? 1);
return View("Index", "~/Views/Shared/_ListLayout.cshtml", remove_running.ToPagedList(pageNumber, pageSize));
}
我省略了很多与之无关的东西
答案 0 :(得分:1)
您需要使用Javascript setTimeout
在指定时间后重新加载下一页。
使用PagedList示例:
public class ProductController : Controller
{
public object Index(int? page)
{
var products = MyProductDataSource.FindAllProducts(); //returns IQueryable<Product> representing an unknown number of products. a thousand maybe?
var pageNumber = page ?? 1; // if no page was specified in the querystring, default to the first page (1)
var onePageOfProducts = products.ToPagedList(pageNumber, 25); // will only contain 25 products max because of the pageSize
ViewBag.OnePageOfProducts = onePageOfProducts;
return View();
}
}
@{
ViewBag.Title = "Product Listing"
}
@using PagedList.Mvc; //import this so we get our HTML Helper
@using PagedList; //import this so we can cast our list to IPagedList (only necessary because ViewBag is dynamic)
<!-- import the included stylesheet for some (very basic) default styling -->
<link href="/Content/PagedList.css" rel="stylesheet" type="text/css" />
<!-- loop through each of your products and display it however you want. we're just printing the name here -->
<h2>List of Products</h2>
<ul>
@foreach(var product in ViewBag.OnePageOfProducts){
<li>@product.Name</li>
}
</ul>
<!-- output a paging control that lets the user navigation to the previous page, next page, etc -->
@Html.PagedListPager( (IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page }) )
<script type="text/javascript">
var nextPage = @(((IPagedList)ViewBag.OnePageOfProducts.PageNumber) + 1); // next page number is current page number + 1
setTimeout(function() {
window.location = "index?page=" + nextPage; // load new page after timeout
}, (5 * 1000) /* set timeout here, example: 5 seconds */);
</script>
注意:您可能需要添加一些额外的逻辑,以确保在您到达页面末尾时停止下一页加载。您可以通过选中PagedList提供的HasNextPage
属性来执行此操作。
示例:
<script type="text/javascript">
var hasNextPage = @(((IPagedList)ViewBag.OnePageOfProducts.HasNextPage) ? "true" : "false");
if(hasNextPage) {
var nextPage = @(((IPagedList)ViewBag.OnePageOfProducts.PageNumber) + 1); // next page number is current page number + 1
setTimeout(function() {
window.location = "index?page=" + nextPage; // load new page after timeout
}, (5 * 1000) /* set timeout here, example: 5 seconds */);
}
</script>