Server Intellect
 
Home   Asp.Net Tutorials   What's New   Newsletter   More Resources
Tutorial RSS
 
  Categories
Advanced Technologies
AJAX
Internet Browsers
Charts
Controls
Database
Email
Error Handling
File
Graphics
Website Navigation
Network
Performance
User Interface and Themes
Validation
Visual Web Developer
Web Services
XML
Suggest Tutorial


Navigator: Home - Tutorials - AJAX - AJAX-Enabled Advanced Calendar in ASP.NET and C#
AJAX-Enabled Advanced Calendar in ASP.NET and C#

ASP.Net 4.0 Tutorials V4
Server Intellect Cloud Hosting

ASP.NET AJAX Tutorial

This tutorial is a more advanced version of using AJAX with a Calendar Control to show how we can make a Calendar control more dynamic by allowing the selected date to be transferred to a textbox without using PostBack. C# version.

This tutorial was created with Microsoft's ASP.NET AJAX Extensions, which can be downloaded at this link.
We start by registering the AjaxControlToolkit in our project, which will add the .dll and .pdb to our project and modify our Web.config file:

<pages>
<controls>
<add namespace="System.Web.UI" tagPrefix="asp" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit"/>
</controls>
<namespaces>
<add namespace="Microsoft.VisualBasic"/>
<add namespace="System.Data"/>
<add namespace="System.Drawing"/>
</namespaces>
</pages>

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

We are going to create a user control for the calendar. On it, we will have a textbox and then drop-down lists and a calendar control inside an UpdatePanel. The user control ascx will look something like this:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CalendarControl.ascx.cs" Inherits="CalendarControl" %>
<asp:TextBox ID="DateTextFrom" Text="" runat="server" onFocus="javascript:this.blur();" Width="80" autocomplete="off" />
<asp:RequiredFieldValidator ID="DateTextFromRequired" Enabled=true runat="server"
ControlToValidate="DateTextFrom" ErrorMessage="Date is required">*</asp:RequiredFieldValidator>
<asp:Panel ID="Panel1" Visible=true runat="server" CssClass="popupControl" style="display:none;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<center>
<table>
<tr>
<td align="left" bgcolor="#cccccc">
<asp:DropDownList id="drpCalMonth" Runat="Server" AutoPostBack="True" OnSelectedIndexChanged="Set_Calendar" cssClass="calTitle"></asp:DropDownList>
</td>
<td align="left" bgcolor="#cccccc">
<asp:DropDownList id="drpCalYear" Runat="Server" AutoPostBack="True" OnSelectedIndexChanged="Set_Calendar" cssClass="calTitle"></asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Calendar ID="Calendar1" runat="server" Width="160px" DayNameFormat="Shortest"
BackColor="White" BorderColor="#999999" CellPadding="1" Font-Names="Verdana" NextMonthText="" PrevMonthText=""
Font-Size="8pt" ForeColor="Black" OnSelectionChanged="Calendar1_SelectionChanged">
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<SelectorStyle BackColor="#CCCCCC" />
<WeekendDayStyle BackColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="#808080" />
<NextPrevStyle VerticalAlign="Bottom" />
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
<TitleStyle BackColor="#999999" Font-Size="7pt" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>
</td>
</tr>
</table>
</center>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"
TargetControlID="DateTextFrom"
PopupControlID="Panel1"
Position="Bottom" />

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

Next, we add the logic to the code-behind of the calendar user control:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class CalendarControl : System.Web.UI.UserControl
{
public string DateTextFromValue
{
get { return DateTextFrom.Text; }
set { DateTextFrom.Text = value; }
}

public Boolean DateTextRequired
{
get { return DateTextFromRequired.Enabled; }
set { DateTextFromRequired.Enabled = value; }
}

public string DateTextRequiredText
{
get { return DateTextFromRequired.ErrorMessage; }
set { DateTextFromRequired.ErrorMessage = value; }
}

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Populate_MonthList();
Populate_YearList();

DateTime dt;
if (DateTextFrom.Text != "")
{
dt = DateTime.Parse(DateTextFrom.Text);
Calendar1.TodaysDate = dt;
}
}
}

public void Set_Calendar(object Sender, EventArgs E)
{
string theDate = drpCalMonth.SelectedItem.Value + " 1, " + drpCalYear.SelectedItem.Value;
DateTime dtFoo;
dtFoo = System.Convert.ToDateTime(theDate);
Calendar1.TodaysDate = dtFoo;
}

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
drpCalMonth.SelectedIndex = Calendar1.SelectedDate.Month - 1;
drpCalYear.SelectedItem.Selected = false;
drpCalYear.Items.FindByValue(Calendar1.SelectedDate.Year.ToString()).Selected = true;

PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString());
}

void Populate_MonthList()
{
drpCalMonth.Items.Add("January");
drpCalMonth.Items.Add("February");
drpCalMonth.Items.Add("March");
drpCalMonth.Items.Add("April");
drpCalMonth.Items.Add("May");
drpCalMonth.Items.Add("June");
drpCalMonth.Items.Add("July");
drpCalMonth.Items.Add("August");
drpCalMonth.Items.Add("September");
drpCalMonth.Items.Add("October");
drpCalMonth.Items.Add("November");
drpCalMonth.Items.Add("December");
string strMonth;

if (DateTextFrom.Text == "")
strMonth = DateTime.Now.ToString("MMMM");
else
strMonth = Convert.ToDateTime(DateTextFrom.Text).ToString("MMMM");

drpCalMonth.Items.FindByValue(strMonth).Selected = true;
}

void Populate_YearList()
{
int intYear;

for (intYear = DateTime.Now.Year - 20; intYear <= DateTime.Now.Year + 1; intYear++)
{
drpCalYear.Items.Add(intYear.ToString());
}

if (DateTextFrom.Text == "")
drpCalYear.Items.FindByValue(DateTime.Now.Year.ToString()).Selected = true;
else
{
string strYear = Convert.ToDateTime(DateTextFrom.Text).Year.ToString();
drpCalYear.Items.FindByValue(strYear).Selected = true;
}
}
}

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

We now can implement the user control into our ASPX page:

<%@ Register Src="CalendarControl.ascx" TagName="CalendarControl" TagPrefix="uc1" %>
<%@ Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>

<form id="form1" runat="server">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" Font-Bold="True" ForeColor="Black" ShowMessageBox="True" />
<asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true" EnablePartialRendering="true" />
<div>
Procedure Date: <uc1:CalendarControl ID="ucCalendar" DateTextFromValue="" runat="server" />
<p><asp:LinkButton id="LinkButton4" Text="Save" OnClick="SaveIt" CssCLASS="buttons" runat="server" /></p>
<p><asp:Label ID="lblOutput" Text="" runat=server></asp:Label></p>
</div>
</form>

Finally, we add the logic to our ASPX page:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
ucCalendar.DateTextFromValue = Request["Date"];
}
ucCalendar.DateTextRequired = true;
ucCalendar.DateTextRequiredText = "Date is required";
}

protected void SaveIt(object sender, EventArgs e)
{
if (Page.IsValid)
{
SaveDate(sender, e);
}
}

private void SaveDate(object sender, EventArgs e)
{
lblOutput.Text = "The date you selected was: <b>" + ucCalendar.DateTextFromValue + "</b>.";
}
}

Looking for the VB.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!

Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!



 
  Developer Resources







Server Intellect Rocks