ASP.NET 2.0 AJAX Extensions (Atlas) - Part I,,,
In my previous blog, “Enhanced Client Side Functionalities in ASP.NET 2.0,,,”, I had mentioned that the sample code can be further simplified with Atlas, because ASP.NET 2.0 AJAX Extensions provide a control to invoke Web Service from client side. Atul had rightly commented that this facility is not so quite new as I had sounded it in my blog. I am totally agreeing to his comments that Atlas may be a new bottle to old wine – XMLHttp and AJAX. But, for me, new bottle is so attractive and handy that I feel the same old wine tastes much betterJ. Yes, Atlas is conceptually the wrapper over many things (“behavior” is definitely one of them) that have been here for quite some time. But, I think that AJAX in its new avatar, now, is more powerful, flexible and much more integrated to visual studio. It does not force us to write tons of script, as it does most of the grunt work, in background quietly. That is why it would excite the development community.
Atlas provides flexibility to the coding, by supporting two approaches, one in which, we can write minimal javascript and DHTML here and there or we can go ahead with pure declarative programming model provided by it.
But, to see its flexibility, let me just take the example of consuming the web service from the client side. In this case, Atlas does not force us to learn about Web Service lingo such as WSDL, XML and proxy, etc in order to consume it. We have to remember the fact that there are so many people in the world who are not aware of technologies but have their own self managed portals and sites. They may just know that there are cool ‘some things’ known as web services that need to be utilized in their web pages. They may just know the fundamentals of javascript to provide a bit of WOW factor into their pages. Extensions such as Atlas, would sure be found useful by them. However, Atlas is not just for hobbyists but for developers too who want to improve their productivity by not just focusing on writing tons of script code again and again. They can channel their energies into develop more innovative web pages. In my view, Atlas can be equally used by both hobbyists and serious developers.
Here, I will explain how a web service can be consumed in the client side through javascript, from within an Atlas enabled page. When we use “AtlasWebSite” template in Visual Studio, the default.aspx file will be created as given below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET 2.0 AJAX Extensions,,,</title>
<script language="javascript" type="text/javascript" >
function InvokeBiographyWebService()
{
var strInput = document.getElementById('textBoxName').value;
MyWebService.GetInfo(strInput, OnRequestCompleted);
}
function OnRequestCompleted(result)
{
var strContent = result.split("::");
document.getElementById('textBoxPlay').value = strContent[0];
document.getElementById('textBoxSpeaker').value = strContent[1];
document.getElementById('textAreaBio').value = strContent[2];
}
</script>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" >
<Services>
<atlas:ServiceReference GenerateProxy="true" Path="~/MyWebService.asmx" />
</Services>
</atlas:ScriptManager>
<div>
<input id="textBoxName" type="text" runat="server" style="width: 207px" value="Type content to be searched!!" />
<input id="btnForTextBoxName" type="button" value="Click!!!" onclick="InvokeBiographyWebService();" />
<br/>
<input id="textBoxPlay" type="text" style="width: 207px" value="Play" />
<br />
<input id="textBoxSpeaker" type="text" style="width: 207px" value="Speaker" />
<br />
<textarea id="textAreaBio" visible="false" style="width: 208px; height: 80px" ></textarea>
</div>
</form>
</body>
</html>
There is an Atlas component “ScriptManager” that you would see inside the form tags.
We have to reference the web service in this component, in order to create proxy for that service, so that we can consume that, in the javascript.
<atlas:ScriptManager ID="ScriptManager1" runat="server" >
<Services>
<atlas:ServiceReference GenerateProxy="true" Path="~/MyWebService.asmx" />
</Services>
</atlas:ScriptManager>
The following client-side function consumes the web service that we had referenced in the ScriptManager component of Atlas. As this web service is invoked asynchronously, by default, we require another callback method ( OnRequestCompleted in this example) to retrieve the result. An Html control – text box is created to let user type the input (the quote to be searched) to this web service. The result of the web service (name of the play, speaker and speech content) are updated in other html controls – text and text area.
<script language="javascript" type="text/javascript" >
function InvokeBiographyWebService()
{
var strInput = document.getElementById('textBoxName').value;
MyWebService.GetInfo(strInput, OnRequestCompleted);
}
function OnRequestCompleted(result)
{
var strContent = result.split("::");
document.getElementById('textBoxPlay').value = strContent[0];
document.getElementById('textBoxSpeaker').value = strContent[1];
document.getElementById('textAreaBio').value = strContent[2];
}
</script>
The following html pieces create the required Html controls for this application.
<input id="textBoxName" type="text" runat="server" style="width: 207px" value="Type content to be searched!!" /><input id="btnForTextBoxName" type="button" value="Click!!!" onclick="InvokeBiographyWebService();" />
<br/>
<input id="textBoxPlay" type="text" style="width: 207px" value="Play" />
<br />
<input id="textBoxSpeaker" type="text" style="width: 207px" value="Speaker" />
<br />
<textarea id="textAreaBio" visible="false" style="width: 208px; height: 80px" ></textarea>
Run this application, and you will get the result displayed in text area of the page.
We should be aware of a fact that we can not make a call from client side script, to remote web service outside of the local site. In this example, I had used an excellent web service provided by xmlme (http://www.xmlme.com/WSShakespeare.asmx). In order to access this web service, I had created a local web service façade (MyWebService) that would in turn call that remote web service.
Now, you can compare this approach with the one that I had described in my previous blog – “Enhanced Client Side Functionalities in ASP.NET 2.0,,,”. However, we have just touched the tip of the iceberg. I will provide some more details on declarative programming model, javascript improvements and others of ASP.NET 2.0 AJAX extension, in my future blogs. Then we can honestly weigh it down with old and existing technologies.
Comments
Hi,
I am using atlas.dll version 2.0.50727.60626.
I am not sure where is MyWebService defined in following code. I am not sure how do I create a proxy.
function InvokeBiographyWebService()
{
var strInput = document.getElementById('textBoxName').value;
MyWebService.GetInfo(strInput, OnRequestCompleted);
}
Posted by: Abhijit | January 22, 2007 10:48 AM
You can refer my recent blog http://infosysblogs.com/microsoft/2007/02/integrating_wpfe_content_in_as.html#more. You will get details on creating the proxy for a web service.
Posted by: Ganesan Krishnamurthy | February 2, 2007 07:38 PM