This tutorial is brought to you by NetroStar, a web design company.
AJAX stands for Asynchronous JavaScript and XML and is
a set of techniques used for web-based client-side programming. The main advantage of
this model is that you can retrieve data from server asynchronously and update only
certain parts of a web page instead of reloading whole page. Thanks to this your web
applications are more interactive and retrieving data from the server is done in the
background without even user noticing it.
ASP.NET AJAX is a set of extensions that allow you to
add AJAX functionality to your web applications in ASP.NET. There is also AJAX Control
Toolkit available on Microsoft's websites - it's a set of controls that take advantage
of AJAX, I described a few such controls in previous tutorials so if you're interested
just check it out.
In this article I'll describe step by step how to
create a website that uses AJAX UpdatePanel in Visual Studio. So first thing you need
to do is to turn it on and create a new empty Web Application. Then find Solution
Explorer window on right, right-click name of your application and select Add - New
Item. Find Web Form on list, select it, name it as you like and click Add button.
Now we'll create a website with two labels that will
show us current time. Time in the first label will be updated each time when the whole
page will be reloaded. The second label will only be updated when we click a button.
We will put both button and second label in one UpdatePanel:
First thing we need to do is to add ScriptManager
control anywhere within <form> tag. Without it UpdatePanel control would not
work and there would be an error. Then we'll add one label and then UpdatePanel
control with another label and button inside. So the whole <body> tag of this
website will look like this:
Now we have to edit code-behind file. To do this you
can either find it in Solution Explorer window or if you're viewing our website in
design mode just double-click on a button. We'll edit method that is called after
clicking a button so that it will change text of second label to current time and
Page_Load method that is called each time the website is reloaded so it will change
text of first label to current time:
It's ready, you can test this website now to see how
it works. When you open the page that we created only the first label is updated with
current time because of the Page_Load method. If you click button you can see example
of partial update. Only the content of the UpdatePanel - that is second label is
updated without whole page being reloaded. To reload the whole page (and text in the
first label) click on the F5 button on your keyboard.
Multiple number of update panels and triggers
Now I'll show you how to update a panel from a control
that is outside of this panel. To do so we have to use triggers. Adding a trigger is
very simple, we just have to put all triggers for a given control within
<triggers> tag. In our previous example we haven't used this tag because all
child elements of update panel controls are triggers by default.
Firstly we'll add another update panel with label and
button just like the previous one. To do so we can either drag and drop controls from
toolbox to our website or view a code of a website and copy and paste previous update
panel and change names of controls. We also have to add code for button click event,
to do so double click button in second update panel and add the following code:
Underneath panel we'll add two more buttons. First one
will reload whole website and second one will update both update panels at once.
Please note that these buttons will be outside of both update panels. So our website
will look like this:
As I mentioned before first button will reload whole
website and second one will update panels however code-behind for these two buttons
will be exactly the same. The difference will be in update panels, in both of these
panels we'll add second button to triggers section. To do so all we have to do is add
following code within <asp:UpdatePanel> tags:
Now we'll add code for buttons (code is the same for
both buttons):
Ok, it's ready. Try all buttons to check how it works.
As you can see first of these two buttons that we just added causes page refresh, only
the second one updates panels because it's one of their triggers.
Summing up AJAX is very popular nowadays because it
provides better and more fluid user experience. Updating only certain parts of website
instead of the whole looks certainly much better. So take your time, learn how it
works and use it in your next web
design project. Good luck!
This tutorial is brought to you by NetroStar, a web design company.