This brief article will show how easy it is to make the calendar control more dynamic and usable, by implementing AJAX to input the selected date into a textbox for submission without using PostBack
We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
First, we create an ‘AJAX-Enabled Web Site’ in Visual Studio .NET
which will give us our ScriptManager tag, and also the AJAX assembly references in the Web.config:
Start by adding an AJAX ToolScript Manager, to your web page.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
We then create a TextBox control and a Calendar control:Feel free to add styling to the calendar, Format it to whatever you would like it to look like.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Calendar1" EventName="SelectionChanged" />
</Triggers>
<ContentTemplate>
<asp:Calendar ID="Calendar1" runat="server"
OnSelectionChanged="Calendar1_SelectionChanged" BackColor="White"
BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana"
Font-Size="9pt" ForeColor="Black" Height="250px" NextPrevFormat="ShortMonth"
Width="330px">
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333"
Height="8pt" />
<DayStyle BackColor="#CCCCCC" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
<OtherMonthDayStyle ForeColor="#999999" />
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True"
Font-Size="12pt" ForeColor="White" Height="12pt" />
<TodayDayStyle BackColor="#999999" ForeColor="White" />
</asp:Calendar>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!Note that the Calendar has a OnSelectionChanged attribute, and that both the controls are within the UpdatePanel tags. This will ensure that these controls are refreshed when the trigger is activated.
The only code we need is below. This is executed when the selection of the calendar control is changed (when the user clicks on a new date). When this happens, the method PutDateInBox is called and the date is input into the textbox control, from the calendar control.
public partial class _Default : System.Web.UI.Page
{
protected void Page_Loadundefinedobject sender, EventArgs e)
{
}
protected void Calendar1_SelectionChangedundefinedobject sender, EventArgs e)
{
PutDateInBoxundefined);
}
protected void PutDateInBoxundefined)
{
TextBox1.Text = Calendar1.SelectedDate.ToStringundefined"MM/dd/yyyy");
}
}
Now hit F5 and let’s see your priceless work of art!See how easy that was?
Not as easy when,
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
Great job!
You successfully created a Dynamic calendar using AJAX without causing postback.
Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.
