Working with ASP.NET AJAX UpdatePanel Control
 
Published: 20 Sep 2007
Abstract
The article will explain how to start using ASP.NET AJAX extensions and will provide an brief description of Script manager with an additional example on the UpdatePanel.
by Nidal Arabi
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 57444/ 131

Introduction

This article is intended to be one in a series of articles about Microsoft AJAX Extensions (Previously named ATLAS, I like the old name better). So keep coming back for more.

Problem

You were faced many times with the issue of having big size pages sent between client and server in your ASP.NET applications. You were asked by your network administrator to reduce traffic and be able to still make your application function properly. In another situation you find yourself wanting to update only a portion of your visible page.

Well these problems will be solved and you will have a fun time AJAXfying with Microsoft ASP.NET AJAX Extensions.

Microsoft ASP.NET AJAX Extensions

Well, AJAX is not a pure Microsoft technology nor is it a new technology. However, AJAX is really a kind of library that is usually provided by a provider. In our case, ASP.NET AJAX Extensions is the framework that you can work with inside Microsoft Visual Studio and is also provided by Microsoft for free.

There are couples of issues to remember here.

·         These Extensions were meant to be used in Visual Studio 2005 IDE and above. This does not mean that all of the controls will not work in Visual Studio .NET 2003, but Microsoft will not support 2003.

·         These Extensions do not provide direct controls to work with directly, like an AJAXfied button. There is another project dealing with this and will be a topic for future discussion.

·         Some of the available AJAX toolkit will work with ASP.NET without problems.

Requirements

In order to be able to work with AJAX ASP.NET Extensions, the following should be available:

·         Microsoft Visual Studio 2005 (any version) or you can also use the Visual Web Developer Express 2005 (offered for free from Microsoft)

·         Download AJAX extensions and install them on your computer after installing Visual studio.

Well, you should be ready by now to begin AJAX implementation.

Creating Your First AJAX Solution

Follow the easy steps below to create your AJAX solution.

1.    Start your Visual Studio 2005 IDE.

2.    Choose Create Web Site from the menu.

3.    In this sample application we will use the Visual Basic language for the sample application.

4.    Name the solution UpdatePanelTest.

5.    Choose ASP.NET AJAX-Enabled Web Site.

6.    Select Visual Basic from the File System location box.

7.    Click OK to create the project.

8.    Visual Studio 2005 will create your project with a Default.aspx page and probably a readme.txt. Go ahead and get rid of the latter file.

9.    Open Default.aspx page in design view.

You noticed that there is a control on the page already called script manager. (Well, AJAX is really a script based implementation of the language JavaScript.) In Short, Script Manager control manages client script for Microsoft ASP.NET AJAX pages. By default, the Script Manager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial-page rendering and Web-service calls.

10. In your Toolbox you should find a new group called AJAX Extensions. Locate it and see the controls in it.

11. Now drag two labels to the design area and write the text as it is shown in Figure 1. Do not forget to add a button.

Figure 1 - Simple Application without the Update Panel

12. Double click your form and write the code in Listing 1 in the Form Load event.

Listing 1 - Code for the form load event

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  Label1.Text = Date.Now
  Label2.Text = Date.Now
End Sub

13. Run the program. Notice that the labels are filled now with the current date and time. Every time you click the button the time will change. Why? Because the code is the form load event.

14. Now, let us get back to the design mode and add an Update Panel Control from AJAX Extensions and drop it on the design page.

15. In addition, move the second date line as well as the button into the update panel as shown in Figure 2.

Figure 2 - Simple application with UpdatePanel

16. Run the program again. Please note that the two dates starts the same, but whenever you click the button, only the second date is changing now. You will also notice that the page does not refresh each time you click the Button control.

Let us understand what happened and explain a little bit the UpdatePanel. When the code runs without the UpdatePanel and there is a post back event, form load will execute and change the contents of the two labels to the same date and time. When the update panel was introduced the date label as well as the button were included it. So simply speaking, now the button will only update the controls that are within the update panel borders since it is a part of it.

Therefore, only a part of the page was sent back to the server and the controls inside the Update Panel were refreshed. We have solved our problem stated above and had fun doing it without even a big effort.

Conclusion

To conclude, I will include the definition of the Update Panel as presented in the AJAX documentation from Microsoft.

An Update Panel is a control used to refresh selected parts of the page instead of refreshing the whole page with a post back. This is referred to as performing a partial-page update.

Happy AJAXfying and see you in the next article.



User Comments

Title: 324   
Name: 324
Date: 2012-11-13 6:04:40 PM
Comment:
324
Title: 2012 NFL jerseys   
Name: NIKE NFL jerseys
Date: 2012-05-20 11:42:18 PM
Comment:
[/pre]Cheap NFL,NBA,MLB,NHL
[url=http://www.jersey2shop.com/]Jerseys From China[/url]
[url=http://www.jersey2shop.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jersey2shop.com/]cheap China Jerseys[/url]
[url=http://www.jersey2shop.com/]Sports Jerseys China[/url]
[url=http://www.jersey2shop.com/NFL-Jerseys-c68/]NFL Jerseys China[/url]
[url=http://www.jersey2shop.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
NHL Jerseys China
[url=http://www.jersey2shop.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
[/pre]
[pre]We Are Professional China jerseys Wholesaler
[url=http://www.cheapjersey2store.com/]Wholesale cheap jerseys[/url]Cheap mlb jerseys
[url= http://www.cheapjersey2store.com/]2012 mlb all atar jerseys[/url]
[url= http://www.cheapjersey2store.com/ [/url]Cheap China Wholesael[/url]
[url= http://www.cheapjersey2store.com/]Wholesale jerseys From China[/url]
[url=http://www.cheapjersey2store.com/]2012 nike nfl Jerseys[/url]Free Shipping,Cheap Price,7 Days Deliver
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.cheapjersey2store.com/]Jerseys From China[/url]
[url=http://www.cheapjersey2store.com/NFL-Jerseys-c68]NFL jerseys China[/url]
[url=http://www.cheapjersey2store.com/NHL-Jerseys-c96/]NHL Jerseys China[/url]
[url=http://www.cheapjersey2store.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
[url=http://www.cheapjersey2store.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]
[url= http://www.cheapjersey2store.com/]China Jerseys[/url],Free Shipping
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.jerseycaptain.com/]cheap jerseys sale online [/url]
[url= http://www.jerseycaptain.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jerseycaptain.com/NFL-Jerseys-c68]cheap NFL jerseys China[/url]
[url=http://www.jerseycaptain.com/NHL-Jerseys-c96/]NHL Jerseys C
Title: UpdatePanel   
Name: ME
Date: 2010-12-10 7:22:08 AM
Comment:
Good Job...
Title: UpdatePanel   
Name: UpdatePanel
Date: 2010-11-20 1:25:33 AM
Comment:
What a Simple example ajax and Updatepanel
Title: UpdatePanel   
Name: Amalraj
Date: 2010-07-22 10:20:08 AM
Comment:
Good one..
Title: update Panel   
Name: Pratik
Date: 2010-07-17 10:13:29 AM
Comment:
Nice one man....
Title: Update Panel   
Name: Dilip
Date: 2010-07-13 4:16:19 AM
Comment:
Very nice example of update panel.Thank you.
Title: SIMPLE AJAX   
Name: Shoeb Abdul Moiz
Date: 2010-07-13 3:40:42 AM
Comment:
Very nice and useful TUTORIAL. Thanks
Title: Simply Ajax   
Name: babu
Date: 2010-07-01 2:02:13 PM
Comment:
Wowwwwwwwww... What a Simple Explanation about ajax and Updatepanel
Title: AJAX tutorial   
Name: Shreya
Date: 2010-06-15 9:07:04 AM
Comment:
Simple and neat explanation ! thanks a lot !
Title: AJAX tutorial   
Name: Jaivardhan Joshi
Date: 2010-01-09 1:55:47 AM
Comment:
Good article ... and i too have a link to share for basics of AJAX at http://jai-on-asp.blogspot.com/2010/01/ajax-for-aspnet.html
Title: Gud Explanation   
Name: vinay varma
Date: 2009-09-04 6:17:13 AM
Comment:
Thanks....it was a very gud example and neat expalantion.keep posting these kind of examples....u r effort is appreciated....keep going...
Title: Nice Step By Step   
Name: Ahmed Moosa
Date: 2009-05-16 5:40:02 PM
Comment:
Thanks
THAT IS VERY EASY TO LEARN.
Title: Update Panel control   
Name: Vivek Sheel
Date: 2009-03-26 7:06:06 AM
Comment:
god effort...
Title: Problem   
Name: Karthick
Date: 2008-11-20 5:26:51 AM
Comment:
Hi.....
I used the same example....
But two labels are showing the same result.....
What might the problem.......
Label inside the update panel and label outside the update panel show the same result
Title: Tab Index and Client Side Script Problem in Update Panel Controls   
Name: Vava
Date: 2008-10-15 9:05:05 PM
Comment:
Hi,

The informations what you have provided is well and good. so that one person can easily understand the basic things about the Ajax Controls and its advantage.But my problem is something different ie,

I am facing a problem while using Update Panel.Thatz nothing but the tab index is not working and Client Side Script is not running for the contrls what we have placed inside the Update Panel. So that the Page Flickering is still remaining even for a single button click also.

So please look forward my problem and help me out.

Regards,
Vava
Title: update Panel   
Name: Priyansh Shah
Date: 2008-10-08 7:25:13 AM
Comment:
It is good article to understand about updatepanel.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-04-23 10:12:22 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search