AJAX in ASP.NET Part-2

Following AJAX example demonstrates how to update partial page without postback or refreshing page.

1. AddNew Item->Web Form in Your website .
2. Place Script manger and UpdatePanel from toolbox on form.

<asp:ScriptManager ID="ScriptManager1" runat="server">

asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

ContentTemplate>

After placing these components,VS automatically place this directive in html designer view.

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

Namespace="System.Web.UI" TagPrefix="asp" %>

In web.config Add following Httphandler and HttpModule section.

<httpHandlers>

<remove verb="*" path="*.asmx"/>

<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

httpHandlers>

<httpModules>

<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

httpModules>

system.web>

You can also copy paste this section from web.config file of AJAX ENABLED ASP.NET WEBSITE Template


If you are new to httphandlers and httpmodule , read this post
Httphandlers and HttpModules
Place a calendar and label control in update panel.Place a label control outside updatepanel .

<ContentTemplate>

<asp:Label ID="LBLDateselected" runat="server">asp:Label>

<asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66"

BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"

ForeColor="#663399" Height="200px" OnSelectionChanged="Calendar1_SelectionChanged"

ShowGridLines="True" Width="220px">

<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />

<SelectorStyle BackColor="#FFCC66" />

<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />

<OtherMonthDayStyle ForeColor="#CC9966" />

<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />

<DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />

<TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />

asp:Calendar>

ContentTemplate>

on page load place code

Label2.Text = DateTime.Now.ToLongTimeString();

and on calendar's Calendar1_SelectionChanged event place this code

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
LBLDateselected.Text = Calendar1.SelectedDate.ToLongDateString();
}

as you can see page is not postingback while clicking on calendar, it means code that has been placed in page load event wont be executed. only code for controls or in events of controls that are placed in update panel will be executed.

AJAX in ASP.NET Overview Part-1

Asynchronous Javascript and XML is a technique that used to execute server side code and return data back to the browser without postbacks or refreshing page.Let's take an example of Google Suggest where return results of query are filled in drop down list while typing the query without refreshing or posting back the page.AJAX pages contains Client side script and Server side code which exchange information through XML and communication between client side and server is carried asynchronously.

Main Object in AJAX is XMLHttpRequest ,with this object,clients can submit and retrieve XML data to /from server without postbacks or reloading page.

var _reqObject= new XMLHttpRequest();

Every latest browser support this object however Internet explorer 6 or old versions doest not.To declare XMLHttpRequest for older browser compatibility,following active- X syntax is used as it would be treated as active-X control.

var _reqObject = new ActiveXObject("MSXML2.XMLHTTP.3.0");

So basically there is lot of workaround for browser checks in code.AJAX components in ASP.NET made it all easier.

ASP.NET AJAX Contains Server side and clients side components. Where Client side components contains Javascript libraries (.js) that can be extended and can also be used in non-asp.net page. It also contains cross browsers compatibility scripts.
Server side contains Controls, UpdatePanel,ScriptManager.

AJAX Library can also be used to call web service(.asmx extensions) .

Before processing to our sample, we need to download

ASP.NET AJAX 1.0

download it from above link for visual studio 2005. This toolkit is for ASP.NET 2.0, for ASP.NET 3.5, ASP.NET AJAX is built-In feature.After Installation of ASPAJAXExtSetup.msi and restarting Visual studio, AJAX extensions is installed in toolbox.
AJAX Extensions contains server side controls, Following controls will be our target to build up a AJAX style Web page.

1. ScriptManager.
2. UpdatePanel
3. Timer
   

ScriptManager must be placed on page before placing any other AJAX server control o page, as it manages all AJAX Script libraries and files.

END of PART-1