In this topic, you’ll use a RequiredFieldValidator component with the C1NavigationList control. A RequiredFieldValidator component will evaluate the value of a C1NavigationListInputItem to ensure that users enter a value (in this case, a name) before being allowed to access the child item of a C1NavigationListItem.
Complete the following steps:
1. In Design view, add a C1NavigationList control to your Web site project.
2. Click the C1NavigationList control’s smart tag to open the C1NavigationList Tasks menu; select Edit NavigationList.
3. Add a List Item and an Input Item to the control (see Adding Navigation List Items to the C1NavigationList Control).
4. Select ListItem01, click the drop-down arrow next to the Add Child Item button, and select Text Item from the list.
TextItem01 is added as a child item of ListItem01.
5. In the treeview, select ListItem01 and set the following properties:
•Set the Text property to “CLICK ME”.
•Set the ValidationGroup property to “NameValidation”. This property specifies the group of controls that is validated upon a validation check.
6. In the treeview, select Input01 and set the following properties:
•Set the Text property to “Name:”
•Set the WaterMarkText property to “Enter your name.”.
•Set the ID property to “NameInput”.
7. In the treeview, select TextItem01 and set its ID property to “NameText”.
If you switch to Source view, the markup will resemble the following:
<C1NavigationList:C1NavigationList ID="C1NavigationList1" runat="server">
<Items>
<C1NavigationList:C1NavigationListItem runat="server" Text="CLICK ME” CausesValidation="true" ValidationGroup="NameValidation">
<Items>
<C1NavigationList:C1NavigationListItem runat="server" Text="" ID="NameText">
</C1NavigationList:C1NavigationListItem>
</Items>
</C1NavigationList:C1NavigationListItem>
<C1NavigationList:C1NavigationListInputItem ID="NameInput" runat="server" Text="Name:" WaterMarkText="Enter your name.">
</C1NavigationList:C1NavigationListInputItem>
</Items>
</C1NavigationList:C1NavigationList>
8. Switch to Code view and add the following code to the Page_Load event:
' Create the RequiredFieldValidator:
Dim requiredFieldValidator As New RequiredFieldValidator()
'requiredFieldValidator.Height = Unit.Percentage(100%)
requiredFieldValidator.ID = "requiredFieldValidator"
' Set ControlToValidate and ValidationGroup properties:
requiredFieldValidator.ControlToValidate = "NameInput"
requiredFieldValidator.ValidationGroup = "NameValidation"
requiredFieldValidator.Text = "You must enter your name before proceeding."
' Add RequiredFieldValidator to immediate parent of the required input item
'(make sure that parent exists when LoadOnDemand ability is turned on):
If NameInput.Parent IsNot Nothing Then
NameInput.Parent.Controls.Add(requiredFieldValidator)
End If
'Set the text property of the C1NavigationListItem's child item to display the value of the input item
NameText.Text = "Hello, " + NameInput.Value + "!"
•C#
// Create the RequiredFieldValidator:
RequiredFieldValidator requiredFieldValidator = new RequiredFieldValidator();
//requiredFieldValidator.Height = Unit.Percentage(100%)
requiredFieldValidator.ID = "requiredFieldValidator";
// Set ControlToValidate and ValidationGroup properties:
requiredFieldValidator.ControlToValidate = "NameInput";
requiredFieldValidator.ValidationGroup = "NameValidation";
requiredFieldValidator.Text = "You must enter your name before proceeding.";
// Add RequiredFieldValidator to immediate parent of the required input item
//(make sure that parent exists when LoadOnDemand ability is turned on):
if (NameInput.Parent != null) {
NameInput.Parent.Controls.Add(requiredFieldValidator);
}
//Set the text property of the C1NavigationListItem's child item to display the value of the input item
NameText.Text = "Hello, " + NameInput.Value + "!";
9. Press F5 to run the program. Observe that the C1NavigationList control has two top-level items: a list control that says “Click me” and an input control that says “Name: Enter your name.”
10. Click the CLICK ME input item. Observe that you can’t access the list item’s child item and that the RequiredFieldValidator component displays “You must enter your name before proceeding.”
11. Enter your name in the Name field.
12. Click the CLICK ME input item again. Observe that the C1NavigationList control switches pages and shows a text item, which displays a message featuring your name.
