asp.net-mvc-3paginationwebgrid

ASP.NET MVC3 - Pagination Only (No WebGrid to be Displayed)


I'm seeking to display my images with a short title in a flow from left to right as opposed to the gridview that is a sequential layout. I desire to use the pagination that the webgrid provides so as not to recreate the wheel, as it were.

I've reviewed Leek's blog post (http://msdn.microsoft.com/en-gb/magazine/hh288075.aspx) and Broer's (http://blog.bekijkhet.com/2011/03/mvc3-webgrid-html-helper-paging.html) to ensure I have a solid introduction to the use of the webgrid but I'm falling short on how to apply the pagination without using the traditional layout of the webgrid.

I am using the Razor layouts.

Ideas or thoughts?

My controller is currently:

public ActionResult Index(string cid)
{
  Catalog item = new Catalog();
  item.objConnection.Open();
  OdbcDataReader reader = item.getCatalogItems(cid, 3);

  List<Catalog> listItems = new List<Catalog>();

  while (reader.Read())
  {
    Catalog i = new Catalog();
    i.kitName = reader.GetValue(1).ToString();
    i.catalogID = reader.GetValue(0).ToString();
    ViewBag.CatalogName = reader.GetValue(0).ToString(); //TODO: change this to name once in place
    listItems.Add(i);
  }

  ViewBag.ItemsPerCatagory = listItems.Count;

  reader.Close();
  item.objConnection.Close();

  return View(listItems);
}

My View:

@model  IEnumerable<MvcApplication1.Models.Catalog>
@{
    ViewBag.Title = ViewBag.CatalogName;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

  <h2>@ViewBag.CatalogName (@ViewBag.ItemsPerCatagory) Items Available</h2>
  <p>
  Category will have a brief description here for seo purposes.
  </p>
  <p>

@foreach (var catalog in Model)
{
  string imageUrl = "http://web3.naeir.org/images/Specials/" + @catalog.kitName + ".JPG";
    <img src=@imageUrl height="150px" width="150px" /> @Html.ActionLink(@catalog.kitName, "Details", "Product", new { cid = @catalog.catalogID, itemid = @catalog.kitName }, null) 
}
  </p>

Solution

  • Upon much hacking at my code I found that a simple option exist and my solution was to use MVCPager MVC Pager Website

    I was able to simply download it via VS Web Developer Express Package Manager NuGet, read the documentation and implemented the code. Pretty straight forward.