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.