Start Learning Asp.Net AJAX in C# VB.Net

If you want to start learning Asp.Net AJAX from very basic then this ASP.Net Ajax Tutorial is for you. In this ajax article or ajax tutorial i will explain “How to start Ajax in 4.0 using both C# and Vb.Net”. That means this is all about 4.0 Ajax. In Visual Studio (VS) 2005 ajax requires a separate installation but from .Net framework 3.5 and later you do not need to install anything for ajax. If you are using an Asp.Net version prior to Asp.Net 3.5, then you need to visit to get the components required to work with AJAX. So start to learn ajax in 3.5/4.0 with a common example of getting server date time.

Start your first AJAX Application:
1. File –> New –> Web Site
2. Choose ASP.NET Web Site from Visual Studio Templates
3. Give a name for this project
4. Select Language
5. Add a Script Manager server control just under “…asp:Content ID=”BodyContent” …
6. Now just add a Label Control and add a Button control to check Post Back just beneath the Script Manager
7. Now add an Update panel server control just beneath the Script Manager
8. Put a Label and a Button within the Update Panel Content Template tag.
9. Write code under Button click event.
10. Run the project and click on both button to see the effect.

Now the HTML markup looks like below:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <asp:Label runat="server" ID="lblServerTime"></asp:Label>
    <br /><br />
    <asp:Button runat="server" ID="cmdPostBack" Text="PostBack to Server" onclick="cmdPostBack_Click" />
    <br />
    <br />
    <hr />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <asp:Label runat="server" ID="lblTime"></asp:Label>
            <br /><br />
            <asp:Button runat="server" ID="cmdGetTime" Text="Call Ajax" onclick="cmdGetTime_Click" />

Now your environment is ready to start AJAX.

Few Initial Talks Regarding AJAX:
Two things are required to create an ajax application. The first one is adding a Script Manager & the second one is adding an Update Panel. Update Panel won’t work if you don’t include Script Manager. Since Script Manager handles all HTTP requests by maintaining a javascript library. You can add only one Script Manager in a page but you can add more than one Update Panel in a page. If you need to post back a partial section of your page then wrap those portion into an Update Panel. For better understanding i am going to prepare an example (see the above HTML markup) where I keep a portion outside Update Panel & another portion in side the Update Panel with some server side controls. So theoretically what will happen? When you click on “cmdPostBack” button which is outside the update panel, the page will refresh but when you click on “cmdGetTime” button which is inside the update panel, the page will not refresh. That’s why we are using AJAX to give user a seamless UI experience

Visual Demonstration At a Glance:
Start Ajax in C#

Now write both button click event like below:
C# Code:

    protected void cmdGetTime_Click(object sender, EventArgs e)
        lblTime.Text = DateTime.Now.ToString();

    protected void cmdPostBack_Click(object sender, EventArgs e)
        lblServerTime.Text = DateTime.Now.ToString();

VB.Net Code:

    Protected Sub cmdGetTime_Click(sender As Object, e As EventArgs)
        lblTime.Text = DateTime.Now.ToString()
    End Sub

    Protected Sub cmdPostBack_Click(sender As Object, e As EventArgs)
        lblServerTime.Text = DateTime.Now.ToString()
    End Sub

Now run the project. Hope your First AJAX Lesson completed successfully. Have a look at the below output:
Start First Ajax application in C# VB.Net

To start Ajax Programming, download my source code from below. Available in both C# and VB.Net.

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Ajax,, C#, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *