In October, I gave a presentation to the .NET DC User Group on the night before Marty McFly was due to arrive in 2015 according to the movie Back to the Future Part 2.  This was a great opportunity for me to put together a simple demo that I could run with ASP.NET 5 and show something easy to digest.  In this case, I put together an HTML version of the time circuits from Doc’s Delorean time machine.

That’s easy… a set of date displays on a grey background.  I broke out a copy of Visual Studio 2015 and set to work making one row work in CSS and HTML.

Initial Date Design

I knew I wanted to use a grid, but didn’t want to use a standard HTML table.  With bootstrap already available in the default ASP.NET template, I moved forward with using the row and column approach.  I wasn’t necessarily looking for responsive layout, but it that side-benefit happened then I would be happy.

I did a quick search for a free digital font that I could use and found Dusit Supasawat’s Digital font that was available as shareware.  If you want to use this cool digital font in your projects, you should pay a small fee to Dusit for its use.  In my project, I want to use this as the default font for the clocks, so I wrote a small block of LESS code that I could transform into CSS classes for the digits of my clock:

The @font-face rule defines a font that I can re-use later in the document.  In this sample, its referenced by its name, “Digit” in the .digit CSS class. For those unfamiliar with LESS syntax, the &.bg entry defines a nested class within the digit class.  This extra information is setup to provide that faded digit effect behind the lit up digits in the LED display.  Let’s take a look at the HTML thus far that will be used to format this:

This should look like simple HTML with a few tweaks to support the formatting needed. Notice the extra   before the digit “1” – this is needed because our font has no spacing around the digit, and I would like it right aligned in our display.  With some additional code around this for the labels, I ended up with an initial HTML based display that looked like this:

Not bad…  but lets make it customizable in ASP.NET 5 so that I can specify the dates I want on the display.

Converting to Razor

The conversion to a razor format was quite easy, as I replaced the text in each of the digit elements with an appropriate ToString method call with the desired date part included.  The only tricky part was that darn “1” digit with the    To get around that, I wrote a simple function into my razor sheet using the @functions razor section:

You can define C# functions for use anywhere in the current razor view inside of the @functions section, and then execute them anywhere you please on that view.  Now, everywhere that I need to format a number, I just wrap it in a call to Format.  Easy… The format of these dates is repeated three times, and it would be nice to wrap that up in some reusable code.  I can do that with my favorite new feature in ASP.NET 5 – TagHelpers

Introducing the DateDestTagHelper

This is clearly not a TagHelper I expect to use in other places, but for this demo its neat and I enjoyed writing it.  I started by adding the Microsoft.AspNet.Mvc.TagHelpers package to my project and creating a TagHelpers folder off the root of the application to contain my code.  You don’t need to put it in a special folder, I just like to use a TagHelpers folder because I like my code organized and don’t want to lose stuff  🙂 I started the DateDestTagHelper class by inheriting from the TagHelper base class and copying my uber-cool Format function from the razor view.  How should this taghelper get the date that it will display? I thought that should be simple, just put an attribute on the tag called “Date” of type DateTime. In TagHelpers, any public property is exposed as an attribute in razor. I decided to also define a second public property called “Type” for the Destination Date type and formatting that we would use. In this case, I made the value an Enum of the three date types in the display.

Next, I started implementing the virtual Process method so that it properly formatted the containing row for my time display:

Next, I wrote a simple method to handle the date part formatting. For this, I wanted to make it extremely generic and eliminate the if..then syntax that I would have ended up with in order to pivot between the various date parts.  I like to hide this pivoting in a lookup dictionary so that my implementation becomes simple and I can add new capabilities with new entries in the lookup dictionary.  I created two dictionaries to help with the formatting of the date: one for the CSS class names and another for the date format strings.  This makes my AddDatePart function a clear formatting method with zero if..then logic for formatting:

Very cool…  and my razor view can be updated to simply:

… and I get the same output.  But that’s not all.  Since I only used simple date formatting methods and TagHelpers, I can also compile this web project for .NET Core and use it on my Mac and my Linux machines with no additional code changes – just ship the code to those environments and developers there can compile and run the sample also.

Summary

This was a simple example of how to do some complex formatting of HTML using TagHelpers with the Back to the Future schtick.  The TagHelper code is portable to other .NET Core applications, and can be compiled with no issues on Windows, Mac, and Linux.  It was a fun sample that you can get the source code from my Fritz.Bttf repository if you would like to try it yourself.

This new ASP.NET 5 is about choice and learning to use our tools in simple but fun new ways.  Try out the sample code, and learn about the choices I made so that my code was easier to maintain.