Friday, November 19, 2010

Quick Start - Javascript Dojo and ASP.NET

1. Create a hello world ASP.NET application and make sure its hooked into IIS

2. Create a directory at the same level as your project files named dojoroot and download the dojo files to this location
C:\Inetpub\wwwroot\HelloWorld\dojoroot

3. Add the following code to the project in the aspx page inside of the HTML HEAD tags:

<style type="text/css">
@import "dojoroot/dijit/themes/tundra/tundra.css";
@import "dojoroot/dojo/resources/dojo.css";
</style>

<script type="text/javascript" src="dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true">
</script>

<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");

dojo.addOnLoad(function(){
dojo.connect(dijit.byId("button"), "onClick", function(evt) {
dijit.byId("text").setValue("Welcome to Dojo");
});
});
</script>

4. Add the following code to the .aspx page inside of the body tags

<button id="button" dojoType="dijit.form.Button">
Click me
</button>

<input id="text" type="text" maxlength="25" dojoType="dijit.form.TextBox">
</input>

5. Make sure this is added to the head tag
<body class="tundra">

No comments: