Thursday, November 5, 2009

Load a Xap file from Binary

Recently I was faced with a situation where I needed to load a .xap file from a database and preview the file using Silverlight. Typically, to display a Silverlight app hosted in a web site, one would use the
tag. A detailed description of how to use this with all the available parameters can be found here.

The .xap file, which is really just a compressed package of all the necessary bits needed to run a Silverlight application, typically is stored in the file system and is referenced using the src attribute of the tag. So right there is the problem. Our .xap files are not stored in the file system, but rather in binary fields in our SQL Server 2008 database. The src property is a string indicating the path and file name of the .xap package. Argh.

To deal with this, what was needed is a way to reference the .xap file (stored in the database) with a relative url. A Silverlight application has a mime type of application/x-silverlight. This is important to note because of an interesting way one can use an .aspx page to render binary content. Prior to this, I had used an .aspx page to render jpeg images from a binary stream. Basically, this is done by clearing the response content completely in the code-behind of the page and writing the bits to the response content stream. Set the content-type and your good to go.

Well, as it turns out, this technique not only works for images, but *any* binary format that has an associated mime type. A comprehensive list of mime types can be found here. In the case of images, to set the image source to a binary file stored in a database all you do is create a page as I described and then set the src property to the url of that page. So let's say you want to retrieve an image from your database and render it using an img tag and the url of your page is ../mySite/ImageLoader.aspx. You could call the page passing it the id of the record you want to load and render the image like so:
<img src="..mySite/ImageLoader.aspx?imgId=42" />

That's it. Simple.

See where I'm going with this? How is that different from:

<object type="application/x-silverlight-2"
data="data:application/x-silverlight," width="450" height="220">
<param name="source" value="../mySite/ImageLoader.aspx?xapId=42"/>

Answer: It's not. Just have the page set the content type to application/x-silverlight and you are good to go. For reference, here's the code that rewrites the output stream:

int bufferSize = 1024 * 100; // load 100KB at a time
byte[] buffer = new byte[bufferSize];
int bytesRead = 0;
long bytesToRead;
MemoryStream ms = new MemoryStream(src.ToArray());

// src is the binary file to read. How you load that is a story for another day

bytesToRead = src.Length;
Response.ContentType = this.GetContentType(filetype);
while (bytesToRead > 0)
if (Response.IsClientConnected)
bytesRead = ms.Read(buffer, 0, bufferSize);
Response.OutputStream.Write(buffer, 0, bytesRead);

bytesToRead -= bytesRead;

// re-initialize the buffer and counter
bytesRead = 0;
Array.Clear(buffer, 0, buffer.Length);
// make sure to break out of the loop if the client disconnects prematurely
bytesToRead = -1;
catch (Exception ex)
string err = ex.Message;
Response.Write("" + ERROR_READING_FILE + "");
if (ms != null)