Introduction
Ajax (Asynchronous JavaScript and XML), is a group of inter-related web development techniques used for creating interactive web applications. A primary characteristic is the increased responsiveness and interactivity of web pages achieved by exchanging small amounts of data with the server behind the scenes so that entire web pages do not have to be reloaded each time there is a need to fetch data from the server. This is intended to increase the web page's interactivity, speed, functionality and usability.
Ajax is asynchronous, in that extra data is requested from the server and loaded in the background without interfering with the display and behavior of the existing page. JavaScript is the scripting language in which Ajax function calls are usually made. Data is retrieved using the XMLHttpRequest object that is available to scripting languages.
Main
When you create a new ASP.NET application or web-site in VS 2008 that targets the .NET 3.5 framework, VS will automatically add the appropriate AJAX registrations in your web.config file and the core ASP.NET AJAX server controls will show up in your toolbox.
The version of ASP.NET AJAX that ships with .NET 3.5 has a number of nice improvements to it including support for using UpdatePanels with WebParts. We will explore about Update Panel that integrate with AJAX control toolkit.
Example of AJAX UpdatePanel Control
Start your Visual Studio 2008. Choose Create Web Site from the menu. In this sample application we will use the Visual Basic language for the sample application. Name the solution UpdatePanelTest. Click OK to create the project. Open Default.aspx page in design view.
Darg and drop Update Panel and Script Manager from AJAX toolbox. 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.
Now drag two labels to the design area and write the text as it is shown in below picture. Do not forget to add a button.
Double click your form and write the code in below in 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
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 because the code is the form load event. 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. In addition, move the second date line as well as the button into the update panel as shown in below.
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.
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. 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.
Conclusion
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.
Other Related and Popular Articles :
Author Profile : Hans Candra
How would you rate the quality of this content?
Poor
Excellent
Comments
Leave New Comments
Article Content copyright by
Hans Candra
Everything else Copyright © by
WorldofASP.NET
2008