【MVC】MvcPager分页及边界传递数据示例

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcTest.Models;
using Webdiyer.WebControls.Mvc;

namespace MvcTest.Controllers
{
    public class CategoryController : Controller
    {
        protected testContext db = new testContext();

        /// <summary>
        /// 显示全部商品列表页
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            var data = db.Categories.ToList();
            return View(data);
        }

        /// <summary>
        /// 显示商品列表页(带参数)
        /// </summary>
        /// <param name="id">商品分类ID</param>
        /// <param name="p">当前页码</param>
        /// <returns></returns>
        public ActionResult ProductList(int id, int? p=1)
        {
            //①项目先引用Webdiyer.MvcPager.dll ②拷贝分页css文件~/Content/pagerstyles.css
            var productCategory = db.Categories.Find(id);
            if (productCategory != null)
            {
                PagedList<Product> products = productCategory.Products.ToPagedList(p ?? 1, 2);
                return View(products);
            }
            else
            {
                return HttpNotFound();
            }
        }

        /// <summary>
        /// 显示商品详情页
        /// </summary>
        /// <param name="pid">商品ID</param>
        /// <returns></returns>
        public ActionResult Product(int id)
        {
            ViewBag.PageTitle = "这是个测试页面"; //ViewBag传值
            ViewBag.UserName = "张小山";
            ViewBag.UserAge = "18岁";
            /*
             * Find最终是建立在Array的查找之上，而在IEnemerable上的FirstOrDefault是使用foreach查找的。
             * 因此，Find速度会比FirstOrDefault快很多，据测试可能会快一倍以上。
            */
            var data = db.Products.Find(id);
            if (data != null)
            {
                return View(data); //传递model数据模型
            }
            else
            {
                return HttpNotFound();
            }
        }
    }
}

商品详情页

@model MvcTest.Models.Product

<h2>@ViewBag.PageTitle</h2>
<p>
    @ViewBag.UserName <br/>
    @ViewBag.UserAge <br />
</p>

<h3>商品详情</h3>
<p>
    @Html.DisplayFor(model => model.ChildID) <br />
    @Html.DisplayFor(model => model.Name) <br />
    @Html.DisplayFor(model => model.ParentID) <br />
</p>

商品列表页

@model PagedList<MvcTest.Models.Product>
@using Webdiyer.WebControls.Mvc;
<link rel="stylesheet" type="text/css" href="/Content/pagerstyles.css" />
<table>
    <tr>
        <th>@Html.DisplayNameFor(model => model.ChildID)</th>
        <th>@Html.DisplayNameFor(model => model.Name)</th>
        <th>@Html.DisplayNameFor(model => model.ParentID)</th>
    </tr>
    @foreach (var p in Model)
    {
        <tr>
            <td>@Html.DisplayFor(model => p.ChildID)</td>
            <td>@Html.ActionLink(p.Name, "Product", new { id = p.ChildID })</td>
            <td>@Html.DisplayFor(model => p.ParentID)</td>
        </tr>
    }
</table>

@Html.Pager(Model, new PagerOptions { PageIndexParameterName = "p", FirstPageText="首页", PrevPageText="上页",
            NextPageText="下页",LastPageText="末页",
            CurrentPagerItemTemplate = "<span class=\"current\">{0}</span>", 
            DisabledPagerItemTemplate = "<span class=\"disabled\">{0}</span>", Id = "flickrpager" })

/*pagerstyles.css*/

/* digg style*/
div#diggpager {padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center}
div#diggpager a {border-right: #aaaadd 1px solid; padding-right: 5px; border-top: #aaaadd 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #aaaadd 1px solid; color: #000099; padding-top: 2px; border-bottom: #aaaadd 1px solid; text-decoration: none}
div#diggpager a:hover {border-right: #000099 1px solid; border-top: #000099 1px solid; border-left: #000099 1px solid; color: #000; border-bottom: #000099 1px solid}
div#diggpager a:active {border-right: #000099 1px solid; border-top: #000099 1px solid; border-left: #000099 1px solid; color: #000; border-bottom: #000099 1px solid}
div#diggpager span.current {border-right: #000099 1px solid; padding-right: 5px; border-top: #000099 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #000099 1px solid; color: #fff; padding-top: 2px; border-bottom: #000099 1px solid; background-color: #000099}
div#diggpager span.disabled {border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid}


/* meneame style*/
div#menepager {padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 3px; margin: 3px; color: #ff6500; padding-top: 3px;; text-align: center}
div#menepager a {border-right: #ff9600 1px solid; padding-right: 7px; background-position: 50% bottom; border-top: #ff9600 1px solid; padding-left: 7px; background-image: url(images/meneame.jpg); padding-bottom: 5px; border-left: #ff9600 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff9600 1px solid; text-decoration: none}
div#menepager a:hover {border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794}
div#menepager a:active {border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794}
div#menepager span.current {border-right: #ff6500 1px solid; padding-right: 7px; border-top: #ff6500 1px solid; padding-left: 7px; font-weight: bold; padding-bottom: 5px; border-left: #ff6500 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff6500 1px solid; background-color: #ffbe94}
div#menepager span.disabled {border-right: #ffe3c6 1px solid; padding-right: 7px; border-top: #ffe3c6 1px solid; padding-left: 7px; padding-bottom: 5px; border-left: #ffe3c6 1px solid; color: #ffe3c6; margin-right: 3px; padding-top: 5px; border-bottom: #ffe3c6 1px solid}

/*flickr style*/
div#flickrpager {padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px;; text-align: center}
div#flickrpager a {border: #dedfde 1px solid; padding-right: 6px; background-position: 50% bottom; padding-left: 6px; padding-bottom: 2px;  color: #0061de; margin-right: 3px; padding-top: 2px; text-decoration: none}
div#flickrpager a:hover {border: #000 1px solid;background-image: none; color: #fff;background-color: #0061de}
div#flickrpager a:active {border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #0061de}
div#flickrpager span.current {padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #ff0084; margin-right: 3px; padding-top: 2px}
div#flickrpager span.disabled {padding-right: 6px; padding-left: 6px; padding-bottom: 2px; color: #adaaad; margin-right: 3px;padding-top: 2px;border: #dedfde 1px solid;}

/* black-red style*/
div#graypager{font-size: 11px; color: #fff; font-family: tahoma, arial, helvetica, sans-serif; background-color: #3e3e3e;text-align: center;padding:6px 0px}
div#graypager a {padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #3e3e3e; text-decoration: none}
div#graypager a:hover {color: #fff; background-color: #ec5210}
div#graypager a:active {color: #fff; background-color: #ec5210}
div#graypager span.current {padding-right: 5px; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #313131}
div#graypager span.disabled {padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #868686; padding-top: 2px;background-color: #3e3e3e;}


/*black style*/
div#blackpager {padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 10px; margin: 3px; color: #a0a0a0; padding-top: 10px; background-color: #000; text-align: center}
div#blackpager a {border-right: #909090 1px solid; padding-right: 5px; background-position: 50% bottom; border-top: #909090 1px solid; padding-left: 5px; background-image: url(images/bar.gif); padding-bottom: 2px; border-left: #909090 1px solid; color: #c0c0c0; margin-right: 3px; padding-top: 2px; border-bottom: #909090 1px solid; text-decoration: none}
div#blackpager a:hover {border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(images/invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040}
div#blackpager a:active {border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(images/invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040}
div#blackpager span.current {border-right: #ffffff 1px solid; padding-right: 5px; border-top: #ffffff 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #ffffff 1px solid; color: #ffffff; margin-right: 3px; padding-top: 2px; border-bottom: #ffffff 1px solid; background-color: #606060}
div#blackpager span.disabled {border-right: #606060 1px solid; padding-right: 5px; border-top: #606060 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #606060 1px solid; color: #808080; margin-right: 3px; padding-top: 2px; border-bottom: #606060 1px solid}


/*badoo style*/

div#badoopager {padding:10px 0; font-size: 13px; color: #48b9ef; font-family: arial, helvetica, sans-serif; background-color: #fff; text-align: center}
div#badoopager a {border: #f0f0f0 2px solid; padding:2px 5px; margin: 0 2px;  color: #48b9ef; text-decoration: none}
div#badoopager a:hover {border: #ff5a00 2px solid;color: #ff5a00; }
div#badoopager a:active {border: #ff5a00 2px solid; color: #ff5a00; }
div#badoopager span.current {border: #ff5a00 2px solid; padding: 2px 5px;  font-weight: bold;   color: #fff;   background-color: #ff6c16}
div#badoopager span.disabled {border: #f0f0f0 2px solid;padding:2px 5px;margin: 0 2px;}
div#badoopager input[type=text]{width:30px}