Introduction To Asp .Net Ajax (ScriptManager, UpdatePanel, ContentTemplate, Triggers)

Quoting a simple definition of Ajax from w3school site “AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and update parts of a web page – without reloading the whole page.”
Source: http://www.w3schools.com/ajax/default.asp.

Ajax is a web client script so it can work with all server side scripting. Asp .Net with Visual Studio 2010 provides easy way to create Ajax application.
Some of main Component of Ajax are ScriptManager, UpdatePanel, ContentTemplate, Triggers.

ScriptManager Class “Manages ASP.NET Ajax script libraries and script files, partial-page rendering, and client proxy class generation for Web and application services.”
Source: http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.aspx

“ASP.NET UpdatePanel controls enable you to build rich, client-centric Web applications. By using UpdatePanel controls, you can refresh selected parts of the page instead of refreshing the whole page with a postback. This is referred to as performing a partial-page update. An ASP.NET Web page that contains a ScriptManager control and one or more UpdatePanel controls can automatically participate in partial-page updates, without custom client script.”
Source: http://msdn.microsoft.com/en-us/library/ie/bb386454.aspx

ContentTemplate Property “Gets or sets the template that defines the content of the UpdatePanel control.”
Source: http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.contenttemplate.aspx

“The other element is the Triggers element, which specifies the controls on the page (or the user control, if you are using one) that will trigger a partial render of the UpdatePanel control in which the element resides.”
Source: http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers

In this post I will give C# Asp .Net Ajax with above components.

1. Open Visual Studio 2010 and create new website project.
2. Drag and drop ScriptManager and UpdatePanel components or just write a tags one by one. VS 2010 raises helpfull intellisense to write asp server control.
3. Write code under form tag on Default.aspx file (source of design view):

   <form id="form1" runat="server">
       <div>
       <asp:ScriptManager id="ScriptManager1" runat="server">
       </asp:ScriptManager>
       
       <asp:UpdatePanel ID="updatepanel1" runat="server">
           <ContentTemplate>
               
               <asp:Button ID="btn_in_ct" runat="server" Text="Button in ContentTemplate" 
                   onclick="btn_in_ct_Click" /> &nbsp;
               <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
           </ContentTemplate>
       </asp:UpdatePanel><br />
     
       </div>
       </form>
   

   We have button control and label to echo whatever result come from server under ContentTemplate tag.

4. Write on Default.aspx.cs file (source code view):

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.UI;
   using System.Web.UI.WebControls;
   
   public partial class _Default : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {
   
       }
       protected void btn_in_ct_Click(object sender, EventArgs e)
       {
           Label1.Text = DateTime.Now.ToLongDateString();
       }
   
   }
   

   Most of codes like ‘using System; etc..’, _Default Class, page_load function are auto-generated by VS. We only have to write the btn_in_ct_Click function.
   The function works to set label1’s text into current Date.

5. Run the project and if no error occurs then when you click ‘Button in ContentTemplate’ the page is not reload but its label showing current date. That is ajax means.

Above example shows button control that triggers ajax to run located under ContentTemplate tag. We can put button control outside ControlTemplate in case web design requires it.

1. Edit Default.aspx file (source of design view) under form tag become:

   <form id="form1" runat="server">
       <div>
       <asp:ScriptManager id="ScriptManager1" runat="server">
       </asp:ScriptManager>
       
       <asp:UpdatePanel ID="updatepanel1" runat="server">
           <ContentTemplate>
               
               <asp:Button ID="btn_in_ct" runat="server" Text="Button in ContentTemplate" 
                   onclick="btn_in_ct_Click" /> &nbsp;
               <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
           </ContentTemplate>
       </asp:UpdatePanel><br />
     
       <asp:UpdatePanel ID="updatepanel2" runat="server">
           <ContentTemplate>
               <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
   
           </ContentTemplate>
           <Triggers>
               <asp:AsyncPostBackTrigger ControlID="btn_out_ct" />
               
           </Triggers>
           
       </asp:UpdatePanel>
       <asp:Button ID="btn_out_ct" runat="server" Text="Button not in ContentTemplate" 
               onclick="btn_out_ct_Click" />
          
       </div>
       </form>
   

   Another button exist outside ContentTemplate but we have to add Triggers tag that choose which ControlID to run the ajax.

2. Add function to Default.aspx.cs file (source view) :

   protected void btn_out_ct_Click(object sender, EventArgs e)
       {
           Label3.Text = DateTime.Now.ToLongDateString();
       }
   

3. Run the project and still when you click “Button not in ContentTemplate” the page is not reload only related label control to shows current date.

Regards,
Agung Gugiaji