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"  />
                                    </p>
                                    <p class="p-margin">到</p>
                                    <p class="p-content">
                                        <input type="text"  />
                                    </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"  />
                                </div>
                            }

                        </div>
                        <div class="task-management--bottom" >
                            @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>