Working with ASP.NET AJAX UpdatePanel Control
page 5 of 6
by Nidal Arabi
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 56279/ 128

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.

View Entire Article

User Comments

Title: 324   
Name: 324
Date: 2012-11-13 6:04:40 PM
Title: 2012 NFL jerseys   
Name: NIKE NFL jerseys
Date: 2012-05-20 11:42:18 PM
[/pre]Cheap NFL,NBA,MLB,NHL
[url=]Jerseys From China[/url]
[url=]2012 nike nfl Jerseys[/url]
[url=]cheap China Jerseys[/url]
[url=]Sports Jerseys China[/url]
[url=]NFL Jerseys China[/url]
[url=]NBA Jerseys China[/url]
NHL Jerseys China
[url=]MLB Jerseys China[/url]NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
[pre]We Are Professional China jerseys Wholesaler
[url=]Wholesale cheap jerseys[/url]Cheap mlb jerseys
[url=]2012 mlb all atar jerseys[/url]
[url= [/url]Cheap China Wholesael[/url]
[url=]Wholesale jerseys From China[/url]
[url=]2012 nike nfl Jerseys[/url]Free Shipping,Cheap Price,7 Days Deliver
We are professional jerseys manufacturer from china,wholesal
sports [url=]Jerseys From China[/url]
[url=]NFL jerseys China[/url]
[url=]NHL Jerseys China[/url]
[url=]NBA Jerseys China[/url]
[url=]MLB Jerseys China[/url]
[url=]China Jerseys[/url],Free Shipping
We are professional jerseys manufacturer from china,wholesal
sports [url=]cheap jerseys sale online [/url]
[url=]2012 nike nfl Jerseys[/url]
[url=]cheap NFL jerseys China[/url]
[url=]NHL Jerseys C
Title: UpdatePanel   
Name: ME
Date: 2010-12-10 7:22:08 AM
Good Job...
Title: UpdatePanel   
Name: UpdatePanel
Date: 2010-11-20 1:25:33 AM
What a Simple example ajax and Updatepanel
Title: UpdatePanel   
Name: Amalraj
Date: 2010-07-22 10:20:08 AM
Good one..
Title: update Panel   
Name: Pratik
Date: 2010-07-17 10:13:29 AM
Nice one man....
Title: Update Panel   
Name: Dilip
Date: 2010-07-13 4:16:19 AM
Very nice example of update panel.Thank you.
Name: Shoeb Abdul Moiz
Date: 2010-07-13 3:40:42 AM
Very nice and useful TUTORIAL. Thanks
Title: Simply Ajax   
Name: babu
Date: 2010-07-01 2:02:13 PM
Wowwwwwwwww... What a Simple Explanation about ajax and Updatepanel
Title: AJAX tutorial   
Name: Shreya
Date: 2010-06-15 9:07:04 AM
Simple and neat explanation ! thanks a lot !
Title: AJAX tutorial   
Name: Jaivardhan Joshi
Date: 2010-01-09 1:55:47 AM
Good article ... and i too have a link to share for basics of AJAX at
Title: Gud Explanation   
Name: vinay varma
Date: 2009-09-04 6:17:13 AM
Comment: 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
Title: Update Panel control   
Name: Vivek Sheel
Date: 2009-03-26 7:06:06 AM
god effort...
Title: Problem   
Name: Karthick
Date: 2008-11-20 5:26:51 AM
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

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.

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

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

©Copyright 1998-2019  |  Page Processed at 2019-06-16 12:54:57 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search