Learn How to Use MutuallyExclusive Checkboxes in ASP.NET AJAX C#



Learn How to Use MutuallyExclusive Checkboxes in ASP.NET AJAX C#

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.



Comments
Former Tai Keng Court said:

The condo’s facilities provide full family entertainment needs for your family and loved ones. Indulge in a serene and tranquil lifestyle right in the heart of Bartley.

Several buses are available near Bartley Road and Upper Paya Lebar Road along with shopping centers and restaurants.

Posted Jul 7, 2013 5:45 AM

Leave a Comment