在ASP.net MVC中集成Twitter Bootstrap分页

时间:2013-12-08 13:25:59

标签: asp.net asp.net-mvc asp.net-mvc-3 twitter-bootstrap twitter-bootstrap-3

我想用Twitter bootstrap在MVC中实现分页概念。普通分页我已经按照这个URL http://afana.me/post/paging-sorting-and-searching-ef-cf-and-mvc.aspx实现了,但是如何通过twitter bootstrap实现它我不知道这个。

其次,当我删除太多的页面链接,即一次只能在页面上显示11个链接时,通过按照上面的URL,它会出错,它无法将bool转换为int?

Index.cshtml

    @model IEnumerable<MvcPagingConcept.Models.tbl_product>

@{
    Layout = null;
}

<table>
<thead>
<tr>
<td> Product Name </td>
<td> Product Description</td>
</tr>
</thead>
    @{int i = 1;}
    @foreach (var p in Model)
    {
        <tr class="@(i++ % 2 == 0 ? "highlighted" : "")">
            <td>@p.ProductName
            </td>
            <td>@p.ProductDesc
            </td>
        </tr>
    }
</table>
<div class="pagination">
    @for (int p = 1; p <= ViewBag.TotalPages; p++)
    {
        <a class="@(p == ViewBag.CurrentPage ? "current" : "")" href="@Url.Action("Index", "Home", new { page = p })">@p</a>
    }
</div>

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcPagingConcept.Models;

namespace MvcPagingConcept.Controllers
{
    public class HomeController : Controller
    {
        ProductEntities prdEntity = new ProductEntities();
        const int pageSize = 3;
        [HttpGet]
        public ActionResult Index(int page = 1)
        {
            var products = prdEntity.tbl_product.OrderBy(p => p.ProductId).Skip((page - 1) * pageSize).Take(pageSize).ToList();
            ViewBag.CurrentPage = page;
            ViewBag.PageSize = pageSize;
            ViewBag.TotalPages=Math.Ceiling((double)prdEntity.tbl_product.Count() / pageSize);
            return View(products);
        }
    }
}

0 个答案:

没有答案