ASP.NET AJAX Sample Implementation

We use Microsoft Visual Studio 2015 for creating this ASP.NET AJAX enabled web application. And we use .NET Framework 4.5.2 here.

Go to File -> New -> Project and then the following window will appear.

new project dialog

Then select Installed -> Templates -> Visual C# -> Web. Among three templates again select ASP.NET Web Application as in above dialog. We can give a suitable name for the solution and project that we are going to create. Here we give ExperimentalAjaxWebApplication for both solution name and project name. Then click OK. After that we can see the created web application. Its folder structure and all the files can be seen in Solution Explorer as below.

solution explorer

Here we do not have to manually add ASP.NET AJAX Control Toolkit instead visual studio has been added all stuff for us. We can see all things for Microsoft AJAX in Scripts -> WebForms -> MSAjax folder in the Solution Explorer as below.

ms ajax

In the Toolbox AJAX Server Controls can be seen as below.

ajax extensions

We need to add a new WebForm. To do that right click on the project name in Solution Explorer, select Add -> New Item -> WebForm. We give it a name called AjaxPartialPageUpdate. Then we need to set that newly created WebFrom as the start page therefore, right click on the name of the WebForm in the Solution Explorer, select Set As Start Page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPartialPageUpdate.aspx.cs" Inherits="AjaxWebApplication.AjaxPartialPageUpdate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div></div>
</form>
</body>
</html>

This WebForm only has a div tag, therefore we need to add three labels and one button control into that div tag.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPartialPageUpdate.aspx.cs" Inherits="AjaxWebApplication.AjaxPartialPageUpdate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" Text="Button" /></div>
</form>
</body>
</html>

After running the application we can see the output as following.

output without ajax

When we click on the button here a full page postback is occurred even we do not add click event handler yet. That page postback is happened default. However we add some code into Page_Load() event to print the time of day in those three labels.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AjaxWebApplication
{
    public partial class AjaxPartialPageUpdate : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.TimeOfDay.ToString();
            Label2.Text = DateTime.Now.TimeOfDay.ToString();
            Label3.Text = DateTime.Now.TimeOfDay.ToString();
        }
    }
}

Output of the web page is as following.

output with time

When the button is clicked, the whole page is submitted. Therefore texts of three labels are updated as following.

output with time after postback

Until now there is nothing related with AJAX. Therefore we can add ScriptManager server control into the WebForm.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPartialPageUpdate.aspx.cs" Inherits="AjaxWebApplication.AjaxPartialPageUpdate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" Text="Button" /></div>
</form>
</body>
</html>

If that ScriptManager is added outside of the form tag, there is a runtime error like bellow.

scriptmanager error

Therefore we need to add the ScriptManager into the form tag like below. Then we can run the application without any error. The important thing that we want to state here is that a WebForm can have one and only one ScriptManager server control. Now we add another server control called UpdatePanel. Before adding anything into UpdatePanel we need to add ContentTemplate tag into it.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPartialPageUpdate.aspx.cs" Inherits="AjaxWebApplication.AjaxPartialPageUpdate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

</ContentTemplate>
</asp:UpdatePanel></div>
</form>
</body>
</html>

Because of the button is outside of the UpdatePanel still we can have the full page postback, then all three labels show a same time.

output with updatepanel

To apply the partial page update for the Label1 after button click that Label1 and the Button1 should be in the same UpdatePanel. Now we do not see any flickering in the browser window when the button is clicked.

output with updatepanel1

We can have multiple UpdatePanels in a one WebForm. Now we add another UpdatePanel like bellow.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPartialPageUpdate.aspx.cs" Inherits="AjaxWebApplication.AjaxPartialPageUpdate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

</ContentTemplate>
</asp:UpdatePanel></div>
</form>
</body>
</html>

And Label2 is added into the second UpdatePanel. The output is as below.

output with mutiple updatepanels

Because of one UpdatePanel is affected with other, content within those two UpdatePanels are going to be changed simultaneously. This is the default behavior of UpdatePanel. To change this behavior we need to change the mode of UpdatePanel, UpdateMode from default Always to Conditional.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPartialPageUpdate.aspx.cs" Inherits="AjaxWebApplication.AjaxPartialPageUpdate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

</ContentTemplate>
</asp:UpdatePanel></div>
</form>
</body>
</html>

Then we can update only the Label1 without affecting the Label2.

output with mutiple updatepanels1

If we add another button into the WebForm but outside any UpdatePanel, we again have a full page postback when the new button is clicked.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPartialPageUpdate.aspx.cs" Inherits="AjaxWebApplication.AjaxPartialPageUpdate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button2" runat="server" Text="Button" /></div>
</form>
</body>
</html>

second button

We can wire up the second UpdatePanel with the second button using a trigger. But to update Label1 and Label2 separately we need to set UpdateMode in each UpdatePanel as Conditional.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPartialPageUpdate.aspx.cs" Inherits="AjaxWebApplication.AjaxPartialPageUpdate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button2" runat="server" Text="Button" /></div>
</form>
</body>
</html>

Now we add AJAX Timer control into the WebForm but outside any UpdatePanel. We set interval of the Timer as 1000ms.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPartialPageUpdate.aspx.cs" Inherits="AjaxWebApplication.AjaxPartialPageUpdate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button2" runat="server" Text="Button" />
<asp:Timer ID="Timer1" runat="server" Interval="1000"></asp:Timer></div>
</form>
</body>
</html>

We can see a full page postback after each 1 second. To limit this full page postback we can add another UpdatePanel and this Timer and Label3 should add into that UpdatePanel. Then we can see the update only for Label3.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPartialPageUpdate.aspx.cs" Inherits="AjaxWebApplication.AjaxPartialPageUpdate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button2" runat="server" Text="Button" />
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<asp:Timer ID="Timer1" runat="server" Interval="1000"></asp:Timer>
</ContentTemplate>
</asp:UpdatePanel></div>
</form>
</body>
</html>

Now we add a fourth UpdatePanel and another label and a button into that UpdatePanel. An UpdateProgress server control is added to the WebForm but outside any UpdatePanel. We associate UpdatePanel4 with UpdateProgress using AssociatedUpdatePanelID attribute.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPartialPageUpdate.aspx.cs" Inherits="AjaxWebApplication.AjaxPartialPageUpdate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button2" runat="server" Text="Button" />
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<asp:Timer ID="Timer1" runat="server" Interval="1000"></asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>

<asp:Button ID="Button3" runat="server" Text="Button" OnClick="Button3_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel4">
<ProgressTemplate>
An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress></div>
</form>
</body>
</html>

We add 5 second delay artificially using threading and add the current time to the text of the Label4 in the click event in Button3.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AjaxWebApplication
{
public partial class AjaxPartialPageUpdate : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.TimeOfDay.ToString();
Label2.Text = DateTime.Now.TimeOfDay.ToString();
Label3.Text = DateTime.Now.TimeOfDay.ToString();
}

protected void Button3_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
Label4.Text = DateTime.Now.TimeOfDay.ToString();
}
}
}

After that when we click the Button3, Label3 and Label4 freeze. UpdateProgress control print the string “An update is in progress…”.

updateprogress

After 5 second both Label3 and Label4 print the current time as below.

updateprogress1

This is a sample implementation with ASP.NET AJAX. You can use this demonstration to build different applications. You can download the source code from GitHub using https://github.com/hasiabewardana/ExperimentalAjaxWebApplication link. You will have awesome posts of useful programming areas soon. Stay tuned with us.

Advertisements

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