goldb.org home

AS OF MAY 2008, THIS BLOG IS NO LONGER BEING UPDATED.
Visit the new blog at: http://coreygoldberg.blogspot.com


 Wednesday, January 03, 2007

Dojo JavaScript Toolkit with ASP.NET

Dojo is a free/open source JavaScript toolkit.  I wanted to add some its eye candy to one of my ASP.NET 2.0 applications, so I integrated the Fisheye menu (a menu that balloons out, similar to the launcher on OS X).






Here is how I did it:


First I downloaded Dojo and created a 'dojo' directory under my main project directory.  I dropped dojo.js and the entire Dojo 'src' directory here.

Then in my C# codebehind (.aspsx.cs), I add this to the Page_Load event:

protected void Page_Load(object sender, EventArgs e)
{
    HtmlGenericControl Include = new HtmlGenericControl("script");
    Include.Attributes.Add("type", "text/javascript");
    Include.Attributes.Add("src", "dojo/dojo.js");
    Page.Header.Controls.Add(Include);

    HtmlGenericControl Include2 = new HtmlGenericControl("script");
    Include2.Attributes.Add("type", "text/javascript");
    Include2.InnerHtml = "dojo.require('dojo.widget.FisheyeList');";
    Page.Header.Controls.Add(Include2);
}

(I do this in the codebehind because I am using a Master Page and I need to access the HTML header from an individual content page.)


Then inside my ASP.NET page (.aspx), I added this div:

<div class="fisheyelist">
    <div dojoType="FisheyeList"
        itemWidth="80" itemHeight="80"
        itemMaxWidth="200" itemMaxHeight="200"
        orientation="horizontal"
        effectUnits="2"
        itemPadding="10"
        attachEdge="center"
        labelEdge="bottom"
        conservativeTrigger="false"
    >
        <div dojoType="FisheyeListItem"
             onclick="window.location = 'item1.aspx';"
             caption="Item 1"
             iconsrc="img/item1.png">
        </div>
        <div dojoType="FisheyeListItem"
             onclick="window.location = 'item2.aspx';"
             caption="Item 2"
             iconsrc="img/item2.png">
        </div>
        <div dojoType="FisheyeListItem"
             onclick="window.location = 'item3.aspx';"
             caption="Item 3"
             iconsrc="img/item3.png">
        </div>
    </div>
</div>



.. and it works.

 |  | 
#    Comments [0] |
Comments are closed.