by December 17, 2005 0 comments



In this series, we have looked at creating

AJAX


pages using Atlas-a package of technologies for ASP.NET 2.0 that allows Web
developers to create extremely dynamic pages very easily. In this part, we’ll
take a look at easing development even further by utilizing a number of Atlas
server controls available for ASP.NET 2.0.

Direct Hit!
Applies to:
Web developers
USP:
Use server controls in VS 2005 to create Ajax application very quickly
Primary Link:
msdn.microsoft.com
Google keywords:
Atlas, ASP.NET 2.0, Ajax

Last month we created an autocomplete search box similar to
Google Suggest, with the help of some XML tags on the page so that the textbox
works with a server based Web service that returns a word-list matching the
characters you’ve typed in. The only code was the declarative XML syntax used
for getting the functionality.

This Atlas control set textbox yields the same effect as in the previous part, fetching search results without posting back to the server

Let’s extend this capability with Atlas Web Server
controls for ASP.NET 2.0 and use the final version of VS.NET 2005 to create a
much more functional application with

AJAX


features. To begin, install VS2005 and the Atlas template (.VSI) for RC/ RTM
from the Atlas site.

You will then be able to create a new website project of
the type ‘Atlas website’ in VS2005. When created, the project will be ready
with the required scripts already enabled in it. Let’s first create a simple
page in VS2005 that utilizes the Atlas Web server controls. Copy the same Web
service that we created last month that returns a word list over to this project
as well. Now, create a new ASPX page and switch to the source (HTML) view.
Within its content area, enter ‘<atlas:ScriptManager ID="script1"
runat=server></atlas: ScriptManager>’. 

Below this, add the following code.

Search:      


<atlas:TextBox ID="SearchKey" runat="server"
Size="25"


AutoCompletionInterval="1"


AutoCompletionServiceUrl="AutoCompleteService.asmx"


AutoCompletionServiceMethod="GetWordList">


</atlas:TextBox>

This is a new server control with the tagname ‘atlas:’.
All controls with this tagname are Atlas

enabled and provide different

AJAX


functionalities. The control you see here is a special case of a textbox
control with autocomplete functionality provided in

AJAX


. The attributes define the place from where the autocomplete text is retrieved
(ie, from a ‘GetWordList’ method of a Autocompleteservice Web service).

When you execute the page, you will get exactly that-a
textbox with autocomplete functionality. However, this is not all that you can
do with it. Now let’s get some results back from the server as well for the
text searched-using

AJAX


. To do this, add the following code after the textbox created earlier.

<atlas:DataSource
ID="dsSearchService" ServiceUrl="SearchService.asmx" runat="server">


           
<Bindings>


                       
<atlas:Binding DataContext="SearchKey" DataPath="text"
Property="selectParameters" PropertyKey="Search"></atlas:Binding>


           
</Bindings>


</atlas:DataSource>


<atlas:Button runat="server" Text="Go">


           
<Click><Actions>


            <atlas:InvokeMethodAction
Target="dsSearchService" Method="select"></atlas:InvokeMethodAction>


           
</Actions></Click>


</atlas:Button>


<br /><br />


<atlas:ListView ID="ResultsView" runat="server"
ItemTemplateControlID="ResultsTemplate">


           
<Bindings>


                       
<atlas:Binding DataContext="dsSearchService" DataPath="data"
Property="data" />


           
</Bindings>


            <LayoutTemplate>


                       
<div id="ResultsContainer" runat="server">


                       
<div id="ResultsTemplate" runat="server">


                       
<atlas:Label ID="Label1" runat="server">


                       
<Bindings>


                                   
<atlas:Binding DataPath="Result" Property="text"/>


                       
</Bindings>


                       
</atlas:Label>


                       
</div>


</div>


            </LayoutTemplate>


</atlas:ListView>

A virtual earth map enabled on the page with a simple declaration. The map is fully controllable with just the mouse

This code first defines a ‘datasource’ control that
points to the Web service (SearchService). The datasource is bound to the
‘SearchKey’ textbox and the Search parameter of its select method.

Next, an Atlas button is created that when clicked performs
the ‘select’ action of its target-which is the datasource defined above.
Finally, an Atlas listview control also binds to the same datasource and within
it the template binds to the ‘Result’ coming out.

Once done, executing it not only gives you a textbox with
autocomplete but also a page that returns search results when the button is
clicked-all without ever posting back to the server.

Using server controls has an advantage over the other
methods discussed in the previous articles-the ability to use IntelliSense
within VS2005. All Atlas controls can be easily typed in without having to
remember all the attributes/methods, as VS2005 natively recognizes these
controls.

The current release of Atlas doesn’t have these controls
visually available in the toolbox yet, but are expected to be when they’re
finally released. There are many powerful AJAX-enabled controls in the list
including validation, standard elements, panels, images and even the Virtual
Earth mapping ability. You can very easily add mapping into your Web app using
Atlas and

AJAX


. For instance, adding the following Atlas control into the page, centers a
Virtual map  over

Delhi


which can then be zoomed, panned etc.

<atlas:VirtualEarthMap
ID="map" runat="server" Latitude="150"
Longitude="80" MapStyle="Hybrid" ZoomLevel="6"></atlas:VirtualEarthMap>



AJAX


is the next wave in Web apps and is already being used by many popular websites
today. You can easily enable

Ajax


in your ASP.NET 2.0 application with the help of these Atlas controls, which
tie in excellently with the new VS.NET 2005.

Vinod Unny, Enterprise Infotech

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.

<