ASP.NET MVC中使用MvcPager異步分頁+在分頁中複選框下一頁上一頁也保持選中

ASP.NET MVC 分頁使用的是做者楊濤的MvcPager分頁控件  地址:http://www.webdiyer.com/mvcpager/demos/ajaxpaging/

這個分頁控件在裏面有很好的的案例,及注意事項

分頁在咱們的項目中是常常須要使用到的,普通分頁體驗是在是太差了,每一次點擊下一步,會形成頁面刷新,本身都看不過去了 ,O(∩_∩)O哈哈~

因此此次咱們要使用這個控件在作一個MvcPager的異步分頁,分頁的時候咱們只刷新表格,而不是刷新頁面

下面咱們開始吧

一.分頁

首先咱們須要建立一個ASP.NET MVC的項目,具體怎麼建立就不細說了

以後咱們須要引入 控件的dll文件

我是在官網下的案例,直接引用的,

固然大家也能夠從NuGet包中引用

找到項目,點擊右鍵會有一個管理NuGet程序包,咱們打開它

 

 輸入Webdiyer找到,並安裝

實體類

Article.cs

public class Article
    {
        [Display(Name = "文章編號")]
        public int ID { get; set; }
        [Display(Name = "文章標題")]
        [MaxLength(200)]
        public string Title { get; set; }
        [Display(Name = "文章內容")]
        public string Content { get; set; }
        [Display(Name = "發佈日期")]
        public DateTime PubDate { get; set; }
        [Display(Name = "做者")]
        [MaxLength(20)]
        public string Author { get; set; }
        [Display(Name = "文章來源")]
        [MaxLength(20)]
        public string Source { get; set; }
    }

Cotroller

 

 public ActionResult AjaxPaging(int id = 1)
        {
            using (var db = new DataContext())
            {
                var model = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, 5);
　　　　　　　　　　//判斷是不是AJAX請求,若是爲true,就返回分部視圖
                if (Request.IsAjaxRequest())
                    return PartialView("_ArticleTable", model);
                return View(model);
            }
        }

應該能夠看到,咱們引用了這個分頁控件的時候,咱們返回的不在是List<T>,而是PagedList<T>

後面的ToPagedList(起始頁,每頁顯示條數),起始頁須要咱們在本方法中定義int id=1

View:

@model PagedList<MVCPager_Text.Models.Article>
@using Webdiyer.WebControls.Mvc;

//這個ID就是咱們在分頁須要來更新的ID
<div id="articles">
    @Html.Partial("_ArticleTable", Model)
</div>
@section scripts
{
    @{Html.RegisterMvcPagerScriptResource();}
　　　//這句話是必須的,用來註冊MVCPager,若是沒有可能形成Ajax請求無反應
}

在視圖中咱們引用的集合一樣也是PagedList<T>

@section scripts
{
    @{Html.RegisterMvcPagerScriptResource();}
　　　//這句話是必須的,用來註冊MVCPager,若是沒有可能形成Ajax請求無反應
}
注意:咱們的視圖是默認使用佈局頁 layout
咱們不能使佈局頁爲Null @{ layout=null} ,這樣會使咱們的異步分頁無效,咱們到控制器的Requset.isAjaxRequset()這一塊會一直是false

建立分部視圖:

 

 

建立完分佈頁,裏面的使咱們須要展現的表格

_ArticleTable:

@model PagedList<MVCPager_Text.Models.Article>
@using Webdiyer.WebControls.Mvc;
<table class="table table-bordered table-striped">
    <tr>
        <th class="nowrap">序號</th>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PubDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Author)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Source)
        </th>
    </tr>
    @{ int i = 0;}
    @foreach (var item in Model)
    {
        <tr>
            <td>@(Model.StartItemIndex + i++)</td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PubDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Author)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Source)
            </td>
        </tr>
    }
</table>
<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>" }).AjaxOptions(a => a.SetUpdateTargetId("articles"))
</div>

其中須要注意的是:

PageIndexParameterName是咱們控制器中的參數id,須要保持一致

咱們須要使用的是@Ajax.Pager(),而不是@Html.Pager

AjaxOptions(a => a.SetUpdateTargetId("articles")) 在官網的意思是用於構建MvcAjaxOptions對象的方法
咱們再來看一下

MvcAjaxOptions對象

UpdateTargetId:獲取或設置要使用服務器響應來更新的 DOM 元素的 ID。這個參數ID就使咱們在視圖中div的Id

上面咱們用的是AjaxOptions(a => a.SetUpdateTargetId("articles"))這個寫法,

MvcAjaxOptions對象怎麼使用呢

@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= "RecordList" })

經過上面這些咱們的異步分頁就已經作完了


二.複選框選中

當咱們點擊上一頁或者下一頁的時候咱們須要保持以前的複選框狀態,
並不會由於咱們點擊上一頁或者下一頁而改變狀態

複選框選中的前提就是咱們須要異步刷新,只刷新表格,不刷新頁面

在這個分頁控件上,有咱們須要的對象
MvcAjaxOptions對象
來看一下這個對象中咱們須要用到的屬性,一共只有兩個屬性咱們能夠用到:

OnBegin:獲取或設置要在更新頁面以前當即調用的 JavaScript 函數的名稱。
OnSuccess:獲取或設置在成功更新頁面以後要調用的 JavaScript 函數。

Code奉上:
分頁中咱們須要在MvcAjaxOptions中添加這兩個屬性,一個是在更新頁面以前調用的js函數(OnBegin),一個是在更新頁面以後調用的JS函數(OnSuccess)

    @Ajax.Pager(Model, new PagerOptions {
    PageIndexParameterName = "id",
    NumericPagerItemCount = 5,
    CssClass = "pagination",
    CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>",
    DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>",
    PagerItemTemplate = "<li>{0}</li>", Id = "bootstrappager"
},new MvcAjaxOptions { OnBegin= "GetCheckbox()",OnSuccess= "OnSuccess" } ).AjaxOptions(a => a.SetUpdateTargetId("RecordList").SetDataFormId("searchForm"))

 

GetCheckbox()函數

//定義一個數組來存儲,選中的ID
var select = new Array; 

function GetCheckbox() {
　　　　　　//.single是複選框的class
        $(".single").each(function () {
　　　　　　　　//判斷複選框的狀態,若是選中爲true
            if ($(this).prop('checked')) {
　　　　　　　　　　//判斷選中的複選框的val()值是否存在在該數組中select
                var index = $.inArray($(this).val(), select);
　　　　　　　　　　//不存在則會返回-1,不存在向數組中寫入
                if (index == -1) {
                    select.push($(this).val())
                }
            }  
            else {
　　　　　　　　　　//若是沒有選中,有可能會取消選中,咱們要判斷當前的頁面沒有選中的$(this).val()值是否在數組中select
                var index = $.inArray($(this).val(), select);
　　　　　　　　　　//若是存在則會返回存在數值在數組中的下標
                if (index >= 0) {
                    //刪除該下標的值
                    select.splice(index);
                }
            }
        })
    }

 

OnSuccess();

function OnSuccess() {
        $(".single").each(function () {
　　　　　　　　//當更新成功以後,咱們須要判斷當前頁面的複選框的$(this).val()是否存在於數組中select
            var index = $.inArray($(this).val(), select)
　　　　　　　　//存在則返回下標
            if (index >= 0) {
               // console.log("index=" + index + ",select[Index]=" + select[index])
　　　　　　　　　　
　　　　　　　　　　若是$(this).val()的值與數組中下標的值相同,則給它處於選中狀態
                if ($(this).val() == select[index]) {
                    $(this).prop('checked', 'checked');
                }
            }
        })
    }

這樣就能夠實現複選的選中,
不過須要注意的是:
當我第一次加載進入頁面的時候,就算你選中幾個複選框,數組中也是沒有數據的
由於只有你點擊下一頁或者是上一頁的時候纔會觸發函數,
因此咱們也須要在不點擊的時候進行當前頁的一個複選框的選中斷定

 

當我進入這個頁面,選中複選框以後,就點擊按鈕的時候也須要進行選中