Return to the menu

Make an Appointment demo using most of DES's controls

Your contact information

Fields marked * require an entry.  
 *
 *
 *
 
 *
 *
 *
 *

Appointment details


 *
 Blocks (1 block = 30 minutes)
Total time: 30 minutes





 *

We will contact you to confirm

 
 *
()- ext:
 *
   
WARNING: This demo is using a real database to demonstrate the full process. Do no enter personal contact information unless you are comfortable with it being stored in a database operated by PeterBlum.com.

Walkthrough

 

The form to the left allows a user to create an appointment. It includes many of the controls found in Peter's Data Entry Suite. As you go through this walkthough, it will point out features for you to explore further, either by playing in the form or going into more coding details.

This form is actually connected to a database and uses LINQ to SQL to write out a record. It uses a FormView control and LinqDataSource as recommended by Microsoft for two-way databinding. The database has two tables, AppointmentDemo, which hosts the actual records written and AppointmentOptionsDemo, which hosts the items shown in the Appointment Options DropDownList.

You can explore the full code using the Source Code Browser below while this walkthrough will break down the page's code into its parts.

The first few controls are not visible on the page. Let's start with them. Click Next to begin.

Find by DES feature:
 






Source code browser

<%control language="C#" autoeventwireup="true" inherits="AppointmentDemoContent, App_Web_content.ascx.5eab919f" %>
<h1>Make an Appointment demo using most of DES's controls</h1>
<div class="ApptDemoBody">
<des:PageManager ID="PageManager1" runat="server" 
   DefaultErrorFormatterSkinID="{Display='Dynamic' BlinkCssClass='BlinkOnMsg' }"
   ChangeStyleOnControlsWithError="True"
   HiliteFieldsNearbyError="True" SubmitOrder="ValidateConfirmCustom" 
   BlinkOnSubmit="Three" >
   <ChangeMonitor Enabled="True" MonitorKeystrokes="True" />
</des:PageManager>
<des:PageSecurityValidator id="PageSecurityValidator1" runat="server" 
   ErrorMessage="An illegal entry was made using Script or SQL Injection.{NEWLINE} It has been logged." >
</des:PageSecurityValidator>
<asp:LinqDataSource id="AppointmentLinqDataSource" runat="server" EnableInsert="true"
   TableName="AppointmentDemos"
   EntityTypeName="PeterBlum.AppointmentDemo.AppointmentOption"
   ContextTypeName="PeterBlum.AppointmentDemo.AppointmentDemoDataContext" />
<asp:FormView id="FormView1" runat="server" 
   DataSourceID="AppointmentLinqDataSource" 
   DefaultMode="Insert" 
   OnItemInserting="FormView1_ItemInserting" 
   OnItemInserted="FormView1_ItemInserted"  >
   <InsertItemTemplate>
     <h3>Your contact information</h3>
      <des:RequiredFieldsDescription ID="RequiredFieldsDescription1" runat="server">{DEFAULT}</des:RequiredFieldsDescription>  
      <asp:Label ID="WarningLabel" runat="server" CssClass="ErrorsShownMsg">Errors were found.</asp:Label>
      <table id="ContactInfo" runat="server" class="ApptTable">
         <tr runat="server">
            <th runat="server" class="ApptTitleColumn" valign="top">
               <asp:Label ID="FirstNameLabel" runat="server" AssociatedControlID="FirstNameTextBox">First Name</asp:Label>
            </th>
            <td runat="server" class="ApptDataColumn">
               <des:TextBox ID="FirstNameTextBox" runat="server" CssClass="ApptDemoTextBox" Text='<%# Bind("FirstName")%>' />
            </td>
            <td runat="server" class="ApptMsgColumn">
               <des:RequiredTextValidator ID="FirstNameRFV" runat="server" 
                  ErrorMessage="This field requires a value."
                  SummaryErrorMessage="{LABEL} requires a value."
                  Label-LabelControlID="FirstNameLabel" ShowRequiredFieldMarker="True" 
                  ControlIDToEvaluate="FirstNameTextBox">
               </des:RequiredTextValidator>
               <des:RegexValidator ID="FirstNameRxV" runat="server" 
                  ErrorMessage="This does not appear to be a valid name."
                  SummaryErrorMessage="{LABEL} does not appear to be a valid name."
                  Label-LabelControlID="FirstNameLabel" 
                  ControlIDToEvaluate="FirstNameTextBox" Expression="^([A-Za-z]|-|\s)+$">
               </des:RegexValidator>
            </td>
         </tr>
         <tr runat="server">
            <th runat="server" class="ApptTitleColumn" valign="top">
               <asp:Label ID="LastNameLabel" runat="server" AssociatedControlID="LastNameTextBox">Last Name</asp:Label>
            </th>
            <td runat="server" valign="top" class="ApptDataColumn">
               <des:TextBox ID="LastNameTextBox" runat="server" CssClass="ApptDemoTextBox" Text='<%# Bind("LastName")%>'/>
            </td>
            <td runat="server" valign="top" class="ApptMsgColumn">
               <des:RequiredTextValidator ID="LastNameRTV" runat="server" 
                  ErrorMessage="This field requires a value."
                  SummaryErrorMessage="{LABEL} requires a value."
                  Label-LabelControlID="LastNameLabel" ShowRequiredFieldMarker="True" 
                  ControlIDToEvaluate="LastNameTextBox">
               </des:RequiredTextValidator>
               <des:MultiConditionValidator ID="LastNameMCV" runat="server" 
                  ErrorMessage="This does not appear to be a valid name." 
                  SummaryErrorMessage="{LABEL} does not appear to be a valid name."
                  Label-LabelControlID="LastNameLabel" 
                  Operator="AND">
                  <Conditions>
                     <des:RegexCondition ControlIDToEvaluate="LastNameTextBox" Expression="^([A-Za-z]|-|\s)+$" />
                     <des:TextLengthCondition ControlIDToEvaluate="LastNameTextBox" Maximum="40" 
                        Minimum="2" IgnoreBlankText="true"/>
                  </Conditions>
               </des:MultiConditionValidator>
            </td>
         </tr>
         <tr runat="server">
            <th runat="server" class="ApptTitleColumn" valign="top" >
               <asp:Label ID="Address1Label" runat="server" AssociatedControlID="Address1TextBox">Address 1</asp:Label>
            </th>
            <td runat="server" valign="top" class="ApptDataColumn">
               <des:TextBox ID="Address1TextBox" runat="server" CssClass="ApptDemoTextBox" Text='<%# Bind("Address1")%>' />
            </td>
            <td runat="server" valign="top" class="ApptMsgColumn">
               <des:RequiredTextValidator ID="Address1RTV" runat="server" 
                  ErrorMessage="This field requires a value."
                  SummaryErrorMessage="{LABEL} requires a value."
                  Label-LabelControlID="Address1Label" ShowRequiredFieldMarker="True" 
                  ControlIDToEvaluate="Address1TextBox">
               </des:RequiredTextValidator>
            </td>
         </tr>
         <tr runat="server">
            <th runat="server" valign="top" class="ApptTitleColumn">
               <asp:Label ID="Address2Label" runat="server" AssociatedControlID="Address2TextBox">Address 2</asp:Label>
            </th>
            <td runat="server" valign="top" class="ApptDataColumn">
               <des:TextBox ID="Address2TextBox" runat="server" CssClass="ApptDemoTextBox"  Text='<%# Bind("Address2")%>' />
            </td>
            <td runat="server" valign="top" class="ApptMsgColumn">
                
            </td>
         </tr>
         <tr runat="server">
            <th runat="server" valign="top" class="ApptTitleColumn">
               <asp:Label ID="CityLabel" runat="server" AssociatedControlID="CityTextBox">City</asp:Label>
            </th>
            <td runat="server" valign="top" class="ApptDataColumn">
               <des:FilteredTextBox ID="CityTextBox" runat="server" CssClass="ApptDemoTextBox" 
                  Space="True" LettersUppercase="True" LettersLowercase="True" OtherCharacters="-.,'"
                  Text='<%# Bind("City")%>' />
            </td>
            <td runat="server" valign="top" class="ApptMsgColumn">
               <des:RequiredTextValidator ID="CityRTV" runat="server" 
                  ErrorMessage="This field requires a value."
                  SummaryErrorMessage="{LABEL} requires a value."
                  Label-LabelControlID="CityLabel" ShowRequiredFieldMarker="True" 
                  ControlIDToEvaluate="CityTextBox">
               </des:RequiredTextValidator>
               <des:MultiConditionValidator ID="CityMCV" runat="server" 
                  ErrorMessage="This does not appear to be a valid name." 
                  SummaryErrorMessage="City does not appear to be a valid name."
                  Operator="AND">
                  <Conditions>
                     <des:CharacterCondition ControlIDToEvaluate="CityTextBox" />
                     <des:TextLengthCondition ControlIDToEvaluate="CityTextBox" Maximum="40" Minimum="2" IgnoreBlankText="true" />
                  </Conditions>
               </des:MultiConditionValidator>
            </td>
         </tr>
         <tr runat="server">
            <th runat="server" valign="top" class="ApptTitleColumn">
               <asp:Label ID="RegionLabel" runat="server" AssociatedControlID="RegionTextBox">State</asp:Label>
            </th>
            <td runat="server" valign="top" class="ApptDataColumn">
               <des:FilteredTextBox ID="RegionTextBox" runat="server" CssClass="ApptDemoTextBox" 
                  LettersUppercase="True" LettersLowercase="True" OtherCharacters="-" 
                  Text='<%# Bind("Region")%>' />
            </td>
            <td runat="server" valign="top" class="ApptMsgColumn">
               <des:RequiredTextValidator ID="RegionRTV" runat="server" 
                  ErrorMessage="This field requires a value."
                  SummaryErrorMessage="{LABEL} requires a value."
                  Label-LabelControlID="RegionLabel" ShowRequiredFieldMarker="True" 
                  ControlIDToEvaluate="RegionTextBox">
               </des:RequiredTextValidator>
            </td>
         </tr>
         <tr runat="server">
            <th runat="server" valign="top" class="ApptTitleColumn">
               <asp:Label ID="PostalCodeLabel" runat="server" AssociatedControlID="PostalCodeTextBox">Zip Code</asp:Label>
            </th>
            <td runat="server" valign="top" class="ApptDataColumn">
               <des:FilteredTextBox ID="PostalCodeTextBox" runat="server" CssClass="ApptDemoTextBoxMedium" 
                  OtherCharacters="-" Digits="True" 
                  Text='<%# Bind("PostalCode")%>' />
            </td>
            <td runat="server" valign="top" class="ApptMsgColumn">
               <des:RequiredTextValidator ID="PostalCodeRTV" runat="server" 
                  ErrorMessage="This field requires a value."
                  SummaryErrorMessage="{LABEL} requires a value."
                  Label-LabelControlID="PostalCodeLabel" ShowRequiredFieldMarker="True" 
                  ControlIDToEvaluate="PostalCodeTextBox" >
               </des:RequiredTextValidator>
               <des:RegexValidator ID="PostalCodeRxV" runat="server" 
                  ErrorMessage="Enter a valid zip code"
                  ControlIDToEvaluate="PostalCodeTextBox" Expression="^\d{5}(-\d{4})?$" >
               </des:RegexValidator>
            </td>
         </tr>
         <tr runat="server">
            <th runat="server" valign="top" class="ApptTitleColumn">
               <asp:Label ID="AgeLabel" runat="server" AssociatedControlID="AgeTextBox">Age</asp:Label>
            </th>
            <td runat="server" valign="top" class="ApptDataColumn">
               <des:IntegerTextBox id="AgeTextBox" runat="server" CssClass="ApptDemoTextBoxMedium" 
                  ShowSpinner="True" AllowNegatives="False"
                  IntegerBindable='<%# Bind("Age")%>'
                  Hint="Under 18 must be accompanied by a parent or guardian." />
            </td>
            <td runat="server" valign="top" class="ApptMsgColumn">
               <des:RequiredTextValidator ID="AgeRTV" runat="server" 
                  ErrorMessage="This field requires a value."
                  SummaryErrorMessage="{LABEL} requires a value."
                  Label-LabelControlID="AgeLabel" 
                  ShowRequiredFieldMarker="True" ControlIDToEvaluate="AgeTextBox">
               </des:RequiredTextValidator>
               <des:DataTypeCheckValidator id="AgeDTC" runat="server"
                  ErrorMessage="This field must contain only numbers."
                  SummaryErrorMessage="{LABEL} must contain only numbers."
                  Label-LabelControlID="AgeLabel" 
                  ControlIDToEvaluate="AgeTextBox">
               </des:DataTypeCheckValidator>
               <des:RangeValidator ID="AgeRgV" runat="server" 
                  ErrorMessage="Age must be between {MINIMUM} and {MAXIMUM}"
                  SummaryErrorMessage="{LABEL} must be between {MINIMUM} and {MAXIMUM}."
                  Label-LabelControlID="AgeLabel" 
                  ControlIDToEvaluate="AgeTextBox" Maximum="110" Minimum="1">
               </des:RangeValidator>
               <des:RangeValidator ID="UnderAgeWarningRgV" runat="server" 
                  ErrorMessage="NOTE: Under 18 must be accompanied by a parent or guardian"
                  ControlIDToEvaluate="AgeTextBox" Minimum="18" EventsThatValidate="WarningMode">
                  <ErrorFormatterContainer>
                     <des:TextErrorFormatter Display="Dynamic" ForeColor="Black" BlinkAllowed="false" />
                  </ErrorFormatterContainer>
               </des:RangeValidator>
            </td>
         </tr>
      </table>
      <h3>Appointment details</h3>
      <table id="ApptDetails" runat="server" class="ApptTable">
         <tr runat="server">
            <th runat="server" valign="top" class="ApptTitleColumn">
               <asp:Label ID="AppointmentLabel" runat="server" AssociatedControlID="ApptDateTextBox">Date and time</asp:Label>
            </th>
            <td runat="server" valign="top" class="ApptDataColumn">
               <des:DateTextBox ID="ApptDateTextBox" runat="server" CssClass="ApptDemoTextBoxMedium" 
                  MinDate="<%# DateTime.Today.AddDays(1)%>"  MaxDate="<%# DateTime.Today.AddMonths(2)%>"
                  SpecialDatesControlID="ApptDatesClosed">
                  <PopupCalendar>
                     <Calendar ShowOutsideRangeDays="true" />
                  </PopupCalendar>
               </des:DateTextBox>
               <des:SpecialDates id="ApptDatesClosed" runat="server">
                 <des:SpecialDayOfWeek DayOfWeek="Sunday" Selectable="Unselectable" 
                     Label="Closed" />
                 <des:SpecialAnnualDate Month="12" DayOffset="25" Selectable="Unselectable" 
                   Label="Christmas"  />
                 <des:SpecialAnnualDate Month="11" WeekOffset="-1" DayOfWeek="Thursday" 
                   Selectable="Unselectable" Label="Thanksgiving" />
               </des:SpecialDates>
               <br/>
               <des:TimeOfDayTextBox ID="ApptTimeTextBox" runat="server" DateTextBoxControlID="ApptDateTextBox"
                  AddMinutes="30" RoundUpMinutes="30" SecondsMode="No" ShowSpinners="Both" CssClass="ApptDemoTextBoxMedium"
                  DateTimeBindable='<%# Bind("AppointmentTime")%>' >
                  <PopupTimePicker Activate="true" 
                     AutoFillStartTime="9:00:00" AutoFillEndTime="17:00:00" AutoFillIncrement="30" />
               </des:TimeOfDayTextBox>
            </td>
            <td runat="server" valign="top" class="ApptMsgColumn">
               <des:MultipleRequiredControlsValidator id="ApptRCV" runat="server"
                  Mode="All" ControlIDToEvaluate="ApptDateTextBox" SecondControlIDToEvaluate="ApptTimeTextBox"
                  ErrorMessage="These fields are required."
                  SummaryErrorMessage="The Appointment date and time fields are required."
                  ShowRequiredFieldMarker="True" >
               </des:MultipleRequiredControlsValidator>
               <des:DataTypeCheckValidator ID="ApptDateDTC" runat="server" 
                  ErrorMessage="Correct the format of this date. It must be MM/dd/yyyy."
                  SummaryErrorMessage="Correct the format of the {LABEL} date. It must be MM/dd/yyyy."
                  Label-LabelControlID="AppointmentLabel" 
                  ControlIDToEvaluate="ApptDateTextBox">
               </des:DataTypeCheckValidator>
               <des:DataTypeCheckValidator ID="ApptTimeDTC" runat="server" 
                  ErrorMessage="Correct the format of this time of day."
                  SummaryErrorMessage="Correct the format of the {LABEL} time of day."
                  Label-LabelControlID="AppointmentLabel" 
                  ControlIDToEvaluate="ApptTimeTextBox">
               </des:DataTypeCheckValidator>
               <des:RangeValidator ID="ApptDateRgV" runat="server" 
                  ErrorMessage="The appointment date must be between {MINIMUM} and {MAXIMUM}."
                  ControlIDToEvaluate="ApptDateTextBox">
               </des:RangeValidator>
               <des:UnselectableDatesValidator id="ApptDateUSV" runat="server"
                  ControlIDToEvaluate="ApptDateTextBox"
                  ErrorMessage="Sorry. We are closed. Please choose another date"
                  SummaryErrorMessage="Sorry. We are closed on {TEXTVALUE}. Please choose another date in the Appointment field." >
               </des:UnselectableDatesValidator>
               <des:UnselectableTimesValidator id="ApptTimeUSV" runat="server"
                  ControlIDToEvaluate="ApptTimeTextBox"
                  ErrorMessage="Pick a time between 9:00 AM and 4:00 PM on the top or bottom of the hour."
                  SummaryErrorMessage="Pick a time between 9:00 AM and 4:00 PM on the top or bottom of the hour in the Appointment field." >
               </des:UnselectableTimesValidator>
            </td>
         </tr>
         <tr runat="server">
            <th runat="server" valign="top" class="ApptTitleColumn">
               <asp:Label ID="NumberOfTimeBlocksLabel" runat="server" AssociatedControlID="NumberOfTimeBlocksTextBox">Visit duration</asp:Label>
            </th>
            <td runat="server" valign="top" class="ApptDataColumn">
               <des:IntegerTextBox ID="NumberOfTimeBlocksTextBox" runat="server" Width="20px" 
                  ShowSpinner="True" MinValue="1" MaxValue="4" 
                  Text='<%# Bind("NumberOfTimeBlocks")%>'>1</des:IntegerTextBox>
                Blocks (1 block = 30 minutes)
               <br/>
               Total time:
               <asp:Label ID="TotalTimeLabel" runat="server"></asp:Label> minutes
               <des:CalculationController ID="DurationBlocksCalc" runat="server" 
                  DecimalPlaces="Integer"
                  ShowValueControlID="TotalTimeLabel" AutoShowValue="Always">
                  <Expression>
                     <des:NumericTextBoxCalcItem TextBoxControlID="NumberOfTimeBlocksTextBox" />
                     <des:ConstantCalcItem Constant="30" Operator="Multiply" />
                  </Expression>
               </des:CalculationController>
            </td>
            <td runat="server" valign="top" class="ApptMsgColumn">
               <des:DataTypeCheckValidator id="NumberOfTimeBlocksDTC" runat="server"
                  ErrorMessage="This field must contain only numbers."
                  SummaryErrorMessage="{LABEL} must contain only numbers."
                  Label-LabelControlID="NumberOfTimeBlocksLabel" 
                  ControlIDToEvaluate="NumberOfTimeBlocksTextBox">
               </des:DataTypeCheckValidator>
               <des:RangeValidator ID="NumberOfTimeBlocksRgV" runat="server" 
                  ErrorMessage="Maximum of 4 blocks permitted" 
                  SummaryErrorMessage="Maximum of 4 blocks (2 hours) in the Appointment Duration."
                  ControlIDToEvaluate="DurationBlocksCalc"
                  Minimum="30" Maximum="120" >
               </des:RangeValidator>
            </td>
         </tr>
         <tr runat="server">
            <th runat="server" valign="top" class="ApptTitleColumn">
               <asp:Label ID="Label2" runat="server" AssociatedControlID="AppointmentRBL">Options</asp:Label>
            </th>
            <td runat="server" valign="top" class="ApptDataColumn">
               <asp:RadioButtonList ID="AppointmentRBL" runat="server" 
                  DataSourceID="OptionLinqDataSource" 
                  DataValueField="AppointmentOptionID"
                  DataTextField="Name" 
                  SelectedValue='<%# Bind("AppointmentOptionID")%>'  >
                  <asp:ListItem>--Make a selection--</asp:ListItem>
               </asp:RadioButtonList>
               <asp:LinqDataSource id="OptionLinqDataSource" runat="server"
                  TableName="AppointmentOptionDemos"
                  EntityTypeName="PeterBlum.AppointmentDemo.AppointmentOption"
                  ContextTypeName="PeterBlum.AppointmentDemo.AppointmentDemoDataContext" />
               <br/>
            </td>
            <td runat="server" valign="top" class="ApptMsgColumn">
               <des:RequiredListValidator ID="ApptOptionRLV" runat="server" 
                  ErrorMessage="Select at an appointment option."
                  ControlIDToEvaluate="AppointmentRBL" ShowRequiredFieldMarker="true">
                  <HiliteFields>
                     <des:ControlConnection ControlID="AppointmentRBL" />
                  </HiliteFields>
               </des:RequiredListValidator>
            </td>
         </tr>
      </table>
      <h3>We will contact you to confirm</h3>
      <table id="ConfirmTable" runat="server" class="ApptTable">
         <tr id="ContactModeTableRow" runat="server">
            <th runat="server" valign="top" class="ApptTitleColumn">
               <asp:Label ID="Label3" runat="server" AssociatedControlID="ContactModeDDL">How should we contact you?</asp:Label>
            </th>
            <td runat="server" valign="top" class="ApptDataColumn">
               <asp:DropDownList id="ContactModeDDL" runat="server" CssClass="ApptDemoTextBox" SelectedValue='<%# Bind("ContactMode")%>' >
                  <asp:ListItem Text="Home Phone" Value="0" Selected="True" />
                  <asp:ListItem Text="Mobile Phone" Value="1" />
                  <asp:ListItem Text="Email" Value="2" />
                  <asp:ListItem Text="Email or Mobile" Value="3" />
               </asp:DropDownList>
               <des:NativeControlExtender id="ContactModeNCE" runat="server" ControlIDToExtend="ContactModeDDL" />
               <des:FieldStateController id="ShowEmailTableRowFSC" runat="server"
                 ControlIDToChange="EmailAddressTableRow"
                 ConditionFalse-Visible="false" ConditionTrue-Visible="true" InvisiblePreservesSpace="false" >
                  <ConditionContainer>
                     <des:SelectedIndexRangesCondition ControlIDToEvaluate="ContactModeDDL">
                        <Ranges>
                           <des:SelectedIndexRange StartIndex="2" EndIndex="3" />
                        </Ranges>
                     </des:SelectedIndexRangesCondition>
                  </ConditionContainer>
               </des:FieldStateController>
               <des:FieldStateController id="ShowPhoneTableRowFSC" runat="server"
                 ControlIDToChange="PhoneTableRow"
                 ConditionFalse-Visible="false" ConditionTrue-Visible="true" InvisiblePreservesSpace="false" >
                  <ConditionContainer>
                     <des:SelectedIndexRangesCondition ControlIDToEvaluate="ContactModeDDL">
                        <Ranges>
                           <des:SelectedIndexRange StartIndex="0" EndIndex="1" />
                           <des:SelectedIndexRange StartIndex="3" EndIndex="3" />
                        </Ranges>
                     </des:SelectedIndexRangesCondition>
                  </ConditionContainer>
               </des:FieldStateController>
            </td>
            <td runat="server" valign="top" class="ApptMsgColumn">
                
            </td>
         </tr>
         <tr id="EmailAddressTableRow" runat="server">
            <th runat="server" valign="top" class="ApptTitleColumn">
               <asp:Label ID="EmailAddressLabel" runat="server" AssociatedControlID="EmailAddressTextBox">Email address</asp:Label>
            </th>
            <td runat="server" valign="top" class="ApptDataColumn">
               <des:TextBox ID="EmailAddressTextBox" runat="server" CssClass="ApptDemoTextBox" 
                  Text='<%# Bind("Email")%>' />
            </td>
            <td runat="server" valign="top"  class="ApptMsgColumn">
               <des:RequiredTextValidator ID="EmailAddressRTV" runat="server" 
                  ErrorMessage="This field requires a value."
                  SummaryErrorMessage="{LABEL} requires a value."
                  Label-LabelControlID="EmailAddressLabel" ShowRequiredFieldMarker="True" 
                  ControlIDToEvaluate="EmailAddressTextBox" >
                  <EnablerContainer>
                     <des:SelectedIndexRangesCondition ControlIDToEvaluate="ContactModeDDL" EvaluateOnClickOrChange="false">
                        <Ranges>
                           <des:SelectedIndexRange StartIndex="2" EndIndex="3" />
                        </Ranges>
                     </des:SelectedIndexRangesCondition>
                  </EnablerContainer>
               </des:RequiredTextValidator>
               <des:EmailAddressValidator ID="EmailAddressVal" runat="server" 
                  ErrorMessage="Enter a valid email address."
                  SummaryErrorMessage="{LABEL} contains an invalid email address."
                  Label-LabelControlID="EmailAddressLabel" 
                  ControlIDToEvaluate="EmailAddressTextBox"  >
                  <EnablerContainer>
                     <des:SelectedIndexRangesCondition ControlIDToEvaluate="ContactModeDDL" EvaluateOnClickOrChange="false">
                        <Ranges>
                           <des:SelectedIndexRange StartIndex="2" EndIndex="3" />
                        </Ranges>
                     </des:SelectedIndexRangesCondition>
                  </EnablerContainer>
               </des:EmailAddressValidator>
            </td>
         </tr>
         <tr id="PhoneTableRow" runat="server">
            <th runat="server" valign="top" class="ApptTitleColumn">
               <asp:Label ID="PhoneLabel" runat="server" AssociatedControlID="NorthAmericaPhoneNumber">Phone Number</asp:Label>
            </th>
            <td id="Td23" runat="server" valign="top" class="ApptDataColumn" style="padding-top: 3px; padding-bottom: 3px;" >
               <des:MultiSegmentDataEntry ID="NorthAmericaPhoneNumber" runat="server" 
                  Text='<%# Bind("Phone")%>' CssClass="ApptMultiSegTextBox" EnclosedBy="DIV">
                  <Segments>
                     <des:TextSegment MinLength="3" MaxLength="3" 
                        IgnoreTheseCharsBefore=" " IgnoreTheseCharsAfter=" " 
                        FormattingTextBefore="(" FormattingTextAfter=") " 
                        DisplayTextBefore="(" DisplayTextAfter=")" 
                        AutoWidth="False" TabOnTheseKeys=") -" 
                        CssClass="DESTBMultiSegTextBox" Width="30px" >
                     </des:TextSegment>
                     <des:TextSegment MinLength="3" MaxLength="3"
                        IgnoreTheseCharsAfter=" " FormattingTextAfter="-" 
                        AutoWidth="False" TabOnTheseKeys="- "
                        CssClass="DESTBMultiSegTextBox" Width="30px">
                     </des:TextSegment>
                     <des:TextSegment MinLength="4" 
                        IgnoreTheseCharsAfter=" " 
                        AutoWidth="False" TabOnTheseKeys="ext:"
                        CssClass="DESTBMultiSegTextBox" Width="40px" >
                     </des:TextSegment>
                     <des:TextSegment Required="False" MaxLength="5" 
                        NoTextBeforeWhenBlank="True" DisplayTextBefore="&amp;nbsp;ext:" 
                        FormattingTextBefore=" x"
                        CssClass="DESTBMultiSegTextBox">
                     </des:TextSegment>
                  </Segments>
               </des:MultiSegmentDataEntry>
            </td>
            <td runat="server" valign="top" class="ApptMsgColumn">
               <des:RequiredTextValidator ID="PhoneRTV" runat="server" 
                  ErrorMessage="This field requires a value" 
                  SummaryErrorMessage="{LABEL} requires a value" 
                  Label-LabelControlID="PhoneLabel" ShowRequiredFieldMarker="True"
                  ControlIDToEvaluate="NorthAmericaPhoneNumber" >
                  <EnablerContainer>
                     <des:SelectedIndexRangesCondition ControlIDToEvaluate="ContactModeDDL" EvaluateOnClickOrChange="false">
                        <Ranges>
                           <des:SelectedIndexRange StartIndex="0" EndIndex="1" />
                           <des:SelectedIndexRange StartIndex="3" EndIndex="3" />
                        </Ranges>
                     </des:SelectedIndexRangesCondition>
                  </EnablerContainer>
               </des:RequiredTextValidator>
               <des:MultiSegmentDataEntryValidator ID="PhoneSegmentsVal" runat="server"
                  ErrorMessage="This is not a valid phone number."
                  SummaryErrorMessage="{LABEL} is not valid" 
                  Label-LabelControlID="PhoneLabel" 
                  ControlIDToEvaluate="NorthAmericaPhoneNumber" >
                  <EnablerContainer>
                     <des:SelectedIndexRangesCondition ControlIDToEvaluate="ContactModeDDL" EvaluateOnClickOrChange="false">
                        <Ranges>
                           <des:SelectedIndexRange StartIndex="0" EndIndex="1" />
                           <des:SelectedIndexRange StartIndex="3" EndIndex="3" />
                        </Ranges>
                     </des:SelectedIndexRangesCondition>
                  </EnablerContainer>
               </des:MultiSegmentDataEntryValidator>
            </td>
         </tr>
      </table>
      <des:Button ID="SubmitButton" runat="server" Text="Submit" CommandName="Insert" 
         ConfirmMessage="Your appointment is about to be submitted and saved into an actual database.{NEWLINE}If you have entered sensitive information, choose the Demo Submit button instead.{NEWLINE}Do you want to proceed?"
         DisableOnSubmit="True" />
       
      <input type="reset" value="Reset" />
       
       <des:Button ID="AltSubmitButton" runat="server" Text="Demo Submit: Postback without using the database" CommandName="DoNotInsert" 
         ConfirmMessage="Your appointment is about to be submitted but not saved.{NEWLINE}Do you want to proceed?"
         DisableOnSubmit="True" CausesValidation="false" OnClick="Button2_OnClick" ChangeMonitorEnables="Yes" />
      <br/>
      <div style="display:inline-block;font-style:italic;color:Red;font-size:10pt;padding-left:20px;padding-right:20px;max-width:600px;">
      WARNING: This demo is using a real database
      to demonstrate the full process. Do no enter personal contact information unless you are comfortable with it 
      being stored in a database operated by PeterBlum.com.
      </div>
      <des:ValidationSummary ID="ValidationSummary1" runat="server"
         CssClass="ApptDemoValidationSummary" 
         HyperLinkToFields="True" AutoUpdate="True" 
         HeaderImageColumnWidth="20px"
         HeaderImageURL="{APPEARANCE}/Validation/valerroricon_animated.GIF" 
         HeaderText="Please fix the following {COUNT} {COUNT:error:errors}:"
         RelatedControlID="WarningLabel" />
      <br/>
   </InsertItemTemplate>
</asp:FormView>
</div>