Atlas tutorial in
ASP.NET without the template.
First of all : What is Atlas ? It's
Microsoft implementation of the Ajax concept. A concept based on JavaScript and
XML that allows scripting performed at the browser to send/get data to/from the
webserver without refreshing the whole page. As a webapplication developer I
used invisible IFRAMES to solve this problem in the past. I think Atlas is a
better alternative.
I tried to get Atlas running without
the templates which wasn't a problem and gave me better understanding of the
workings of Atlas.
With Altas you can call a webmethod
in a webservice class from within Javascript at the browser. In this example I
use an aspx page which has just plain HTML controls (no ASP.NET controls, no
runat ="server") firing the javascript that calls the webmethod. The webservice
is in the same webapplication as the page.
You need (besides
VS2005):
1. Microsoft.Web.Atlas.dll
2. The ScriptLibrary directory
These can be found in the VSI at : http://msdn.microsoft.com/asp.net/info/future/atlastemplate
Double click the VSI. Besides
installing the templates you can see the files by clicking View files in
Windows Explorer. Take out the
dll and the ScriptLibrary directory.
Startup VS2005
File ... New Web Site
http://localhost/AtlasSite
Have a look at
C:\Inetpub\wwwroot\AtlasSite
Copy the ScriptLibrary to the
directory
Create a bin directory, copy the dll
into it.
Refresh the Solution Explorer in VS2005. Should look like
this :
Add a webservice (add new item)
called webservice.asmx
Place the class in a namespace,
uncomment the HelloWorld webmethod.
Remember the namespace and the
classname. You'll need it at the client scripting.
Code of the asmx :
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Namespace TestingAtlas
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function HelloWorld() As String
Return "Hello World from a WebService called by Atlas"
End Function
End Class
End Namespace
Update the class
directive in the asmx file :
<%@ WebService Language="VB" CodeBehind="~/App_Code/WebService.vb" Class="TestingAtlas.WebService" %>
You can test the
webmethod in your browser now.
Now we can make
changes to the aspx page to call the webservice.
First make some
changes to the web.config files. There are more changed needed but I prefer to
do them one at a step.
<system.web>
<pages>
<controls>
<add namespace="Microsoft.Web.UI" assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
<add namespace="Microsoft.Web.UI.Controls" assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
</controls>
</pages>
</system.web>
This adds a namespace
which can be used by the aspx pages as tags with the prefix atlas.
Go to the aspx
page.
Add a HTML
Input(Button) control and a HTML Input(Text) for the toolbox to the page. These
are just the plain HTML controls which don't have events on the server.
We'll use the button
to start the action an the textbox to show the answer from the webmethod. Give
the controls the ID's : aPlainHTMLButton
and
aPlainHTMLTextBox.
Put following tags in
your HTML (I did in it in the head tag after the title tag). Notice the path to
you asmx file.
<atlas:ScriptManager ID="ScriptManager" runat="server" EnableScriptComponents="false">
<Services>
<atlas:ServiceReference Path="WebService.asmx" />
</Services>
</atlas:ScriptManager>
Add JS code to the
client side click event of the button. Just doubleclick it in the designer. The
button gets the onclick parameter
onclick="return
aPlainHTMLButton_onclick()"
In the click function
code this :
function aPlainHTMLButton_onclick() {
TestingAtlas.WebService.HelloWorld(OnComplete,OnTimeOut);
}
This is the call to the webmethod
named HelloWorld in the Class WebService in the namespace TestingAtlas. Notice
there is no variable to catch the returnvalue and there are the OnComplete an
OnTimeOut parameters. That's due to the assynchronous nature of the Ajax
concept. OnComplete and OnTimeOut are names of the functions which are called
after the webmethod has executed or timedout. The function gets called on
completion and receives a parameter with the result of the
webmethod.
So we need to provide those
functions :
function OnComplete(result) {
document.getElementById('aPlainHTMLTextBox').value = result;
}
function OnTimeOut() {
alert("Timed Out");
}
Add some more configuration in the
web.config :
Immediatly below the configuration tag :
<configSections>
<sectionGroup name="microsoft.web" type="Microsoft.Web.Configuration.MicrosoftWebSectionGroup">
<section name="converters" type="Microsoft.Web.Configuration.ConvertersSection"/>
</sectionGroup>
</configSections>
<microsoft.web>
<converters>
<add type="Microsoft.Web.Script.Serialization.Converters.DataSetConverter"/>
<add type="Microsoft.Web.Script.Serialization.Converters.DataRowConverter"/>
<add type="Microsoft.Web.Script.Serialization.Converters.DataTableConverter"/>
</converters>
</microsoft.web>
and in the system.web
tag :
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" type="Microsoft.Web.Services.ScriptHandlerFactory" validate="false"/>
</httpHandlers>
<httpModules>
<add name="ScriptModule" type="Microsoft.Web.Services.ScriptModule"/>
</httpModules>
That's all there is to
get data from a webservice. Try to run the page. So you can start with
Atlas.