|
Creating a Calendar-Controlled Diary in ASP.NET with C# |
|
In this tutorial, we will look at using the Calendar control as part of an interface to manage a diary-type application. In conjunction with the FormView control, we will use the Calendar to display diary entries for specific days. We will highlight each day that has a diary entry, and the user will have the ability to add entries on any day of the calendar. In addition to the two controls already mentioned, we will also use two SqlDataSource controls; one for the calendar control, and one for the FormView control. We will use the FormView to insert and update records in the database.
|
|
|
|
|
Getting Started |
We will start by creating a new C# project in Visual Studio.NET 2008. If you are using VS.NET 2005, you can still create this web application, but some additional steps may be required that are not covered in this article.Once we have our project created, we will go ahead and add a SQL Server Database. Right-click the App_Data folder in the Solution Explorer, then click Add New Item.. SQL Server Database. You can leave the name as Database.mdf or give it a name. Once the database has been added to our project, go over to the Server Explorer (left side, usually) and expand the Database we just created, then right-click the Tables folder and choose Add New Table: |
|
|
|
We will create three columns in this table - id, date, and todo. We will make the id the Primary Key and also the Identity Specification in the Properties. They should have the following data types:
|
|
|
Now we have set up our database, we can start building the web application. We do not need to add any entries to the database - we can wait until our application is built to do that.
We will begin by adding our Calendar control. Either drag a Calendar onto the design or code view from the toolbox, or simply type in the code view: |
|
<asp:Calendar ID="Calendar1" runat="server" DayNameFormat="Shortest">
</asp:Calendar> |
|
We can customize the look of the Calendar by going into design view and clicking the Smart Tag and choosing Auto Format. We will also be adding more attributes to the tags a little later. So let's move onto the SqlDataSource controls.
We can drag two onto our design or code view from the toolbox on the left.
|
<asp:SqlDataSource ID="todoSrc" runat="server">
</asp:SqlDataSource>
<asp:SqlDataSource ID="calendarSrc" runat="server">
</asp:SqlDataSource> |
|
Choose the Connection String from the dropdown and then hit Next. Here, we want to choose to Specify custom SQL statements, hit Next.We will be adding custom SQL queries for each one of these tabs: SELECT, UPDATE, and INSERT.
|
|
SELECT
SELECT * FROM tblDiary WHERE date=@date |
|
|
|
|
|
|
|
|
|
UPDATE
UPDATE tblDiary SET todo=@todo WHERE date=@date |
|
|
|
|
|
|
|
|
INSERT
INSERT tblDiary (date,todo) VALUES (@date,@todo)
|
Once these queries have been entered into the correct box, hit Next. You should now be presented with the Parameters window. This is where we define the parameters which will interact with our database. That is, when we use the SELECT query, we will be passing the SelectedDate value through the query to the database to retrieve only the diary entries for that particular date. |
|
|
So make sure the Paramter Source is set to Control, and the ControlID is set to that of the Calendar. Finally, we can click Next again and then Finish.Then we move onto the second SqlDataSource - let's do the same; click the Smart Tag and choose Configure Data Source, choose the Connection String from the dropdown and then we can just select the date column from the list:
This is because we are using this data source for the calendar, and for this, we just need to retrieve the dates from the database - so we can highlight the days the have entries in teh database.
Now that we have finished configuring our DataSources, they should look something like this:
|
|
|
|
<asp:SqlDataSource ID="todoSrc" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
InsertCommand="INSERT tblDiary (date,todo) VALUES (@date,@todo)"
SelectCommand="SELECT * FROM tblDiary WHERE date=@date"
UpdateCommand="UPDATE tblDiary 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 tblDiary">
</asp:SqlDataSource> |
You'll notice that we have two parameters for the SQL queries - one for select and one for insert, which are both the same. The reason we do not need these parameters for the update query is because we will be using the FormView Update Command, so we will just bind the variables with that template. We do this by defining an EditTemplate for the FormView:
|
<asp:FormView ID="FormView1" runat="server" AllowPaging="false" DataKeyNames="date"
DataSourceID="todoSrc" DefaultMode="Edit">
<EditItemTemplate>
<asp:Label ID="lblTodo" runat="server" AssociatedControlID="txtTodo" Text="Entry:" />
<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" /><br />
<asp:Label ID="lblEditStatus" runat="server" />
</EditItemTemplate>
</asp:FormView>
|
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!Notice that we assign the DataSourceID to the datasource with the parameters. Within the template, we create a form to allow editing of existing diary entries - we provide a textbox, which we bind the todo column to, and then also add a linkbutton to update the data. We assign this the CommandName of Update to ensure that we use the built-in functionality of the FormView.
We also need to create a template for inserting new entries. We can do this with the InsertItemTemplate tags: |
<asp:FormView ID="FormView1" runat="server" AllowPaging="false" DataKeyNames="date"
DataSourceID="todoSrc" DefaultMode="Edit">
<EditItemTemplate>
<asp:Label ID="lblTodo" runat="server" AssociatedControlID="txtTodo" Text="Entry:" />
<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" /><br />
<asp:Label ID="lblEditStatus" runat="server" />
</EditItemTemplate>
<InsertItemTemplate>
<asp:Label ID="lblTodo" runat="server" Text="Entry:" 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" />
<br />
<asp:Label ID="lblInsertStatus" runat="server" />
</InsertItemTemplate>
</asp:FormView> |
Now if we run this application, we are unable to add new entries to the database. This is because the default mode of the FormView is edit, so it will only currently show any existing entries. We can solve this by adding a button to the form to enable us to switch the the insert mode of the FormView:. |
| <asp:Button ID="butAddNew" runat="server" Text="Add New" onclick="butAddNew_Click" /> |
We can double-click the button in design view to create the onclick handler, and then add the following code to switch the FormView to insert mode: |
protected void butAddNew_Click(object sender, EventArgs e)
{
FormView1.ChangeMode(FormViewMode.Insert);
} |
Now we have finished the majority of our form, we can complete the Calendar control. We can customize the look with the Auto Format method mentioned earlier, and we also want to add an event handler. Go into design view and select the calendar. Click the Events button (lightning icon) in the Properties window then double-click on the DayRender and SelectionChanged events. This will create handlers in the code-behind for these events, meaning we can add code here to run when these events occur. |
|
|
| The DayRender event is called for each day the calendar will be displaying, when it is being rendered. This is where we will set the highlight for the days that have entries added to them. |
DataView todo = new DataView();
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.Red;
}
} |
|
| We simply set the back color of the cell if there is an entry in the database with the same date as the one that is currently being rendered.The SelectionChanged event is called when a new date is selected by the user. When this happens, we want to change the view of the FormView to edit so that any existing entry is displayed. If there isn't, then we can use the Add button to add a new entry. |
|
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
FormView1.ChangeMode(FormViewMode.Edit);
}
|
We can also set the calendar to display today's date easily by including this in the Page Load event:
|
|
protected void Page_Load(object sender, EventArgs e)
{
if(Calendar1.SelectedDate==DateTime.MinValue)
Calendar1.SelectedDate = Calendar1.TodaysDate;
}
|
Now if we run this web application, we will be presented with a calendar which we will be able to attach note entries to any day we select. |
