使用MVCPager做AJAX分页所走的弯路

使用MVCPager做AJAX分页所需要注意的地方：

1.测试版本MvcPager-3.0.1

2.当需要使用页索引输入或下拉框以及使用Ajax分页模式时，必须用Html.RegisterMvcPagerScriptResource方法注册MvcPager客户端jQuery插件，不注册此插件则选择或输入页索引后将无法跳转，Ajax功能也无法正常运行。  

具体代码：@{Html.RegisterMvcPagerScriptResource();}  注：在view中加

3.一定要引用jquery.unobtrusive-ajax.min.js 这个JS插件

4.如果要更新部分页面，一定要把子页面的Model放到父页面的Model中传过去，不能使用html.action然后子页面去请求自己的数据这种方式。这点要切记啊！


5.也是致命的一点：分页条里面指定的UpdateTargetId 一定要是分页条的父级节点，而不能同级，反正我尝试的时候是这样子。


6.分页条写法：

@Ajax.Pager(Model, new PagerOptions { ShowPageIndexBox = true, PageIndexBoxType = PageIndexBoxType.TextBox, ShowGoButton = true }, new MvcAjaxOptions { UpdateTargetId = "Review", EnablePartialLoading = true })

 

 

 

 

 

model

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace ZuHao.Model
{

    public class Recharge
    {
        private long _id;
        ////<summary>
        ///
        ///</summary>
        public long Id
        {
            get { return _id; }
            set { _id = value; }
        }

        private string _username;
        ////<summary>
        ///
        ///</summary>
        public string UserName
        {
            get { return _username; }
            set { _username = value; }
        }

        private decimal _money;
        ////<summary>
        ///
        ///</summary>
        public decimal Money
        {
            get { return _money; }
            set { _money = value; }
        }

        private decimal _balance;
        ////<summary>
        ///
        ///</summary>
        public decimal Balance
        {
            get { return _balance; }
            set { _balance = value; }
        }

        private decimal _before;
        ////<summary>
        ///
        ///</summary>
        public decimal Before
        {
            get { return _before; }
            set { _before = value; }
        }

        private string _ip;
        ////<summary>
        ///
        ///</summary>
        public string Ip
        {
            get { return _ip; }
            set { _ip = value; }
        }

        private string _mark;
        ////<summary>
        ///
        ///</summary>
        public string Mark
        {
            get { return _mark; }
            set { _mark = value; }
        }
        private DateTime _operatedate;
        ////<summary>
        ///
        ///</summary>
        public DateTime OperateDate
        {
            get { return _operatedate; }
            set { _operatedate = value; }
        }

    }
}

Controller

 

 

        [HttpGet]
        [CheckLogin]
        public ActionResult MyOrder(int id = 1)
        {
            string username = Session["LoginUserId"].ToString();
            if (string.IsNullOrEmpty(username))
            {
                return View("Home/Login");
            }
      
            IDbConnection conn = new SqlConnection(connString);
            using (conn)
            {
                //检测用户名是否存在
                string sql = "SELECT * FROM Recharge WHERE UserName = @UserName";
                DynamicParameters Parameters = new DynamicParameters();
                Parameters.Add("UserName", username);
                PagedList<Recharge> recharges = conn.Query<ZuHao.Model.Recharge>(sql, Parameters).ToList().ToPagedList(id, 5);
                if (Request.IsAjaxRequest())
                {
                    return PartialView("_MyOrder", recharges);
                }
                return View(recharges);
            }

        }

MyOrder.cshtml

 

@model Webdiyer.WebControls.Mvc.PagedList<ZuHao.Model.Recharge>
@using Webdiyer.WebControls.Mvc;
@{
    ViewBag.Title = "我的订单  - 畅租网";
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}
<div class="container">
    <div class="row clearfix">
        <div class="col-md-3 column">
            <ul class="nav nav-pills nav-stacked">
                <li><a href="~/Main/PersonalData">我的账号</a></li>
                <!-- 这里的active属性就是使得所在的li的背景色变为蓝色-->
                <li class="active"><a href="~/Main/MyOrder">我的订单</a></li>
                <li><a href="~/Main/JoinVIP">开通续费VIP</a></li>
                <li><a href="~/Main/Quit">退出</a></li>
            </ul>
        </div>
        @{Html.RegisterMvcPagerScriptResource();}
        <div id="articles">
            @Html.Partial("_MyOrder", Model)
        </div>
    </div>
</div>

 

 

 

_MyOrder.cshtml

 

 

 

 

 

@model Webdiyer.WebControls.Mvc.PagedList<ZuHao.Model.Recharge>
@using Webdiyer.WebControls.Mvc;
<div class="col-md-9 column">
    <table class="table table-hover table-bordered">
        <tbody>
            <tr class="info">
                <th> 用户名 </th>
                <th> 充值金额 </th>
                <th> 当前余额 </th>
                <th> 之前余额 </th>
                <th> 充值日期 </th>
            </tr>
            @foreach (var perm in Model)
            {
                <tr class="">
                    <td>@perm.UserName.</td>
                    <td>@perm.Money</td>
                    <td>@perm.Balance</td>
                    <td>@perm.Before</td>
                    <td> @perm.OperateDate</td>
                </tr>
            }
        </tbody>
    </table>

    
    <div class="text-center">
        @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", 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>" }).AjaxOptions(a => a.SetUpdateTargetId("articles"))
    </div>
</div>

自定义DTO

            var query = db.Rescores.AsQueryable();
            if (!string.IsNullOrWhiteSpace(title))
                query = query.Where(a => a.RescoreName.Contains(title));
            if (!string.IsNullOrWhiteSpace(auditstate))
            {
                int temp = Convert.ToInt32(auditstate);
                query = query.Where(a => a.AuditState == temp);
            }
            var model = query.OrderByDescending(t => t.CreateDate).Select(x => new RescoreDTO
            {
                RescoreID = x.RescoreID,
                AuditState = x.AuditState,
                CreateDate = x.CreateDate,
                RescoreName = x.RescoreName,
                RescoreType = x.RescoreType
            });
            PagedList<RescoreDTO> pageList = new PagedList<RescoreDTO>(model, id, 10);
            foreach (var x in pageList)
            {
                x.ClassNV = GetClassNV(x.RescoreID, db);
                x.RescoreType = GetDictionaryName(x.RescoreType, "zylb", db);
            }
            if (Request.IsAjaxRequest())
                return PartialView("_AjaxResourceManage", pageList);
            return View(pageList);