Привязка 4-х переключателей с помощью @html.RadioButtonFor MVC4 ASP.Net

Question

Вот мой 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
}

Здесь я устанавливаю свойство Model:

public ValidityTypes ValidityType { get; set; }

Вот мой взгляд:

<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" })
}

Теперь, когда я загружаю это представление, я получаю model.Validitytype как ZeroValidity который такой же, как в базе данных и удовлетворяющий первый if состояние. Но по полной загрузке N months радио кнопка проверяется.

Почему я не могу показать правильный переключатель? Это мой @checked свойство элемента управления не работает?

Answer 1

checked="true" или же checked="false" или же checked="anythingAtAll" все означают одно и то же - переключатель будет проверен. checked атрибут является boolean атрибут, который означает его наличие, который определяет, проверено ли это. В вашем случае последний всегда проверяется, потому что это последний, который отображается (атрибут удаляется из предыдущих, потому что разрешено проверять только один).

Вы никогда не должны устанавливать checked атрибут, потому что RadioButtonFor() Метод делает это на основе значения модели, к которой вы привязываете (так работает привязка модели). Удалить все ваши if/else блоки и изменить код, чтобы просто быть

<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" })

Затем используйте CSS для стилизации ваших элементов, а не встроенных стилей, например

.validity {
    width: 50px;
}

и использовать ненавязчивый JavaScript для обработки ваших событий

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