Work with UpdatePanel Control in AJAX

Step 7 : Click in the next and previous month controls on the calendar.The calendar change without refreshing the whole page.

Add control to the MasterPage :

Step 8 : Go to MasterPage drag two button after the ScriptManager Control.

• Right-click in Button and select property option

• Set the ID of Button and Text property in the Button Control

asp:Button ID="decrement" runat="server" Text="-" OnClick="MasterButton_Click" Width=" 40px"/>
<asp:Button ID="increment" runat="server" Text="+" OnClick="MasterButton_Click" Width="40px"/>

Step 9 : Now double-click in the page option and write a code.

Code :
public partial class MasterPage : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(increment);
ScriptManager1.RegisterAsyncPostBackControl(decrement);
}

Step 10 : Now go to [Design] option and click in Button control and write a code.

Code :

protected void MasterButton_Click(object sender, EventArgs e)
{
switch (((Control)sender).ID)
{
case "increment":
this.Offset = this.Offset + 1;
break;
case "decrement":
this.Offset = this.Offset - 1;
break;
}
((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
cal.SelectedDate = newDateTime;
}

Define Public property named offset in the MasterPage:

Property :

public Int32 Offset
{
get
{ return (Int32)(ViewState["Offset"] ?? 0); }
set
{ ViewState["Offset"] = value; }
}

Step 11 : Now go to the content page[Design]option and click in calendar control write a code.

Code :

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
DateTime selectedDate = Calendar1.SelectedDate;
Master.Offset =
((TimeSpan)Calendar1.SelectedDate.Subtract(
DateTime.Today)).Days;
}

Step 12 : In a content [design] option double -click in page and define the page-load event and write a code.

Code :

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DateTime newDateTime =
DateTime.Today.Add(new
TimeSpan(Master.Offset, 0, 0, 0));
Calendar1.SelectedDate = newDateTime;
}

Add Master Directive :

Step 13 : Go to the content page [Source] option define the MasterPage Directive.

<%@ MasterType VirtualPath="MasterPage.master" %>

Step 14 : In the property window set the UpdatePanelUpdateModeProperty.

• Define property :Conditional

Step 15 : Now run the application by Pressing F5.

Step 16 : Now select date on the calendar and then click in increment(+) button on the master page to change the selected date.

Now click in increment(+) button option

Step 17 : Now select date on the calendar and then click in decrement(-) button on the master page to change the selected date.