Return to the menu Select another DES Module

Demonstrates a simple case for all 4 FieldStateControllers

The 4 FieldStateController controls provide an interactive client-side interface by monitoring user actions on fields and changing the attributes and styles of other controls on the page. For example, when the user clicks a checkbox, show a previously hidden <div>. The FieldStateControllers often eliminate the effort to build the browser-independent JavaScript required to monitor events, look at field data, and change attributes and styles.

Here are the roles each of these 4 control have:

FieldStateController - Changes the state of a single HTML element based on a Condition object. It has two states, when the condition is true and when its false. For example, the FieldStateController can make a Panel visible or hidden based on the mark in checkbox by using the CheckStateCondition object to monitor a checkbox.
MultiFieldStateController - Same as the FieldStateController but changes the state of a list of HTML elements.
FSCOnCommand - This is a FieldStateController that the user fires when they click on a button or other command. While the FieldStateController and MultiFieldStateController Controls apply two states, based on a Condition object, these two controls apply only one. A typical case is to have a SelectAll button that marks all checkboxes in a CheckBoxList.
MultiFSCOnCommand - Same as the FSCOnCommand but changes the state of a list of HTML elements.

The "Condition" objects used by the FieldStateController and MultiFieldStateController are supplied by DES. Each Validator control defines a Condition object to do its own evaluation. So look through the available validators for the desired rule and create its Condition object by replacing the "Validator" with "Condition" in the Validator's class name. For example, the RequiredTextValidator has the RequiredTextCondition as its Condition object.

These controls do most of their work on the client-side. If the browser does not support the client-side scripting needed to run a FieldStateController, it is disabled. That will leave your controls with the state that you define in their properties on the server side.

Controls

FieldStateController

The basic setup involves setting the control whose state changes in the ControlIDToChange property and the type of state change in the ConditionTrue and ConditionFalse properties. See About the ConditionTrue and ConditionFalse properties.
Select a Condition object that determines whether to use ConditionTrue or ConditionFalse and assign it to the Condition property. See the Source Code below for ASP.NET markup details.

In this example, "Label1" is shown or hidden depending on the state of the checkbox.

Label1

MultiFieldStateController

The basic setup is just like the FieldStateController except you define a list of controls instead of a single control. Add PeterBlum.DES.Web.WebControls.FSAControlConnection objects for each control to the ControlConnections collection.

In this example, the textbox and label are shown or hidden depending on if the DropDownList has a selection nor not.

TextBox1 Label:

FSCOnCommand

The basic setup is to define the control that invokes the state change in the ControlIDToRunThisAction property. Set one or more state change properties: Visible, EnabledState, ReadOnly, CssClass, FieldValue, InnerHTMLState, URL, and Checked.

In this example, a list of checkboxes are marked when you click the All button.
The button must be an <input type="button">. Do not use a web control button because it uses type="submit".

MultiFSCOnCommand

The basic setup is just like the FSCOnCommand control except you define a list of controls instead of a single control. Add PeterBlum.DES.Web.WebControls.FSAControlConnection objects for each control to the ControlConnections collection.

In this example, click on an image and two labels will appear.

You have shown this label
And this Label

Source Code (C#)

<h2>FieldStateController</h2>
The basic setup involves setting the control whose state changes in the <span class="PropertyName">ControlIDToChange</span> property
and the type of state change in the <span class="PropertyName">ConditionTrue</span> and 
<span class="PropertyName">ConditionFalse</span> properties.
See <a href="Changing States.aspx">About the ConditionTrue and ConditionFalse properties</a>.<br/>
Select a Condition object that determines whether to use 
<span class="PropertyName">ConditionTrue</span> or <span class="PropertyName">ConditionFalse</span>
and assign it to the <span class="PropertyName">Condition</span> property. See the Source Code below for ASP.NET markup details.
<br/><br/>
In this example, "Label1" is shown or hidden depending on the state of the checkbox.<br/><br/>
<asp:CheckBox id="CheckBox1" runat="server" Checked="true" ></asp:CheckBox>
<asp:Label id="Label1" runat="server" BackColor="Aqua">Label1</asp:Label>
<des:FieldStateController id="FieldStateController1" runat="server" 
   ControlIDToChange="Label1" 
   ConditionFalse-Visible="false"
   ConditionTrue-Visible="True" >
   <ConditionContainer>
      <des:CheckStateCondition ControlIDToEvaluate="CheckBox1" Checked="true" />
   </ConditionContainer>
</des:FieldStateController>
<br/>
<br/>
<h2>MultiFieldStateController</h2>
The basic setup is just like the FieldStateController except
you define a list of controls instead of a single control.
Add PeterBlum.DES.Web.WebControls.FSAControlConnection objects for each control 
to the <span class="PropertyName">ControlConnections</span> collection.
<br/><br/>
In this example, the textbox and label are shown or hidden 
depending on if the DropDownList has a selection nor not.<br/><br/>
<asp:DropDownList ID="DropDownList1" runat="server">
   <asp:ListItem Selected="True" Value="">No selection</asp:ListItem>
   <asp:ListItem Value="1">1</asp:ListItem>
   <asp:ListItem Value="2">2</asp:ListItem>
   <asp:ListItem Value="3">3</asp:ListItem>
</asp:DropDownList><br/>
<asp:Label ID="LabelForTextBox1" runat="server" AssociatedControlID="TextBox1" BackColor="Aqua">TextBox1 Label:</asp:Label>
<asp:TextBox ID="TextBox1" runat="server" BackColor="Aqua" /><br/>
<des:MultiFieldStateController ID="MultiFieldStateController1" runat="server"
   ConditionFalse-Visible="false">
   <ControlConnections>
      <des:FSAControlConnection ControlID="LabelForTextBox1" />
      <des:FSAControlConnection ControlID="TextBox1" />
   </ControlConnections>   
   <ConditionContainer>
      <des:RequiredListCondition ControlIDToEvaluate="DropDownList1" UnassignedIndex="0" />
   </ConditionContainer>
</des:MultiFieldStateController>
<br/>
<br/>
<h2>FSCOnCommand</h2>
The basic setup is to define the control that invokes the state change in the
<span class="PropertyName">ControlIDToRunThisAction</span> property.
Set one or more state change properties: <span class="PropertyName">Visible</span>,
<span class="PropertyName">EnabledState</span>,
<span class="PropertyName">ReadOnly</span>,
<span class="PropertyName">CssClass</span>,
<span class="PropertyName">FieldValue</span>,
<span class="PropertyName">InnerHTMLState</span>,
<span class="PropertyName">URL</span>, and
<span class="PropertyName">Checked</span>.
<br/><br/>
In this example, a list of checkboxes
are marked when you click the All button.<br/>The button must be an <input type="button">. 
Do not use a web control button because it uses type="submit".<br/><br/>
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
   <asp:ListItem Value="1">1</asp:ListItem>
   <asp:ListItem Value="2">2</asp:ListItem>
   <asp:ListItem Value="3">3</asp:ListItem>
</asp:CheckBoxList>
<br/>
<input type="button" id="AllButton" runat="server" Value="All" /><br/>
<des:FSCOnCommand ID="FSCOnCommand1" runat="server" 
   ControlIDToRunThisAction="AllButton"
   ControlIDToChange="CheckBoxList1" 
   Checked="True" />
<br/>
<br/>
<h2>MultiFSCOnCommand</h2>
The basic setup is just like the FSCOnCommand control except
you define a list of controls instead of a single control.
Add PeterBlum.DES.Web.WebControls.FSAControlConnection objects for each control 
to the <span class="PropertyName">ControlConnections</span> collection.
<br/>
<br/>
In this example, 
click on an image and two labels will appear.<br/><br/>
<asp:Image ID="Image1" runat="server" ImageUrl="~/DES/Appearance/Date And Time/RightCmd2SolidBlack.GIF" /><br/>
<asp:Label ID="Label10" runat="server" Text="You have shown this label<br />" BackColor="Aqua" />
<asp:Label ID="Label11" runat="server" Text="And this Label" BackColor="Aqua" /><br/>
<des:MultiFSCOnCommand ID="MultiFSCOnCommand1" runat="server" 
    ControlIDToRunThisAction="Image1"
    VisibleState="True" >
   <ControlConnections>
      <des:FSAControlConnection ControlID="Label10" />
      <des:FSAControlConnection ControlID="Label11" />
   </ControlConnections>
</des:MultiFSCOnCommand>

Return to the menu Select another DES Module