【ASP.NET】使用MvcPager实现分页功能

首先在NuGet中安装MvcPager

官网:

http://www.webdiyer.com/mvcpager/

 

命名空间为using Webdiyer.WebControls.Mvc;

 

视图Index

@using Webdiyer.WebControls.Mvc;
@model PagedList<Web_MVC_4_5.Models.Student>

@{
    ViewBag.Title = "Index";
}

<div>

    <h2>Index</h2>

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>

    <div id="studentList">
        @Html.Partial("_AjaxStudents", Model)
    </div>
</div>

@section scripts{
    @{Html.RegisterMvcPagerScriptResource();}
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script type="text/javascript">
        function submitForm() {
            $("#pageSizeForm").submit();
          
        }
    </script>
}

_AjaxStudents.cshtml

@using Webdiyer.WebControls.Mvc;
@model PagedList<Web_MVC_4_5.Models.Student>
@{
    Layout = null;
}

@{ Html.RenderPartial("_StudentTable"); }

<div class="row">
    <div class="col-xs-8">
        @Ajax.Pager(Model, new PagerOptions {
       PageIndexParameterName = "pageIndex",//设置路由Url中页索引参数的名称。
       ContainerTagName = "ul",//设置分页控件html容器标签名
       CssClass = "pagination",//设置应用于分页控件的CSS样式类。
       CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>",//设置当前页分页元素的html模板
       DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>",//设置已禁用的分页元素的html模板
       PagerItemTemplate = "<li>{0}</li>",//设置包含数字页、当前页及上、下、前、后分页元素的html模板
       PageIndexBoxId = "pageIndexBox",//设置页索引输入或选择框的客户端ID

       FirstPageText = "<<",//设置第一页导航按钮上显示的文本
       PrevPageText = "<",//设置上一页导航按钮上显示的文本
       NextPageText = ">",//设置下一页导航按钮上显示的文本
       LastPageText = ">>",//设置最后一页导航按钮上显示的文本
       NumericPagerItemCount = 5//设置数字页索引分页按钮数目

       //CurrentPageNumberFormatString= "*"//设置当前页索引格式字符串

   }).Options(o => o.AddRouteValue("target", "studentList")).AjaxOptions(a => a.SetUpdateTargetId("studentList")) @*设置分页后要通过Ajax来更新的 DOM 元素的 ID*@
</div>

<div class="col-xs-4">
    <div class="input-group" style="margin:20px 0">
        <span class="input-group-addon">转到第</span>
        <input type="text" id="pageIndexBox" class="form-control input-sm" />
        <span class="input-group-addon">页</span>
        <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn">跳转</button></span>
        <span class="nput-group-addon">

        </span>
    </div>
</div>
</div>

_StudentTable.cshtml

@using Webdiyer.WebControls.Mvc;
@model PagedList<Web_MVC_4_5.Models.Student>
@{
    Layout = null;
}

<table class="table table-bordered table-striped">
    <tr>
        <th class="nowrap">序号</th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Sex)
        </th>
    </tr>
    @{ int i = 0;}
    @foreach (var item in Model)
    {
        <tr>
            <td>@(Model.StartItemIndex + i++)</td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Age)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Sex)
            </td>
        </tr>
    }
</table>

Controller

public ActionResult Index(int pageIndex = 1,int pageSize = 2)
{
    //获取分页数据  
    var model = db.Student.OrderBy(x => x.Id).ToPagedList(pageIndex, pageSize);

    if (Request.IsAjaxRequest())
    {
        var target = Request.QueryString["target"];
        if (target == "studentList")//如果只有一个表,可以不添加该判断
        {
            return PartialView("_AjaxStudents", model);
        }
    }

    return View(model);
}

效果

相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页