AJAX-Enabled Advanced Calendar in ASP.NET and VB

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>
<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>
We used over 10 web hosting companies before we found Server Intellect. Their dedicated serversand 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">
<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:
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 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" %>

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


Comments

Post a Comment