zoukankan      html  css  js  c++  java
  • ASP.Net MVC4.0+无刷新分页

    新建项目后必须引用MvcPager.dll    注意引用4.0+版本以上哦

    分页控制器

    using System;
    using System.Collections.Generic;
    using System.Configuration;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using Webdiyer.WebControls.Mvc;
    
    namespace MvcDemo.Controllers
    {
        public class PageUnitController : Controller
        {
            // GET: PageUnit
            public ActionResult Index(int? id, string name)
            {
                List<Person> data = new List<Person>();
                for (int i = 0; i < 100; i++)
                {
                    data.Add(new Person(){ID=i,Name="Name"+i});
                }
                id = id ?? 1;
                int pageSize = 3;
                //IQueryable<Person> temp = db.Person.Where(c =>true).OrderBy(c=>c.ID);
                IQueryable<Person> temp = data.AsQueryable();
                PagedList<Person> pageList = temp.AsQueryable<Person>().ToPagedList<Person>(id.Value, pageSize);
                if (Request.IsAjaxRequest())
                {
                    return PartialView("_ParIndex", pageList);
                }
                return View(pageList);
            }
        }
    
        public class Person 
        {
            public int ID { get; set; }
            public string Name { get; set; }
        }
    }
    View Code

    视图

    @using Webdiyer.WebControls.Mvc
    @model PagedList<MvcDemo.Controllers.Person>
    @{
        ViewBag.Title = "Index";
    }
    <div id="articles">
        @Html.Partial("_ParIndex", Model)
    </div>
    @section scripts{@{Html.RegisterMvcPagerScriptResource();}} 

    此处注意,一定要加上最后一句话@section scripts{@{Html.RegisterMvcPagerScriptResource();}}  ,否则无刷新失效,页码跳转也失效哦

    分部视图

    @using Webdiyer.WebControls.Mvc
    @model Webdiyer.WebControls.Mvc.PagedList<MvcDemo.Controllers.Person>
    <table class="table table-bordered table-striped">
        <tr>
            <th class="nowrap">序号</th>
            <th>
                姓名
            </th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
            </tr>
        }
    </table>
    
    @*下拉选择跳转*@
    <div class="row">
        <div class="col-xs-8">
            @Ajax.Pager(Model, new PagerOptions { FirstPageText = "<<", LastPageText = ">>", NextPageText = ">", PrevPageText = "<", PageIndexParameterName = "id", NumericPagerItemCount = 5, ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class="active"><a href="#">{0}</a></li>", DisabledPagerItemTemplate = "<li class="disabled"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>", PageIndexBoxId = "pageIndexBox" }).Options(o => o.AddRouteValue("target", "articles")).AjaxOptions(a => a.SetUpdateTargetId("articles"))
        </div>
        <div class="col-xs-4">
            <div class="input-group" style="margin:20px 0">
                <span class="input-group-addon">转到第</span>
                <select id="pageIndexBox" class="form-control input-sm"></select>
                <span class="input-group-addon">页</span>
            </div>
        </div>
    </div>
    
    @*输入跳转到指定页*@
    @*<div class="row">
            <div class="col-xs-8">
                @Ajax.Pager(Model, new PagerOptions { FirstPageText = "<<", LastPageText = ">>", NextPageText = ">", PrevPageText = "<", ContainerTagName = "ul", PageIndexParameterName = "id",NumericPagerItemCount = 5, CssClass = "pagination", CurrentPagerItemTemplate = "<li class="active"><a href="#">{0}</a></li>", DisabledPagerItemTemplate = "<li class="disabled"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>", PageIndexBoxId = "pageIndexBox2", GoToButtonId = "goToBtn2" }).Options(o => o.AddRouteValue("target", "articles")).AjaxOptions(a => a.SetUpdateTargetId("articles"))
            </div>
            <div class="col-xs-4">
                <div class="input-group" style="margin:20px 0">
                    <span class="input-group-addon">转到第</span>
                    <input type="text" id="pageIndexBox2" class="form-control input-sm" />
                    <span class="input-group-addon">页</span>
                    <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn2">跳转</button></span>
                </div>
            </div>
        </div>*@
    View Code

    参考地址:http://www.webdiyer.com/mvcpager/demos/ajaxpagers/

  • 相关阅读:
    Ansible批量更新远程主机用户密码
    国外程序员推荐:每个程序员都应该读的非编程书
    FindFriendsServer服务搭建
    Android JNI HelloWorld实现
    2014年4月读书单
    jQuery 之父:每天写代码
    QT210 Android4.0源码编译和烧录文档整理
    Android系统分区理解及分区目录细解
    Android组件Spinner使用
    使用事件驱动模型实现高效稳定的网络服务器程序
  • 原文地址:https://www.cnblogs.com/SmilePastaLi/p/7526941.html
Copyright © 2011-2022 走看看