Web Forms Tabular Control for this Scenario

I am developing an asp.net website with two column layout. On the left side we have menu items. Based on the click of the menu item, contents of the right item changes (visibility is toggled). Contents of the right side are tabular data. The tables provide details based on the selected menu item.

Environment: Visual Studio 2010, ASP.Net 4.0

Service: WCF service (We have control over the service)

Now, I have full flexibility of deciding the behavior so long as the performance is good.

Requirements

1. The tables require paging and sorting. The tables should be able to do server side paging (or custom paging) as loading all data in the first load will be a performance hit.

2. The loading of “right side content” should be partial rendering. I am planning to control the visibility of various elements based on the clicked menu item. There will be around 10 tables in the page. Hence the table data should be loaded on demand only. When the page is loaded for the first time, it should be having data only in one table. Other tables should be blank.

3. I can use proven open source jQuery plugins

There are many ways to achieve it starting with use of Grid View. What is the best suitable control for the above tabular functionality?

READING

1. Paging by using dynamically created html table

2. High Performance Websites http://video.yahoo.com/watch/1040890/3880720

3. ASP.NET Performance Checklist http://msdn.microsoft.com/en-us/library/ms998596.aspx

4. Efficiently Paging Through Large Amounts of Data (C#) http://www.asp.net/web-forms/tutorials/data-access/paging-and-sorting/efficiently-paging-through-large-amounts-of-data-cs

Solution 1:

Sounds like a job for MVC3 and Razor Views to me. I've done something similar with a partial view for my grid which in turn renders partial views for the sort headers and the paging controls, all of which are (or contain) Ajax.ActionLink items which pass sort by, sort direction, rows per page, etc. args to my GoToPage, SortGrid, and ChangeRowsPerPage actions.

I also have a PagingModel, a SortHeaderModel which contains a PagingModel, and models for the individual tables, which also include PagingModel. With the table name as a property in the paging model, the Ajax.ActionLinks can pass that back to the actions they call, and a switch block can be used to pass the other parameters to the constructor for the appropriate model, and then that model is handed to the grid partial view with the fresh page of data.

It works, and I never pass anything but the currently viewable page of data to the browser.