.net MVC4 ajax分页技术实现

前端之家收集整理的这篇文章主要介绍了.net MVC4 ajax分页技术实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

实现过程 :

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

public ActionResult List()@H_404_7@ {@H_404_7@ PagingSetting ps = GetPagingSeting();@H_404_7@ ListPage<SYS_USER> list = new UserBLL().GetList(new Dictionary<string,object>(),ps);@H_404_7@ ViewBag.Data = list;@H_404_7@ @H_404_7@ @H_404_7@ if (Request.IsAjaxRequest())@H_404_7@ {@H_404_7@ return PartialView("_UserList");@H_404_7@ }@H_404_7@ else@H_404_7@ {@H_404_7@ return View();@H_404_7@ }@H_404_7@ }@H_404_7@

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

@{@H_404_7@ ViewBag.Title = "List";@H_404_7@ }@H_404_7@ <link href="~/Contents/css/pager/pager-bar.css" rel="stylesheet" />@H_404_7@ <script src="~/Scripts/jquery-1.8.3.min.js"></script>@H_404_7@ <script src="~/Scripts/paginator.js"></script>@H_404_7@ @H_404_7@ @H_404_7@ <div id="UserList">@H_404_7@ @Html.Partial("_UserList")@H_404_7@ </div>@H_404_7@ <div id="PageBar"></div>@H_404_7@

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

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

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

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

3,最终列表界面如下:

@H_404_7@

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

猜你在找的Ajax相关文章