Partial Page updates using ASP .NET AJAX Controls

Tutorial on UpdatePanel,UpdateProgress,Timer control

Page 1 of 1

0 Replies - 10612 Views - Last Post: 08 August 2007 - 09:06 AM Rate Topic: -----

#1 Shivanry   User is offline

  • New D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 11-July 07

Partial Page updates using ASP .NET AJAX Controls

Posted 08 August 2007 - 09:06 AM

Partial Page Updates
with ASP.NET AJAX 1.0
by Ryan Keeter


Right in line with many controls that are produced by the ASP .NET team, there are three AJAX controls that really make asynchronous post backs easy. This drag and drop architecture (like the datagrid or any other high end control) lends itself to quick development and results. Seemingly, a person has the ability to just drop a control within one of these AJAX controls, and magic happens…no flickering of large page post backs, only the subtle feel of an asynchronous call.
We will be talking about three different controls in this section. The three controls are the UpdatePanel control, the UpdateProgress control, and the Timer control. We will see some code with these three controls and talk about some them.

UpdatePanel

The UpdatePanel is a drag and drop control that contains several properties that help to control what causes triggers and post backs.
<asp:UpdatePanel ID=”Update1” runat=”server”></asp:UpdatePanel>

The UpdatePanel will have a ContentTemplate section that will have the elements that will be refreshed when an asynchronous postback occurs.

<asp:UpdatePanel ID=”Update1” runat=”server”>
	<ContentTemplate>
		<asp:Label ID=”lbl1”/>
	</ContentTemplate>
</asp:UpdatePanel>


One such property is the UpdateMode property and this property will tell whether or not the children within the panel will cause the update, or if there will need to be a trigger outside of the control to cause the update.

<asp:UpdatePanel ID=”Update1” runat=”server” UpdateMode=”Conditional” >
<ContentTemplate>
		<asp:Label ID=”lbl1”/>
</ContentTemplate>

</asp:UpdatePanel>


The default if “Always” and the other possibility is “Conditional.” Conditional will say that there might be a post back refresh within the panel if the ChildrenAsTriggers (we will talk about this next) property is set to “true,” or else another control outside the panel will cause a refresh within the panel.

<asp:UpdatePanel ID=”Update1” runat=”server” UpdateMode=”Conditional” ChildrenAsTriggers=”true”  >
<ContentTemplate>
		<asp:Label ID=”lbl1”/>
</ContentTemplate>

</asp:UpdatePanel>


The ChildrenAsTriggers property we hit on briefly defines whether there will be a control, a child element of the panel, that will be causing the post back trigger. If this is set to false and the UpdateMode is conditional, then one would need to define a “Triggers” tag section.
<asp:UpdatePanel ID=”Update1” runat=”server” UpdateMode=”Conditional” ChildrenAsTriggers=”true”  >
<ContentTemplate>
		<asp:Label ID=”lbl1”/>
</ContentTemplate>
<Triggers>
	
</Triggers>
</asp:UpdatePanel>


Within the Triggers tag section there are two types of tags possible. There is the AsycnPostBackTrigger tag and the PostBackTrigger tag. Each of these tags will define a Control and an event associated with the control that when it is called, or is fired, then the update panel will refresh. This allows a button, that is not a child of the update panel to still be able to call a refresh within the update panel. The Async tag and regular post back trigger tag differ in that the Async tag will need to have an event defined and an async post back will occur, otherwise with the PostBackTrigger, an entire page post back will occur.

<asp:UpdatePanel ID=”Update1” runat=”server” UpdateMode=”Conditional” ChildrenAsTriggers=”true”  >
<ContentTemplate>
		<asp:Label ID=”lbl1”/>
</ContentTemplate>
<Triggers>
	<asp:AsyncPostBackTrigger ControlID=”button1” EventName=”click”/>
</Triggers>
</asp:UpdatePanel>



UpdateProgress

The UpdateProgress control, like the UpdatePanel has a tag section that will define an element that will be the only visual cue of the control (neither the update panel nor update progress control have visual cues to the user that they exist). The section in an UpdateProgress control is the progress template section.


<asp:UpdateProgress ID=”update1” runat=”server”  >
<ProgressTemplate>
		<img src=”progressBar.gif”/>
</ProgressTemplate>
</asp:UpdatePanel>


The AssociateUpdatePanelID property defines which update panel will be making a postback, so that the update progress control can monitor the wire and figure out when to show the image or other element defined in the Progress template section.

<asp:UpdateProgress ID=”update1” runat=”server”  AssociatedUpdatePanelID=”update1”>
<ProgressTemplate>
		<img src=”progressBar.gif”/>
</ProgressTemplate>
</asp:UpdatePanel>


When defining the positioning of the control, you can use the DynamicLayout property. This property can either be a Boolean of true or false and defines whether the surrounding html elements should move for the control to show, or if there is a predefined area for the control to be shown in (sometimes defined within the CSS stylesheet of the page).

<asp:UpdateProgress ID=”update1” runat=”server”  AssociatedUpdatePanelID=”update1” 
DynamicLayout=”false” >
<ProgressTemplate>
		<img src=”progressBar.gif”/>
</ProgressTemplate>
</asp:UpdatePanel>


Timer

The Timer control can cause post backs based on an incremental interval basis. The Interval property is set by setting the property in milliseconds (so 1000 milliseconds is one second). Whenever the interval duration is up, the control fires a post back. If the control is within an UpdatePanel control, then the timer will fire an automatic asynchronous post back.

<asp:UpdatePanel ID=”Update1” runat=”server” UpdateMode=”Conditional” ChildrenAsTriggers=”true”  >
<ContentTemplate>
		<asp:Timer ID=”timer1” Interval=”2000”/>
</ContentTemplate>

</asp:UpdatePanel>


Conclusion

The controls that we just covered (the UpdatePanel, UpdateProgress, and Timer controls) are drag and drop controls that are great utility controls to drop onto a page and then enjoy asynchronous and AJAXified web pages easily. Not all controls work with the UpdatePanel, but most controls will be a great UI boost when they are enclosed this wonderful control. All in all, it is just magic.

Attached File(s)


This post has been edited by Shivanry: 08 August 2007 - 09:18 AM


Is This A Good Question/Topic? 0
  • +

Page 1 of 1