如何在ASP.net中使用PagedList.Mvc将页面链接显示为Twitter Bootstrap样式链接

Question

我在ASP.net中使用PagedList.Mvc，但它显示正常的下一步按钮，但我想将其显示为推特引导风格的下一步和上一步按钮。如何将这些页面链接显示为twitter bootstrap样式页面链接...

Index.cshtml

@model PagedList.IPagedList<MvcPagingList.Models.Employee>
@{
    ViewBag.Title = "Employees";
}
<h2>
    Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
@using (Html.BeginForm())
{
    <p>
        Search By Name : @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
        &nbsp;
        <input type="submit" value="Search" /></p>
}
<table>
    <tr>
        <th>
            @Html.Label("Last Name")
        </th>
        <th>
            @Html.Label("First Name")
        </th>
        <th>
            @Html.Label("Department ID")
        </th>
        <th>
            @Html.ActionLink("Salery", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
        </th>
        <th>
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FirstName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DepartmentID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Salary)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.EmployeeID }) |
                @Html.ActionLink("Details", "Details", new { id = item.EmployeeID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.EmployeeID })
            </td>
        </tr>
    }
    <div>
        Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
        of @Model.PageCount
        &nbsp;
        @if (Model.HasPreviousPage)
        {
            @Html.ActionLink("<<", "Index", new { page = 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
            @Html.Raw("&nbsp;");
            @Html.ActionLink("< Prev", "Index", new { page = Model.PageNumber - 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
        }
        else
        {
            @:<<
        @Html.Raw("&nbsp;");
            @:< Prev
                                            }
        &nbsp;
        @if (Model.HasNextPage)
        {
            @Html.ActionLink("Next >", "Index", new { page = Model.PageNumber + 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
            @Html.Raw("&nbsp;");
            @Html.ActionLink(">>", "Index", new { page = Model.PageCount, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
        }
        else
        {
            @:Next >
        @Html.Raw("&nbsp;")
            @:>>
                                            }
    </div>
</table>

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcPagingList.Models;
using PagedList;

namespace MvcPagingList.Controllers
{
    public class HomeController : Controller
    {

        EmployeeEntities dbEntities = new EmployeeEntities();

        public ViewResult Index(string sortOrder, string currentFilter, string searchString, int? page)
        {
            ViewBag.CurrentSort = sortOrder;
            ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "Salery desc" : "";
            //ViewBag.DateSortParm = sortOrder == "HireDate" ? "HireDate desc" : "HireDate";

            if (Request.HttpMethod == "GET")
            {
                searchString = currentFilter;
            }
            else
            {
                page = 1;
            }
            ViewBag.CurrentFilter = searchString;

            var employees = from s in dbEntities.Employees
                            select s;
            if (!String.IsNullOrEmpty(searchString))
            {
                employees = employees.Where(s => s.LastName.ToUpper().Contains(searchString.ToUpper())
                                       || s.FirstName.ToUpper().Contains(searchString.ToUpper()));
            }
            switch (sortOrder)
            {
                case "Salery desc":
                    employees = employees.OrderByDescending(s => s.LastName);
                    break;
               default:
                    employees = employees.OrderBy(s => s.LastName);
                    break;
            }

            int pageSize = 10;
            int pageNumber = (page ?? 1);
            return View(employees.ToPagedList(pageNumber, pageSize));
        }


    }
}

上面的代码工作正常，但我想调用分页类，如下所示

<div class="pagination">
    <ul>
    <li>
        @for (int p = 1; p <= ViewBag.TotalPages; p++)
        {
            <a class="@(p == ViewBag.CurrentPage ? "current" : "")" href="@Url.Action("Index", "Home", new { page = p })">@p</a>
        }
        </li>
        </ul>
    </div>

Answer 1

这是我正在使用的nuget，它在支持bootstrap 3的情况下工作得很好。

https://www.nuget.org/packages/PagedList/

​

​

此外，也可能是您忘记包含bootstrap或使用旧版本的bootstrap。检查MVC分页助手类使用的CSS样式。