Working with multiple Update panels in AJAX

 

Control 1:

Script Manager:            This control is responsible to manage & execute the Javascript required to implement AJAX features in a webpage. A Webpage that implements AJAX must have script manager control on it.  

Control 2:

Script Manager Proxy:               While working with master pages if the master page contains a script manager then all content pages created from that master page can use the script manager available on master page you can not take another script manager  on the content page. If you want the reference of any external javascript file related to AJAX for that content page then you have to use script manager proxy.   

Control 3:

Update Panel:                     update panel is used for implementing partial page update with AJAX. When post back occurs because of a control available in an update panel then only particular update panel will be post back to server and updated from server without disturbing the remaining page.  

Control 4:

Update progress:                This control is used to represent the progress of updating an update panel with a message or an image.  

Control 5:

Timer :                 Timer control is used to repeatedly execute the code at specified intervals of time.  

Example :

The following example demonstrates how to implement partial page update using AJAX.

1. Create a new Asp.net empty website, and add a page to it and place a script manager on it.
2. Take an update panel on the page and within the update panel take a label and button and set ID of this label as L1.
3. Outside the update panel and directly on that page take another label and set its id as l2.
4. Within page load event write the following code to display the current system time in the both labels l1 and l2.

L1.text=DateTime.NOW.Tostring(“T”) L2.Text=DateTime.Now.Tostring(“T”);

5. When you run the page and click on the button available in update panel then only that update panel will be post back and only the label available in update panel is updated with tge current system time but not the label that was directly on the page outside the update panel indicating partial page update occurs.

   

Working with multiple Update panels:

            You can use multiple update panels on a page but when post back occurs because of a control available in one update panel then every update panel available on that page will be post back to server and  updated from server and not only the update panel  because of which the post back is occurs. This is because update mode property of update panel is set to ‘always’ by default. When you don’t want to post back an update panel when post back occurs because of another update panel then set update mode property of that update panel to ‘conditional’  

Example :

The following example demonstrates how to work with multiple update panels on a webpage.

1. Add a page to the website, place a script manager on it and then an update panel & within that update panel on table and button and set ID of that label is L1.
2. Take another update panel on that page and within that update panel a Label button & set ID of that Label as L2.
3. Within page –load event write the following code to display the current time in both the labels L1 & L2

L1.Text=DateTime.Now.Tostring(“T”); L2.Text=DateTime.Now.Tostring(“T”);

4. Now if you run the page and click on the button available in any update panel then both the update panel will be post back to server & the labels in both the update panels will be updated with current system time because update mode property of update panel is by default set to ‘always’.
5. Within the properties of first update panel set update mode property to conditional and now if you run the page and click on the Button available on second update panel then the first update panel will not be post back to server and the label in first update panel will not be updated with current system time. Because the update mode property of the first update panel is set to conditional.

 

 Control 5:

 

Timer Control :

          Timer control is used to repeatedly execute the code at specified intervals of time. It has the property interval to specify the time interval in mille-seconds at which the code of that timer has to be repeated Timer control has the ‘tick’ event has the default event  that will be raised whenever the interval set for timer elapsed. Ex: The following example uses the timer control to display the current system time on page continuously running.

1. Add a page to the website and place a script manager and an update panel on a page and within the update panel take one label and one timer control and for that timer control set interval property to 1000
2. Write the following code within the page load event and also the timer tick event to display the current system time within the label.

page-Load event L1.Text = DateTime.Now.Tostring(“T”) tick event L1.Text = DateTime.Now.String(“T”);

3. At run time the time displayed in the label will be updated for every one second because of timer and the time displayed within the label appears, to the user like it is continuously running

 

Example :

The following example displays data from a table in database in a Grid view on the page and refresh it for every 20 seconds to reflect recent changes mode to on that page.

1. Add a page to the website, take a script manger and update panel on a page & within the update panel take a grid view and timer & set id of grid view as GVDept & for the timer set interval property to 20,000
2. within the code of the page writing using statements for the namespaces system.Data.sqlclient & system.Data & then create a method with the name get data as follows

public void getdata() { sqlconnection cn=new sqlconnection(“server=Nikhil, database=Mydb;uid=sa;pwd=123”); sqlDataAdapter Da= new sqlDataAdapter(“select * from Dept”,cn); Dataset Ds=new dataset(); Ds.Fill(Ds,”Dept”); GVDept.Datasource=DS.Table[“Dept”]; GVDept.DataBind(); }  

3. Call the method getdata() with in page-locad event & timer’s tick event

page-Load           &       tick event getdata();                      getdata();

4. When you run the page than data will be retrieved from the Database and displayed on the grid view & from then onwords every 20 seconds the changes made to table Dept within the database will be reflected in grid view because of the timer

 

Update progress Control :

update progress control is used to indicate updating an update panel is in progress while it is updated from server. with a message or an image.  

 Example :

The following example demonstrates how to use update progress control to represent the progress of updating an update panel.

1. Add a page to the website, take a script manager on a and then an update panel and within the update panel, take a label and button and within the button click event write the following code.

Button – click event : system.Threading.Thread.sleep(5000); Lable1.Text=”Button clicked”;

2. Within the update panel take an update progress control and within the update progress control take a label and for the label set the caption “update in progress. please wait…”
3. At runtime when you click on the button available in update panel then as the current thread is suspended for 5 seconds, for 5 seconds you will get the message set to the label in update progress and after 5 seconds that label will be hidden & the label in update panel will display the message button clicked.
4. Within the update progress control instead of label you can also display image control to display an image indicating update is in progress.