Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

What is AJAX and how to use AJAX UpdatePanel Control in ASP.NET

Author: Rudy Pinson

AJAX has been around a while and extensively used in web pages.

 
What is AJAX?

Asynchronous JavaScript and XML (AJAX) is a method to create web pages with partial load instead of entire page reload. This means that we can update some parts of the web page without loading the whole page. It is the way to use JavaScript and XML to communicate with web server without refreshing the web page. So AJAX is used to allow client side of the application to communicate with server side of application.

We can say that, AJAX is a technique to process user requests on the web page immediately without delay of entire page reload. Users don’t need to wait for whole page to load with AJAX. It is light weight because it is a fast way to interact with server.
 
AJAX is providing facility for developers to develop more user friendly applications. It can be used for creating web based applications that look and work like desktop applications. AJAX is based on existing technologies like JavaScript and XML so it is easy to learn. It is also very easy to use AJAX in ASP.NET.
 
AJAX UpdatePanel Control
 
UpdatePanel is probably most important control in AJAX Extension tab provided by Microsoft in Visual Studio 2010. It specifies the region in the web page that can be updated without refreshing the whole page. With UpdatePanel control, the page post back is limited to the region specified by that UpdatePanel control.
 
AJAX ScriptManager Control
 
UpdatePanel control requires ScriptManager control in the web page for partial page update. The process of updating the specified region of UpdatePanel is coordinated by ScriptManager control. By default, EnablePartialRendering attribute of the ScriptManager control is true for partial page updates.
 
Let’s have a simple example to explain AJAX in ASP.NET.
 
  1. Create a new website in Visual Studio 2010 either in C# or in VB.NET
  2. Add a web form to website
  3. Drag and drop a label in design view or write following code in source view of aspx page

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

     
  4. Drag and drop a ScriptManager control from AJAX Extensions tab of Toolbox in design view or write following code in source view.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
     
  5. Drag and drop a UpdatePanel control from AJAX Extensions tab of Toolbox in design view or write following code in source view.

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       
        <ContentTemplate>
        
       
        </ContentTemplate>
     </asp:UpdatePanel>
     
  6.  Drag and drop one Label and one Button inside the Update Panel or write following code in between <ContentTemplate> tag of <asp:UpdatePanel> tag.

    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
       
    <br />
       
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />

     
  7.  Putting the entire HTML code together.

     
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
       
     <br />
       
     <asp:ScriptManager ID="ScriptManager1" runat="server">
       
     </asp:ScriptManager>
       
     <br />
       
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       
         <ContentTemplate>
       
            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
       
            <br />
       
     <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
       
          </ContentTemplate>
       
     </asp:UpdatePanel>
       
     <br />
     
  8.  Add following code in page load method of code behind file.

    C#
     
    Label1.Text = "Time at page load is: " + DateTime.Now.ToString();
     
    VB.NET
     
    Label1.Text = "Time at page load is: " + DateTime.Now.ToString()
     
  9. Add following button click event in code behind file.

    C#
     
    protected void Button1_Click(object sender, EventArgs e) {
     
            Label2.Text = "Time in AJAX UpdatePanel Control is: " + DateTime.Now.ToString();
    }
     
     
    VB.NET
     
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
     
            Label2.Text = "Time in AJAX UpdatePanel Control is: " + DateTime.Now.ToString()
     
    End Sub
     
  10. Now see the web site in browser. First label will show the time at page load. Second label will show the time after button click. You will see that only the second label time will be updated on button click. That means only the portion in UpdatePanel control of the page is updated instead of whole page reload. The first label time will be updated on page refresh. 

 

AJAX is a cool functionality that is being used in many well-known applications like Google Maps, Yahoo instant search and Apple Stores. Login forms, auto complete, chat rooms and light boxes are few examples of AJAX usage.

 

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to use CustomValidator Control and write Custom Validation function in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net