In this post I would like to demonstrate with a hands on example, how to ajaxify an existing website/application.  This post will not cover the basics of Ajax. If you want to find out what Ajax is (and what the main Ajax controls are) have a look at this post of mine.

Obviously I cannot create another ASP.Net application in this post so I can ajaxify it afterwards.I will use an ASP.Net application/website I created in a previous post.

In order to follow what I am doing in this post you must follow and complete the steps of this post. You must complete all the steps detailed in that post.By doing that, you will learn how to create a custom object/class and bind the data it returns (through methods and LINQ to SQL queries) through an ObjectDataSource control to web server controls like Gridview,DropDownList.

In this post I would also talk about the Ajax UpdateProgress control. The UpdateProgress control provides end users with feedback about their requests. It basically uses a ProgressTemplate to define progress indicator content.It is a very simple control to use and notifies the users as an Ajax calls starts and as it finishes.We use that control when it takes sometime for the Ajax call to complete the user's request. We give the user a visual indication of what is happening and how things are progressing. By doing that , the user waits for the request to get serviced and he/she does not click (impatiently) on the page.

1) Launch Visual Studio and open the website that you created in this post.

Now we must ajaxify our application.In order to do that I must decide what should part of the page should be in the partial update.I have decided to include the DetailsView control. That means that whenever the user selects an author from the Gridview, an asynchronous postback operation will be initialised and only the contents of the DetailsView control will be posted back and only those contents will be updated. I will also add a UpdateProgress control to provides end users with feedback about the progress of their request.

2)  Add a new folder in your site. Name it Images.We will add in there the progress indicator image.

3) Visit this site to create very easily a progress indicator image.Add the image you just created in the Images folder.

4)  Add a ScriptManager control on the default.aspx page.You must always do that when we want to add Ajax functionality in our page.Then we should add an UpdatePanel control on the default.aspx page.Inside there we will put the DetailsView control that we want to participate in the partial upate. We will also include a UpdateProgress control with a ProgressTemplate. We must also add an asynchronous trigger that will

5) The markup for all the above controls that ajaxify our application follow.

<asp:UpdatePanel ID="upd1" runat="server">
    <ContentTemplate>
    <asp:UpdateProgress ID="upgr1" runat="server"  DynamicLayout="true">
    <ProgressTemplate>
        <img src="images/ajax-loader.gif" />
    </ProgressTemplate>
    
    </asp:UpdateProgress>
    <asp:DetailsView ID="DetailsView1" runat="server" CellPadding="4" 
        ForeColor="#333333" GridLines="None" Height="50px" Width="125px" 
        AutoGenerateRows="False" DataSourceID="AuthorDataSourceDetails">
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <CommandRowStyle BackColor="#E2DED6" Font-Bold="True" />
        <EditRowStyle BackColor="#999999" />
        <FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" />
        <Fields>
            <asp:BoundField DataField="au_id" HeaderText="au_id" SortExpression="au_id" />
            <asp:BoundField DataField="au_lname" HeaderText="au_lname" 
                SortExpression="au_lname" />
            <asp:BoundField DataField="au_fname" HeaderText="au_fname" 
                SortExpression="au_fname" />
            <asp:BoundField DataField="phone" HeaderText="phone" SortExpression="phone" />
            <asp:BoundField DataField="address" HeaderText="address" 
                SortExpression="address" />
            <asp:BoundField DataField="city" HeaderText="city" SortExpression="city" />
            <asp:BoundField DataField="state" HeaderText="state" SortExpression="state" />
            <asp:BoundField DataField="zip" HeaderText="zip" SortExpression="zip" />
            <asp:CheckBoxField DataField="contract" HeaderText="contract" 
                SortExpression="contract" />
        </Fields>
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    </asp:DetailsView>
 
     </ContentTemplate>
         <Triggers>
             <asp:AsyncPostBackTrigger ControlID="GridView1" 
                 EventName="SelectedIndexChanged" />
         </Triggers>
     </asp:UpdatePanel>

 6) Let me explain what I am doing with the code above.I will break the markup in smaller snippets.

Snippet 1 

<asp:UpdatePanel ID="upd1" runat="server">
    <ContentTemplate>
    <asp:UpdateProgress ID="upgr1" runat="server"  DynamicLayout="true">
    <ProgressTemplate>
        <img src="images/ajax-loader.gif" />
    </ProgressTemplate>
    
    </asp:UpdateProgress>
    <asp:DetailsView ID="DetailsView1" runat="server" CellPadding="4" 

.......................... 

 </asp:DetailsView>
 
     </ContentTemplate>

I have the  UpdatePanel and then I have a ContentTemplate element and inside there I have two major controls

•   The UpdateProgress control that has inside a ProgressTemplate element. Inside the ProgressTemplate element I have the progress indicator image.
  

<asp:UpdateProgress ID="upgr1" runat="server"  DynamicLayout="true">
    <ProgressTemplate>
        <img src="images/ajax-loader.gif" />
    </ProgressTemplate>
    
    </asp:UpdateProgress>

•  Then after the UpdateProgress element closes (</asp:UpdateProgress> ) I include the DetailsView control.

7) Then I must have some sort of way to trigger that asynschronous postback when the user selects an author from the Gridview. I will do that using a Triggers collection with an AsyncPostBackTrigger control. The controlID property of the  AsyncPostBackTrigger control should be set to the ID of the control that will initiate the asynchronous postback. In our case it is the ID of the GridView control,GridView1.The EventName attribute should be set to the event of the Control that will trigger the asynchronous postback. In our case it is the SelectedIndexChanged event.

Snippet 2

 <Triggers>
             <asp:AsyncPostBackTrigger ControlID="GridView1" 
                 EventName="SelectedIndexChanged" />
         </Triggers>
     </asp:UpdatePanel>

 8) Run your application. When selecting an author from the GridView control , the details will be shown to the user using Ajax calls. In this way only this data wil be updated and not the whole page. We do not have a full page postback. The problem is that you do not see the progress indicator. It is very simple to realise why this happens. I work in my laptop and I use the local instance of the SQL Server installed in my machine to access the database, so there is no time delay.In real applications we assume that it will take some time for the asynchronous postback operation to complete.In this case the progress indicator image will show up.

9) Let's add some delay ourselves (we do not do that in our live-real application) to our website, so we can see the progress indicator control.I will add this line of code in the GetAuthor method

System.Threading.Thread.Sleep(2500);

By using the Sleep method of the Thread class I "delay" the execution of the next lines of code inside the method.

The code for the GetAuthor method follows

    public author GetAuthor(string AuthorID)
    {
 
        System.Threading.Thread.Sleep(2500);
        using (var ctx = new PubsDataContext())
        {
            var query = (from auth in ctx.authors
                         where auth.au_id == AuthorID
                         select auth).SingleOrDefault();
 
            return query;
 
 
        }
 
    }

 10) Run your application , select a city from the dropdownlist control, select an author and then observe the UpdateProgress control appearing in the page until the data in the DetailsView is ready to show. Your web page should look something like this.

Hope it helps!!! Email me if you need the source code.