“Badgifying” an ASP.NET page
I apologize for the neologism. What I’m going to demonstrate in this post is a technique I prototyped a few months ago to make it very easy to embed an ASP.NET page’s content in another page, even if it’s using another server technology. This of course works cross-domain.
The reason why you would do that is to enable people to embed badges with your contents on their own sites. Examples of such badges can be found in the margin of this blog: there’s the ad badge, a Twitter badge, a Facebook badge, an Xbox Live badge, a Zune badge, and there used to be a Flickr badge. There are even full commenting systems that you can include on your blog this way. All those are Flash or JavaScript, and in both cases there’s a short JavaScript stub that includes it.
What’s really nice about this approach is that people can include your contents from the client-side, no matter what server technology they use, with a single script tag. Here’s what it looks like:
<script type="text/javascript" src="AspNetBootstrap.js" xmlns:foo="Remote.aspx"
foo:bar="42" foo:baz="glop & co"></script>
The script tag has two parts. The first is a regular script tag that includes a bootstrapping script. The second part are some additional attributes that specify the page to include and optionally parameters. Those parameters will be transmitted to the page as querystring parameters. For example, the script tag above includes the following ASP.NET page:
<%@ Page Language="C#" %> bar = <%= Request.QueryString["bar"] %><br /> baz = <%= Request.QueryString["baz"] %>
The system relies on two things. First, we have the bootstrap script. It’s a very small piece of code (664 bytes minified, 453 minified and gzipped) that parses the attributes of its own script tag and creates a new script tag pointed at a special handler, the second part of the system.
The handler extracts the page name from the querystring and processes the request. The result of that processing is then embedded into simple JavaScript that writes the rendered page into the document:
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/javascript"; var request = context.Request; var pagePath = request.QueryString["__page"]; var sb = new StringBuilder(); using (var writer = new StringWriter(sb)) { var worker = new SimpleWorkerRequest(
pagePath,
context.Request.QueryString.ToString(),
writer); HttpRuntime.ProcessRequest(worker); } context.Response.Write("document.write('" + sb.ToString().Replace(@"'", @"\'")
.Replace("\n", @"\n")
.Replace("\r", @"\r") + "');"); }
Of course, this is only a simple proof of concept and it could be improved in a number of ways:
- Relative URLs (of images and scripts) are not re-rooted into the host page. This means you’ll need to use absolute URLs.
- There is no support for any interactions back with the remote server, including with forms or Ajax. It’s not impossible but you’re on your own to implement it.
Still, to include simple contents, this constitutes an extremely simple approach to making your ASP.NET contents accessible to remote pages, no matter what server technology they use (if any).
I’d love to know what you think and if you think this is worth pursuing.
Download the code from here:
http://weblogs.asp.net/blogs/bleroy/Samples/EmbeddedASPNET.zip