MvcContrib – Grid – a diamond in the rough

The MvcContrib is a community driven code repository for asp.net mvc.  I’m quite impressed and hope to see more cool stuff.  The source code is available on codeplex. (check out the additional documentation here)

A couple of items from the contrib that I’m looking into:

1. UI – Grid

2. Pagination

There is some easy to read documentation on the grid as well as how it works with paging.

As you may know from reading my blog, I’m a big fan of jQuery with the asp.net mvc architecture.

The MvcContrib plays well with my jQuery table.

For example, adding sortable headers:

I use a common class for my ‘tablesorter’ jQuery implementation.

Let’s take an example from the hobby gaming website:

 

<% Html.Grid<FSData.TerritoryCaptured>(
    ViewData.Model.TerritoryCaptured.AsPagination(Int32.Parse(ViewData["page"].ToString()), 2),
    new Hash(empty => "No data available", id=>"terr1", @class=>"tablesorter",  style => "width:600px"),
    column => {
        column.For(p => p.TerritoryName, "Territory");
        column.For(p => p.CapturedBy).Formatted("Captured By: {0}");
        column.For(p => p.DateCaptured.Value.ToShortDateString(), "Date").CellCondition(p => p.DateCaptured.HasValue);
        column.For("Custom Column").Do( p => {%>
            <td>a custom column</td>
        <%});
    }
    );

     %>

In the above markup, I’ve tried to use some of the features in the documentation link above.  Keep in mind, all of this supports intellisense as you build the grid!  A few notes:  I use the @ with @id and @class – those just make sure it’s written literally (there is a conflict with keyword ‘class’ of course!)

Using the jQuery tablesorter, I’ve marked this with the class ‘tablesorter’.  (It’s easy to apply styles the grid – as it outputs a table)

In my javascript, simply add the $(“#terr1”).tablesorter(); and you have tablesorting!  You can leave out the ‘id=>”terr1″‘ and use $(“.tablesorter”).tablesorter(); (instead – this will apply the tablesorter to any class marked with ‘tablesorter’ using the jQuery css selector logic).

Sorting can be done on the server, for example:

<% Html.Grid<Person>( "people", column => { column.For(p => p.Id).Heading(() => { %> <th><a href="/People/List?orderby=id">Id</a></th> %>}); column.For(p => p.Name); column.For(p => p.Gender); column.For(p => p.RoleId); } ); %>

jQuery has a pagination ‘addin’ to the tablesorter that I use, however it’s client side only. 

I look at it this way: if I want client side functionality with my tables – it’s easy to use jQuery to achieve this.  However, in situations where I want server side paging or sorting, this grid provides a good start on providing that functionality.

I also think this grid will cut back on the amount of html I will write and yet still have absolute control on what is generates!  🙂

Advertisements

4 thoughts on “MvcContrib – Grid – a diamond in the rough

  1. Hi Steve,

    I’m also working with MVCContrib Grid and JQuery and we’re using it on a project at work. I agree, you can pretty much use the grid any way you wish by combining jquery with it’s current functionality. Looking forward to seeing more blogs of yours on the topic as we are getting away from the Gridview databound model here, and going into a case where we are using interfaces to get data and serve them up through the controller to the grid. Also we are going back from the grid to the controller, and here we will be using a combination of javascript/jquery and JSON. I recently posted a solution to passing JSON back to the controller in my own blog here:

    http://www.c-sharpcorner.com/Blogs/BlogDetail.aspx?BlogId=863

  2. I wrote up a sample that shows sending json data to an action without needing that action filter (it is possible with straight up jQuery code)

    I’ll make a post shortly and link to the source

    Thanks!

  3. Hi Steve,

    Thought you might be interested in this because I continued experimenting with the mvccontrib and jquery. Your blog inspired me to try a few things.

    I recently wrote a blog on a strategy to utilize MVCContrib inside of MVC ASP.NET with JQuery to do in-place grid rendering with the DOM and allow for sorting and paging on the server using a slightly different model than yours.

    Feel free to take a look or perhaps add this as a resource.

    http://www.c-sharpcorner.com/Blogs/BlogDetail.aspx?BlogId=875

    Mike Gold
    C# Corner
    Microsoft MVP

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