Beginning Ajax with ASP.NET- P19

Beginning Ajax with ASP.NET- P19

Beginning Ajax with ASP.NET- P19:Thank you for purchasing Beginning Ajax with ASP.NET. We know that you have a lot of options when
selecting a programming book and are glad that you have chosen ours. We’re sure you will be pleased
with the relevant content and high quality you have come to expect from the Wrox Press line of books.

Nội dung Text: Beginning Ajax with ASP.NET- P19

Chapter 9
This example uses the Anthem_InvokePageMethod function to call a method on the server that will
throw an unhandled exception. When the callback function runs, the response object is evaluated to see
if an error exists. If the error is present, then the error message is displayed to the user.
Next, update the markup by adding the following code between the tags:
Since you are calling the server-side code directly, you do not need to use an Anthem control.
Finally, update the ServerException class with the following code-behind:
public partial class ServerException : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Anthem.Manager.Register(this);
}
[Anthem.Method()]
public string ShowError()
{
throw new Exception(“Something went very wrong.”);
}
}
You can now test the behavior by launching the page in the browser.
What You Have Learned
The Anthem.NET framework opens up options that are not found in most server-side frameworks. One
benefit of Anthem.NET is a noninvasive configuration option for integration into your application. You can
also choose between methods that simply change the HTML on your pages or work directly with returned
data to the client. Throw in support for custom controls, and Anthem.NET may be the best of both worlds.
Summar y
You have had an opportunity to review three client-side Ajax frameworks and work with three server-
side Ajax frameworks that approach problems in development in different ways.
On the client side, Sarissa, HTMLHttpRequest, and MochiKit provide a lightweight way of abstracting
the details away of making XMLHttpRequest calls through the browser. Each client-side framework
includes much more than just Ajax abstractions, so be sure to examine each library for the best fit with
your application before choosing one.
246

Other Ajax Frameworks for .NET
On the server side, ComfortASP.NET and MagicAjax with their changed-HTML-only architecture can
make adding Ajax to your pages a painless endeavor. Anthem.NET provides the option of working in a
changed-HTML mode but also gives you the option of dealing directly with returned data structures.
Each is easy to use, and all are worthy of your time, so experiment more to see which best fits your
development environment.
When choosing a framework keep in mind:
❑ The expertise of developers — Do you have people well-versed in JavaScript, HTML, and CSS?
❑ Your page-level architecture — Do your pages currently inherit from a custom or third-party
base class?
❑ Your application-level architecture — Does your application use httpHandlers or
httpModules that might cause conflicts with any third-party framework?
The next chapter will begin your introduction to Microsoft’s Ajax framework, Atlas, and explain how to
use it to quickly develop Ajax applications.
247

10
Atlas Client Script
On the surface, Atlas sounds like just another Ajax library that happens to be from Microsoft.
While Atlas does provide support for Ajax-style operations, Atlas provides so much more than
that. With the Microsoft Atlas package, there is support for generating client-side JavaScript, and
this chapter delves into that aspect of Atlas. In this chapter, you look at:
❑ An introduction to Atlas
❑ Calling out to web services
❑ Data objects in Atlas
❑ Extensions to the JavaScript language
❑ Support for a programming model similar to programming in .NET
The Atlas examples and code are based on the March/April CTPs of Atlas. The March CTP is the
first version of Atlas that comes with a “Go-Live” license for actual usage in a production appli-
cation. The April CTP is basically a set of bug fixes to the March CTP. It is our intention to
update these files with new versions as breaking changes are made to Atlas. The site for the files
is http://beginningajax.com. Alternatively, you can check for updates on the Wrox web
site for this book (www.wrox.com).
Introduction to Atlas
There has been a lot of confusion in the marketplace regarding what Microsoft’s Atlas project is. At
this time, Atlas will be included in the next version of ASP.NET and the .NET Framework. From a
programming standpoint, Atlas may be considered to be at least a couple key things:
❑ Ajax library — The part of Atlas that has programmers talking the most is the support for
Ajax. With this support, Microsoft has created a library to support the ability to communi-
cate back to the server without the need to perform a full postback from the client to the
server.

Chapter 10
❑ Client-side components — The ASP.NET framework has typically supported the creation of
ASP.NET server-side controls. Atlas introduces the concept of client-side components and the
ability to create client-side components. Along with those components is an object-oriented
paradigm on the web client that includes support for inheritance, interfaces, and such items
normally considered to be a part of any modern programming language.
Major Components
Atlas consists of a set of files. These files are:
❑ A server-side assembly (.dll). This assembly is named Microsoft.Web.Atlas.dll.
❑ A server-side WebResource.axd HTTP handler. This file handles streaming the appropriate
JavaScript files down to the client. The content of the JavaScript that is streamed to the client is
based on the functionality specified in the ScriptManager control, which is a control that will
be introduced later in this chapter.
❑ The JavaScript files that are streamed to the client are embedded within the WebResource.axd
HTTP handler. In addition, a set of standalone JavaScript files is also installed. These files are
the same as those that are processed in the WebResource.axd file.
Server Support
The server-side support for Atlas is provided by the Microsoft.Web.Atlas.dll. This assembly pro-
vides support for the Microsoft.Web.* family of namespaces. Within these namespaces is support for
controls, serialization of data, and for communicating with web services.
The WebResource.axd HTTP handler handles sending the appropiate JavaScript files down to the client.
JavaScript Files
As mentioned earlier, there is a set of JavaScript files that come with Atlas. These files are as follows:
❑ Atlas.js — The Atlas.js file contains the core set of Atlas functionality. For example, the Sys
namespace is defined within this file.
❑ AtlasCompat.js — The AtlasCompat.js file provides the majority of the browser compatibility
layer. This file contains support for Internet Explorer, Mozilla, and Safari.
❑ AtlasCompat2.js — The AtlasCompat2.js file provides additional support for other browsers.
❑ AtlasFX.js — This file contains support for gadgets.
❑ AtlasRuntime.js — The AtlasRuntime.js file is for performing Ajax-only communication to
the server without the need for all of the other files and associated overhead.
❑ AtlasUIDragDrop.js — AtlasUIDragDrop.js provides the Drag and Drop API for Atlas.
In addition, there are a few behaviors that are included.
❑ AtlasUIGlitz.js — The AtlasUIGlitz.js file contains support for special UI and visual
effects. This includes classes that support UI features such as opacity and animation.
❑ AtlasUIMap.js — The AtlasUIMap.js file provides support for the Virtual Earth Atlas control.
❑ AtlasWebParts.js — The AtlasWebParts.js file provides support for Web Parts in Atlas.
❑ GadgetRuntime.js — The GadgetRuntime.js file provides support for gadgets in Atlas.
250

Atlas Client Script
These scripts fall into the following general layers of code:
❑ Browser compatibility layer — This layer handles the differences between the browsers. By
abstracting the differences in the various browsers, the higher-level code does not require
if-else code to handle browser differences.
❑ JavsaScript extensions — The JavaScript extensions provide support for objects, functions, and
data types that are found not in JavaScript natively.
❑ Script Core — The script core provides many features that could be considered to be language
extensions to JavaScript. These features include support for namespaces, classes, interfaces,
inheritance, enumerations, delegates, and so forth. By providing this layer, Atlas is able to pro-
vide features to encapsulate data, logic, behaviors, and such into classes, just like other pro-
gramming languages. Functionally, this brings JavaScript close to the features available in the
.NET languages.
❑ Base Class Library (BCL) — The Atlas BCL is very similar to and is modeled after the BCL in
the .NET Framework. This layer provides such things as the StringBuilder, Debug, Event,
Disposable support, and XmlHTTP abstraction through WebRequest and WebResponse. In addi-
tion, this layer provides support for ASP.NET services, such as Profile and Authentication, to
work with the services on the server.
❑ Component Model and UI — This layer provides support for components that can be self-
described by their object model.
❑ Controls and components — This layer provides a set of built-in components. Some of these
components are the Timer, Counter, Listview, and the MapControl.
❑ Web Parts and gadgets — This layer provides support for integrating with external services,
such as Web Parts and gadgets.
Ajax Support
With Atlas, Microsoft has added many web browser/client-side features. The most talked about feature
is support for Ajax. Frequently, Microsoft has been criticized for its lack of cross-platform (or non-
Microsoft operating system) support. At the time of this writing, Atlas supports Internet Explorer,
Mozilla Firefox, and the Macintosh Safari browsers.
Atlas allows for the calling of a regular web service in a web application through the browser. This
allows for the web browser to provide a rich experience to the user without the need for the traditional
postback to the web server. Atlas provides the mechanism to consume and expose web services by
exposing JavaScript proxies of web services within the browser.
Asynchronous Communication Only
With Atlas, all communication is asynchronous. Most operations that programmers work with are syn-
chronous communication, so it is important to understand the differences. With Atlas, there is no ability
to call a web service and wait for its response. This is important. If Atlas provided support for making
synchronous calls and a synchronous call were made, the client might very well lock up if the server
were to somehow disappear after a request was made. The only way to exit would be to stop the
browser task that was running. Other libraries provide support for synchronous operations, but Atlas is
currently designed to provide asynchronous communication.
251

Chapter 10
Now that you have heard why Atlas is asynchronous and why synchronous processing can cause prob-
lems in a web browser environment, you can actually change this behavior. You have two mechanisms
to perform this change:
❑ One of the members of the ASP.NET team has provided a mechanism to perform this. This can
be viewed on Bertrand LeRoy’s blog at http://weblogs.asp.net/bleroy/archive/2005/
12/15/433278.aspx.
❑ It is possible to go into the Open method of the XmlHttpRequest object in the appropriate JavaScript
files and change the Asynchronous flag to false, as opposed to the default value of true.
Please remember that performing synchronous operations is dangerous and not supported in Atlas. If
you feel that you must change the Atlas files, you will be making significant changes to the Atlas files
and to the programming model. In addition, you will be creating an unsupported implementation.
Adding Atlas Suppor t with the
ScriptManager Control
Now that you have down some of the basics of Atlas, you can turn to the question of how you add Atlas
support to a web page. In addition to the ScriptManager, you will need to add some commands to the
Web.Config to properly configure Atlas.
The ScriptManager control is the mechanism for adding Atlas support to an .aspx page. Basically, the
scripts needed are added to an .aspx page by using the ScriptManager control. So, to add the basic
support for Atlas (Atlas.js), the following code is used:
The next step is to add support for calling a specific web service. This is done by adding a service to the
ScriptManager control:
In the preceding example, you see the ScriptManager control. This control provides support for Atlas
on the page. The tag adds support for web services that are called by code. In this example,
a WebService.asmx’s proxy will be placed on a page for calling. The proxy can be called out by
JavaScript code running on the client browser.
If only the AtlasRuntime.js file is necessary, the EnableScriptComponents=”false” can be set in
the ScriptManager tag.
252

Atlas Client Script
You will face situations when additional Atlas (or other) JavaScript libraries need to be loaded. These
libraries are added by using the tag. This next example adds several scripts through the
ScriptManager control; specifically, the script named AtlasUIDragDrop and the file Script.js file
are loaded in the browser.
In this example code, two ways of calling a script are shown. The first way is that the AtlasUIDragDrop
script is added by name. This will be the normal way that an Atlas script is added to a page. A second
way to add a script is to add it by path. This is shown using the imaginary Script.js file.
Communicating with Web Ser vices
Calling out to an ASP.NET web service is an important part of Atlas. By default, JavaScript running within
a web browser does not know how to communicate with a web service. A web service is built with C#,
Visual Basic .NET, or some other language. To communicate with a web service, JavaScript must know
how to call a web service, and this is done by generating JavaScript proxies using a feature of Atlas.
Generating the JavaScript Proxies
To generate the JavaScript proxies, you need to add a reference to a web service. Along with that refer-
ence, the web service methods must be exposed. This is done automatically when a JavaScript library is
added as a service through the ScriptManager control. For example, the ScriptManager produces the
following JavaScript code when you add a reference to the WebService.asmx file.
This code is the source code on the web page:
The preceding code will generate the output that follows on the client browser:
253

Chapter 10
This code shows how an external web service proxy is generated. The /js switch instructs the Atlas run-
time to create a proxy object. This proxy object will also run on the client.
When you use the previous code, the following JavaScript proxy is generated and loaded on the client:
var WebServiceTest = { path: “/Chapter10Sample/WebService.asmx”,
GetProjects:function(onMethodComplete, onMethodTimeout, onMethodError)
{return Web.Net.ServiceMethodRequest.callMethod(this.path, “GetProjects”,{},
onMethodComplete, onMethodTimeout, onMethodError); } }
The following is the web service that will be called by the client and will run on the server:
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;
using System.Xml;
///
/// Summary description for WebService
///
[WebService(Namespace = “http://tempuri.org/”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebServiceTest : System.Web.Services.WebService {
public WebServiceTest () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
private string strCn = “.........”;
[WebMethod]
public DataTable GetProjects()
{
string strSql = “select * from tblProject”;
SqlConnection sqlCn = new SqlConnection(strCn);
SqlDataAdapter sqlDa = new SqlDataAdapter(strSql, sqlCn);
DataSet dsData = new DataSet();
try{
//throw (new ApplicationException(“Error on the server.”));
sqlDa.Fill(dsData, “tblProject”);
}
finally{
if(sqlCn.State != ConnectionState.Closed)
sqlCn.Close();
sqlCn.Dispose();
sqlCn = null;
sqlDa.Dispose();
sqlDa = null;
}
254

Atlas Client Script
return(dsData);
}
}
The preceding code is a simple example of a web service. In this example, all of the records from the
table tblProject are queried and returned to the calling method, which is the web browser.
In an Atlas application, the Web.Config file has a new handler for web services. It is defined as follows:
Calling Out to Web Services
Now that you have seen how to generate the JavaScript proxies necessary to call out to a web service,
you can look at actually calling out to the web service.
Calling out to a web service from JavaScript is a fairly simple process. An example of a JavaScript call is:
Namespace.Class.MethodName(param1, param2, ..., paramN, OnMethodComplete,
OnServerTimeOut, OnServerException)
In this example, look at the parameters. The items detailed as param1, param2, and paramN are the
parameters that the web service would take normally. The other three parameters are rather interesting.
These three parameters, which you will see in more detail in the next three sections, are the callback
methods that are used when something happens on the server.
OnMethodComplete
When a web service completes its activities and returns data to the calling application, it needs to have a
place to return to. The OnMethodComplete event is the JavaScript callback that is called when the web
service returns to the application. When this event is called, the method is passed a result parameter. The
result parameter is a JavaScript Object Notation (JSON) serialized version of the returned value from the
web service.
The syntax of the OnMethodComplete method is:
function MethodReturn(result)
{
// Do something with the returned object.
}
The result that is returned may be anywhere from a simple datatype to a very complicated complex
object that is serialized and sent to the browser.
OnServerTimeOut
In the event that the server does not respond within a predefined timeframe, the OnServerTimeOut
method is called. In this method, it is possible for the application to communicate to the user that the
server is not available.
255

Chapter 10
OnServerException
Examine the following code to look at what happens when an exception is returned from a web service.
[WebMethod]
public DataSet GetProjects()
{
string strSql = “select * from tblProject”;
SqlConnection sqlCn = new SqlConnection(strCn);
SqlDataAdapter sqlDa = new SqlDataAdapter(strSql, sqlCn);
DataSet dsData = new DataSet();
try{
throw (new ApplicationException(“Error on the server.”));
sqlDa.Fill(dsData, “tblProject”);
}
finally{
if(sqlCn.State != ConnectionState.Closed)
sqlCn.Close();
sqlCn.Dispose();
sqlCn = null;
sqlDa.Dispose();
sqlDa = null;
}
return(dsData);
}
When a server’s web service encounters an exception that is thrown back to the calling application, the
Atlas OnServerException event is called at the client. This event receives the result object. Take a look
at the result object that is returned (there are three parts, but the last two are not required).
❑ get_message() — This is the textual message of the exception that occurred on the server. This
is shown in Figure 10-1.
Figure 10-1
❑ get_stackTrace() — This is the stack trace of the exception. The stack trace is shown in
Figure 10-2.
Figure 10-2
256

Atlas Client Script
❑ get_exceptionType() — This is the type of the exception. The exception type is shown in
Figure 10-3.
Figure 10-3
Passing Types
Applications have methods that require passing various types of parameters. These parameters may be
either simple datatypes, such as numbers, strings, and booleans or more complicated types that are defined
by the developers. The passing of various types is supported within Atlas. Simple and complex datatypes
may be easily sent and received. These include booleans, integers, strings, and other simple datatypes, as
well as datasets and custom objects. These datatypes are easily sent back and forth between the calling
parameters and returned values. The next sections take a look at passing the simple and complex data
types between the client web browser and the server.
Simple Data Types
Let’s look at a web page that contains a call using simple datatypes. In this example, the code passes two
integers to a web service and then returns the sum of those values to the calling method through Atlas.
The web service code is:
[WebMethod]
public int ServerAdd(int val1, int val2)
{
return (val1 + val2);
}
In this example, the code accepts two integers and returns an integer all through a web service:
The code on the web page is as follows:
Simple Data Types Page
function CallServerAdd()
{
SimpleDataTypeWebService.ServerAdd( 3, 4, ServerAddReturn);
257

Chapter 10
}
function ServerAddReturn(result)
{
alert(“Result Value: “ + result);
}
In the preceding code, the click of the “Click – Simple Add” button will call the JavaScript method
named CallServerAdd(). The CallServerAdd() method calls out to the ServerAdd(...) method on
the server. The values of 3 and 4 are passed along with the callback method named ServerAddReturn.
When the ServerAdd() method is completed on the server, the client-side ServerAddReturn is called
with the data that is returned from the server-side method.
The result of clicking the button is shown as Figure 10-4. It is very simple to call a web service through
Atlas with simple datatypes and then to obtain the returned result.
Figure 10-4
Complex Data Types
Now, you can take a look at what it takes to use some complex datatypes. In these examples, you will
see some datasets and custom data types.
Datasets
What is a dataset? In .NET, a dataset is an object within the System.Data namespace. A dataset can be
thought of as a local subset of data. A dataset contains a set of data tables. These data tables typically
contain the results of queries. When developers work with datasets, they typically are used as the result
of some database query. It is possible to send datasets from the server down to the client, and that is
what we will look at in this section.
258

Atlas Client Script
Atlas supports the return of datasets to the web browser and then the processing of the dataset on the
client. Take a look at an example of calling a web service, returning a dataset, and then processing that
dataset.
Here is your web service. It is just a web service that performs a query and then returns a dataset. The
web method returns a dataset with a data table called tblProject. Notice that this is the same code that
the web service used in the exception example, without the exception.
[WebMethod]
public DataSet GetProjects()
{
string strSql = “select * from tblProject”;
SqlConnection sqlCn = new SqlConnection(strCn);
SqlDataAdapter sqlDa = new SqlDataAdapter(strSql, sqlCn);
DataSet dsData = new DataSet();
try{
sqlDa.Fill(dsData, “tblProject”);
}
finally{
if(sqlCn.State != ConnectionState.Closed)
sqlCn.Close();
sqlCn.Dispose();
sqlCn = null;
sqlDa.Dispose();
sqlDa = null;
}
return(dsData);
}
The following is the client-side JavaScript. It is contained in the page DataTable.aspx page in the
example code.
function PageLoadMethod()
{
WebService.GetProjects(MethodReturn);
}
function MethodReturn(result)
{
var i = 0;
var str = “”;
259

Chapter 10
var strRowsInfo = “”;
var strReturn = “”;
//get a datatable
var tbl1 = result.getItem(0);
for(i = 0; i < tbl1.get_length(); i++)
{
//tbl1.getItem(i) will return the ith DataRow
//getProperty(“Column Name”) will return the column value from a
DataRow
strRowsInfo += tbl1.getItem(i).getProperty(“ProjectName”) + strReturn;
}
document.getElementById(“RowInfo”).innerHTML = strRowsInfo;
}
In this code, the reference is created to your WebService.asmx file. When the button is clicked, an asyn-
chronous call is made to WebService.GetProjects(). The only callback method that you process in this
example is the MethodReturn callback. The MethodReturn function gets the dataset as a parameter in the
call to it. To get the data table, the result .getItem(0) is called. This will return the data table. Once you
have the data table, you can get the number of rows of the data table by calling .get_length(). This is
then used within the for loop to iterate through the rows in the data table. Within the for loop, the
.getProperty() method is used to then get the contents of the column.
For some additional information on how Atlas handles data tables, data columns, and the like, refer to
the appropriate section later in this chapter.
Custom Datatypes
Many applications built over the past several years are built with custom business objects. These custom
business objects are highly optimized for a specific application. In this example, a custom business object
will be created. This example will have two strings as properties of the custom object. These properties
are Name and Address.
The ASP.NET page code for this example is:
Complex Data Type Page
function ComplexDataTypeCall()
{
var CustName = “ACME Inc.”;
var CustAddr = “WileyVille, USA”;
var objCustObj = new cComplexCustomerType();
objCustObj.Name = CustName;
objCustObj.Address = CustAddr;
ComplexWebService.AcceptComplexDataType(objCustObj,
ComplexScriptCompleteCallback);
260