Binding 4 Radio buttons using @html.RadioButtonFor MVC4 ASP.Net

Question

Here is my ENUM:

public enum ValidityTypes : int
{
    [Description("Not Set")]
    None = 0,
    [Description("Zero Validity")]
    ZeroValidity = 1,
    [Description("Life Time Validity")]
    LifeTimeValidity = 2,
    [Description("N Months")]
    NMonths = 3,
    [Description("Rehire Validity in Months")]
    RehireValidity = 4
}

Here I set the Model property:

public ValidityTypes ValidityType { get; set; }

Here is my View:

<label><b>Zero Validity:</b></label>
@if (Model.ValidityType == Constant.ValidityTypes.ZeroValidity) 
{
    @Html.RadioButtonFor(x => x.ValidityType, "1", new { @id = "validity1", style = "width:50px", @checked = "true" , onClick = "ValidityEnableDisable(this);" })             
}
else
{
    @Html.RadioButtonFor(x => x.ValidityType, "1", new { @id = "validity1", style = "width:50px", @checked = "false" , onClick = "ValidityEnableDisable(this);" })             
}
<label><b>Life Time Validity: </b></label>
@if (Model.ValidityType == OneC.BGV.BE.Constant.ValidityTypes.LifeTimeValidity) 
{
    @Html.RadioButtonFor(x => x.ValidityType, "2", new { @id = "validity2", style = "width:50px", @checked = "true" , onClick = "ValidityEnableDisable(this);" }) 
}
else
{
    @Html.RadioButtonFor(x => x.ValidityType, "2", new { @id = "validity2", style = "width:50px", @checked = "false" , onClick = "ValidityEnableDisable(this);" }) 
}
<label><b>'N' Months:</label>
@if (Model.ValidityType == OneC.BGV.BE.Constant.ValidityTypes.NMonths) 
{ 
    @Html.RadioButtonFor(x => x.ValidityType, "3", new { @id = "validity3", style = "width:50px", @checked = "true", onClick = "Validity3EnableDisable(this);" ,  autocomplete="off" }) 
    @Html.TextBoxFor(x => x.ValidityValue, new { id = "NmonthTextbox", style = "width:50px" })
}
else
{
    @Html.RadioButtonFor(x => x.ValidityType, "3", new { @id = "validity3", style = "width:50px", @checked = "false" , onClick = "Validity3EnableDisable(this);" ,  autocomplete="off"})
    @Html.TextBoxFor(x => x.ValidityValue, new { id = "NmonthTextbox", style = "width:50px", disabled = "true" })
}

Now when I am loading this view I am getting model.Validitytype as ZeroValidity which is same as in the Database and satisfying the first if condition. But on complete view load the N months radio button is coming checked.

Why I am not able to show correct radio button selected? Is it my @checked property of the control is not working?

Answer 1

checked="true" or checked="false" or checked="anythingAtAll" all mean the same thing - the radio button will be checked. The checked attribute is a boolean attribute which means its the presence of it that determines if its checked. In your case the last one is always checked because that is the last one that is rendered (the attribute is removed from the previous ones because only one is allowed to be checked).

You should never set the checked attribute because the RadioButtonFor() method does that based on the value of the model you binding to (that is how model binding works). Remove all your if/else blocks and change the code to simply be

<label>
    @Html.RadioButtonFor(x => x.ValidityType, ValidityTypes.ZeroValidity, new { id = "", @class = "validity" })
    <span>Zero Validity</span>
</label>
<label>
    @Html.RadioButtonFor(x => x.ValidityType, ValidityTypes.LifeTimeValidity, new { id = "", @class = "validity" })
    <span>Life Time Validity</span>
</label>
// labels below omitted for brevity
@Html.RadioButtonFor(x => x.ValidityType, ValidityTypes.NMonths, new { id = "", @class = "validity" })
@Html.RadioButtonFor(x => x.ValidityType, ValidityTypes.RehireValidity, new { id = "", @class = "validity" })

Then use css to style your elements rather than inline styles, e.g.

.validity {
    width: 50px;
}

and use Unobtrusive JavaScript to handle your events

$('.validity').click(function() {
    ....
});