This tutorial is dedicated to Update panel where we learn a lot of things . This control is used to perform Asynchronous communication with a server.Generally the Update panel called Container control.
As we all know that, the Http is stateless protocol, It means each time when a request goes to the server,Server create the complete page from starting and then it create a complete control (Create object of control for the page) and then populate the page with these controls.
So each time when we click the button, server has to do a lot of things. and so it takes lots of time.so creation of complete page ,the user experience flickering effect on web page.
To remove this effect from web page we have to use Partial page updates, or update panel,
Update panel: The update panel is asp control which is used to perform the partial page refresh or partial page update, it is used to perform the asynchronous communication to the server.
To use update panel we have to use script manager,
The Script manager perform mainly three task
1.Manage Ajax script library and script file
2.Help to perform the partial page rendering.
3.Help to create the client proxy class for web services
If we want to use the Ajax control like update panel we have to use script manager, If we will not use the script manager then it will generate run time exception
Because there is nothing which registered Ajax update panel.So remember please use script manager before using any Ajax control tool.
Let us take some simple example of update panel,
We have one web page where we do not have any update panel, and it contain three Gridview and two button, When we click the button, Then complete request goes to the server and hence complete web page and web control were create.So it has to take some time to create the web page and web control and then place thses control onto the web page.
But If we have update panel around each grid view and then if we click the button, then only that grid view data update not complete web page data.
Exactly the update panel do not do any magic to perform this things but, by the help of browser, it will update only specific web part not complete web page
How Exactly Ajax Update panel or another Ajax control works.
Before understanding about AJAX control we have to understand AJAX , The AJAX is Asynchronous Javascript and XML, The Ajax used XmlHTTP request to perform the Asynchronous or Synchronous request.
Whenever there is request to server by the help of Ajax then we have to perform, the following task
1.Create the XMLHttpRequest
Then the request goes to the server and Server , And in server, the PHP or asp are used to get the data from Database .Data are converted onto JSON and XML , then it send the JSON,XML to the Browser, the browser update only required part not complete page. Hence complete page fluctuation should not be there.
There is best example of Update panel, where I have two label and two button control, part 1 where date is today date and time. part 2 where date is next year date and time. If we click the part1 getdate button , then Both the date change (On click event I have written to get current time and Date, So both the label change and complete page will fluctuate.)
But if we want to update only part1 and not part2 then we have to use update panel which update individual part of the page not complete page.
So we have to put the two update panel one around the first part and one around the second part.
to remove the complete page fluctuation .
Note:
As we all know that, the Http is stateless protocol, It means each time when a request goes to the server,Server create the complete page from starting and then it create a complete control (Create object of control for the page) and then populate the page with these controls.
So each time when we click the button, server has to do a lot of things. and so it takes lots of time.so creation of complete page ,the user experience flickering effect on web page.
To remove this effect from web page we have to use Partial page updates, or update panel,
Update panel: The update panel is asp control which is used to perform the partial page refresh or partial page update, it is used to perform the asynchronous communication to the server.
To use update panel we have to use script manager,
The Script manager perform mainly three task
1.Manage Ajax script library and script file
2.Help to perform the partial page rendering.
3.Help to create the client proxy class for web services
If we want to use the Ajax control like update panel we have to use script manager, If we will not use the script manager then it will generate run time exception
Because there is nothing which registered Ajax update panel.So remember please use script manager before using any Ajax control tool.
Let us take some simple example of update panel,
We have one web page where we do not have any update panel, and it contain three Gridview and two button, When we click the button, Then complete request goes to the server and hence complete web page and web control were create.So it has to take some time to create the web page and web control and then place thses control onto the web page.
But If we have update panel around each grid view and then if we click the button, then only that grid view data update not complete web page data.
Exactly the update panel do not do any magic to perform this things but, by the help of browser, it will update only specific web part not complete web page
How Exactly Ajax Update panel or another Ajax control works.
Before understanding about AJAX control we have to understand AJAX , The AJAX is Asynchronous Javascript and XML, The Ajax used XmlHTTP request to perform the Asynchronous or Synchronous request.
Whenever there is request to server by the help of Ajax then we have to perform, the following task
1.Create the XMLHttpRequest
Then the request goes to the server and Server , And in server, the PHP or asp are used to get the data from Database .Data are converted onto JSON and XML , then it send the JSON,XML to the Browser, the browser update only required part not complete page. Hence complete page fluctuation should not be there.
There is best example of Update panel, where I have two label and two button control, part 1 where date is today date and time. part 2 where date is next year date and time. If we click the part1 getdate button , then Both the date change (On click event I have written to get current time and Date, So both the label change and complete page will fluctuate.)
But if we want to update only part1 and not part2 then we have to use update panel which update individual part of the page not complete page.
So we have to put the two update panel one around the first part and one around the second part.
to remove the complete page fluctuation .
Note:
An asynchronous postback behaves much like a synchronous postback. All the server page life-cycle events occur, and view state and form data are preserved. However, in the rendering phase, only the contents of the UpdatePanel control are sent to the browser. The rest of the page remains unchanged.
This is the most important concept in Asynchronous concept that only specific part are update or refreshed, But behind the scene the whole page life cycle execute but,only specific part send to the browser . And browser refresh only that part not complete page..
But if we do not want to perform the Async call back then we have to make enable call back =false to the Script manager control.
Nesting Update Panel: we can able to nest the Update panel, in asp .net. If we kept the one update panel inside the another update panel then it is called Nesting update panel.
It is important to understand there are two mode in update panel : Always and conditional.
Always: if the update mode is Always then it update on each Postback, but if it conditional, then it update the panel whenever it required.
Note: Each update panel has some methods and property Like Update(),This method is used to update that update panel from C# code,We can able to add control inside the update panel by the help of Update panel(ID).control.Add(control ID).
It is important to understand there are two mode in update panel : Always and conditional.
Always: if the update mode is Always then it update on each Postback, but if it conditional, then it update the panel whenever it required.
Note: Each update panel has some methods and property Like Update(),This method is used to update that update panel from C# code,We can able to add control inside the update panel by the help of Update panel(ID).control.Add(control ID).
Important point about update panel:
1 The Update panel is used to perform the Asynchronous post back.
2. whenever we want to add update panel we must have to add Script manager on that page.
the script manager used to register the update panel.
3 In Async post back complete life cycle event occurs but the browser only display that part where there is update panel not complete page.
4 The Async post back used to XMLHTTPRequest to perform the client server request.
