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

About these ads

11 responses to “Introduction To Asp .Net Ajax (ScriptManager, UpdatePanel, ContentTemplate, Triggers)

  1. Pingback: Introduction to Asp .Net Ajax – 2 (UpdateProgress) | Enlighten Application Developer Journals

  2. great article man…. really appreciated… thank you very much

  3. Pingback: Starting & Aborting/Cancelling Asp .Net Ajax Request Techniques | Enlighten Application Developer Journals

  4. Pingback: Introduction To Asp .Net Ajax Client Side Development ($get, $addhandler, $removehandler, Sys.Application, Sys.WebForms, Sys.Net) | Enlighten Application Developer Journals

  5. Pingback: Introduction To Asp .Net Ajax 3 (ScriptManagerProxy) | Enlighten Application Developer Journals

  6. Pingback: Introduction To Asp .Net Ajax 4 (Timer) | Enlighten Application Developer Journals

  7. If you wish for to improve your knowledge only keep visiting this website and be updated with the newest news posted here.

  8. Hi,
    I use scriptmanager with EnablePartialRendering=”true”.I am not using updatepanel.I submit it so there is only partialrendering.

    So Explain me why i will use updatepanel in this case ?

    • Hi,

      If you do not use updatepanel control then the page will not be partially rendered even though you have EnablePartialRendering=”true”.

      Please check url: http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.enablepartialrendering.aspx

      I have been try to simulate without updatepanel control, a whole page got refreshed when there is a submit request.

      It is same behaviour with EnablePartialRendering=”False” and having updatepanel control, it wont have ajax process. Fortunately default value of EnablePartialRendering attribute is set to “True”. So you dont have to write EnablePartialRendering=”true” to have ajax process but you have to have updatepanel control.

      Thanks

  9. Hi Guys, for good programming articles, you can visit these links
    1. SourceCodeHub.com
    2. CodeProject.com
    3. PlanetSourceCode.com
    4. SourceCodester.com

    they have many categories in different languages.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s