This tutorial will show you how to use a SQL database, a SQL database, and the Calendar and FormView Controls to create an organizer to keep track of events of different days. C# version.
Looking for more .NET Database Tutorials? Click Here!
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
The Calendar ASP.NET control can be very useful, and when used in conjunction with AJAX, it can become very powerful and usable. In this tutorial, we will be creating an organizer using the calendar control that will allow entries to be input on different days of the calendar. To do this, we use a SQL database and store the date and the event info. We will also be using the FormView control to add new entries to the calendar. We can highlight the days that have events listed in the database, and then when clicked, the FormView will display the event info from the database.
We can provide all this functionality with little code-behind, and make use of the built-in controls and their functions. We will be using the Calendar, FormView, Button and SqlDataSource Controls.
To start, we will create our database. Start a new C# web application project in Visual Studio, then right-click the project in Solution Explorer and choose Add New Item.. SQL Server Database. We will create one table with two columns - date and todo. The date column will be of type datetime and will be used to store the date at which the event occurs, and the todo column will be of type varchar and will be used to store the event info.
Once we have the database set up, we will start to build our ASPX page. Let's first drag from the toolbox the SqlDataSource controls:
<form id="form1" runat="server">
<asp:SqlDataSource ID="todoSrc" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>" DeleteCommand="DELETE tblTodo WHERE date=@date" InsertCommand="INSERT tblTodo (date,todo) VALUES (@date,@todo)" SelectCommand="SELECT * FROM tblTodo WHERE date=@date" UpdateCommand="UPDATE tblTodo SET todo=@todo WHERE date=@date"> <SelectParameters>
<asp:ControlParameter Name="date" ControlID="Calendar1" PropertyName="SelectedDate" /> </SelectParameters> <InsertParameters>
<asp:ControlParameter Name="date" ControlID="Calendar1" PropertyName="SelectedDate" /> </InsertParameters> </asp:SqlDataSource> <asp:SqlDataSource ID="calendarSrc" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT date FROM tblTodo"> </asp:SqlDataSource> |
Here we declare the SQL statements for interacting with our database. We can choose to either type this all in, or do it the graphical way through the Smart Tag in Design View and then clicking on Configure Data Source.
The Select and Insert Parameters refer to the Calendar control that will look something like this:
| <asp:Calendar ID="Calendar1" runat="server" /> |
Now in Design View, click on the Calendar control and then click on the Events button (lightning bolt) at the top of the Properties Window, then double click the DayRender and SelectionChanged to create event handlers in the back-end. This will also add the following attributes to the ASPX code:
| <asp:Calendar ID="Calendar1" runat="server" ondayrender="Calendar1_DayRender" onselectionchanged="Calendar1_SelectionChanged" /> |
Next, we will finish off the ASPX page by adding the FormView control and the AJAX functionality - ScriptManager and UpdatePanel:
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" /> <asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate> <asp:Calendar ID="Calendar1" runat="server" ondayrender="Calendar1_DayRender"
onselectionchanged="Calendar1_SelectionChanged" /> <br /> <asp:FormView ID="FormView1" runat="server" AllowPaging="true" DataKeyNames="date"
DataSourceID="todoSrc" DefaultMode="Edit"> <EditItemTemplate>
<asp:Label ID="lblTodo" runat="server" AssociatedControlID="txtTodo" Text="Todo:" /> <br /> <asp:TextBox ID="txtTodo" runat="server" TextMode="MultiLine" Columns="30" Rows="5"
Text="<%# Bind('todo') %>" /> <br /> <asp:LinkButton ID="butUpdate" runat="server" Text="Update" CommandName="Update" /> </EditItemTemplate> <InsertItemTemplate>
<asp:Label ID="lblTodo" runat="server" Text="Todo:" AssociatedControlID="txtTodo" /> <br /> <asp:TextBox ID="txtTodo" runat="server" Text="<%# Bind('todo') %>"
TextMode="MultiLine" Columns="30" Rows="5" /> <br /> <asp:Button ID="butInsert" runat="server" Text="Add" CommandName="Insert" /> </InsertItemTemplate> </asp:FormView> <br /> <asp:Button ID="butAddNew" runat="server" Text="Add"
onclick="butAddNew_Click" />
</ContentTemplate> </asp:UpdatePanel> <asp:SqlDataSource ID="todoSrc" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>" DeleteCommand="DELETE tblTodo WHERE date=@date" InsertCommand="INSERT tblTodo (date,todo) VALUES (@date,@todo)" SelectCommand="SELECT * FROM tblTodo WHERE date=@date" UpdateCommand="UPDATE tblTodo SET todo=@todo WHERE date=@date"> <SelectParameters>
<asp:ControlParameter Name="date" ControlID="Calendar1" PropertyName="SelectedDate" /> </SelectParameters> <InsertParameters>
<asp:ControlParameter Name="date" ControlID="Calendar1" PropertyName="SelectedDate" /> </InsertParameters> </asp:SqlDataSource> <asp:SqlDataSource ID="calendarSrc" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT date FROM tblTodo"> </asp:SqlDataSource> </form> |
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
We have now added a FormView control and created two templates - edit and insert. The edit will be used to display and edit the event info, and the insert template is the form used to add new events to the selected date.
Notice too that we have created an event handler for the submit button. In the code behind, we can add the logic:
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
DataView todo = new DataView(); protected void Page_Load(object sender, EventArgs e) {
if (Calendar1.SelectedDate == DateTime.MinValue)
Calendar1.SelectedDate = Calendar1.TodaysDate; } void Page_PreRender() {
todo = (DataView)calendarSrc.Select(DataSourceSelectArguments.Empty);
todo.Sort = "date"; } protected void Calendar1_DayRender(object sender, DayRenderEventArgs e) {
if (todo.FindRows(e.Day.Date).Length > 0)
e.Cell.BackColor = System.Drawing.Color.Yellow; } protected void Calendar1_SelectionChanged(object sender, EventArgs e) {
FormView1.ChangeMode(FormViewMode.Edit); } protected void butAddNew_Click(object sender, EventArgs e) {
FormView1.ChangeMode(FormViewMode.Insert); } |
Upon Page Load, we set the calendar's day to the current date.
In the DayRender event, we set the background color to yellow if an event exists in the database for that particular day.
On each Selection of the Calendar date, we change the mode of the FormView to Edit, so that it displays the event, if one exists.
When the add button is clicked, we change the mode of the FormView to insert so that the user can add a new event for the current date.
Looking for more .NET Database Tutorials? Click Here!
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
|