So here it is, the end of another month and I wanted to post some interesting, and helpful links (mostly so I can find them again) as well as point out some interesting bloggers/twitterers (tweeters?) that you should be following if you aren’t already.

• The easy way to install Windows Azure SDK and Tools
• Street View Fun: Star Wars graffiti
• Decrypting Asp .Net Encrypted Data
• Debugging Linq To Objects
• Get ELMAH going in your MVC app via (Phil Haack, Scott Hanselman, and Dan Swatik)
• Programmers Don’t Like To Write Code
• Use IronRuby to script your MVC Views
• Search MSDN with Krugle

Bloggers you should read / follow if you aren’t already:

• Steve Harman –  blog / twitter
• Scott C Reynolds -  blog / twitter
• Brad Wilson -  blog / twitter

links

“Syntax Error, Line: 2, Char: 0″. How many of you out there have seen this error while working on a web project?

Usually it’s because of a forgotten semi-colon or parenthesis in some external javascript file. But sometimes it’s something more sinister… Something darker, dirtier and just a little bit more evil.

After seeing the error message, I opened up Internet Explorer’s options dialog and unchecked the following options:

• Disable script debugging (Internet Explorer)
• Disable script debugging (Other)

I then closed IE, returned to Visual Studio, stopped and re-started debugging (ctrl+shift+F5), and watched Solution Explorer as my page began to load.

Oh! That’s not good. See the WebResource.axd request that has the same icon as the Default.aspx file? That means that a bad request was sent for an embedded resource and – most likely recieved a 404 page back instead of the javascript file, which caused our syntax error.

Ok, so how do we figure out which WebResource reference caused the problem? Well, the only way that I have come up with so far, is to manually copy and paste each WebResource.axd url from the html source of the page to the address bar and navigate there. The pages that give return a file download are ok and the ones that don’t will return a 404 page in the browser.

After finishing this long process of elimination, I found the resource request that was causing my headache:

/WebResource.axd?d=MaCiPhUUtdXNj16OOucV5e5lHCBZO...SNIP...

So how do we figure out which resource has embedded this troublesome URL into our html source? I found the solution to that in Irena Kennedy’s blog post on “How to Decrypt an ASP.NET Encrypted Data”:

Please note, that the code below should not be used in production code! It’s only meant for debugging and troubleshooting, and it may break in future versions of the .NET framework if DecryptString private method changes.

1. Add a web page (e.g. DecryptData.aspx) to your web application. For the code to work, it must run in the same appdomain as the web application that created your encrypted string.
2. Add a text box where you will type in the encrypted string.
3. Add a label where you’ll display decrypted results.
4. Add a button.
5. In code-behind on button click event, add the following code:

System.Reflection.BindingFlags bf =
    System.Reflection.BindingFlags.NonPublic |
    System.Reflection.BindingFlags.Static;

System.Reflection.MethodInfo DecryptString =
    typeof(System.Web.UI.Page).GetMethod("DecryptString", bf);

DecryptedData.Text = DecryptString.Invoke(
    null,
    new object[] { EncryptedData.Text } ) as string;

After I created this page, I pasted the WebResource.axd URL (everything up to the &t=) into the DecryptedData textbox on my DecryptData.aspx page, clicked the Decrypt button, and saw that one of my custom aspx controls was responsible. I then corrected the resource path and the page loaded as it should.

See the screenshot below for an example of the DecryptData page, or download the DecryptData .ASPX and Codebehind from my box.net folder.

asp.net · c# · debugging · Programming

I post a lot of source code on my blog and lately I’ve been having a lot of trouble trying to remove the left-padding from my source code blocks.

My problem comes from the SyntaxHighlighter stylesheet that WP.com uses and how it specifies the padding-left for the ordered-lists underneath the .dp-highlighter div tag:

.dp-highlighter ol
{
    list-style: decimal; /* for ie */
    background-color: #fff;
    margin: 0px 0px 1px 45px !important; /* problem */
    padding: 0px;
    color: #5C5C5C;
}

The use of the !important declaration is what is messing me up. The SyntaxHighlighter stylesheet is included at the end of the page html source and my custom css is at the top, so even though the SyntaxHighlighter styles have a lower higher css specificity – my styles will never override them because CSS is processed top-down.  from “CSS Introduction” @ w3schools:

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:

1. Browser default
2. External style sheet
3. Internal style sheet (inside the <head> tag)
4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

At this point I began thinking that it was pointless to try any more and that I should just accept that my code blocks would forever be indented by 45 pixels.

However, I’m way too stubborn to admit defeat, and after spending a night reading about css specificity and trying some crazy hacks of my own, I realized that my problem was simple. I just wanted the code to be farther to the left.

So my solution was equally simple (Occam’s Razor baby!): tell the outer container to allow overflow and position the child relatively and to offset it by the distance I wanted. I did this by applying to the outer div ( the “.dp-highlighter” div ) the following style:

DIV.dp-highlighter {
overflow:auto;
padding:10px;
}

And added this style to the OL tag within the .dp-highlighter div:

.dp-highlighter ol {
position:relative;
left:-45px;
}

css · wordpress

Long story short: I hate re-inventing the wheel. If there is a free service that does something I need I will try my hardest to get that service into whatever I am working on. I’m currently working on an Asp .Net MVC project that needs Avatars (you know, those funny little pictures next to peoples names on Twitter). Enter Gravatar.

Gravatar is an awesome service for anyone looking to add avatars to their apps. It’s free, incredibly simple to implement, and removes a lot of the hassle around getting avatar support into your web/windows app.

Adding Gravatar support to an application is pretty simple. Can you get a users email address? Can you MD5 said email address? Can you make an HTTP GET? BANG. You sir, or madam, can have Gravatars.

This week for the W.O.M.M. code sample I’d like to show how I integrated gravatar support into an Asp .Net MVC application.

How Gravatar Works In A Nutshell

Gravatar is a free service where you sign up and link images to one or more email addresses that you provide.

Once you link an image to an email address, any application that supports getting an image over the internet can show your Gravatar by making a request to a special URL. This URL is generated by combining an MD5 hash of your email address with some other parameters and the end result is a link to your Gravatar image.

IE: the link to my Gravatar on the right of this page is:

So 15559d868ec27b8583f42116a6b96c14 is the hash of my email address – don’t worry it’s a one-way hash. The “s” parameter is the size of the image that I want, in this case 140 pixels.

That is pretty much it as far as how the system works, but if you want to read more, check out Gravatar’s implementation documentation.

The Goal

What I wanted was an HtmlHelper extension method that I could use in my view pages to create an IMG tag with the correct Gravatar URL. After looking at the documentation on Gravatars “How the URL is constructed” page, I decided my helper extension should support the following:

Avatar Size (the “s” parameter)
When making a Gravatar URL you can specify a specific size for the Gravatar image. The size can be anything from 1 to 512 pixels, but the default is 80.

Default Avatars (the “d” parameter)
If the email address you are using doesn’t have any Gravatars setup, Gravatar will generate one for you by default. You can choose from 3 predefined Gravatar types or you can include a URL to a custom avatar of your own. The predefined Gravatar types are Identicon, Wavatar, and Monsterid.

Rating (the “r” parameter)
This wasn’t a requirement for what I was working on, but you can designate the maximum “rating” of the avatars that Gravatar will generate. The accepted values are “g”, “pg”, “r”, and “x” and they are inclusive, so specifying “r” will allow “g” and “pg” rated Gravatars to be generated. Gravatars that are rated “x” will be returned as one of the predefined avatars above. The default rating is “g”.

The Code

Okay, so now I know what I need to support. Now it’s just a matter of getting the code to do this. Let’s take a look at the class file I used to get this done.

namespace System.Web.Mvc
{
    using System;
    using System.Web.Routing;
    using System.Web.Security;

    public enum GravatarDefaultTypes
    {
        Identicon,
        Wavatar,
        Monsterid,
        Custom
    }

    public static class GravatarExtension
    {
		public static string Gravatar(
			this HtmlHelper hh,
			string emailAddress,
			int size,
			GravatarDefaultTypes defaultType,
			string customImageUrl,
			RouteValueDictionary htmlAttributes)
        {
            var tagBuilder = new TagBuilder("img");
            string url = "http://www.gravatar.com/avatar/{0}?d={1}&s={2}";

	    // thanks to jon galloway for this one-liner!
            // http://www.eggheadcafe.com/aspnet/how-to/141740/adding-gravatars-to-your.aspx
            string hash = FormsAuthentication
				.HashPasswordForStoringInConfigFile(emailAddress, "MD5");
            string defImg = defaultType.ToString().ToLower();

            if (defaultType == GravatarDefaultTypes.Custom)
            {
                defImg = System.Web
					.HttpUtility
					.UrlEncode(customImageUrl);
            }

            url = String.Format(
                url,
                hash.ToLower(),
                defImg,
                size.ToString());

            tagBuilder.MergeAttributes(htmlAttributes);
            tagBuilder.MergeAttribute("src", url);

            return tagBuilder.ToString(TagRenderMode.Normal);
        }
    }
}

So you can see I’m not storing the hash of the email address, instead I am going to pass in the unaltered string. I didn’t want to have another piece of data to update when the user changed their email address so the Gravatar() method takes an email address and encodes it using a call to FormsAuthentication.HashPasswordForStoringInConfigFile(), which is awesome ( Thanks Jon, you rock!).

Also, I’m not sure if this is a no-no or what, but I did put the extension class under the System.Web.Mvc namespace. This was mainly a convenience (read: laziness) thing and can be easily changed.

Alright so we have some code now, let’s take a look at how it can be used in our views.

    <%= Html.Gravatar(
        	Model.Email, // the email address
        	50, // size, in pixels of the avatar
        	GravatarDefaultTypes.Identicon,
        	null,
        	new RouteValueDictionary(new {
        		style = "vertical-align: middle;"
        	})
    )%> 
     <%= Model.UserName %> 

Let’s see how that looks.

Booyah, avatar support in 55 lines of code. As always, if I screwed up or there is a better way to do this, please let me know.

asp.net · c# · MVC · Open Source

Due to me being insanely sick this week I’m going to be changing up the format for the Works On My Machine weekly project post for this week.

Instead of presenting a project that I’ve worked on I’d like to highlight some .Net OSS projects / source code that I’ve been working with / looking at lately.

• The More Linq project – An extension library for LinqToObjects run by Jon Skeet.
• MusikCube – Awesome music player that uses SqlLite to allow “smart playlists” (eg. show me all songs that were added this week that have fewer than 4 stars and have been played less than 10 times).
• Moq – IMHO the best mocking framework for .net development.
• Scott Hanselman posted some code on his website a while back about how to Zip Compress your Session and Cache data in Asp.net.

Feel free to send me any code that you come across and I’ll feature it in a future post.

code · Open Source