Client-side Components |
Top |
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.
ASP.NET "Atlas" Server Controls |
Top |
- 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
autocompletebehavior to the ASP.NET TextBox control. - 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 |
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.
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 | |
<atlas:ScriptManager runat="server" ID="ScriptMgr" EnablePartialRendering="true">
..
</ScriptManager>
<atlas:UpdatePanel runat="server" ID="UpdatePanel2" Mode="Always">
<ContentTemplate>
<asp:label runat="server" Text="Keep changing me!" ID="Label1" />
..
</ContentTemplate>
..
</atlas:UpdatePanel>
|
|
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 |
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:ControlEventTrigger. This defines a trigger associated with a specific event (EventName) raised by a control on the page (ControlID). When the event is raised on the associated control, the trigger is fired and the contents of theUpdatePanelcontrol will be rendered during the partial rendering of the page on the server.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>ControlValueTrigger. This defines a trigger associated with a specific property (PropertyName) for control on the page (ControlID). When the property value changes on the associated control, the trigger is fired and the contents of theUpdatePanelcontrol will be refreshed during postback.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.
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 |
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" | |
..
<atlas:ScriptManager runat="server" ID="UpdatePanel2"
EnableScriptComponents="True" EnablePartialRendering="True">
<Scripts>
<atlas:ScriptReference Name="AtlasUIMap" />
<atlas:ScriptReference Path="~/MyScripts/MyScript.js" />
</Scripts>
<Services>
<atlas:ServiceReference Path="ComplexService.asmx" />
</Services>
</atlas:ScriptManager>
|
|
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:
NameThe name of one of the ASP.NET "Atlas" framework script files. The enumerationFrameworkScriptNamecan be used in custom controls that need to register a script requirement with theScriptManagercontrol.PathThe location of a custom script.BrowserThe browser type for the reference to be rendered.
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.
Control Extenders |
Top |
AutoCompleteExtender to add auto-completion functionality to a TextBox control in an ASP.NET page.| ASP.NET 'Atlas' | |
<asp:TextBox ID="TextBox1" runat="server" />
..
<atlas:AutoCompleteExtender runat="server" ID="autoComplete1">
<atlas:AutoCompleteProperties ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionList"
TargetControlID="TextBox1" />
</atlas:AutoCompleteExtender>
|
|
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:
AutoCompleteExtender. Adds auto-completion and drop-down list functionality to a control. The extender hasAutoCompletePropertiesthat define specific functionality.DragOverlayExtender. Adds functionality to enable drag-and-drop behavior for specified sections of the Web page.
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 |
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' | |
<atlas:TimerControl runat="server" Interval="15000" ID="tickerTimer" OnTick="tickerTimer_Tick" />
..
<atlas:UpdatePanel runat="server" ID="UpdatePanel1">
<Triggers>
<atlas:ControlEventTrigger ControlID="tickerTimer" EventName="Tick" />
</Triggers>
...
</atlas:UpdatePanel>
|
|
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.