Server Side
Programming Model and Client Side
Programming Model
ASP.Net AJAX
AJAX (Asynchronous JavaScript and
XML) is one of the approaches that help web developers improve the
responsiveness and interactivity of web applications. As the name suggests, it
works by having asynchronous communication between the browser and the server
thereby doing away with the need to recreate the entire page, reducing the
response time that translates to better interactivity. However implementing AJAX may not be easy as
it involves writing a lot of code in a client side scripting language like
JavaScript and any developer who has worked with one, would attest to the fact
that developing and debugging complicated client scripts can sometimes be a
daunting task. It can be even more daunting to maintain web applications where
the logic is interspersed between client and server code.
The AJAX framework from Microsoft
promises to fill this gap and make it easier for the ASP.NET developer to
easily develop interactive AJAX enabled applications. In this article we will
be looking at what AJAX is and will focus on the server controls that an
ASP.Net developer can utilize to “Ajaxify” their applications. AJAX is Microsoft’s flavor of
AJAX. It offers a comprehensive platform that marries client scripting
functionality with ASP.NET Server side features. AJAX promises to provide the AJAX capabilities minus the complexity that is associated
with developing AJAX
applications.
AJAX offers two sets of components, one for
client side functionality and another that offers server side functionality. On the client side AJAX offers the following:-
- A consistent set of API’s that adds object oriented features to JavaScript such as Namespaces, type system etc. which are very similar to the .NET Framework and thereby would allow .NET developers to easily develop in JavaScript
- Built in browser compatibility. The libraries would handle the browser compatibility and there would be no need to write browser specific versions.
- An XML based declarative syntax that would allow developers to do client side scripting and easily attach AJAX behavior's to existing html elements.
On the Server side, AJAX provides
a set of server controls that compliments the client side functionality. The
controls are like any regular ASP.NET control, integrate well into visual
studio and allow the developer to extend existing ASP.NET controls with AJAX
behaviour. AJAX also allows the developer to integrate ASP.NET services like
Profiles. Membership rolls and personalization from the client side script. All
these translate into much better productivity for the ASP.NET developer.
This control is single handily
the most important AJAX server control and as the name suggests manages the
different script pieces that are needed on an AJAX enabled page. Every page
that uses AJAX server controls should have one instance of the ScriptManager. First
and foremost what the ScriptManager does is to register
the core script file that is needed for AJAX functionality.
<asp:ScriptManager runat="server"
ID="smgr1"
EnableScriptComponents="True"
EnablePartialRendering="True">
<ErrorTemplate>
<span id="errorMessageLabel"
runat="server"></span>
<input id="okButton" type="button"
value="OK" runat="server" />
</ErrorTemplate>
<Scripts>
<asp:ScriptReference ScriptName="AspUIMap"
/>
<asp:ScriptReference
Path="~/MyScripts/MyScript.js" />
</Scripts>
<Services>
<asp:ServiceReference
Path="ComplexService.asmx" />
</Services>
</asp:ScriptManager>
Script Manager
The Code snippet (figure1) shows the markup of a ScriptManager. As you can see, the ScriptManager control exposes a set of attributes and elements that allow us to define its functionality. Let us take a closer look at them.
Now that we have seen what the ScriptManager
is capable of, let us see how it handles errors or exceptions that may occur
during an asynchronous post back. By default, the ScriptManager traps
exceptions and displays them as a message box. This may be not be the best way to convey that
information to the user as the developer would like to replace it with a more
user friendly one. The ScriptManager provides a means for
the developer to do some error handling by defining an OnPageError event handler
and assigning a custom error message .The error message can be displayed as an
overlay over the page by defining an ErrorTemplate. By minimum, this
error template should contain a span or div element with the preset id errorMessageLabel
and a button that is used to dismiss the error message. Before we
round up our discussion on the ScriptManager, there is one more
control the ScriptManagerProxy that is a close relative. ScriptManagerProxy
is used in case the page already has an instance of the ScriptManager control and
one of the controls needs to add a script or a service reference. It can also
be used in a scenario where the Master page has a ScriptManager control
already defined and the content page needs to add scripts or services.
Update Panel
After the script manager, the UpdatePanel
is the next most important ATLAS server control. This control allows the
developer to divide the page into different sections and allows each section to
be independently updated without refreshing the entire page. This functionality
straight away translates into better user interactions as partial refreshes are
less disruptive than regular full page refreshes. In reality, the UpdatePanel,
does generates a post back that is similar to the regular post back and in fact
most of the page events are triggered. The Page.IsPostback even returns a true value for an update
panel post back. Where an UpdatePanel post back differs from a
normal post back in the page life cycle is in the render event. In case of an UpdatePanel
postback, only those regions defined by the UpdatePanel are rendered
and sent back to the client .On the client side, the child controls of the UpdatePanel
are replaced with the new content. This is known as partial rendering. For an UpdatePanel
to work in partial rendering mode, it requires a ScriptManager with the EnablePartialRendering
attribute set to true.
<atlas:UpdatePanel runat="server"
ID="UpdatePanel2" Mode="Always">
<ContentTemplate>
<asp:label runat="server" Text="Keep changing
me!" ID="Label1" />
</ContentTemplate>
</atlas:UpdatePanel>
Update Panel
Now that we are familiar with
what partial rendering is, let us look at the UpdatePanel control in
detail .The code snippet above shows the mark-up for an UpdatePanel.
The UpdatePanel
exposes a ContentTemplate. Any content that needs to be replaced by
partial rendering needs to be inside the ContentTemplate. The UpdatePanel
also has an attribute Mode that
defines when the UpdatePanel content would be refreshed. Setting it to always refresh the content during each
and every post back. If this is not the case and the UpdatePanel is to be
refreshed in response to certain events, it is possible by setting the value of
the Mode attribute to conditional. After that, set the trigger that would cause
the update. The UpdatePanel can accept a collection of triggers that would
cause an update. These triggers are classified into two types.
- ControlEventTrigger- This is a trigger that causes an UpdatePanel refresh in response to a control event. To set a ControlEventTrigger, specify the ID of the control and the name of the event that would trigger the update. In the trigger defined below (Figure 3), the UpdatePanel is set to refresh when the button is clicked.
<Triggers>
<asp:ControlEventTrigger ControlID="btnTrigger"
EventName="Click"
/>
</Triggers>
- ControlValueTrigger- This trigger is fired when property value of a control is changed. In the sample code below(Figure 4), the trigger below will fire when the textbox text changes.
<Triggers>
<atlas:ControlValueTrigger ControlID="txtMessage"
PropertyName="Text"
/>
</Triggers>
Timer Control
The timer control is used to set
a timer event and thereby refresh the UpdatePanel
or the page at set intervals. The interval for the timer control is set in
milliseconds. It is also possible to define a handler for the OnTick event. The timer control is a
popular choice as a trigger for an UpdatePanel.
The code snippet(Figure 5) below shows a Timer control.
<atlas:TimerControl runat="server"
Interval="15000" ID="tickerTimer"
OnTick="tickerTimer_Tick" />
Update Progress
UpdateProgress is a nifty little control that allows the developer
to display a templated message when an asynchronous post back is in progress.
This is used to provide a cue to the users that something is happening in the
background. The UpdateProgress
control defines a ProgressTemplate
.Any content to be displayed when an update is in progress has to be
enclosed between the ProgressTemplate tags.
In this code snippet below, when an asynchronous update is in progress, a div
tag with an image and text is displayed and it is hidden as soon as the update
is complete.
<atlas:UpdateProgress
ID="upe" runat="server">
<ProgressTemplate>
<div
class="update">
<img
src="../Images/icons/indicator.gif"
alt=""/>
Updating....</div>
</ProgressTemplate>
</atlas:UpdateProgress>
0 comments
Post a Comment