This tutorial will demonstrate how to use the MutuallyExclusive Checkbox Extender in ASP.NET AJAX C#
In this tutorial we will demonstrate how to enable the developer to configure checkboxes that are mutually exclusive; which ensures that the end-user will only be able to select a single option. This control is similar in behavior to the radio-button list control. This control is perfect for accepting only a specific confirmation from a customer, such as yes/no to a newsletter or promotional email list.
Here is a snapshot of what this application will look like:
`
To start, open Visual Studio 2008. File > New > Web site > ASP.NET Web Site and name it mutExChbx or whatever you want.
Checkboxes are usually used on the GUI and are Boolean in nature. But sometimes there are Boolean conditions that are not so clear. These could include a one-or-the-other value instead of just true or false value.
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
Switch to Design View and insert the ToolkitScriptManager. Next navigate on the top menu bar of VS2008 to table and select insert table (2 x 1).
In this example, we will create an application that asks what is your favorite color? We will set up Muttally exclusive checkboxes that ask if Red, Yellow or Blue is your favorite color.
Back to the table. Locate the AJAX Toolkit that you installed and double-click the ToolkitScriptManager with your cursor being above the table.
Click on the top row and type “What is your favorite color?”
Then locate the checkboxes from the standard tab of the toolbox and add three of them to the second row. Now navigate back to the toolbox and go to the AJAX Toolkit tab and Drag over a MutallyExclusiveCheckbox for each checkbox in the table. In the Design View, it should look simialr to this:
Now we want to add values to the Checkboxes and labels to make the form look exactly like what is shown above. Switch to Source View. Your markup should look similar to this as well.
Add a text section to each checkbox and change some values to make everything seem relevant.
<form id="myForm"
runat="server">
<div> </div>
<p style="text-align: center">
<asp:ToolkitScriptManager
ID="ToolkitScriptManager1"
runat="server">
</asp:ToolkitScriptManager>
</p> <table class="style1">
<tr>
<td> What is your Favorite Color?</td>
</tr>
<tr>
<td>
<asp:CheckBox
ID="Red"
runat="server"
Text="My Favorite Color is Red"/>
<asp:MutuallyExclusiveCheckBoxExtender ID="RedColorExtender"
runat="server"
TargetControlID="Red"
Key="ColorChoice" />
<br />
<asp:CheckBox
ID="Yellow"
runat="server"
Text="My Favorite Color is Yellow" />
<asp:MutuallyExclusiveCheckBoxExtender ID="YellowColorExtender"
runat="server"
TargetControlID="Yellow"
Key="ColorChoice" />
<br />
<asp:CheckBox
ID="Blue"
runat="server"
Text="My Favorite Color is Blue" />
<asp:MutuallyExclusiveCheckBoxExtender ID="BlueColorExtender"
runat="server"
TargetControlID="Blue"
Key="ColorChoice" />
</td> /> </tr>
</table>
</form> |
Notice how we added a Key value. The Key value is necessary because we can define all the checkboxes to use the same key so that the extenders can tell which other objec t that the corresponding checkboxes should be mutually exclusive from.
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
Save and Run.
Notice that when you choose one that you cannot choose another one, thus they are mutually exclusive.
