分页控件Webdiyer.MvcPager

 

MVC

1、安装控件 

install-package Webdiyer.MvcPager

 

2、Cotroller

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

namespace Huo.CMS.Web.Controllers
{
    public class ArticleController : Controller
    {
        // GET: Article
        public ActionResult Index(int pageIndex = 1, string search = "", string category = "", string date = "")
        {
            var query = from a in ArticleList.AsQueryable()
                        where a.Category.Equals(category)
                        select a;
            var data = query.OrderByDescending(p => p.CreateDate).ToPagedList(pageIndex, 10);
            if (Request.IsAjaxRequest())
            {
                return PartialView("_ArticleTable", data);
            }
            return View(data);
        }


        private IList<VMArticle> ArticleList
        {
            get
            {
                List<VMArticle> list = new List<VMArticle>()
                {
                    new VMArticle() {Category = "book",CreateDate = DateTime.Now,Id=1,ImagePath = "",Name = "稀有",Price = 10,Title = "疯狂"},
                    new VMArticle() {Category = "book",CreateDate = DateTime.Now,Id=2,ImagePath = "",Name = "稀有",Price = 10,Title = "端点"},
                    new VMArticle() {Category = "book",CreateDate = DateTime.Now,Id=3,ImagePath = "",Name = "稀有",Price = 10,Title = "等等"},
                    new VMArticle() {Category = "book",CreateDate = DateTime.Now,Id=5,ImagePath = "",Name = "稀有",Price = 10,Title = "单独"},

                     new VMArticle() {Category = "phone",CreateDate = DateTime.Now,Id=1,ImagePath = "",Name = "稀有",Price = 10,Title = "苹果"},
                    new VMArticle() {Category = "phone",CreateDate = DateTime.Now,Id=2,ImagePath = "",Name = "稀有",Price = 10,Title = "小米"},
                    new VMArticle() {Category = "phone",CreateDate = DateTime.Now,Id=3,ImagePath = "",Name = "稀有",Price = 10,Title = "华为"},
                    new VMArticle() {Category = "phone",CreateDate = DateTime.Now,Id=5,ImagePath = "",Name = "稀有",Price = 10,Title = "三星"},

                    new VMArticle() {Category = "soft",CreateDate = DateTime.Now,Id=1,ImagePath = "",Name = "稀有",Price = 10,Title = "微软"},
                    new VMArticle() {Category = "soft",CreateDate = DateTime.Now,Id=2,ImagePath = "",Name = "稀有",Price = 10,Title = "甲骨文"},
                    new VMArticle() {Category = "soft",CreateDate = DateTime.Now,Id=3,ImagePath = "",Name = "稀有",Price = 10,Title = "谷歌"},
                    new VMArticle() {Category = "soft",CreateDate = DateTime.Now,Id=5,ImagePath = "",Name = "稀有",Price = 10,Title = "亚马逊"},

                };

                return list;
            }
        }
    }
}

 

3、View

部分视图

@using Webdiyer.WebControls.Mvc
@model PagedList<Huo.CMS.Web.Models.VMArticle>
<div class="product-list">
    @foreach (var item in Model)
    {
        <div class="product-item">
            <a href="~/product/item?id=@item.Id">
                <img src="@item.ImagePath" />
                <h6>@item.Title</h6>
                <span class="when">创建时间：@item.CreateDate.ToString("yyyy-MM-dd") @item.CreateDate.ToString("HH:mm")</span>
                <span class="where">作者：@item.Name</span>
                <span class="price">打赏：<h3>￥@item.Price</h3></span>
                <span class="level">分类：@item.Category</span>
            </a>
        </div>
    }
</div>
<div class="pagenav">
    @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "pageIndex", ContainerTagName = "div", CssClass = "", CurrentPagerItemTemplate = "<a href=\"#\" class='on'>{0}</a>", DisabledPagerItemTemplate = "<a class=\"disabled\">{0}</a>", PagerItemTemplate = "" }).AjaxOptions(a => a.SetUpdateTargetId("ProductList").SetDataFormId("searchForm"))
</div>

 

主视图

@using Webdiyer.WebControls.Mvc
@model PagedList<Huo.CMS.Web.Models.VMArticle>
@{
    ViewBag.Title = "Index";
}

<div class="container">
    @using (Ajax.BeginForm("Index", "Article", new RouteValueDictionary { { "pageIndex", "" } }, new AjaxOptions { UpdateTargetId = "ProductList", HttpMethod = "Get", InsertionMode = InsertionMode.Replace }, new RouteValueDictionary { { "id", "searchForm" }, { "class", "form-inline well well-sm" } }))
    {
        <div class="searchform">
            <input type="text" name="search" placeholder="搜索考试名称" />
            <button type="submit" id="btn">搜索</button>
            <input type="hidden" id="date" name="date" />
            <input type="hidden" id="category" name="category" />
        </div>
        <div class="product-mod">
            <div class="product-tool">
                <span>默认排序</span>
                <dl class="subjectBox">
                    <dt>分类：</dt>
                    <dd class="info" onclick="SetCategory('book', this)">书籍</dd>
                    <dd class="info" onclick="SetCategory('phone', this)">手机</dd>
                    <dd class="info" onclick="SetCategory('soft', this)">软件</dd>
                </dl>
                <dl class="timeBox">
                    <dt>时间分类：</dt>
                    <dd class="info1" onclick="SetDate('Week', this)">近一周</dd>
                    <dd class="info1" onclick="SetDate('Month', this)">近一月</dd>
                    <dd class="info1" onclick="SetDate('Year', this)">近一年</dd>
                </dl>
            </div>
        </div>
    }
    <div id="ProductList">
        @{ Html.RenderPartial("_ArticleTable"); }
    </div>

</div>

@Scripts.Render("~/Scripts/MvcPager.js")
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
<script>
    function SetDate(filter, ele) {
        debugger;
        var c = $(ele);
        var b = c.hasClass("selected");
        $(".info1", ".timeBox").removeClass("selected");

        if (b) {
            c.removeClass("selected");
            $("#date").val("");
        }
        else {
            c.addClass("selected");
            $("#date").val(filter);
        }
        $("#btn").click();

    }
    function SetCategory(filter, ele) {
        var c = $(ele);
        var b = c.hasClass("selected");
        $(".info", ".subjectBox").removeClass("selected");

        if (b) {
            c.removeClass("selected");
            $("#category").val("");
        }
        else {
            c.addClass("selected");
            $("#category").val(filter);
        }
        $("#btn").click();
    }
</script>