asp.net MVC 异步分页 PagedList

最近做一个项目要有的异步分页，先记录下来！

引用：

PagedList.css

MvcPager.js

<link href="~/css/sweetalert2.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/js/sweetalert2.min.js"></script>
<script src="~/js/pikaday.min.js"></script>

sweetalert2：弹框插件

pikaday：时间插件

1、表单

<div class="manuscript-mutual  pages-manus">
<div class="content--top clearfix task-management--top">
@using (Ajax.BeginForm("TaskManagement",
new RouteValueDictionary { { "id", "" } },
new AjaxOptions
{
UpdateTargetId = "taskManagementId",
HttpMethod = "Get",
InsertionMode = InsertionMode.Replace,
OnBegin = "tmonBegin",
OnSuccess = "tmonSuccess"
},
new RouteValueDictionary { { "id", "taskManagementForm" } }))
{
<div class="fl">
<p class="p-content">
<input type="text" id="sTimea" name="sTimea" placeholder="开始时间" class="time" readonly="readonly" />
</p>
<p class="p-margin">到</p>
<p class="p-content">
<input type="text" id="eTimea" name="eTimea" placeholder="结束时间" class="time" readonly="readonly" />
</p>

<p class="search--time">
<button class="search-time"><span>按日期检索</span></button>
</p>
</div>

<div class="content-whole clearfix fr">
<img src="/img/whole.png" alt="" class="fl" />
<input class="whole-btn whole-search fl" type="submit" id="taskManagementid" value="全部显示" />
</div>
}

</div>
<div class="task-management--bottom" id="taskManagementId">
@Html.Partial("_MyReleased", Model.ArticleList1)
</div>
</div>

@section Scripts
{@{Html.RegisterMvcPagerScriptResource();}
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>}

id:页码，用于传递页码数

taskManagementId：用于异步刷新内容，这地方坑我好多时间。

@using Webdiyer.WebControls.Mvc;
@model Webdiyer.WebControls.Mvc.PagedList<Entity.MissionProgress>

<ul class="clearfix">
@foreach (var item in Model)
{
<li class="fl clearfix">
@{ string imgurl = string.IsNullOrEmpty(item.MissionList.MediaUnits.img) ? "/img/test.jpg" : item.MissionList.MediaUnits.img;}
<img src="@imgurl" alt="" class="head-img fl" />
<div class="task-management--list fl">
<h3>@item.MissionList.name</h3>
<p class="content-abs">@item.MissionList.claims</p>
<div class="task-management--time">
<img src="/img/s-time.png" alt="" />
@item.MissionList.startDateTime —— @item.MissionList.endDateTime
</div>
</div>
<div class="fl gold-media">
<p>目标媒体<em>@missionListIdCount 个</em></p>
<p><em>@executeType0</em>个未领取任务</p>
<p><em>@executeType1</em>个正在执行任务</p>
<p><em>@executeType2</em>个已完成任务</p>
</div>
<div class="fl task-btn">
@{
int? executeType = item.executeType;
string typetext = string.Empty;
switch (executeType)
{
case 0:
typetext = "领取任务";
break;
case 1:
typetext = "正在执行";
break;
case 2:
typetext = "已完成";
break;
default:
typetext = "领取任务";
break;
}
}
<button class="fr task-btn--ing ">@typetext</button>
</div>
</li>
}
</ul>

<div class="list-page clearfix task-list--page">
<div class="list-page--ct fr clearfix">
@Ajax.Pager(Model, new PagerOptions
{
FirstPageText = "首页",
PrevPageText = "上一页",
NextPageText = "下一页",
LastPageText = "尾页",
PageIndexParameterName = "id",
ContainerTagName = "div",
CssClass = "pagination",
CurrentPagerItemTemplate = "<span class=\"current\">{0}</span>",
DisabledPagerItemTemplate = "<span class=\"disabled\">{0}</span>",
Id = "badoopager",
}).AjaxOptions(a => a.SetUpdateTargetId("taskManagementId").SetDataFormId("taskManagementForm"))
</div>
</div>