1、Model類
public class News
{
public int ID { get; set; }
public string Name { get; set; }
}
2、Controller返回數據
private List<News> GetALL()
{
List<News> list = new List<News>();
for (int i = 0; i < 100; i++)
{
list.Add(new News { ID = i, Name = "我是ID" + i });
}
return list;
}
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult AjaxPaging(int id = 1)
{
var model = GetALL().OrderBy(a => a.ID).ToPagedList(id, 5);
if (Request.IsAjaxRequest())
return PartialView("_AjaxPagingList", model);
return View(model);
}
3、View頁面
一、AjaxPaging.cshtml 頁面
@{
ViewBag.Title = "分頁";
}
@model PagedList<News>
<div id="news">
@Html.Partial("_AjaxPagingList", Model)
</div>
@section scripts
{
@{Html.RegisterMvcPagerScriptResource();}
<script type="text/javascript">
function handleSuccess(data, xhr, status) {
$("input[type='checkbox']").each(function (index, element) {
if ($.inArray(this.value, boxArray) != -1) {
$(this).prop('checked', true);
}
});
}
</script>
<script>
var boxArray = new Array();
$(document).on("click", "input[type='checkbox']", function () {
if ($(this).prop('checked')) {
if ($.inArray(this.value, boxArray) == -1) {
boxArray.push(this.value);
}
}
else {
boxArray.splice(jQuery.inArray(this.value, boxArray), 1);
}
alert(boxArray.join(","));
});
</script>
}
二、_AjaxPagingList.cshtml 頁面
@model PagedList<News>
@{ Html.RenderPartial("_AjaxPagingTable"); }
<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>" }, new MvcAjaxOptions { UpdateTargetId = "news", OnSuccess = "handleSuccess" })
</div>
三、_AjaxPagingTable.cshtml 頁面
@model PagedList<News>
<table class="table table-striped table-bordered">
<tr>
<th class="nowrap">複選框</th>
<th class="nowrap">
@Html.DisplayNameFor(model => model.ID)
</th>
<th class="nowrap">
@Html.DisplayNameFor(model => model.Name)
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td><input type="checkbox" value="@item.ID" /></td>
<td>
@Html.DisplayFor(modelItem => item.ID)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
</tr>
}
</table>