How to implement paging & sorting in MVC 3 , Part 3 – How to use it for scroll loading like twitter

I have implemented a paging & sorting functions myself in mvc 3. It is extremely easy to integrate and extend, plus is required minimum codes in View & Action method. How cool is that. Let me show you how to use it with a simple example. Example can be downloaded here.

1. paging & sorting with postbacks (non-ajax)

I create a domain object People for demo purpose, it has 3 properties.

public class People
{
public int Id { get; set; }
public string Username { get; set; }
public int Age { get; set; }
}

View: ( the model of the view returns a IPagedList<People>)

javascript function loadMore is posting back to server to load data for the next page.

and $(window).scroll() is registered to trigger the loadMore function when scroll to bottom ( here I set 150px before reach the bottom, I find it have better UI experience, you can always adjust this by yourself)

@model MvcPaging.IPagedList<PagingSorting.Web.Models.People>
@using MvcPaging

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<script type="text/javascript">
    $(document).ready(function () {
        $(window).scrollTop('0px'); 
        var page = 2;
        var lock = false;
        $(window).scroll(function () {
            if ($(window).scrollTop() + 150 >= ($(document).height() - ($(window).height()))) {
                if (!lock) {
                    lock = true;
                    $('#scroll-loadingcontainer').show();
                    loadMore();
                }
            }
        });

        function loadMore() {
            $.post('@Url.Content("~/Scroll/AjaxPeople")', { Page: page }, function (data) {
                lock = false;
                page++;
                $('#gridcontainer .grid tbody').append(data);
                $('#scroll-loadingcontainer').hide();
            });
        }
    });
</script>

<div id="gridcontainer">
    <table class="grid">
<thead>
    <tr>
        <th>@Html.ActionLink("Id", "Index", Model)</th>
        <th>@Html.ActionLink("Username", "Index", Model)</th>
        <th>@Html.ActionLink("Age", "Index", Model)</th>
    </tr>
</thead>
<tbody>
    @Html.Partial("PeopleGridPartial",Model)
</tbody>
</table>
</div>

<div id="scroll-loadingcontainer">
</div>

PeopleGridPartial.cshtml (Partial view for ajax postback)

@model MvcPaging.IPagedList<PagingSorting.Web.Models.People>
@foreach (var i in Model) { 
    <tr>
        <td>@i.Id</td>
        <td>@i.Username</td>
        <td>@i.Age</td>
    </tr>
}

Controller Action:

a few things need to note here,

a. parameters need to be included for the method, page, sortBy, sortDescending

b. the pageIndex start with 0, if you pass null to “page”, it needs to be initiated as 0 for “PagingOption”

c. PeopleList is a IQueryable<People>, for your project you will get the list of items from repository.

d. convert the IQueryable<People> list to IPagedList by passing in the PagingOption.

        public ActionResult Index(int? Page, string SortBy, bool? SortDescending)
        {
            int currentPageIndex = Page.HasValue ? Page.Value - 1 : 0;
            var option = new PagingOption { Page = currentPageIndex, PageSize = PageSize, SortBy = SortBy, SortDescending = SortDescending };

            var items = PeopleList.ToPagedList(option);
            return View(items);
        }

        public ActionResult AjaxPeople(int? Page, string SortBy, bool? SortDescending)
        {
            int currentPageIndex = Page.HasValue ? Page.Value - 1 : 0;
            var option = new PagingOption { Page = currentPageIndex, PageSize = PageSize, SortBy = SortBy, SortDescending = SortDescending };
            var items = PeopleList.ToPagedList(option);

            return PartialView("PeopleGridPartial", items);
        }


Styles
: (You can refer to the last post as well)

style your div.pager, you can create styles for

.pager a (all the links in div.pager)

.pager .disabled (to display disabled link, eg. Previous or Next)

.pager .current (to display current page link)

.sort-off (sorting style for column header)

.sort-desc (descending style for column header)

.sort-asc (ascending style for column header)

.pager
{
	margin:8px 3px;
	padding:3px;
}

.pager .disabled
{
	border:1px solid #ddd;
	color:#999;
	margin-top:4px;
	padding:3px;
	text-align:center;
}

.pager .current
{
	background-color:#06c;
	border:1px solid #009;
	color:#fff;
	font-weight:bold;
	margin-top:4px;
	padding:3px 5px;
	text-align:center;
}

.pager span, .pager a
{
	margin: 4px 3px;
}

.pager a
{
	border:1px solid #c0c0c0;
	padding:3px 5px;
	text-align:center;
	text-decoration:none;
}

#loadingcontainer
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:#efefef url('./images/ajax-loader.gif') no-repeat center center;
z-index:100;
opacity:0.8;
filter:alpha(opacity=80);
display:none;
}

#scroll-loadingcontainer
{
width:100%;
height: 50px;
background:#efefef url('./images/ajax-loader.gif') no-repeat center center;
z-index:100;
opacity:0.8;
filter:alpha(opacity=80);
display:none;
}

.grid
{
width:100%;
}

.grid td
{
line-height:35px;
}

.sort-off
{
width:100%;
display:inline-block;
background:none;
}

.sort-desc
{
width:100%;
display:inline-block;
background:transparent url('./images/icon_down_sort_arrow.png') no-repeat right center;
}

.sort-asc
{
width:100%;
display:inline-block;
background:transparent url('./images/icon_up_sort_arrow.png') no-repeat right center;
}

Images: (loading & sorting images)

You can download the example here: https://itsharp-mvc-pagingsorting.googlecode.com/svn/trunk/

Advertisements

One thought on “How to implement paging & sorting in MVC 3 , Part 3 – How to use it for scroll loading like twitter

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s