The <asp:checkbox> and <asp:checkboxlist>
Controls
Checkboxes are similar to radio buttons, and in HTML, they were used to allow
multiple choices from a group of buttons. With the <asp:checkboxlist> control it is possible to create them in groups, but unlike radio
buttons, it isn't possible to restrict the user to selecting just one possible
answer from a group of checkboxes: they can select as many as they like. The
other fundamental difference between a checkbox and a radio button is that once
you have selected a checkbox you are able to deselect it by clicking on it
again.
We're not going to spend too long examining
them, as most of the same principles that we followed in the <asp:radiobutton> and <asp:radiobuttonlist> examples apply.
A typical <asp:checkbox> looks like this:
<asp:checkbox
id="check1" runat="server" />
If we want to use an array of checkboxes, we can contain them inside an <asp:checkboxlist> control. We need to set an id attribute for the <asp:checkboxlist> control itself, and create a <asp:listitem> control for each option inside the control:
<asp:checkboxlist
id="check1" runat="server">
 <asp:listitem id="option1" runat="server"
value="Madrid" />
 <asp:listitem id="option2" runat="server"
value="Oslo" />
 <asp:listitem id="option3" runat="server"
value="Lisbon" />
</asp:checkboxlist>
Checkboxes are typically used when you have
single yes/no answers, or you wish the user to be able to make a multiple set
of selections, and be able to deselect them as well.
In our next exercise, we're going to tweak
our previous example, so that it uses our established holiday code to allow the
user to select more than one option for a particular destination.
Try It Out – Using the
<asp:checkbox> Control
1. Open up the radiopage.aspx and
amend the code highlighted in gray, as follows:
<script
runat="server" language="C#">
 void Page_Load()
 {
   string msg = "You have selected the following items:<br
/>";
   if (check1.Items[0].Selected) {
   msg = msg + check1.Items[0].Text + "<br />";
   }
   if (check1.Items[1].Selected) {
   msg = msg + check1.Items[1].Text + "<br />";
   }
   if (check1.Items[2].Selected) {
   msg = msg + check1.Items[2].Text + "<br />";
   }
  Â
   Message.Text = msg;
 }  Â
</script>
<html>
<head>
 <title>Check Box List Example</title>
</head>
<body>
 <asp:label id="Message" runat="server"
/>
 <br /><br />
 Which city do you wish to look at hotels for?
 <br /><br />
 <form runat="server">
   <asp:checkboxlist id="check1"
runat="server">
     <asp:listitem id="option1"
runat="server" value="Madrid" />
     <asp:listitem id="option2"
runat="server" value="Oslo" />
     <asp:listitem id="option3"
runat="server" value="Lisbon" />
   </asp:checkboxlist>
   <br /><br />
   <input type="Submit">
 </form>
</body>
</html>
2. Save this as checkpage.aspx.
3. Open checkpage.aspx in
your browser, and select more than one option:
4. Then click on Submit Query:
How It Works
Very little has changed with our control –
all we've done is change the HTML control to an <asp:checkboxlist>, and then change the name of the control to reflect this:
<asp:checkboxlist
id="check1" runat="server">
 <asp:listitem id="option1"
runat="server" value="Madrid" />
 <asp:listitem id="option2"
runat="server" value="Oslo" />
 <asp:listitem id="option3"
runat="server" value="Lisbon" />
</asp:checkboxlist>
Our ASP.NET code is the same as that we
used for the listbox2.aspx
example, earlier on, except that here it refers to a checkbox rather than a
listbox:
   string msg = "You
have selected the following items:<br />";
   if
(check1.Items[0].Selected) {
   msg = msg +
check1.Items[0].Text + "<br />";
   }
   if
(check1.Items[1].Selected) {
   msg = msg +
check1.Items[1].Text + "<br />";
   }
   if
(check1.Items[2].Selected) {
   msg = msg +
check1.Items[2].Text + "<br />";
   }
  Â
   Message.Text = msg;
As you can see, checkboxes work in a
slightly different way from radio buttons. Each time you add a value, rather
than replacing it, the value is added to the contents of check1. However, for all other intents and purposes, you use them in the
same way.
This
operation will become clearer once you're familiar with Chapters 4 and 6 in
which we deal with Data and Control Structures respectively.
One last point to note about checkboxes,
though, is that you might want to treat each checkbox within a group as a
separate entity, rather than have them all grouped together, in which case you
could set all of them as separate <asp:checkbox> controls to reflect this:
<asp:checkbox
id="check1" runat="server" Text="Madrid"/>
<asp:checkbox
id="check2" runat="server" Text="Oslo"/>
<asp:checkbox
id="check3" runat="server" Text ="Lisbon"/>
The text attribute here specifies the text that will appear next to the
checkbox. The checkbox itself will not return a value. To find out whether it
is checked or not we need to add some ASP.NET code to test if the Checked attribute is true or false: it will be true if the checkbox is checked.
Given that we've introduced a number of new
concepts, in variables, we will stop here, as the subject of variables warrants
a chapter in its own right. We've looked at the most basic server controls, and
in order to make any more of them, we need to introduce new and more complex
features.
Buy Beginning ASP.NET with C# here
© Copyright 2002 Wrox Press
This chapter is written by David Sussman, et al
and taken from "Beginning ASP.NET with C#" published by Wrox Press Limited in June 2002; ISBN 1861007345; copyright © Wrox Press Limited 2002; all rights reserved.
No part of these chapters may be reproduced, stored in a retrieval system or transmitted in any form or by any means -- electronic, electrostatic, mechanical, photocopying, recording or otherwise -- without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.
|
|
