首页 > 代码库 > .net MVC4 ajax分页技术实现

.net MVC4 ajax分页技术实现

实现思路:利用MVC的PartialView实现局部内容异步加载。

实现过程 :

1,我的主列表页命名为List,访问URL为:/Test/List,control代码如下:

 public ActionResult List()
        {
            PagingSetting ps = GetPagingSeting();
            ListPage<SYS_USER> list = new UserBLL().GetList(new Dictionary<string, object>(), ps);
            ViewBag.Data = http://www.mamicode.com/list;


            if (Request.IsAjaxRequest())
            {
                return PartialView("_UserList");
            }
            else
            {
                return View();
            }
        }

简要说明:当前请求为异步请求时直接调用PartialView,否则转向List主视图。List的主视图代码如下:

@{
    ViewBag.Title = "List";
}
<link href=http://www.mamicode.com/"~/Contents/css/pager/pager-bar.css" rel="stylesheet" />
<script src=http://www.mamicode.com/"~/Scripts/jquery-1.8.3.min.js"></script>
<script src=http://www.mamicode.com/"~/Scripts/paginator.js"></script>


<div id="UserList">
   @Html.Partial("_UserList")
</div>
<div id="PageBar"></div>

简要说明:主视图中引用了我的局部视图_UserList,而我的分页代码放在了局部视图中,局部视图代码如下:

2,我的局部视图名为:_UserList.cshtml  局部视图主要实现需异步调取的内容,代码如下:

@{
    HH.Model.ListPage<HH.Model.SYS_USER> model = ViewBag.Data as HH.Model.ListPage<HH.Model.SYS_USER>;
    List<HH.Model.SYS_USER> list = model.ListData as List<HH.Model.SYS_USER>;
}


    @{foreach (var item in list)
    {
        <h4>@item.USER_NAME</h4>
    }
    }
   
    <script type="text/javascript">
        $(function () {
            $("#PageBar").Paginator({
                currentPage:@(model.CurrentPage),
                totalPages:@(model.TotalPages),
                pagesCount: 10,
                onPageClicked: function (page) {
                    $.post("/Test/List/?rand="+Math.random(),{page:page},function(data){
                        $("#UserList").html(data);
                    });
                }
            });


        });
    </script>

简要说明:我的局部视图,使用一段js调取分页的相关信息,每一次异步请求该局部视图,我都将该段js返回主视图中。这样做的主要目的是把处理分页的主要业务逻辑与主视图分开,作为一个单独模块处理,相对解耦。

3,最终列表界面如下:

技术分享

总结说明:点击分页按钮时,发起一次异步请求,异步请求直接调用局部视图,返回MVCHtmlString到主视图中,完成分页过程。相关JS和CSS代码已上传至下载频道。

.net MVC4 ajax分页技术实现