Using Seadragon with ASP.NET MVC

Sunday, October 4, 2009

Seadragon is one of the new controls in the AJAX Control Toolkit. It gives you all the goodness of Deep Zoom using only JavaScript. The control toolkit is designed to work with Web Forms, but the underlying Seadragon API is easy to use from anywhere.

If you want to see what Seadragon and DeepZoom can do, then check out some of the gigapixel images on SeaDragon.com (JavaScript), or browse my photos of Stockholm on DeepZoomPix (it uses Silverlight). Bonus points if you find the picture of Ayende with his head in the center of an ice sculpture.

Once you’ve put together your own image using Deep Zoom Composer, then all you need to use with MVC is the Seadragon Ajax Library hosted on Live Labs. Start with just a <div> in a view. Assuming you have the traditional MVC setup with a master page, it’s as simple as this:

<asp:Content ContentPlaceHolderID="MainContent" runat="server">

    <h2>Seadragon</h2>
    <div id="container"></div>

</asp:Content>

On my master pages I usually have a ContentPlaceHolder inside the <head> tag to inject script. With that in place, here is one way to get the Seadragon API loaded and bootstrap the viewer:

<asp:Content ContentPlaceHolderID="Scripts" runat="server">
        <script type="text/javascript" 
                src="http://seadragon.com/ajax/0.8/seadragon-min.js">
        </script>
        
        <script type="text/javascript">
            function init() {
                var viewer = new Seadragon.Viewer("container");
                viewer.openDzi("/Content/sample.xml");
            }

            Seadragon.Utils.addEvent(window, "load", init);
        </script>
</asp:Content>

In openDzi, pass the path to the .xml or .dzi file you create with Deep Zoom Composer, and the library will take care of the rest. Of course, you’ll need to put all the rest of the files and folders the composer creates on your server, too. The viewer allows you to subscribe to events, create overlays, and add your own controls that respond to user input.

The last piece you’ll need is some styling for the div:

<style type="text/css">
    #container
    {
        width: 500px;
        height: 400px;
        background-color: black;
        border: 1px solid black;
        color: white;   /* for error messages, etc. */
    }
</style>

Impressive results with very little work!

All My Pluralsight Courses

OdeToCode by K. Scott Allen