For what it's worth, I have put together a sample web page (razor/c#) illustrating some of the more common use cases involving checkboxes and radio buttons.
Perhaps this can help those who, like me, may have struggled with how to work these html controls.
There are three cases of checkboxes:
(1) Simple checkbox with no return value specified. When unchecked, nothing is returned; when checked, "on" is returned. The checked state of the checkbox is preserved.
(2) Checkbox where a return value is specified. When unchecked, nothing is returned; when checked, the string in the value attribute is returned. The checked state of the checkbox is preserved.
(3) A group of checkboxes, all sharing the same name attribute and each having a specified return value. If any one or more of the checkboxes are checked, the value(s) will be returned in a (comma-separated) string containing the value attribute string(s)
corresponding to the checked checkbox. If none are checked, no value is returned. This use case illustrates the use of the .Split method to convert the comma-separated values string into an array of strings, which can be evaluated in a for loop. The checked
state of each checkbox is preserved.
There is one use case for radio buttons, showing buttons for yes and no (with the no button being checked by default. The checked state of the radio button is preserved.
Run the page and play with the checkboxes/radio buttons, clicking the "Submit" button to see the results.
Hopefully this can be useful to beginners like me.
@{
//illustrates usage of radio buttons and check boxes
Page.title = "Checkboxes/Radio Butttons Use Cases";
Layout = "~/_SiteLayout.cshtml";
var cbox1 = Request["cbox1"];
var cbox2 = Request["cbox2"];
var cbox3 = Request["cbox3"].As<string>("");//defaults to empty string
var rad1=Request["rad1"];
}
<form method="post" action="">
<fieldset class="useCase">
<h4>Checkbox with persistent return value of "on" or null:
<input type="checkbox" name="cbox1"
@(Request["cbox1"] == "on" ? " checked" : "") /></h4>
Value in Cbox1 (should be "on" when checked): @cbox1<br />
<input type="submit" value="submit" />
</fieldset>
<fieldset class="useCase">
<h4>Checkbox with persistent return value of "XYZ"
XYZ: <input type="checkbox" name="cbox2" value="XYZ"
@(Request["cbox2"] == "XYZ" ? " checked" : "") /></h4>
Value in Cbox2 (should be "XYZ" when checked): @cbox2
<input type="submit" value="submit" />
</fieldset>
<fieldset class="useCase">
<h4>Multiple Checkboxes, returning 0, one,or more persistent values
Dogs:<input type="checkbox" name="cbox3" value="Dogs"
@(cbox3.Contains("Dogs") ? " checked" : "") />
Cats:<input type="checkbox" name="cbox3" value="Cats"
@(cbox3.Contains("Cats") ? " checked" : "") />
Birds:<input type="checkbox" name="cbox3" value="Birds"
@(cbox3.Contains("Birds") ? " checked" : "") />
Snakes:<input type="checkbox" name="cbox3" value="Snakes"
@(cbox3.Contains("Snakes") ? " checked" : "") /></h4>
<p>Value in Cbox3 (should be comma-separated string when any is checked): @cbox3<br />
Here are the values from the checkedboxes:<br />
@foreach (var cbox in cbox3.Split(','))
{
@cbox<br />
}
</p>
<input type="submit" value="submit" />
</fieldset>
<br /><br />
<fieldset class="useCase">
<h4>radio Buttons to yield either "y" or"n" (default="n"):
<input type="radio" name="rad1" value="y" @(rad1=="y"?" checked":"")/>Yes
<input type="radio" name="rad1" value="n" @(rad1=="n"||rad1.IsEmpty()?" checked":"") />No
</h4>
<p>Here is the value: @rad1</p>
<input type="submit" value="submit" />
</fieldset>
</form>
Many thanks! I am new to WebPages (and I love the simplicity). I know how to do this in WebForms and php. But for the life of me I could not find any ANY examples on the internet for how to do this with WebPages and multiple checkboxes. This has saved
me a lot of frustration.
rrrsr7205
Participant
1304 Points
313 Posts
examples of Checkboxes and Radio Buttons in WebPages
Jul 20, 2012 10:00 PM|LINK
For what it's worth, I have put together a sample web page (razor/c#) illustrating some of the more common use cases involving checkboxes and radio buttons.
Perhaps this can help those who, like me, may have struggled with how to work these html controls.
There are three cases of checkboxes:
(1) Simple checkbox with no return value specified. When unchecked, nothing is returned; when checked, "on" is returned. The checked state of the checkbox is preserved.
(2) Checkbox where a return value is specified. When unchecked, nothing is returned; when checked, the string in the value attribute is returned. The checked state of the checkbox is preserved.
(3) A group of checkboxes, all sharing the same name attribute and each having a specified return value. If any one or more of the checkboxes are checked, the value(s) will be returned in a (comma-separated) string containing the value attribute string(s) corresponding to the checked checkbox. If none are checked, no value is returned. This use case illustrates the use of the .Split method to convert the comma-separated values string into an array of strings, which can be evaluated in a for loop. The checked state of each checkbox is preserved.
There is one use case for radio buttons, showing buttons for yes and no (with the no button being checked by default. The checked state of the radio button is preserved.
Run the page and play with the checkboxes/radio buttons, clicking the "Submit" button to see the results.
Hopefully this can be useful to beginners like me.
@{ //illustrates usage of radio buttons and check boxes Page.title = "Checkboxes/Radio Butttons Use Cases"; Layout = "~/_SiteLayout.cshtml"; var cbox1 = Request["cbox1"]; var cbox2 = Request["cbox2"]; var cbox3 = Request["cbox3"].As<string>("");//defaults to empty string var rad1=Request["rad1"]; } <form method="post" action=""> <fieldset class="useCase"> <h4>Checkbox with persistent return value of "on" or null: <input type="checkbox" name="cbox1" @(Request["cbox1"] == "on" ? " checked" : "") /></h4> Value in Cbox1 (should be "on" when checked): @cbox1<br /> <input type="submit" value="submit" /> </fieldset> <fieldset class="useCase"> <h4>Checkbox with persistent return value of "XYZ" XYZ: <input type="checkbox" name="cbox2" value="XYZ" @(Request["cbox2"] == "XYZ" ? " checked" : "") /></h4> Value in Cbox2 (should be "XYZ" when checked): @cbox2 <input type="submit" value="submit" /> </fieldset> <fieldset class="useCase"> <h4>Multiple Checkboxes, returning 0, one,or more persistent values Dogs:<input type="checkbox" name="cbox3" value="Dogs" @(cbox3.Contains("Dogs") ? " checked" : "") /> Cats:<input type="checkbox" name="cbox3" value="Cats" @(cbox3.Contains("Cats") ? " checked" : "") /> Birds:<input type="checkbox" name="cbox3" value="Birds" @(cbox3.Contains("Birds") ? " checked" : "") /> Snakes:<input type="checkbox" name="cbox3" value="Snakes" @(cbox3.Contains("Snakes") ? " checked" : "") /></h4> <p>Value in Cbox3 (should be comma-separated string when any is checked): @cbox3<br /> Here are the values from the checkedboxes:<br /> @foreach (var cbox in cbox3.Split(',')) { @cbox<br /> } </p> <input type="submit" value="submit" /> </fieldset> <br /><br /> <fieldset class="useCase"> <h4>radio Buttons to yield either "y" or"n" (default="n"): <input type="radio" name="rad1" value="y" @(rad1=="y"?" checked":"")/>Yes <input type="radio" name="rad1" value="n" @(rad1=="n"||rad1.IsEmpty()?" checked":"") />No </h4> <p>Here is the value: @rad1</p> <input type="submit" value="submit" /> </fieldset> </form>Radiobutton html RAZOR checkbox
Benatssu
Member
5 Points
12 Posts
Re: examples of Checkboxes and Radio Buttons in WebPages
Jan 15, 2013 04:30 AM|LINK
thank you so much for sharing!
a huge weight off my shoulders ive been stressing how to do this for weeks.. cheers friend!
DanielWayne
Member
5 Points
4 Posts
Re: examples of Checkboxes and Radio Buttons in WebPages
Apr 18, 2013 08:02 PM|LINK
Many thanks! I am new to WebPages (and I love the simplicity). I know how to do this in WebForms and php. But for the life of me I could not find any ANY examples on the internet for how to do this with WebPages and multiple checkboxes. This has saved me a lot of frustration.