Asp.net|web| Program | create | client
Abstract This article introduces the Atlas framework and explores its client and server-side library and its programming model. In addition, a sample Web application that supports the Atlas feature is analyzed in detail.
I. Development environment DESCRIPTION
The information provided in this article applies to the following technologies: asp.net 2.0,asp.net Atlas ctp,visual Studio Professional 2005 and Visual Web Developer 2005.
Ii. Introduction
Atlas is a code name for a framework that extends asp.net for the development of client Web applications. While providing a set of client and server-side classes to create Cross-browser-compliant AJAX-style applications, the framework introduces other features such as bridging technology, Gadget, a JavaScript declarative scripting model, and extensions.
This article will introduce the Atlas framework and explore its client and server-side libraries and their programming models. In addition, a sample Web application that supports the Atlas feature is analyzed in detail.
Three, client-based and server-side Web applications
Web application development is now focused on HTTP clients (browsers) and server development. asp.net Web applications are server-based (run on this host), so a full postback is required for each event that is fired by a server control on the client. Such a scenario can be described in Figure 1.
Figure 1. HTTP feedback for a asp.net web application
Web applications are run only on the server side, with little or no client processing, and performance degradation is not required. However, its drawbacks can easily be found in a asp.net Web application: A blinking, paused, unresponsive, and relatively poor UI, or a busy line due to data postback and server overload.
Addressing these performance hurdles in the ASP.net application means that some load processing must be moved to the client and leveraging the technology provided by the client platform. The client platform can be scripted, and JavaScript is a standard object-oriented programming language for this task.
So what do these client platform technologies refer to above? These client platforms (browsers) provide the following technologies:
· Document Object Model: a standardized set of language-independent sets of objects that allow developers to dynamically control the structure, content, and style of HTML documents.
· Dynamic Hypertext Markup Language object model: A browser vendor-specific collection of features that can be used as an extension of the DOM. Data binding, UI effects (such as filters and transitions), HTML element behavior, and events are some of the features provided within the object model.
· XMLHttpRequest object: It allows retrieving and submitting XML data over HTTP without requiring a complete feedback or regeneration of the entire Web document.
· A JavaScript interpreter: contained in all Web browsers, which handles commands written in JavaScript. JScript is a Microsoft version of JavaScript, which was originally created by Netscape. Both versions follow the ECMAScript standard-vendor-neutral, cross-platform, general-purpose scripting language.
These technologies, together known as Ajax, are meant to be asynchronous Javascript+xml, and Atlas is a framework for creating Web applications that leverage these technologies. Figure 2 below shows a asp.net web application that supports the Atlas technology.
Figure 2. HTTP request and response a client-based asp.net Web application that supports the Atlas technology
Iv. Overview of the Atlas framework
The framework contains the Microsoft.Web.Atlas.dll assembly set, which contains the server-side hosted and client JavaScript APIs.
Figure 3 below shows the Atlas namespace in the Object Browser window of Visual Studio.
Figure 3. Namespaces in the Microsoft.Web.Atlas.dll assembly set
(i) server-side libraries
The various classes provided in the namespaces shown in the framework of Figure 3 serve as server-side libraries. This library provides configuration, Web services, and control classes that work with the client JavaScript APIs.
The Web service class exposes ASP.net features such as authentication, profiling, culture, and globalization to client JavaScript code for asynchronous access. The Atlas server control classes, on the other hand, can "emit" JavaScript when building these controls, freeing developers from writing complex client script.
The server-side library also provides the Atlas extender control, which can be provided to other client features of the ASP.net control.
The following controls are part of the server-side library:
· ScriptManager controls: Provides all of the Atlas features on a Web page, such as partial page updates, custom and library client script references and builds, Web service references that are asynchronous to the client, and exception handling is managed by the control. Each asp.net Web page or user control that needs to implement the Atlas feature needs to declare a single instance of the control. To use the ScriptManager control on a page, you can use the following declarative syntax:
<atlas:scriptmanager
Id= "ScriptManager Instance identifier"
[!--enables or disables partial page rendering using UpdatePanel controls-->
Enablepartialrendering= "Boolean True or False"
!--If set to False the Atlasruntime.js file, which provides basic ' Atlas functionality are referenced by default.
If set to True the Atlas.js file, which provides the entire Atlas feature set is referenced by default.
The default value is true-->
Enablescriptcomponents= "Boolean True or False"
Onpageerror= "invoked event handler on Pageerror"
runat= "Server" >
<Scripts>
<atlas:scriptreference
!--To reference custom script files-->
Path= "path to. js file"
!--To reference client library files, are not included automatically-->
Scriptname= "Name of script file e.g. Atlasuiglitz"/>
</Scripts>
<Services>
<atlas:servicereference
!--If set to true this control generates a JavaScript proxy object for asynchronous access for the referenced Web Service.
If set to False it doesn ' t.-->
Generateproxy= "Boolean True or False"
Path= "Path to a WEB service (e.g. asmx) file"
Type= "Web Service class name"
/>
</Services>
<ErrorTemplate>
!--Markup for rendering unhandled exception messages for asynchronous.
Partial rendering should is enabled. The template has to define a input button with a attributes ID of value "OKButton" and runat of value "server" to close The message. -->
</ErrorTemplate>
</atlas:ScriptManager>
· ScriptManagerProxy controls: For content pages and user controls, if their parent page already has a well-defined ScriptManager control, the control can be used to reference other scripts and services. However, the control cannot be used by the ScriptManager control to delete scripts and service references.
· UpdatePanel Control: When a partial build of a Web page is supported by the ScriptManager control, the UpdatePanel control can be used to specify the region on the page-can be independently updated with asynchronous feedback. The following declarative syntax is used to define a UpdatePanel control in a Web page:
<atlas:updatepanel
Id= "UpdatePanel Instance identifier"
!--If Mode is set to Always asynchronous postbacks triggered within the region update its contents automatical Ly
If It is set to Conditional the region are updated in response to a registered trigger
Mode= "always| Conditional "
The!--If Rendermode are set to blocks the content within the UpdatePanel is rendered using a <DIV> element;
If It is set to Inline a <SPAN> element are used as a container for the content within the Upadatepanel-->
Rendermode= "block| Inline "
runat= "Server" >
<ContentTemplate>
!--Content to be rendered within the region-->
</ContentTemplate>
<!a€ "A Collection of objects" trigger an asynchronous update on the panel. These Objects don ' t need to be declared within the region. -->
<Triggers>
<controlvaluetrigger
Controlid= "object instance identifier"
Propertyname= "Property value" triggers the update/>
<controleventtrigger
Controlid= "object instance identifier"
Eventname= "The name of the event that triggers the update"/>
</Triggers>
</atlas:UpdatePanel>
· Timercontrol: It generates a timer on the client, which triggers asynchronous feedback at a specified time interval. The control is typically used as a trigger control for a Updatepanelat control that requires a timed update of the content. To define this control declaratively, you need to use the following syntax:
<atlas:timercontrol enabled= "Boolean true or False" id= "control instance identifier"
The!--If the is set to true the control is defined on the client-side. If not it isn ' t.-->
Interval= "Interval in milliseconds. The default is 60000.
ontick= "invoked Server-side event handler name" runat= "Server"/>
· Extender controls: They extend the ASP.net control with increased client functionality. For example, the Autocompleteextender control supports the automatic completion behavior of asp.net text box controls, while Dragoverlayextender controls support drag behavior.
· Developers can also create custom ASP.net Atlas control extenders with a Visual Studio 2005 engineering template that is provided with the Atlas Control Toolbox.
(ii) Client library
The client library includes a set of (. js) JavaScript files that are packaged as resources in the Microsoft.Web.Atlas.dll assembly set.
The objects contained in this class library provide the following characteristics:
· JavaScript language extensions: Allows developers to program in JavaScript while also using OO structures such as namespaces, classes, enumerations, interfaces, and data types.
· JavaScript Kikuyu extensions: This includes other objects for debugging, tracking, and string manipulation.
· Browser compatibility: Automatic browser portability for custom scripts and scripts generated by the Atlas control.
· Network functionality: Provided by objects located inside the Sys.net namespace. These features make it easy to communicate with the host asynchronously and to execute remote methods.
· HTML control wrappers: they allow developers to add features-such as data binding, behavior, and actions to many HTML controls and elements-using XML scripts.
· Atlas Client Controls: Enables developers to create rich applications using JavaScript or XML scripts These include controls inside the Sys.UI.Data namespace, such as Listview,datanavigator,itemview,xsltview, and so on.
· Xml-script: A declarative scripting model that allows developers to write client-side code using a programming model similar to asp.net. The Atlas declarative script is defined inside the <script> </script> tag using the following syntax:
<script type= "Text/xml-script"
<page xmlns:script= "http://schemas.microsoft.com/xml-script/2005"
<references>
</references>
<components>
</components>
</page>
</script>
The entire client library is included in the Atlas.js file and is referenced by default when you define a ScriptManager control in a page. In addition, to reduce the number of scripts generated on the client side, we can set the ScriptManager control's enablescriptcomponents to false and use a simplified version of the library contained in the Atlasruntime.js file. In addition, specialized library files, such as Atlasdraganddrop.js,atlasuimap.js,atlasuiglitz.js, can be referenced by name using the script collection properties of the ScriptManager control.
V. mash-up and Gadget (widget)
Two new features are introduced in Atlas: bridging Technology and gadget. Bridging technology allows Web applications to consume data from a variety of remote Web services-when connected to a single host. These Web applications that consume one or more remote services are often referred to as mash-up. To achieve this, the framework introduces a bridging file to the. asbx extension flag. In fact, bridging files are XML files-allowing us to declaratively define the connection to a service and implement data conversion. Figure 4 below shows a Web application that uses the Atlas bridging technology Consumption (mashing-up) from data on a variety of remote Web services:
Figure 4. Consuming data from a variety of remote services
There are different types of gadget for different platforms. A web-based gadget is a portable Web application that can be posted to any gadget hosting site, such as Live.com or start.com. The composition of a web-based gadget is as follows:
· An XML declaration that contains information about the gadget itself (title, description, Publisher, build information, and so on) and links to the gadget component (. JSS and. css files). The following is a sample manifest file for a fictional gadget (widget):
<?xml version= "1.0"? > >
<rss version= "2.0" xmlns:binding= "http://live.com"
<channel>
<title> Widget Alpha </title>
<link> http://www.contoso.com </link>
<description> What does this gadget does? </description>
<language> EN-GB </language>
<pubDate> Date </pubDate>
!--Javascript function entry point; Used by the host to load the gadget. -->
<binding:type> Widget.alpha </binding:type>
<item>
<description> the JavaScript code component </description>
<link> Http://www.contoso.com/Gadgets/Widget/alpha.js </link>
</item>
<item>
<description> This adds style to the gadget </description>
<link> Http://www.contoso.com/Gadgets/Widget/alpha.css </link>
</item>
</channel>
</rss>
· JavaScript code: Included in the. js file that the manifest file is linked to, and it defines the portable components that will be hosted.
· Model table: It defines the design that the host uses to generate the gadget above.
VI. Test-driven framework
This article will use the Atlas UpdatePanel control and partial page generation technology in the ASP.net application.
The example provided here is an Amazon E-commerce Service Web client application that uses City,cuisine and neighbourhood search parameters to search for restaurants throughout the United States. The sample application uses a UpdatePanel control for asynchronous feedback and partial page generation, making applications faster and more interactive to improve the user experience.
(i) demand
· Microsoft Visual Studio 2005,. NET Framework 2.0 and the latest Atlas CTP.
· Register (free) Amazon Web service to obtain access keys id-use it to access the E-commerce service.
(ii) Configure the Web site
Create a new Web site by using the Atlas Engineering template that is installed with the CTP of the framework:
1. Open Visual Studio 2005.
2. Click on the "File" menu, select "New" and click Website.
3. From the New Web Site dialog box, select the Atlas project template, location, project name, and development language (VB or C #). The language used in this example is C #.
Figure 5 below shows the New Web Site dialog box in Visual Studio 2005.
Figure 5. " New Web Site dialog Box window
(iii) Configuring services for SOAP Requests
1. Log in to the account you created using the Amazon Web service and use the links provided to save it to a WSDL file on your computer.
2. From the. NET Framework 2.0 SDK Command Prompt window, use the WSDL.exe tool to make a proxy class for the waiter in the WSDL you saved in step 1th:
WSDL <options> <url | path>
3. Open the Solution Explorer window from the project you created with Visual Studio, right-click the project file, point to the "Add asp.net" folder and click "App-code".
4. Right-click the "App-code" folder in the Solutions Explorer window and click "Add Existing Item".
5. Browse to the proxy file you created earlier from the "Add Existing Item" dialog box, select it and click "Add"; This will add the service proxy file to the project.
(iv) Create client UI
1. In Solutions Explorer, double-click the Default.aspx file to open it in the Visual Studio Designer window.
2. Make sure you are in Source view and then copy and paste the following code between the document's <form id= "Form1" runat= "Server" and "</form>":
<atlas:scriptmanager id= "ScriptManager1" enablepartialrendering= "true" runat= "Server" enablescriptcomponents= "true "/>
<asp:label id= "Label1" runat= "Server" width= "366px" font-bold= "True" font-names= "Verdana Ref" font-size= "Small" Height = "19px" >search for restaurants with AMAZON. COM </asp:Label> <BR/>
<BR/>
<asp:label id= "Label2" runat= "Server" text= "Access Key ID:" width= "128px" font-names= "Verdana Ref" > </asp:Label>
<asp:textbox id= "Txtbaccesskey" runat= "Server" width= "182px" font-names= "Verdana Ref" > </asp:TextBox>
<asp:requiredfieldvalidator id= "RequiredFieldValidator1" runat= "Server" errormessage= "*"
Width= "16px" controltovalidate= "Txtbaccesskey" > </asp:RequiredFieldValidator> <BR/>
<asp:label id= "Label3" runat= "server" text= "Cuisine:" font-names= "Verdana" width= "58px" > </asp:Label>
!--the Listboxcuisine ListBox holds all possible entries for the cuisine parameter by the Amazon supported
<asp:listbox id= "Listboxcuisine" runat= "Server" rows= "1" width= "206px" onselectedindexchanged= "Listboxcuisine_" SelectedIndexChanged "font-names=" Verdana Ref "autopostback=" True ""
<asp:listitem text= "American Cuisine" value= "American Cuisine" > </asp:ListItem>
<asp:listitem text= "Asian cuisine" value= "Asian cuisine" > </asp:ListItem>
<asp:listitem text= "Seafood" value= "seafood" > </asp:ListItem>
<asp:listitem text= "Greek" value= "Greek" > </asp:ListItem>
<asp:listitem text= "Indian" value= "Indian" > </asp:ListItem>
<asp:listitem text= "Italian" value= "Italian" > </asp:ListItem>
<asp:listitem text= "Japanese" value= "Japanese" > </asp:ListItem>
<asp:listitem text= "Chinese" value= "Chinese" > </asp:ListItem>
</asp:ListBox>
<BR/>
<asp:label id= "Label5" runat= "Server" font-names= "Verdana" text= "City:"
Width= "61px" >
</asp:Label>
<!a€ "The Amazon E-Commerce Service supports only the cities defined as list items of the ListBox control-->
<asp:listbox id= "listboxcity" runat= "Server" height= "19px" width= "221px" autopostback= "True" enabletheming= "False" rows= "1" onselectedindexchanged= "listboxcity_selectedindexchanged" font-names= "Verdana Ref"
<asp:listitem text= "Seattle" Value= "Seattle" > </asp:ListItem>
<asp:listitem text= "Boston" value= "Boston" > </asp:ListItem>
<asp:listitem text= "San Francisco" value= "San Francisco" > </asp:ListItem>
<asp:listitem text= "New York" value= "New York" > </asp:ListItem>
<asp:listitem text= "Washington, D.C." Value= "Washington, D.C." > </asp:ListItem>
<asp:listitem text= "Chicago" value= "Chicago" > </asp:ListItem>
</asp:ListBox>
<BR/>
<asp:label id= "Label6" runat= "Server" font-names= "Verdana Ref" text= "Neighbourhood:" width= "59px" >
</asp:Label>
<asp:textbox id= "TextBox3" runat= "Server" width= "143px" font-names= "Verdana Ref"
</asp:TextBox>
<asp:button id= "Submitsearch" runat= "Server" height= "23px" text= "Submit"
Width= "54px" font-names= "Verdana Ref"/>
<BR/>
3. Switch to Design view; the designer should generate the UI shown in Figure 6.
Figure 6. UI for the sample application
(v) Configuring the UpdatePanel Control
1. Switch to Source view; Add the following code between the <BR and/> tags after the callout:
<atlas:updatepanel id= "UP1" enableviewstate= "true" mode= "Conditional" rendermode= "Inline" runat= "Server"
<ContentTemplate>
</ContentTemplate>
<Triggers>
</Triggers>
</atlas:UpdatePanel>
When an event in a registered control is triggered, the UpdatePanel control is conditionally updated. Registered events are processed asynchronously on the server side.
2. Between the <ContentTemplate> and </ContentTemplate> elements of the UpdatePanel control, add the following callout:
<atlas:UpdateProgress>
<progresstemplate >
<asp:label id= "Label4" runat= "Server" font-names= "Verdana Ref" font-size= "X-small"
Text= "Loading ..." Width= "81px" > </asp:Label>
</ProgressTemplate>
</atlas:UpdateProgress>
<BR/>
<asp:repeater id= "RP1" runat= "Server"
<ItemTemplate>
</ItemTemplate>
</asp:Repeater>
<asp:label id= "Noresults" runat= "Server" width= "449px" font-names= "Verdana Ref" > </asp:Label>
<BR/> <BR/>
<asp:label id= "Pricerange" runat= "Server" font-names= "Verdana Ref" font-size= "X-small"
</asp:Label>
<BR/>
<BR/>
<asp:label id= "Labelerror" runat= "Server" width= "451px" font-names= "Verdana Ref"
</asp:Label>
When the zone is being updated, the UpdateProgress control displays a busy indicator ("Load ...").
The Repeater and label controls are responsible for storing search results and potential error message results.
3. In order to register a control that will trigger a partial update, place the following code fragment between the <Triggers> and </Triggers> elements of the UpdatePanel control:
<atlas:controleventtrigger controlid= "Submitsearch" eventname= "click"/>
<atlas:controleventtrigger controlid= "listboxcity" eventname= "SelectedIndexChanged"
<atlas:controleventtrigger controlid= "Listboxcuisine" eventname= "SelectedIndexChanged"
(vi) Adding code to the client application
Switch to Design view and double-click the generated Web form to display the corresponding Code section (Default.aspx.cs) for the page. Select Ctrl + A to select all automatically generated code and press the DELETE key to clear the document. Then, add the following code to consume the Amazon ECS Service and display the search results:
Using System;
Using System.Data;
Using System.Configuration;
Using System.Web;
Using System.Web.Security;
Using System.Web.UI;
Using System.Web.UI.WebControls;
Using System.Web.UI.WebControls.WebParts;
Using System.Web.UI.HtmlControls;
public partial class _default:system.web.ui.page
{
protected Awsecommerceservice amazonecs = new Awsecommerceservice ();
protected Itemsearch Search = new Itemsearch ();
protected Itemsearchrequest searchrequest = new Itemsearchrequest ();
protected Itemsearchresponse SearchResponse;
protected void Submitsearch_click (object sender, EventArgs e)
{
Search.awsaccesskeyid = TxtBAccessKey.Text.ToString ();
Searchrequest.searchindex = "restaurants";
Searchrequest.cuisine = Listboxcuisine.selectedvalue;
searchrequest.city = Listboxcity.selectedvalue;
Searchrequest.neighborhood = TextBox3.Text.ToString ();
Searchrequest.responsegroup = new string[] {"Itemattributes"};
Search.request = new Itemsearchrequest[1] {searchrequest};
Try
{
SearchResponse = Amazonecs.itemsearch (Search);
if (Searchresponse.items = null)
{labelerror.text = "A Server error has occured."}
Else
{
Items responseitems = searchresponse.items[0];
item[] response = Responseitems.item;
if (response!= null)
{
foreach (Item I in response)
{
Noresults.text = "";
Label Results = new label ();
The label Sep = new label ();
Results.text = "<strong>" + i.itemattributes.title.toupper () + "</strong>" + "<br/>"
+ i.itemattributes.address.address1.tostring () + "<br/>"
+ I.itemattributes.neighborhood + "<br/>"
+ "Tel:" + "" + I.itemattributes.phonenumber + "<br/>"
+ "Price Rating:" + "" + pricerating (i.itemattributes.pricerating) + "<br/>" + "<br/>";
Sep.text = "<br/>";
RP1. Controls.Add (Results);
RP1. Controls.Add (SEP); }
Pricerange.text = "Price per person (based on entree, appetizer or salad, one non-alcoholic drink plus tax and tip)";
}
Else
{
Noresults.text = "No search results found."
Pricerange.text = "";
}
}
}
catch (Exception ex)
{
Labelerror.text = ex. Message.tostring ();
}
}
private string pricerating (String str)
{
if (str== "1") {
Return "under $";}
else if (str== "2") {
return "$15-30";}
else if (str== "3") {
return "$30-45";}
else if (str== "4") {
Return "over $45";}
Else{return null;}
}
protected void Listboxcity_selectedindexchanged (object sender, EventArgs e)
{}
protected void Listboxcuisine_selectedindexchanged (object sender, EventArgs e)
{}
}
(vii) running the application
1. To run the application, open the Default.aspx page in Design view. Select the Txtbaccesskey textbox control; In the Properties window, add your Amazon Web service access key ID to the control's Text property.
2. Press the F5 key to run the application.
3. The process of using the application is fairly straightforward. Select a cuisine type from the cuisine: list box, select a city from the Cities: list box, and then click the Submit button. As a choice, you can also refine your search.
(eight) using the Amazon ECS Web service from the browser
1. Use a bridging file to specify the proxy class that consumes the remote Web service, the method that invokes the service, and how to manipulate the returned data.
2. Use the ScriptManager control to refer to the bridging file.
3. Use a service using HTML controls, JavaScript, and client Atlas data components.
Vii. Conclusion
ASP.net atlas is a framework for creating client-based Web applications. While providing client and server-side APIs to create Cross-browser-compliant AJAX-style applications, this framework introduces additional features such as bridging technology, Gadget, a JavaScript declarative scripting model and extensions, and more.
In summary, this article describes the typical use framework for the framework, and introduces some (Partial) page generation technology by using the Atlas UpdatePanel control, which is the easiest way to add AJAX functionality and improve the user experience in ASP.net Web applications.
