I noticed a post over at a blog called "The other side of the moon" where the author suggests that we put pictures and details of missing children on on 404 pages. It's a simple and brilliant idea. Millions of 404s are delivered every day. We are reporting on missing pages, but not on missing children. He includes a simple PHP solution. I set out to create an ASP.NET solution, but then realized that a server-side solution wasn't really necessary.

Could I do it all on the client side? This way anyone could add this feature to their site, regardless of their server-side choice. This could make the solution much more palatable to folks who may not be into .NET.

Here's what I came up with. You can see it in action if you request a file that doesn't exist from my site, like http://www.hanselman.com/foo.aspx.

The file is called missingkids404.html and it's just static html. You will need to configure your webserver to serve this page when it needs to serve a 404. For me, as I do run ASP.NET and IIS, I needed to add this to my web.config in the System.Web section:

The file, in its entirety, is this:

<html>

<head>

<title>Missing Kids 404</title>

<style type="text/css">

.sys-template { display:none; }

.missingkid { clear:both; }

</style>

<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript"></script>

</head>

<body>

<script type="text/javascript">

Sys.require([Sys.components.dataView, Sys.scripts.jQuery], function() {

$("#missingkids").dataView();



var statecode = "ZZ";

var dataurl = "http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20From%20xml%0D%0A%20Where%20url%3D'http%3A%2F%2Fwww.missingkidsmap.com%2Fread.php%3Fstate%3D" + statecode + "'%0D%0A&format=json&callback=?";

var data = $.getJSON(dataurl, function(results){

Sys.get("$missingkids").set_data(results.query.results.locations.location);

}

);

});



function getSrc(url) {

var lastIndex = url.lastIndexOf('=');

return url.substring(lastIndex+1);

}

</script>



<p>

<strong>Sorry, the page you're trying to find is missing.</strong>

</p>

<p>

We may not be able to find the page, but perhaps you could help find one of these missing children:

</p>



<div id="missingkids" class="sys-template">

<div class="missingkid">

<img sys:width="60" sys:align="left" sys:src="{binding medpic, convert=getSrc}" />

<strong>{{firstname + " " + lastname}}</strong>, Age: {{age}} from

{{city}}, {{st}}</br>

Contact: {{policeadd}} at {{policenum}}<br/>

<br/>

</div>

</div>

</body>

</html>

I'm using the standard {{token}} syntax as well as one custom syntax with a convert=callback so I can pre-process the data. The source data feed includes an unfortunate chunk of html, rather than a direct link to a picture. I need to strip everything after the last equals sign (=) in order to get the image src URL. That method is called getSrc, and the binding looks like:

If this is useful, the next step is to add geolocation. You can look at http://www.hanselman.com/missingkids404geo.html for the beginnings of a geo-location aware one. The open issue right now is that the missing kids feed works only in the US, Canada and the UK. I would need to figure out now to determine the two-letter STATE code from the geolocation API, which doesn't provide codes in that way. Worst case scenario, I'd have a lookup table of state names to abbreviations.

Enjoy! Thoughts?