i have an strongly typed object that represents all of the textbox properties of a form and it works fine when i post to the controller.
i now need to add a radio button to this form. how does that map to the strongly typed objects?
Razor Radio Buttons. Razor offers two ways to generate radio buttons. The recommended approach is to use the input tag helper. When creating a radio button, you must provide the value of one of the predefined options to the value attribute.
To create each radio button option, create a RadioButton in your layout. However, because radio buttons are mutually exclusive, you must group them together inside a RadioGroup . By grouping them together, the system ensures that only one radio button can be selected at a time.
If you use the HtmlHelper.RadioButton you will be fine as long as the name matches your property name.
Below is a snippet of code from one of my projects:
<span><%= Html.RadioButton("DateFormat", "MMMM/dd/yy", Model.DateFormat.Equals("MMMM/dd/yy"), new Dictionary<string, object> { { "class", "normalwidth" } })%><label class="displayinline"><%=DateTime.Now.ToString("MMMM dd, yyyy")%></label></span>
<span><%= Html.RadioButton("DateFormat", "yyyy/MM/dd", Model.DateFormat.Equals("yyyy/MM/dd"), new Dictionary<string, object> { { "class", "normalwidth" } })%><label class="displayinline"><%=DateTime.Now.ToString("yyyy/MM/dd")%></label></span>
<span><%= Html.RadioButton("DateFormat", "dd/MM/yyyy", Model.DateFormat.Equals("dd/MM/yyyy"), new Dictionary<string, object> { { "class", "normalwidth" } })%><label class="displayinline"><%=DateTime.Now.ToString("dd/MM/yyyy")%></label></span>
<span><%= Html.RadioButton("DateFormat", "", new Dictionary<string, object> { { "class", "normalwidth" } })%><label class="displayinline">custom <%= Html.TextBox("customdate", "", new Dictionary<string, object> { { "style", "width:50px; font-size:12px; display:inline;" } }) %> </label></span>
And here is the rendered HTML. Notice each input has the same name, but different values. Only the selected button will have it's value posted back to the server.
<p><label>Date Format</label>
<span><input class="normalwidth" id="DateFormat" name="DateFormat" type="radio" value="MMMM/dd/yy" /><label class="displayinline">October 18, 2009</label></span>
<span><input checked="checked" class="normalwidth" id="DateFormat" name="DateFormat" type="radio" value="yyyy/MM/dd" /><label class="displayinline">2009/10/18</label></span>
<span><input class="normalwidth" id="DateFormat" name="DateFormat" type="radio" value="dd/MM/yyyy" /><label class="displayinline">18/10/2009</label></span>
<span><input class="normalwidth" id="DateFormat" name="DateFormat" type="radio" value="" /><label class="displayinline">custom <input id="customdate" name="customdate" style="width:50px; font-size:12px; display:inline;" type="text" value="" /> </label></span>
</p>
And in your class:
public class Post
{
public string DateFormat {get; set:}
}
@Html.RadioButtonFor(m => m.DateFormat, "MMMM/dd/yy")
@Html.RadioButtonFor(m => m.DateFormat, "yyyy/MM/dd")
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With