Custom / Efficient Paging in ASP.NET MVC 3 using Skip() and Take() LINQ methods

Recently, I was required to create custom paging in an MVC 3 application after posting a question at at http://stackoverflow.com/q/11662772/1182982 I was asked to use Skip() and Take() LINQ methods.

So keeping that in mind, below is what I had tried and it worked !

You can download the code from here and run/debug/see for yourself.. http://yassershaikh.com/wp-content/uploads/2012/07/CustomPagingDemo.rar

Product.cs

public class Product
{
    public string ProductName;
    public string CompanyName;
}

Model -> IndexModel

public class IndexModel
{
    public List<Product> Products { get; set; }
}

Controller

public class HomeController : Controller
{

    List<Product> products = new List<Product>()
    {
        // 12 products
        new Product(){CompanyName = "Samsung", ProductName = "Galaxy S III"},
        new Product(){CompanyName = "Samsung", ProductName = "Galaxy S III"},
        new Product(){CompanyName = "Apple", ProductName = "Ipad 3"},
        new Product(){CompanyName = "Karbon", ProductName = "Kaamaal"},
        new Product(){CompanyName = "Warren", ProductName = "Jistern"},
        new Product(){CompanyName = "Kolles", ProductName = "Avenski"},
        new Product(){CompanyName = "lll", ProductName = "bbb7"},
        new Product(){CompanyName = "nnn", ProductName = "bbb8"},
        new Product(){CompanyName = "mmm", ProductName = "bbb9"},
        new Product(){CompanyName = "ttt", ProductName = "bbb10"},
        new Product(){CompanyName = "uuu", ProductName = "bbb11"},
        new Product(){CompanyName = "yyy", ProductName = "bbb13"},
        new Product(){CompanyName = "ooo", ProductName = "bbb12"},
    };

    private const int PageSize = 3;

    public ActionResult Index(int page = 1)
    {
        var productlist = products.Skip((page – 1) * PageSize).Take(PageSize).ToList();
        var model = new IndexModel();
        model.Products = productlist;

        ViewBag.CurrentPage = page;
        ViewBag.PageSize = PageSize;
        ViewBag.TotalPages = Math.Ceiling((double)products.Count() / PageSize);

        return View(model);
    }

    public ActionResult About()
    {
        return View();
    }
}

View – Index View

@model CustomPagingDemo.Models.IndexModel

@{
    ViewBag.Title = "Home Page";
}

<p>
    @foreach (var product in Model.Products)
    {
        <table width="500px">
        <tr>
        <td width="50%">@product.CompanyName</td>
        <td width="50%">@product.ProductName</td>
        </tr>
        </table>
    }
</p>

<!– Page links below -–>
<p>
    @for(int i= 1; i<=ViewBag.TotalPages; i++)
    {
        <a href="@Url.Action("Index","Home", new { page = i } )">@i</a>
    }
</p>

About Yasser Shaikh

Hello, I am a Web Dev, employed with Media.Net where I primarily work on ASP.NET MVC and Angular JS based developement.

Questions? Enquiries? Comments? Or even just want to say “Hi” to me, you are welcome to all of that. Just drop me a message at “mail@yassershaikh.com” and I’ll get back to you as soon as possible.

Cheers !

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>