Using ASP.NET Ajax in a Non ASP.NET Site
Posted: 01/11/07 8:56 AM
So I saw a question on the forums about how to use the ASP.NET Ajax libraries outside of an ASP.NET application. I decided to write one. As it turns out, it is really simple to use at least part of them.
Steps:
- Install all the ASP.NET Ajax libraries. At the very least you will need the main Ajax install.
If you want to use the js in the preview library (CTP), you should install it as well. These
files should show up somewhere around here:
C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0\Release - Create an html page.
- Make a reference to the scripts.
- Write whatever html you want to write that you would use the javascript code.
- Write the javascript code.
You’re done. Here is an example using the preview library code that I’ve posted about before. All you need to run this is this html and the javascript libraries previously mentioned. The first two lines in the function "hideThatDiv" use MicrosoftAjax.js. The rest use PreviewScript.js and PreviewGlitz.js. Note the complete lack of any ASP.NET code in this...
<html>
<head>
<script language="javascript" src="MicrosoftAjax.js"></script>
<script language="javascript" src="PreviewScript.js"></script>
<script language="javascript" src="PreviewGlitz.js"></script>
<script language="javascript">
function hideThatDiv()
{
var element = $get('targetDiv');
var target = new Sys.UI.Control(element);
var fadeAnimation = new Sys.Preview.UI.Effects.FadeAnimation();
fadeAnimation.set_target(target);
fadeAnimation.set_duration(1);
fadeAnimation.set_fps(25);
fadeAnimation.set_effect(Sys.Preview.UI.Effects.FadeEffect.FadeOut);
fadeAnimation.play();
}
</script>
</head>
<body>
<div id="targetDiv" style="background-color: Black; width: 200px; height: 200px;">
</div>
<input type="button" onclick="hideThatDiv();" value="Hide the div" />
</body>
</html>
There is a lot more there than this, but this is a basic example of how to use some of the scripts.