Article
Beginning ASP.NET Using VB.NET - Chapter 14: ASP.NET Server Controls
4. You'll now add a Label control to the page, which will later serve to provide some date selection feedback to the user, regarding the currently selected date. Add these lines after the declaration of the Calendar control, and just before the </form> end tag:
<body>
...
<p align="center">
<asp:label id="SelectedDate" runat="server" font-size="Large" />
</p>
</form>
</body>
5. The final visual components used in this example consist of two controls: the Panel and Repeater controls. When a user selects a date from the calendar, the OnSelectionChanged event (for which we assigned the handler in step 2) will be raised by the Calendar control. This will enable us to gather an ArrayList of all daily events and bind them to the Repeater control. The ASP.NET Panel control serves as a container for the Repeater control, and will be used to control the visibility state of the displayed Repeater elements (when the Panel control's Visible property is set to false, all corresponding child controls, like the Repeater control, are also hidden).
The code we're adding here, just sets up the Repeater control (within the panel control) and establishes the properties of the templates, which will be used to display our information. Insert the following ASP.NET Panel and Repeater control declarations before the final </form> end tag:
<body>
...
<asp:panel id="DailyDetailsPanel" runat="server">
<asp:Repeater id="DailyEventDetailRepeater" runat="server">
<HeaderTemplate> <p align="center">
<table border="1" width="100%">
<table style="color:Black;border collapse:collapse;">
<tr style="color:White;background-color:DodgerBlue;font
-weight:bold;">
<td><b>Event</b></td>
<td><b>Description</b></td>
<td><b>Start Time</b></td>
<td><b>End Time</b></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr style="background-color:White;">
<td> <%# DataBinder.Eval(Container.DataItem, "ShortDesc") %>
</td>
<td> <%# DataBinder.Eval(Container.DataItem, "DetailDesc")%>
</td>
<td> <%# DataBinder.Eval(Container.DataItem, "StartTime") %>
</td>
<td> <%# DataBinder.Eval(Container.DataItem, "EndTime") %>
</td>
</tr>
</ItemTemplate >
<AlternatingItemTemplate>
<tr style="background-color:Gainsboro;">
<td> <%# DataBinder.Eval(Container.DataItem, "ShortDesc") %>
</td>
<td> <%# DataBinder.Eval(Container.DataItem, "DetailDesc")%>
</td>
<td> <%# DataBinder.Eval(Container.DataItem, "StartTime") %>
</td>
<td> <%# DataBinder.Eval(Container.DataItem, "EndTime") %>
</td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</p>
</FooterTemplate>
</asp:Repeater>
</asp:panel>
</form>
</body>
6. At this point, all the visual components used in MyCalendar.aspx have been declared and set up. Over the next few steps, we will add the method and event handler code implementations between the <script> </script> tags of the page. Add the following code for the Page_Load method implementation:
<script language="VB" runat="server">
Protected Sub Page_Load(ByVal Sender As System.Object, _
ByVal e As System.EventArgs)
If Not IsPostback Then
ShowDailyEvents()
End If
End Sub
</script>
In this listing, the IsPostback property is checked to see if this is the first time the page has been loaded -- if so, a method, ShowDailyEvents, is called, which will perform the work of binding and displaying the daily event data in the Repeater control. We'll define ShowDailyEvents shortly.