.net MVC4 ajax分頁技術實現

標籤：

實現思路：利用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代碼已上傳至下載頻道。

.net MVC4 ajax分頁技術實現