Getting Started With ASP.NET AJAX

Asp.net Ajax’s server side controls are set of controls that comes inbuilt with visual studio 2010 and dot net 3.5 or higher. On toolbox they are usually grouped inside “AJAX Extension” Tab. If you open this tab you will see 5 controls inside it namely

1)      ScriptManager

2)      ScriptManagerProxy

3)      Timer

4)      UpdatePanel

5)      UpdateProgress

What are usages of this controls lets see one by one.

1)ScriptManager Control: This is the control that can occur atmost once in a page, this control is responsible for marshalling message from server to given page on which it reside for partial updates. Marshalling of message can be done using JASON or SOAP.

    When we add this control to page it loads required JavaScript library essential for asp.net ajax(atlas).ScriptManager compress the JavaScript that are to send to client.

2) ScriptManagerProxy control: It works in conjunction with ScriptManager Control; this control resides on content page in Master Page-Content Page scenario.

    If a master page has a script manger control on it control on content page can utilize this script manger from there master, but if master page has script manger

Whose attribute you want to override in content page then you have to add Script manger proxy to your content page with desired attributes.

  Script Manger Proxy control can’t be added to content page if it’s master page lack Script Manager control.

  

3) Timer: This control is used to update part of page after given time interval also to execute client side event at specific interval.

4) UpdatePanel Control: This control defines an area of page for which partial page post back can take place.

5) UpdateProgress: While Partial postback taking place it is nice to inform user about same, rather than annoying him with sudden update or playing with patience of end user in case long running Ajax update. This control is used to visually informing user of partial postback in place.

When we just add a script manager and run the page and have a look at its generated

HTML & JavaScript you will notice that some additional JavaScript get added whose url contains ScriptResource.axd followed by some query string. This script gets dynamically generated through ScriptResource.axd.

Let us see how we can create a hello world type example in Ajax. On a normal window form without master page add a script manger control also add the update panel and simply copy paste code that is inside update panel

Source:

        <asp:ScriptManager runat="server"></asp:ScriptManager>

       

        <asp:UpdatePanel runat="server">

        <ContentTemplate>

          <asp:Label runat="server" Text="Label" id="lbl1"></asp:Label>

          <asp:Timer runat="server" ontick="tmr1_Tick" Interval="500"

 id="tmr1"></asp:Timer>

        </ContentTemplate>

        </asp:UpdatePanel>

We are going to handle only two events one is page_load & other timer_tick code in both is just updating the label with current datetime.

Code:

protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            lbl1.Text = DateTime.Now.ToString("dd-MM-yyyy hh:mm:ss");

        }

    }

    protected void tmr1_Tick(object sender, EventArgs e)

    {

        lbl1.Text = DateTime.Now.ToString("dd-MM-yyyy hh:mm:ss");

    }

When you run this code you will see that label get regularly updated after every 500 milli seconds.

Here we come across new entity ContentTemplate.

UpdatePanel can contain two elements one is ContentTemplate and other one is triggers. Control that need to be updated after partial postback are contained in ContentTemplate

ContentTemplate:

Consider code bellow

<asp:ScriptManager runat="server"></asp:ScriptManager>

        <asp:Label runat="server" id="lbl2" Text="Date"></asp:Label>

        <asp:UpdatePanel runat="server">

        <ContentTemplate>

          <asp:Label runat="server"  id="lbl1" Text="Date"></asp:Label>

          <asp:Button runat="server" Text="Button" id="btn" onclick="btn_Click"></asp:Button>

        </ContentTemplate>

        </asp:UpdatePanel>

Here is event handler  

protected void btn_Click(object sender, EventArgs e)

    {

        lbl1.Text = DateTime.Now.ToString("dd-MM-yyyy hh:mm:ss");

    }

When we will click the button, the label lbl1 get update but lbl2 remain stale. As our button click caused partial postback in area defined by update panel but lbl2 is outside our update panel

Trigger:

   In above example we have label & a button inside content template but only label needs updating means partial postback unnecessarily sending extra bit of information to server.

Here comes trigger

   <asp:ScriptManager runat="server"></asp:ScriptManager>

        <asp:Label runat="server" id="lbl2" Text="Date"></asp:Label>

        <asp:UpdatePanel runat="server">

        <ContentTemplate>

          <asp:Label runat="server"  id="lbl1" Text="Date"></asp:Label>

        </ContentTemplate>

        <Triggers>

         <asp:AsyncPostBackTrigger ControlId="btn" EventName="Click"></asp:AsyncPostBackTrigger>

        </Triggers>

        </asp:UpdatePanel>

         <asp:Button runat="server" Text="Button" id="btn" onclick="btn_Click"></asp:Button>

And event handlers are

  protected void btn_Click(object sender, EventArgs e)

    {

        lbl1.Text = DateTime.Now.ToString("dd-MM-yyyy hh:mm:ss");

    }

As button going to cause asynchronous postback it is put inside trigger tag along with event that causes trigger

By removing button control from update panel our postback data size get reduced.

Reference:

1) Professional asp.net 3.5 wrox publication.