This has always annoyed me in Star Wars

Click for full res image

How Far Computing Has Come:1970-2010

Back in the 1970s the first Cray Supercomputers were the be-all and end-all of computing. They were like the Bugatti Veyrons of computer processing and here are some photos of these behemoths… giant mofos that could chew through bits and bytes like nothing else.

Well over the decades computers have obeyed Moore's Law and processing power has vastly improved while the space required has lessened and to demonstrate just how far we've come check out this guy's replica Cray as a PC… with soft leather “seats” for tiny programmers!

But then this guy takes it one step further and not only made a tiny replica, it actually EMULATES the Cray!!!

There are still Crays in service today but they're the newer more complex machines, not these old (albeit still complex) dinosaurs. We sure have come a long way!

"Endless Scrolling" With An ASP.Net DataPager

On the front page of MotorShout we have quite a complex news feed which allows you to filter the feed by news type (e.g. news, new photos/videos, forum posts etc.) and even further filter that by selecting one or more manufacturers. I've managed a lot of the messy stuff with views in SQL Server and a stored procedure that brings it all together. Until this morning the feed would display 20 items sorted by date depending on your filter settings but now, now you can get much more.

The Challenge

Make this tricky mess of data sources be able to display more than the 20 top records if the user wants to see more.

How I Did It

Now, the existing news feed was based around a ListView inside an UpdatePanel and I didn't want to go down the path of totally rewriting in AJAX as everything was already in place and working nicely. That lead me down this path.

My first thoughts were to use some kind of paging in SQL Server to get it to throw the web server 20 records at a time or to grab a large set of records and cache them on the web server and serve them up to the user 20 records at a time. But in the end I went with something much easier to implement and actually quite speedy as it turns out.

The idea I ran with was quite simple and was just a matter of increasing the PageSize on a DataPager in the ListView with each PostBack until I ran out of records. This may cause problems if you are displaying thousands of results but I've limited my results to the top 100 but that's still 5 times the original page size. I may increase in future if it's not too big a performance hit.

The first step was to add a DataPager to the ListView with a PreRender event handler (we'll get back to this later). Pretty straightforward. This is my LayoutTemplate in the ListView, note the lack of a PageSize set on the DataPager. Also, the content in the news feed is static so I've disabled the viewstate.

<asp:ListView ID="NewsFeedListView" EnableViewState="false" OnDataBinding="NewsFeedListView_DataBinding" runat="server">

<LayoutTemplate>

<asp:DataPager ID="DataPager" OnPreRender="DataPager_PreRender" runat="server" />

<asp:PlaceHolder ID="ItemPlaceholder" runat="server" />

<LayoutTemplate>

The next step was to add a button somewhere outside the ListView but still inside the UpdatePanel to trigger a PostBack to get more records. I also added a Literal for when we've run out of records (see the PreRender method on the DataPager below for what I do with this). For the sake of brevity I've left out some fiddly stuff to display a spinner next to the button so the user knows something is happening.

<asp:LinkButton ID="GetMoreResults" OnClick="GetMoreResults_Click" runat="server">Get more results...<asp:LinkButton>

<asp:Literal ID="NoMoreResults" EnableViewState="false" Visible="false" runat="server">No More Results </asp:Literal>

I also added a HiddenField (you can use whatever you like but this keeps it simple) control for keeping track of how many records we are currently displaying. This needs to be inside the UpdatePanel!

<asp:HiddenField ID="CurrentPageSize" runat="server" />

OK, now we're ready to do some code. In my Page_Init() I put the initial setting for our HiddenField making sure it doesn't run if we are in a PostBack. Instead of hardcoding the number (like below) I set a global constant but you get the gist of it.

protected void Page_Init(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

this.CurrentPageSize.Value = 20;

}

}

Next I added the Click event handler for the "get more" button. Here I just needed to increment the CurrentPageSize value to be used by the DataPager, store that in our HiddenField then rebind the data.

protected void GetMoreResults_Click(object sender, EventArgs e)

{

int currentPageSize = int.Parse(this.CurrentPageSize.Value);

if (currentPageSize > 0)

{

currentPageSize = currentPageSize + 20;

this.CurrentPageSize.Value = currentPageSize.ToString();

}

this.FilterTheNews(); // My method to rebind the listview

}

The penultimate step was to add in a DataBinding (not DataBound!) event handler on the ListView. This is where I set the PageSize of the DataPager to the new larger number.

protected void NewsFeedListView_DataBinding(object sender, EventArgs e)

{

var pager = NewsFeedListView.FindControl("DataPager") as DataPager;

int currentPageSize = int.Parse(this.CurrentPageSize.Value);

if (pager != null && currentPageSize > 0)

{

pager.PageSize = currentPageSize;

}

}

And now the cherry on top, the PreRender method for the DataPager I mentioned above, which simply hides the "get more" button if we are out of records and shows the "no more records" literal. It checks if the current page size is more or equal to the total number of records and if so, we've maxed out our records.

protected void DataPager_PreRender(object sender, EventArgs e)

{

var pager = sender as DataPager;

int currentPageSize = int.Parse(this.CurrentPageSize.Value);

if (currentPageSize >= pager.TotalRowCount)

{

this.GetMoreResults.Visible = false;

this.NoMoreResults.Visible = true;

}

}

So there you have it! Pretty simple stuff and with the help of the UpdatePanel you give the user the impression that they're adding more records to a growing list.

Rockin' Visual Studio 2010's Productivity Power Tools

After listening to a recent podcast (sorry, can't remember which one!) on the joys of the Productivity Power Tools for Visual Studio 2010, I thought I'd give them another go. You see, I installed them on the same day I first installed VS2010 but it was all too much for me coming from VS2008 so I immediately removed the tools.

Well, on my second go-around I'm loving the control you now have over the document tabs. Three things in particular: vertical tabs, alphabetically sorted tabs, pinned tabs and regex colored tabs... ok, that was four things.

In the past I used to have to put up with VS2010 being able to show about 5 or 6 open documents via the tabs (I run duel 22 inch LCDs at some weird-ass resolution), anything else and I'd have to go to the annoying little drop down arrow. But check out this screenshot of my current layout with vertical tabs, not sure how many tabs I could get in there but it'd easily be 30-odd and they'd all be easily readable.

Using the regex colored tabs means each different file type has a different color plus I've set parent/child documents to be different shades of the same color (see the aspx and aspx.cs files and the ascx and ascx.cs files?). It ain't pretty but man can I find the file I'm after quick smart!

Having the tabs sorted alphabetically means related documents are stacked on top of each other, again making things easier to get at.

Lastly, pinning tabs means frequently accessed files are always in the same spot. I have my web.config and default.css within easy reach. No more hunting around in the Solution Explorer. Yay!

Here are my settings (click for full res):