AJAX-Enabled Advanced Calendar in ASP.NET and VB

Categories

Advanced Technologies

User Interface and Themes

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

AJAX-Enabled Advanced Calendar in ASP.NET and VB

ASP.NET AJAX Tutorial

This tutorial is a more advanced versions 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. VB 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>
<namespaces>

</namespaces>

</pages>

We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

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="VB" AutoEventWireup="true" CodeFile="CalendarControl.ascx.vb" 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">

<table>

<tr>

<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>

<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">

</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:

Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls

Partial Class CalendarControl

Inherits System.Web.UI.UserControl

Public Property DateTextFromValue() As String

Get

Return DateTextFrom.Text

End Get
Set(ByVal value As String)

DateTextFrom.Text = value

End Set

End Property

Public Property DateTextRequired() As Boolean

Get

Return DateTextFromRequired.Enabled

End Get
Set(ByVal value As Boolean)

DateTextFromRequired.Enabled = value

End Set

End Property

Public Property DateTextRequiredText() As String

Get

Return DateTextFromRequired.ErrorMessage

End Get
Set(ByVal value As String)

DateTextFromRequired.ErrorMessage = value

End Set

End Property

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

Populate_MonthList()
Populate_YearList()
Dim dt As Date
If DateTextFrom.Text <> "" Then

dt = DateTextFrom.Text
Calendar1.TodaysDate = dt

End If

End Sub

Protected Sub Set_Calendar(ByVal sender As Object, ByVal e As System.EventArgs)

Dim theDate As String = drpCalMonth.SelectedItem.Value + " 1, " + drpCalYear.SelectedItem.Value
Dim dtFoo As DateTime = System.Convert.ToDateTime(theDate)
Calendar1.TodaysDate = dtFoo

End Sub

Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)

drpCalMonth.SelectedIndex = Calendar1.SelectedDate.Month - 1
drpCalYear.SelectedItem.Selected = False
drpCalYear.Items.FindByValue(Calendar1.SelectedDate.Year).Selected = True

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

End Sub

Sub 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")

Dim strMonth As String

If DateTextFrom.Text = "" Then

strMonth = DateTime.Now.ToString("MMMM")

Else

strMonth = CDate(DateTextFrom.Text.ToString).ToString("MMMM")

End If

drpCalMonth.Items.FindByValue(strMonth).Selected = True

End Sub

Sub Populate_YearList()

Dim intYear As Integer

For intYear = DateTime.Now.Year - 20 To DateTime.Now.Year + 1

drpCalYear.Items.Add(intYear.ToString())

Next
Dim strYear As String

If DateTextFrom.Text = "" Then

drpCalYear.Items.FindByValue(DateTime.Now.Year.ToString()).Selected = True

Else

strYear = CDate(DateTextFrom.Text.ToString).Year.ToString
drpCalYear.Items.FindByValue(strYear).Selected = True

End If

End Sub

End Class

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" %>

<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>

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

Finally, we add the logic to our ASPX page:

Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls

Partial Public Class _Default

Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

If (Not Page.IsPostBack) Then

ucCalendar.DateTextFromValue = Request("Date")

End If
ucCalendar.DateTextRequired = True
ucCalendar.DateTextRequiredText = "Date is required"

End Sub

Protected Sub SaveIt(ByVal sender As Object, ByVal e As EventArgs)

If Page.IsValid Then

SaveDate(sender, e)

End If

End Sub

Private Sub SaveDate(ByVal sender As Object, ByVal e As EventArgs)

lblOutput.Text = "The date you selected was: <b>" & ucCalendar.DateTextFromValue & "</b>."

End Sub

End Class

Looking for the C#.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