TT template for MVC Grid with ordering and paging

In my previous posts I wrote about my extensions to MVCContrib grid like paging and ordering.

It’s tedious work to create the pages with the grid and define all the columns by hand. As you know from MVC RC1 it’s possible to use the TT templates to gerenate the views. I found a TT template fofr MVC Grid somewhere on the web and I extended it to generate the views using my extentions for ordering an paging.

Here is a screenshot from the template:


When you copy such template to the folder:

C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC\CodeTemplates\AddView

then you will be able to use it in the dialog:


and here is the result:


While generating the view using the entities which are derived from some base class which is not in the same assembly as the entity, you can get the exception “Could not load type …”. You need to copy the base assembly to the location “C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\PrivateAssemblies\\” and then it starts to work properly.

Using such template mechanism the developer can create the lists, details, etc. very quickly . The heart of the whole process is TT template. Just briefly, there is quite exhaustive blog here regarding TT templates.

The template can be found here

Ordering in the MVCcontrib grid

I miss an ordering functionality in the grid so I had to extend it using and extension method of HtmlHelper.

What I want to achieve
When a user comes to my grid, the url could be i.e.

and when the user clicks a link in the header to order the data in the gird then the URL could be changed to,true

In addition we should be able to inform the user about current ordering (asc,desc)  and the user should have possibility to click the link to change the ordering in the header.

In short something like this:


Current MVCContrib doesn’t include such support so I added it.

I made an extension methods which you can you like in the following:


OrerbyLink extension methods have to check the current URL to see what’s the current ordering. It would be nicer if this would be part of some
interface as well as it is done with IPagination.

I think, it would be quite good if IPagination would be renamed to ICollectionModel which could contain both:
1) info about the pagination
2) info about the ordering
3) collection of the data itself

And then it would be good if there would be an easy way who to wrap the custom IEnumarable<T> to ICollectionModel. Propable using an extension method as it’s doen via AsPagination<T>().

The code can be downloaded from here

What do you think?


Based on the feedback I’ve got I decided to write more about the pager I wrote in recent days. I use this control with MVCContrib Grid control.

The main difference is that my Pager control doesn’t required the IPagination interface.

You can call it like this:

<%=Html.Pager(Model.Search.CurrentPageIndex, Model.Search.MaxRowsPerPage, Model.Search.TotalRowCount)%>

That’s all and it will look like the following picture:


The code can be downloaded from here The link points to the ZIP file which contains 2 files, both are extensions. When you want to use the pager you havet o reference latest MVCContrib library as the pager links are built using MVCCongrib.UI.Tags.Link class.

When I use MVCContrib library I use to add the namespaces to the web.config.  Just FYI: you need to add to web.config the following:

<add namespace="MvcContrib.UI.Pager"/>

That’s all for now. Next will be ordering :o)

Exploring new MVCContrib.Grid

Last week there was published new Grid from MVCContrib project. (I’ve got the info from Jeremy Skinner’s comment to my previous blog). I’m happy that based on Jeremy’s comment all my extensions were added to the grid so it’s not necessary to add any new extensions. There is only one difference between current MVC grid and my extensions: using dictionary versus annonymous object. I must say using dictionary (Hash class) is easy to use and fits the requirements.

I must say, I like the design how is the grid done – there are clearly separated concerns:

  1. grid model – defines we want to display
  2. grid renderer – the special class used only for rendering the grid

Then there was created a pager (in previous version it was part of the grid and it’s separated now which is clean)

After downloading the source code I had to refactor my code (i.e. Attrs renamed to Attribute, etc.) which was very easy to be done.

Here is an simple which displays how the grid can be used:

              columns =>
                  columns.For(item => Html.ActionLink<OrganizationController>(c => c.Edit(item.ID), " Edit ", new { Class = "none left" }))
                  columns.For(item => item.Name).Named(Html.OrderableHeader("Name") );
                  columns.For(item => item.URLName).Named(Html.OrderableHeader("Short Name", "URLName"));
                  columns.For(item => Html.ActionLink<OrganizationController>(
                                  c => c.Delete(item.ID),
                                  "<span class=\"redC\">X</span>", 
                                  new { id = "lnkDel", Class = "none left", title = "Delete", onclick = "Assure(event, 'Are you sure ?');"},
                      .Attributes(item => new Hash(Class => "w30 redC"));
     .Empty("There are no data")
     .Attributes(new Hash(Class => "list w50p", id => "mainGrid"))
     .RowAttributes(data => new Hash( id => "row", Class => "Prenatal {0}".FormatWith(data.IsAlternate ? "odd" : "") ))
    <%=Html.Pager(Model.Search.CurrentPage, Model.Search.MaxRowsPerPage, Model.Search.TotalRowCount)%>

I use my own implementation for Pager because my collections doesn’t imlpement IPagination so I can’t use the MVCContrib Pager.