ASP.NET Duration UserControl

Recently, I had need for a “duration control” that would allow users to view, edit and update a duration in hours, minutes and seconds. The result of the user selection needed to be stored as an integer in a database (as seconds) and then converted back to hour, minutes and seconds for display. In read only mode the duration needed to be displayed as a single label whilst in edit mode I wanted a reasonably foolproof interface for my users.

I decided to create a ASP.NET UserControl that consisted of, in edit mode, a textbox for the hours, and two dropdownlists for the minutes and seconds, whilst in read only mode, a label as shown below:

Read-Only Mode (used on a ASPX page):

Duration Control - View

Edit Mode (used on a ASPX page):

Duration Control - Edit

The code for this usercontrol is shown below:

HTML

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ctrlDuration.ascx.vb" Inherits="UserControls_ctrlDuration" %>
<asp:Panel ID="pnlDisplay" runat="server">
<asp:Label ID="lblDuration" runat="server" Text=""></asp:Label>
</asp:Panel>
<asp:Panel ID="pnlEdit" runat="server">
Hours:
<asp:TextBox ID="txtHours" runat="server" Text="00"></asp:TextBox>
Minutes:
<asp:DropDownList ID="ddlMinutes" runat="server">
<asp:ListItem Selected="True">0</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
<asp:ListItem>7</asp:ListItem>
<asp:ListItem>8</asp:ListItem>
<asp:ListItem>9</asp:ListItem>
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>11</asp:ListItem>
<asp:ListItem>12</asp:ListItem>
<asp:ListItem>13</asp:ListItem>
<asp:ListItem>14</asp:ListItem>
<asp:ListItem>15</asp:ListItem>
<asp:ListItem>16</asp:ListItem>
<asp:ListItem>17</asp:ListItem>
<asp:ListItem>18</asp:ListItem>
<asp:ListItem>19</asp:ListItem>
<asp:ListItem>20</asp:ListItem>
<asp:ListItem>21</asp:ListItem>
<asp:ListItem>22</asp:ListItem>
<asp:ListItem>23</asp:ListItem>
<asp:ListItem>24</asp:ListItem>
<asp:ListItem>25</asp:ListItem>
<asp:ListItem>26</asp:ListItem>
<asp:ListItem>27</asp:ListItem>
<asp:ListItem>28</asp:ListItem>
<asp:ListItem>29</asp:ListItem>
<asp:ListItem>30</asp:ListItem>
<asp:ListItem>31</asp:ListItem>
<asp:ListItem>32</asp:ListItem>
<asp:ListItem>33</asp:ListItem>
<asp:ListItem>34</asp:ListItem>
<asp:ListItem>35</asp:ListItem>
<asp:ListItem>36</asp:ListItem>
<asp:ListItem>37</asp:ListItem>
<asp:ListItem>38</asp:ListItem>
<asp:ListItem>39</asp:ListItem>
<asp:ListItem>40</asp:ListItem>
<asp:ListItem>41</asp:ListItem>
<asp:ListItem>42</asp:ListItem>
<asp:ListItem>43</asp:ListItem>
<asp:ListItem>44</asp:ListItem>
<asp:ListItem>45</asp:ListItem>
<asp:ListItem>46</asp:ListItem>
<asp:ListItem>47</asp:ListItem>
<asp:ListItem>48</asp:ListItem>
<asp:ListItem>49</asp:ListItem>
<asp:ListItem>50</asp:ListItem>
<asp:ListItem>51</asp:ListItem>
<asp:ListItem>52</asp:ListItem>
<asp:ListItem>53</asp:ListItem>
<asp:ListItem>54</asp:ListItem>
<asp:ListItem>55</asp:ListItem>
<asp:ListItem>56</asp:ListItem>
<asp:ListItem>57</asp:ListItem>
<asp:ListItem>58</asp:ListItem>
<asp:ListItem>59</asp:ListItem>
</asp:DropDownList>
Seconds:
<asp:DropDownList ID="ddlSeconds" runat="server">
<asp:ListItem Selected="True">0</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
<asp:ListItem>7</asp:ListItem>
<asp:ListItem>8</asp:ListItem>
<asp:ListItem>9</asp:ListItem>
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>11</asp:ListItem>
<asp:ListItem>12</asp:ListItem>
<asp:ListItem>13</asp:ListItem>
<asp:ListItem>14</asp:ListItem>
<asp:ListItem>15</asp:ListItem>
<asp:ListItem>16</asp:ListItem>
<asp:ListItem>17</asp:ListItem>
<asp:ListItem>18</asp:ListItem>
<asp:ListItem>19</asp:ListItem>
<asp:ListItem>20</asp:ListItem>
<asp:ListItem>21</asp:ListItem>
<asp:ListItem>22</asp:ListItem>
<asp:ListItem>23</asp:ListItem>
<asp:ListItem>24</asp:ListItem>
<asp:ListItem>25</asp:ListItem>
<asp:ListItem>26</asp:ListItem>
<asp:ListItem>27</asp:ListItem>
<asp:ListItem>28</asp:ListItem>
<asp:ListItem>29</asp:ListItem>
<asp:ListItem>30</asp:ListItem>
<asp:ListItem>31</asp:ListItem>
<asp:ListItem>32</asp:ListItem>
<asp:ListItem>33</asp:ListItem>
<asp:ListItem>34</asp:ListItem>
<asp:ListItem>35</asp:ListItem>
<asp:ListItem>36</asp:ListItem>
<asp:ListItem>37</asp:ListItem>
<asp:ListItem>38</asp:ListItem>
<asp:ListItem>39</asp:ListItem>
<asp:ListItem>40</asp:ListItem>
<asp:ListItem>41</asp:ListItem>
<asp:ListItem>42</asp:ListItem>
<asp:ListItem>43</asp:ListItem>
<asp:ListItem>44</asp:ListItem>
<asp:ListItem>45</asp:ListItem>
<asp:ListItem>46</asp:ListItem>
<asp:ListItem>47</asp:ListItem>
<asp:ListItem>48</asp:ListItem>
<asp:ListItem>49</asp:ListItem>
<asp:ListItem>50</asp:ListItem>
<asp:ListItem>51</asp:ListItem>
<asp:ListItem>52</asp:ListItem>
<asp:ListItem>53</asp:ListItem>
<asp:ListItem>54</asp:ListItem>
<asp:ListItem>55</asp:ListItem>
<asp:ListItem>56</asp:ListItem>
<asp:ListItem>57</asp:ListItem>
<asp:ListItem>58</asp:ListItem>
<asp:ListItem>59</asp:ListItem>
</asp:DropDownList>
<asp:CompareValidator ID="cvlDuration" runat="server"
ErrorMessage="Hours must be a whole number" ControlToValidate="txtHours"
Operator="GreaterThanEqual" Type="Integer" ValueToCompare="0">*</asp:CompareValidator>
</asp:Panel>

Code-Behind

Partial Class UserControls_ctrlDuration
Inherits System.Web.UI.UserControl
Public WriteOnly Property DisplayOnly() As Boolean
Set(ByVal value As Boolean)
If value Then
pnlDisplay.Visible = True
pnlEdit.Visible = False
Else
pnlDisplay.Visible = False
pnlEdit.Visible = True
End If
End Set
End Property
Public Property Duration() As Integer
Get
Return CInt(txtHours.Text * 3600) + CInt(ddlMinutes.SelectedValue * 60) + CInt(ddlSeconds.SelectedValue)
End Get
Set(ByVal value As Integer)
txtHours.Text = (value 3600)
ddlMinutes.SelectedValue = ((value 60) Mod 60)
ddlSeconds.SelectedValue = (value Mod 60)
lblDuration.Text = (value 3600) & " hours " & ((value 60) Mod 60) & " minutes " & (value Mod 60) & " seconds"
End Set
End Property
End Class

Then in the ASPX page that makes use of this usercontrol we need to register it:

<%@ Register src="ctrlDuration.ascx" tagname="ctrlDuration" tagprefix="uc1" %>

Finally on the page we can use it inside a formview control for example as shown below (omitting all the other datasource controls etc.):

In the ItemTemplate section we would use it in read only mode:

<uc1:ctrlDuration ID="ctrlResponse" runat="server" Duration='<%# Bind("iResponseDuration") %>' DisplayOnly="True" />

Whilst in the EditItemTemplate and InsertItemTemplate we would use it in edit mode:

<uc1:ctrlDuration ID="ctrlResponse" runat="server" Duration='<%# Bind("iResponseDuration") %>' DisplayOnly="False" />

Hope it may be of use. As always comments (positive and negative) always welcome.

• ASP.NET
• user control