ASP.NET "Atlas" enables you to create browser-based applications that feature a highly responsive UI and that can harness the power of the server. This brings a richer user experience to Web applications while reducing the need to post pages back to the server.
ASP.NET "Atlas" provides a foundation for building rich client applications using a suite of JavaScript libraries that run in the browser. The libraries simplify and enhance application creation by providing built-in client-scripted controls and components. The result is that ASP.NET "Atlas" developers can write Web applications in a number of ways.
This QuickStart describes creating ASP.NET "Atlas" applications with JavaScript code and with the new ASP.NET "Atlas" script in the client. ASP.NET "Atlas" script is an XML-based syntax that features a simple, declarative definition of client controls, components, behaviors, and data binding for elements in the page. This QuickStart also describes the new
UpdatePanel
control, and triggers and control extenders that allow you to add ASP.NET "Atlas" functionality to a regular ASP.NET 2.0 Web page. Finally, it discusses how control developers can add ASP.NET Atlas functionality to custom components.
This section provides information about the following:
- ASP.NET "Atlas" client script
- ASP.NET "Atlas" client controls: Client controls enable you to create rich applications using JavaScript or ASP.NET "Atlas" script.
- Client events: Events such as the client
event can be handled or attached using client controls.onclick
- Actions: Actions are collections of tasks to perform, such as calling methods or setting properties.
- Behaviors: Behaviors are pre-written functionality, such as a pop-up menu or a tooltip, that can be attached to individual controls.
- Data binding: Data binding allows you to connect controls and components together and to manage the flow of data between them.
- Control extensions: Extensions enable you to create new client objects to enhance or compose rich functionality for client controls. Page developers can add your enhanced control to their own pages.
- ASP.NET "Atlas" Server controls
- Adding "Atlas" functionality to regular ASP.NET 2.0 pages: ASP.NET "Atlas" allows you to add selective ASP.NET "Atlas" functionality to your existing Web applications through use of the UpdatePanel control, triggers, and ASP.NET "Atlas" control extenders. "Atlas" includes designer support as well.
- Using ASP.NET "Atlas" server controls: "Atlas" introduces new server controls, such as the TimerControl, and enables you to use existing ASP.NET 2.0 rich controls like TreeView.
- Extending ASP.NET "Atlas" server controls: You can extend server controls in two ways: (1) Create control extenders that add ASP.NET "Atlas" client functionality to existing controls, and (2) Create new ASP.NET "Atlas" custom controls that are enabled with client features.
Introduction
ASP.NET "Atlas" provides a framework for developing rich client-based applications. The framework consists of JavaScript libraries that are downloaded to the client and referenced in page markup. Developers using the framework can work with a suite of APIs that abstract client elements in ways familiar to ASP.NET developers. The APIs perform multiple functions: they handle the complexity of supporting multiple browsers, extend JavaScript types, and provide a UI framework such as a suite of controls. The libraries are designed to let you work with controls and components using object-oriented principles that are not normally available in JavaScript.
Because the framework is implemented as JavaScript libraries, you can write applications directly by coding in JavaScript. However, to simplify development, ASP.NET "Atlas" introduces a client declarative model for adding client functionality to pages in a browser-agnostic way. You can think of this as similar to using markup to create a ASP.NET server-side applications.
Finally, page developers can also build applications with the entire client functionality encapsulated in a server control. These server controls generate all required ASP.NET "Atlas" script.
A Simple Example | Top |
The following example uses ASP.NET "Atlas" controls coded using traditional JavaScript functions, an approach that is familiar to developers who have used Dynamic HTML (DHTML) for client coding. The sample demonstrates how to create an ASP.NET "Atlas" client button control:
var btn = new Web.UI.Button($('buttonId')
The button instance is associated with the markup element in the page that is identified by the
id='buttonId'
attribute. Code such as
$('your_element_id')
is equivalent to
document.getElementById(your_element_id)
.
With 'Atlas', ASP.NET pages can also include new server controls in the
atlas:
namespace, such as the
<atlas:ScriptManager>
control. These controls download relevant JavaScript libraries to the client.
ASP.NET "Atlas" Controls: Simple Client Control with JavaScript
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLuVncf52b0RXdi9CXzV2Zh1Wavw1cj9GZvwFdl5mLwNXYuMXYsRXYvw1LcpDc0RHaiojIsJye.gif)
Instead of using JavaScript to create ASP.NET "Atlas" controls and interact with them, ASP.NET "Atlas" introduces a simplified and powerful declarative way to define client controls and their associated markup elements. With this new declarative client syntax, you can:
- Add ASP.NET "Atlas" components and controls that are associated with markup elements in the page.
- Create bindings that define tasks such as setting the text of a label from a button click.
- Handle events such as
,click
, orpropertyChanged
, and perform tasks, or actions, as a result of these events.selectionChanged
- Create and define actions, such as calling control or component members or bindings, with
andinvokeMethod
constructs.setProperty
- Define mappings to templates for the controls, allowing complex composition and handling.
- Define behaviors, or pre-written functionality, that can be associated with controls.
The following example performs the same tasks as the preceding example, but moves all JavaScript code and event hookups into the ASP.NET "Atlas" script definition in the page. This removes the complexity of JavaScript code. It also separates the declarations, potentially allowing them to be removed from the markup page entirely, so that the designer and developer can work independently.
Notice in the sample that the JavaScript code for the "Atlas" script and control definitions is defined within the ASP.NET "Atlas" script, rather than as references in the
<head>
section of the page.
ASP.NET "Atlas" Controls: Validators: Simple Client Control with "Atlas" Script
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLuVncf52b0RXdi9CXzV2Zh1Wavw1cj9GZvwFdl5mLwNXYuMXYsRXYvw1LcpDc0RHaiojIsJye.gif)
ASP.NET "Atlas" Client Controls
An ASP.NET "Atlas" client control or component is conceptually a class definition, or an object when instantiated. The client control's object model (OM) exposes members as you would expect in a traditional object-oriented class definition, so you have access to properties and member functions. You an work with an ASP.NET "Atlas" client control in your page programmatically with JavaScript or declaratively using the new ASP.NET "Atlas" script.
JavaScript | ASP.NET "Atlas" Script |
|
In both examples, the controls will be instantiated during the Load event of the ASP.NET page.
Setting Properties, Handling Events, and Performing Actions | Top |
The following example shows a simple way to both programmatically and declaratively handle events and set properties on individual controls.
ASP.NET "Atlas" Client Controls: Events or Actions and Properties
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLuVncf52b0RXdi9CXzV2Zh1Wavw1cj9GZvwFdl5mLwNXYuMXYsRXYvw1LcpDc0RHaiojIsJye.gif)
The declarative ASP.NET "Atlas" script in the page shows that the element
<div id="panel">
is associated with
Web.UI.Control
, a base class for ASP.NET "Atlas" client controls. The control's
cssClass
property is set declaratively to the
start
style rule.
ASP.NET "Atlas" Script |
|
Button controls are also instantiated declaratively, and their
click
events automatically hooked up as a way to set properties on the
panel
control. This declaration causes the
onclick
event to be handled by performing an action. The following code example shows how to declaratively set the
<setProperty>
action, which sets the
visible
property on the
panel
to
true
. The sample also demonstrates the use of the
<invokeMethod>
action to call a method on the
panel
control.
ASP.NET "Atlas" Script |
|
Data Binding | Top |
Bindings are a powerful way of connecting controls and components and managing the flow of data between them. The following example demonstrates declarative syntax to bind data values entered in a text box and write that value elsewhere on the page. < div>
ASP.NET "Atlas" Controls: Declarative Data Binding
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLuVncf52b0RXdi9CXzV2Zh1Wavw1cj9GZvwFdl5mLwNXYuMXYsRXYvw1LcpDc0RHaiojIsJye.gif)
The same functionality can be achieved through JavaScript using the ASP.NET "Atlas" framework and controls.
ASP.NET "Atlas" Controls: Programmatic Data Binding
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLuVncf52b0RXdi9CXzV2Zh1Wavw1cj9GZvwFdl5mLwNXYuMXYsRXYvw1LcpDc0RHaiojIsJye.gif)
Binding can be set up between controls. The following code example shows how to bind the
text
property in a
label
control to the value entered in a
textBox
control. The
propertyChanged
event on the
textBox
control causes the binding to occur. By default, all bindings are live and will execute when the page is instantiated. The
dataContext
attribute specifies the source for the data and binds the data context object's
text
property (defined using the
dataPath
attribute) to the
text
property of the
label
control (defined using the
property
attribute).
ASP.NET "Atlas" Script |
|
When the page loads, the
label
control's "Empty" text value is immediately lost, because bindings are live and resolved on page load. You can prevent this by adding the
automatic="false"
attribute to the binding, which specifies that binding is not automatic.
Defining Binding Direction | Top |
Bindings can specify a direction. By default, bindings are one way, defined with the value
In
. It is also possible to define a binding direction as
Out
or as
InOut
, as shown in the following example. In the example, setting the text value in either text box updates the value of the other text box.
JavaScript | ASP.NET "Atlas" Script |
|
Binding Transformers | Top |
Bindings support a transform event, which you can handle to perform an operation as part of the binding. The preceding examples show two built-in transforms,
ToString
and
Invert
. Transforms attach a handler to the transform event and also allow you to add
transformerArgument
values that are passed to the transform event handler.
It is possible to use your own transform handlers as shown in the following code examples. Note that your own handlers require a particular prototype signature.
JavaScript | ASP.NET "Atlas" Script |
|
Invoking Bindings from Event Handlers | Top |
The preceding examples demonstrated that bindings can be invoked by ID. For example, in the code example, the
select
control's
selectionChanged
event invokes the relevant binding using the
invokeMethod
.
ASP.NET "Atlas" Script |
|
Validation | Top |
Validators are a powerful way of checking the data entered by the user into ASP.NET "Atlas" client controls of type
InputControl
, such as the
Web.UI.TextBox
control. "Atlas' provides a number built-in validators:
-
. Checks that data was entered.requiredFieldValidator
-
. Checks the type of the data, such astypeValidator
.Number
-
. Checks the input value between an upper and lower bound.rangeValidator
-
. Defines a custom expression handler.customValidator
-
. Checks the data using a regular expression. The regular expression value must be delimited with "/" characters.regexValidator
ASP.NET "Atlas" Script |
|
Validators are defined through a collection. When the
propertyChanged
event is raised, the control value is validated and the validate event raised. You can handle the validated event, as shown in the example that follows. During validation, the validators are queried and might result in the client control's
invalid
and
validationMessage
properties being set.
A special control of type
validationErrorLabel
can be used to display the error message using a tooltip and asterisk (*). Validators can also be grouped so that you can check validity for a group of controls as a unit. The following example demonstrates these concepts.
ASP.NET "Atlas" Controls: Validators
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLuVncf52b0RXdi9CXzV2Zh1Wavw1cj9GZvwFdl5mLwNXYuMXYsRXYvw1LcpDc0RHaiojIsJye.gif)
Behaviors | Top |
Behaviors encapsulate actions that can be associated with DHTML events, such as the
click
or
hover
events. They are components that can be attached to the client control to provide more sophisticated UI and behavioral characteristics, including complex operations such as drag-and-drop behavior, auto-completion, and floating actions. They are defined using a collection on the client control.
The following example demonstrates some simple declarative and JavaScript samples for behaviors.
Using ASP.NET "Atlas" Behaviors
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLuVncf52b0RXdi9CXzV2Zh1Wavw1cj9GZvwFdl5mLwNXYuMXYsRXYvw1LcpDc0RHaiojIsJye.gif)
The behaviors demonstrated in the preceding example show:
- Click behavior, which provides simple click behavior handling.
- Floating behavior, which provides drag-and-drop behavior.
- Hover behavior, which provides handling for DHTML events such as
,onmouseover
,onmouseout
, andonfocus
.onblur
- Pop-up component, which provides pop-up functionality, such as advanced tooltips.
- Auto-complete behavior, which is a specialized behavior that provides the means to complete entries added to text boxes. The behavior requires handlers in order to provide the data for auto-completion.
The following example demonstrates a pop-up component for a
label
control that provides additional details about the highlighted word. The pop-up is a component that is invoked from the
Hover
behavior that is attached to the
<span>
element.
Using ASP.NET "Atlas" Behaviors
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLuVncf52b0RXdi9CXzV2Zh1Wavw1cj9GZvwFdl5mLwNXYuMXYsRXYvw1LcpDc0RHaiojIsJye.gif)
For extensibility, you can create custom behaviors that can be associated with controls to provide very sophisticated UI functionality.
Templates | Top |
ASP.NET "Atlas" client controls allow you to create layout using templates. For specific examples, please refer to the samples for the
listview
client-side control
Client-side Components | Top |
In some of the preceding examples in this page, you have seen the use of a component such as
popup
. There are other components within the ASP.NET "Atlas" framework. The following sample shows the
Web.Timer
component used both programmatically and declaratively. Components are not bound to markup elements and so should be regarded as non-UI objects.
Using ASP.NET "Atlas" Components
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLuVncf52b0RXdi9CXzV2Zh1Wavw1cj9GZvwFdl5mLwNXYuMXYsRXYvw1LcpDc0RHaiojIsJye.gif)
ASP.NET "Atlas" Server Controls | Top |
The ASP.NET "Atlas" framework allows you to develop rich UI applications using client controls and components in a declarative or a programmatic form. You can add similar client functionality to new or existing ASP.NET applications using the ASP.NET "Atlas" server controls. You can:
- Specify partial page rendering in place of a normal postback using UpdatePanel controls to specify rendering and update behavior of regions of the Web page.
- Use control extenders to add pre-written client behavior to ASP.NET controls, such as adding the
behavior to the ASP.NET TextBox control.autocomplete
- Create custom extenders that define new behaviors for server controls. Page developers can then add your extenders to server controls and get client behavior without writing ASP.NET "Atlas" script or JavaScript.
UpdatePanel Controls | Top |
In typical ASP.NET 2.0 applications, when a postback occurs, the page is re-rendered. This causes the page to flash in the browser. On the server, during postback, the page lifecycle executes. This ultimately raises the control event that caused the postback and runs the event handler (for example, a Button control's Click handler).
The ASP.NET "Atlas"
UpdatePanel
control eliminates the full page refresh. The
UpdatePanel
control is used to mark a region in the page that will be updated when a postback occurs, but without the traditional postback behavior in the client. On the server, the page still handles the postback and runs normally, such as raising event handlers. But during the final rendering of the page, only the regions defined by
UpdatePanel
controls are created. This is referred to as partial rendering.
The following example demonstrates the use of an
UpdatePanel
control.
Using the ASP.NET "Atlas" UpdatePanel Control
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLuVncf52b0RXdi9CXzV2Zh1Wavw1cj9GZvwFdl5mLwNXYuMXYsRXYvw1LcpDc0RHaiojIsJye.gif)
UpdatePanel
controls require a ScriptManager control, which is responsible for creating relevant ASP.NET "Atlas" script references in the client and for managing the partial rendering model. The
ScriptManager
control manages partial page updates and allows only the
UpdatePanel
controls and their children to render. For more information, see the ASP.NET "Atlas" ScriptManager Control section.
ASP.NET |
|
UpdatePanel
controls have
ContentTemplate
elements that act as a container for content, generally ASP.NET server controls. The
ContentTemplate
specifies the markup that will be rendered in a partial update.
The
Mode
property specifies when the
UpdatePanel
refreshes its contents. If the
Mode
property is set to
Always
, the contents of the panel are refreshed during every postback. If the
Mode
property is set to
Conditional
, the panel is rendered on the server based on one or more triggers, such as when specified property values change or when specified events occur. This optimizes the markup sent to the client during postback.
You can nest
UpdatePanel
controls. In that case, you can associate a trigger in the child
UpdatePanel
control with a control property or event in the parent
UpdatePanel
control.
Using Triggers with UpdatePanel Controls | Top |
When the
UpdatePanel
control's
Mode
property is set to
Conditional
, the panel's markup is rendered only in response to a trigger. The
UpdatePanel
control contains a collection of
triggers
. There are two types of triggers:
-
. This defines a trigger associated with a specific event (ControlEventTrigger
) raised by a control on the page (EventName
). When the event is raised on the associated control, the trigger is fired and the contents of theControlID
control will be rendered during the partial rendering of the page on the server.UpdatePanel
ASP.NET <asp:Button runat="server" ID="btnTrigger" Text="Trigger" OnClick="btnTrigger_Click" /> .. <atlas:UpdatePanel runat="server" ID="UpdatePanel2" Mode="Conditional"> <Triggers> <atlas:ControlEventTrigger ControlID="btnTrigger" EventName="Click" /> </Triggers> .. </atlas:UpdatePanel>
-
. This defines a trigger associated with a specific property (ControlValueTrigger
) for control on the page (PropertyName
). When the property value changes on the associated control, the trigger is fired and the contents of theControlID
control will be refreshed during postback.UpdatePanel
ASP.NET <asp:TextBox ID="txtMessage" runat="server" /> .. <atlas:UpdatePanel runat="server" ID="UpdatePanel2" Mode="Conditional"> <Triggers> <atlas:ControlValueTrigger ControlID="txtMessage" PropertyName="Text" /> </Triggers> .. </atlas:UpdatePanel>
The following example demonstrates the use of triggers with an
UpdatePanel
control and illustrates various update modes.
Using the ASP.NET "Atlas" UpdatePanel Control with Triggers
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLuVncf52b0RXdi9CXzV2Zh1Wavw1cj9GZvwFdl5mLwNXYuMXYsRXYvw1LcpDc0RHaiojIsJye.gif)
Changes in an
UpdatePanel
control can be triggered by the new ASP.NET "Atlas" TimerControl, which enables you to refresh an
UpdatePanel
control at a given interval.
The ASP.NET "Atlas" ScriptManager Control | Top |
The
ScriptManager
control manages several pieces in the ASP.NET "Atlas" runtime. In particular, it writes to the rendered page a number of script references that are required for ASP.NET "Atlas". (These are implicit script references; additional references can be added using the
Scripts
collection.) The
ScriptManager
control is also responsible for much of the work in managing partial page rendering for UpdatePanel controls.
UpdatePanel
controls interact with the
ScriptManager
control to detect a partial rendering request and then determine whether to render.
ASP.NET "Atlas" |
|
When the
ScriptManager
control's
EnableScriptComponents
property is
true
, the control instructs ASP.NET to reference a .js library that contains not only the JavaScript type system, but also definitions for the client UI components and behaviors. When the property is set to
false
(the default), the page references a runtime library only. This is more lightweight and optimum when there is no need to also download the UI components and behaviors for the page.
The
EnablePartialRendering
property determines how the
ScriptManager
control manages partial page rendering. When the property is set to
true
, the
ScriptManager
control performs many operations in generating and managing the partial rendering of the Web page with UpdatePanel controls. When the property is set to
false
, partial page rendering is disabled and only regular postbacks are supported.
The
Services
property is a collection of JavaScript proxies in the client. For more information, see the Services QuickStart sample.
The
Scripts
property is a collection of
ScriptReference
controls. These allow you to optionally include other ASP.NET "Atlas" scripts such as AtlasUIMap.js or custom scripts. You can define the browser for which the reference should be rendered. The
ScriptReference
control's properties are:
-
The name of one of the ASP.NET "Atlas" framework script files. The enumerationName
can be used in custom controls that need to register a script requirement with theFrameworkScriptName
control.ScriptManager
-
The location of a custom script.Path
-
The browser type for the reference to be rendered.Browser
The
ScriptManager
control will rebase any script references to the parent Web page. If you want to use the ASP.NET "Atlas" debug scripts, you can set
debug="true"
in the
<compilation>
element of the Web.config file. (Setting
debug="true"
in @ Page directives for debug scripts is not currently supported.) Scripts are loaded from the following location:
~/scriptlibrary/atlas/debug/... - for debug scripts
~/scriptlibrary/atlas/release/... - for release scripts
Only one
ScriptManager
control is allowed per page. In master-page scenarios, if the master page and content page need to reference a different set of scripts, the master page defines a
ScriptManager
control and the content page can define a
ScriptManagerProxy
control. The
ScriptManagerProxy
control is similar to the
ScriptManager
control; it helps to separate the scripts required only by a specific content page from the scripts defined in the master page.
The following example demonstrates the use of a
ScriptManagerProxy
control in a master page and content page.
Using the ASP.NET "Atlas" ScriptManagerProxy Control with Master Pages and Content Pages
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLuVncf52b0RXdi9CXzV2Zh1Wavw1cj9GZvwFdl5mLwNXYuMXYsRXYvw1LcpDc0RHaiojIsJye.gif)
Control Extenders | Top |
Control extenders provide a way to attach client functionality to ASP.NET server controls. The following sample demonstrates the use of
AutoCompleteExtender
to add auto-completion functionality to a TextBox control in an ASP.NET page.
ASP.NET 'Atlas' |
|
A control extender defines a collection of extender properties. Each property adds the extender functionality to a specified target control (
TargetControlID
). This means that you can use one control extender for multiple controls on the page. ASP.NET "Atlas" includes the following control extenders:
-
. Adds auto-completion and drop-down list functionality to a control. The extender hasAutoCompleteExtender
that define specific functionality.AutoCompleteProperties
-
. Adds functionality to enable drag-and-drop behavior for specified sections of the Web page.DragOverlayExtender
Using AutoCompleteExtender and Other Server Controls
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLuVncf52b0RXdi9CXzV2Zh1Wavw1cj9GZvwFdl5mLwNXYuMXYsRXYvw1LcpDc0RHaiojIsJye.gif)
Control extenders write custom ASP.NET "Atlas" scripts to the client to add functionality such as the behaviors and actions described earlier in this section. For example, an
AutoCompleteProperty
extender creates the
autoComplete
behavior.
TimerControl | Top |
The ASP.NET "Atlas"
TimerControl
server control enables you to perform certain operations based on elapsed time. The following example demonstrates its use with an UpdatePanel control.
ASP.NET 'Atlas' |
|
The
TimerControl
has an
Interval
property (set in milliseconds) used to set the duration for a tick. It can also raise a
Tick
event, which you can handle for custom operations that occur at the defined interval. The above sample demonstrates working with the
UpdatePanel
control based on the tick event.
This topic is ASP.NET ‘Atlas’ pre-release documentation and is unsupported by Microsoft. Blank topics are included as placeholders and existing content is subject to change in future releases.