Scribd
Upload
59 views

Language Autoeventwireup Codebehind Inherits HTML Public: Eventargs

ASP.NET AJAX is a Microsoft implementation of AJAX that allows for asynchronous data transfer between the server and client without reloading the entire page. This provides a richer user experience by allowing dynamic content to load in the background. ASP.NET AJAX simplifies using AJAX across different browsers. Key components of ASP.NET AJAX include the ScriptManager control, UpdatePanel control, and UpdateProgress control. The UpdatePanel allows partial updating of specific content areas without a full postback. The UpdateProgress provides visual feedback during asynchronous postbacks.

Uploaded by

Sivasankari Ambalavanan
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
59 views

Language Autoeventwireup Codebehind Inherits HTML Public: Eventargs

ASP.NET AJAX is a Microsoft implementation of AJAX that allows for asynchronous data transfer between the server and client without reloading the entire page. This provides a richer user experience by allowing dynamic content to load in the background. ASP.NET AJAX simplifies using AJAX across different browsers. Key components of ASP.NET AJAX include the ScriptManager control, UpdatePanel control, and UpdateProgress control. The UpdatePanel allows partial updating of specific content areas without a full postback. The UpdateProgress provides visual feedback during asynchronous postbacks.

Uploaded by

Sivasankari Ambalavanan
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 6

AJAX

ASP.NET AJAX, previously called "Atlas", is a Microsoft implementation of an AJAX based


framework, created for ASP.NET (although it can be used on other platforms as well). AJAX
stands for Asynchronous JavaScript and XML, which, very simply put, is a way of transferring
data between the server and client without the sending the entire page, and thereby creating a
complete postback. This allows for a richer experience for the user, since loading dynamic
content can be done in the background, without refreshing and redrawing the entire page. If you
have ever used Gmail or Outlook Web Access, you have used an Ajax enabled webapplication,
and especially Google have made Ajax very popular.

While it's perfectly possible to use Ajax without Microsoft ASP.NET AJAX, a lot of things are way
easier, since Microsoft has wrapped some of most tedious parts of Ajax into their
implementation. For instance, the 3 most popular browsers requires different ways of using Ajax,
and have different JavaScript implementations. ASP.NET AJAX simplifies this a lot and allows you
to write the same code to target all 3 major browsers.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"


Inherits="AJAX._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >


<head runat="server">
<title>Untitled Page</title>
</head>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="MainScriptManager" runat="server" />
<asp:UpdatePanel ID="pnlHelloWorld" runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="lblHelloWorld" Text="Click the
button!" />
<br /><br />
<asp:Button runat="server" ID="btnHelloWorld"
OnClick="btnHelloWorld_Click" Text="Update label!" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>

</html>

protected void btnHelloWorld_Click(object sender, EventArgs e)


{
lblHelloWorld.Text = "Hello, world - this is a fresh message
from ASP.NET AJAX! The time right now is: " + DateTime.Now.ToLongTimeString();
}
In the markup part, we use two new things, when compared to regular ASP.NET: The
ScriptManager control and the UpdatePanel control. The ScriptManager makes sure that the
required ASP.NET AJAX files are included and that AJAX support is added, and has to be included
on every page where you wish to use AJAX functionality. After the manager, we have one of the
most used controls when working with AJAX, the UpdatePanel. This control allows you to wrap
markup which you would like to allow to be partially updated, that is, updated without causing a
real postback to the server. More about the UpdatePanel in a coming chapter. Besides those two
controls, everything else is standard controls, with no modifications that would indicate alternate
behavior.

Try running the example site, and click the button. The label will be updated with our usual Hello
world text, and the current time. Try repeatedly clicking the button, and you will see the label
get the current timestamp each time. Notice the wonderful absence of a blinking window and a
running status bar - everything is done without updating anything but the label! We've just
created our first AJAX enabled page. If you wish to see how this page would work without AJAX,
try setting the "enablepartialrendering" of the ScriptManager to false like this:

<asp:ScriptManager
ID="MainScriptManager" runat="server"
enablepartialrendering="false" />

The UpdatePanel control is probably the most important control in the ASP.NET AJAX package. It
will AJAX'ify controls contained within it, allowing partial rendering of the area. We already used
it in the Hello world example, and in this chapter, we will go in depth with more aspects of the
control.

The <asp:UpdatePanel> tag has two childtags - the ContentTemplate and the Triggers tags.
The ContentTemplate tag is required, since it holds the content of the panel. The content can be
anything that you would normally put on your page, from literal text to web controls. The
Triggers tag allows you to define certain triggers which will make the panel update it's content.
The following example will show the use of both childtags.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs"


Inherits="AJAX.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >


<head id="Head1" runat="server">
<title>UpdatePanel</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" id="UpdatePanel"
updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="UpdateButton2"
eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel1" />
<asp:Button runat="server" id="UpdateButton1"
onclick="UpdateButton_Click" text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="UpdatePanel1"
updatemode="Conditional">
<ContentTemplate>
<asp:Label runat="server" id="DateTimeLabel2" />
<asp:Button runat="server" id="UpdateButton2"
onclick="UpdateButton_Click" text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>

</html>

protected void UpdateButton_Click(object sender, EventArgs e)


{
DateTimeLabel1.Text = DateTime.Now.ToString();
DateTimeLabel2.Text = DateTime.Now.ToString();

So, what's this example all about? Try running it, and click the two buttons. You will notice that
then first button updates only the first datestamp, while the second button updates both. Why?
We have set the Panels to update conditionally, which means that their content is only updated if
something insides them causes a postback, or if one of the defined triggers are fired. As you can
see, the first UpdatePanel carries a trigger which references the second button. This will ensure
that the first panel is updated even when a control on a different UpdatePanel is used. The
AsyncPostBackTrigger tag is pretty simple - it only takes two attributes, the controlid, a
reference to the control which can trigger it, and the eventname, which tells which eventtype can
cause the trigger to fire. If you wish for the content of a UpdatePanel to be updated no matter
what, you may change the updatemode property to Always.

In general, you should only have UpdatePanels around areas where you wish to do partial
updates. Don't wrap your entire page within an UpdatePanel, and don't be afraid to use several
panels, since this will give you more control of which areas update and when they do it.
One of the problems with Ajax, is the fact that since it's asynchronus and in the background, the
browser will not show you any status. With fast servers and fast methods, this is not a big
problem, but whenever you have a method which takes up a bit of time, the user is very likely to
get impatient. Fortunately, ASP.NET AJAX solves this problem for us as well, with a nice control
called UpdateProgress. It will use your own template to show that an asynchronus method is
working. Have a look at the following example, which will show the control in action. It will be
explained afterwards.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs"


Inherits="AJAX.WebForm3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >


<head id="Head1" runat="server">
<title>UpdateProgress control</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdateProgress runat="server" id="PageUpdateProgress">
<ProgressTemplate>
Loading...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="Panel">
<ContentTemplate>
<asp:Button runat="server" id="UpdateButton"
onclick="UpdateButton_Click" text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>

</html>

protected void UpdateButton_Click(object sender, EventArgs e)


{
System.Threading.Thread.Sleep(5000);

This simple example will just show you how easy it is to use the UpdateProgress control. Once
the button is clicked, the script sleeps for 5 seconds (don't use code like that in your real
projects - it's for demonstrational purposes only!), and the "Loading..." text is displayed on your
page. You can use anything in the ProgressTemplate, including ordinary markup and other
controls. A common use is an animated GIF, positioned strategically on the page using CSS
positioning.

You can have multiple UpdateProgress controls on the page, and by using the
AssociatedUpdatePanelID property, you can make sure that the UpdateProgress is only shown
when a certain UpdatePanel is updated.

The DynamicLayout property is nice to know as well. It tells whether or not the page should
reserve space for your progress control. If it's set to true, which is the default, the space is
dynamic, hence it's not reserved, but taken when the control is shown. If you wish to reserve the
space, set this property to false. To see the difference, add the property to our example and
change it back and forth.

If some of your postbacks are fast, the UpdateProgress will only be shown for a very short
amount of time, resulting in a blinking behavior, which may confuse your users. For that reason,
you may specify a minimum amount of time to occur before showing the progress control. This
can be done with the DisplayAfter attribute. Specify a number of milliseconds to elapse before
showing the progress control, e.g. 2000 if you wish to wait for 2 seconds.

Timer controls allow you to do postbacks at certain intervals. If used together with UpdatePanels,
which is the most common approach, it allows for timed partial updates of your page, but it can
be used for posting back the entire page as well. In this chapter we will focus on using timers
with UpdatePanels, so if you haven't already read the chapter on UpdatePanels, please do so
now.

Here is a small example of using the Timer control. It simply updates a timestamp every 5
seconds.

<%@ Page Language="C#" AutoEventWireup="true"


CodeBehind="WebForm4Timer.aspx.cs" Inherits="AJAX.WebForm4Timer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >


<head id="Head1" runat="server">
<title>Timers</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Timer runat="server" id="UpdateTimer" interval="5000"
ontick="UpdateTimer_Tick" />
<asp:UpdatePanel runat="server" id="TimedPanel"
updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="UpdateTimer"
eventname="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label runat="server" id="DateStampLabel" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>

</html>

protected void UpdateTimer_Tick(object sender, EventArgs e)


{
DateStampLabel.Text = DateTime.Now.ToString();

This is all very simple. We have a normal UpdatePanel, which carries a Trigger reference to our
new Timer control. This means that the panel is updated when the Timer "ticks", that is, fires the
Tick event. The Timer control uses the interval attribute to define the number of milliseconds to
occur before firing the Tick event. As you can see from our CodeBehind code listing, we just
update the DateStampLabel each time the Timer fires. This could be done more efficient with a
simple piece of JavaScript, which updates the time on the clientside instead of involving the
server. The example is only used to demonstrate the potential of the Timer control.

Another approach is including the Timer inside the UpdatePanel. Doing so would save us from
defining a trigger, but you should be aware of the fact that the behavior will be different,
depending on whether you have the Timer inside or outside an UpdatePanel. When a Timer is
inside an UpdatePanel, the Timer is not re-constructed until the UpdatePanel is fully updated.
That means that if you have a Timer with an interval of 60 seconds, and the update takes 5
seconds, the next event won't be fired 60 seconds after the previous, but 65 seconds after. On
the other hand, if the Timer is outside the UpdatePanel, the user will only look at the content of
the panel for 55 seconds before it's updated again.

You should always remember that even though partial updates are not as heavy on the server as
real postbacks, the server is still contacted, and when using timers, you may get a lot of partial
postbacks, which can slow things down. Always use as high intervals as possible, and consider if
contacting the server is really necessary or not.

You might also like