Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how do radio buttons work with asp.net mvc binding

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?

like image 343
leora Avatar asked Oct 18 '09 23:10

leora


People also ask

How do you add a radio button to a razor?

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.

How are radio buttons implemented?

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.


2 Answers

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:}
}
like image 124
Chuck Conway Avatar answered Sep 28 '22 22:09

Chuck Conway


 @Html.RadioButtonFor(m => m.DateFormat, "MMMM/dd/yy")
 @Html.RadioButtonFor(m => m.DateFormat, "yyyy/MM/dd")
like image 43
mishap Avatar answered Sep 28 '22 23:09

mishap