If I wanted to capture “api/{controller}/{id}” I would set up the following route:

config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new {id = RouteParameter.Optional}
    );

This will capture “api/dogs” and “api/dogs/1″.

But my co-worker wants to make sure that id’s are always an integer to keep away pesky internet savvy folks that try to break the application and he doesn’t trust my controller to do this for us. So he changes the route to:

config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new {id = RouteParameter.Optional},
        constraints: new {id = @"\d+"}
    );

Suddenly, the route now only captures “api/dogs/1″ and not “api/dogs”. The constraint has overwritten the RoutParameter.Optional on id. While I’m not sure why the two options conflict, to avoid this, keep constraints off the route config and let the controller do its thing. It’s pretty good at it.

[HttpGet]
    public HttpResponseMessage GetDogs(int? id = null)
    {
        if (id.HasValue)
            return JsonNetResult.CreateResult(DogManager.GetById(id.Value));
        else
            return JsonNetResult.CreateResult(new Dog());           
    }

I then stumbled upon a stackoverflow question in which someone was having a similar issue.

Enter Visual Event 2. VE2 is an open source bookmarklet that, when loaded, will highlight all of the objects with events on a page and show you what scripts will be called when they are clicked. This thing is absolutely brilliant. I was instantly able to see what script was being called and found it in seconds. Better still, since it’s a bookmarklet, it should work in most modern browsers too!

This thing will permanently live in my developer toolbox. I highly suggest it for developers working on sites that are js intense.

Visual Event 2 Website

IE9 is getting better, but the legacy that it left and that we developers have to deal with is cringe-worthy. One of my often used layout CSS bits is display:inline-block

Unfortunately, this does not degrade gracefully in IE < 8. I usually have to look this up everytime I view a page in IE, so I figured I’d pen it here so that I can find it more easily. The trick, as many of you might know, is to add the following in the CSS:

zoom: 1;
*display: inline;

Source: How to fix the IE7 and inline-block CSS bug

range.deleteContents();
range.insertNode(newContents);

newContents was simply a span element with some text that I had created using the document.createElement method.

This code works exactly as expected in chrome. If I look into the range object, I  correctly have the new contents. In firefox however, the range object was missing all of its delicious contenty goodness. After doing a bit of re-working, I came up with the following solution:

range.deleteContents();
range.insertNode(newContents);
 
range = document.createRange();
range.selectNode(newContents);

The additional 2 lines make it work and it still functions properly in Chrome. Now when I bring up the range object, it has the new content for me to mess around with again.

Using firefox 10.0.2