|
实现思路：利用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 = list;
if (Request.IsAjaxRequest())
{
return PartialView("_UserList");
}
else
{
return View();
}
}
简要说明：当前请求为异步请求时直接调用PartialView，否则转向List主视图。List的主视图代码如下：
@{
ViewBag.Title = "List";
}
<link href="~/Contents/css/pager/pager-bar.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.3.min.js"></script>
<script src="~/Scripts/paginator.js"></script>
<div id="UserList">
@Html.Partial("_UserList")
</div>
<div id="PageBar"></div>
简要说明：主视图中引用了我的局部视图_UserList，而我的分页代码放在了局部视图中，局部视图代码如下：
２，我的局部视图名为：＿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代码已上传至下载频道。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
