问题描述
背景
我有一个包含三个布尔的模型
I have a model containing three bools
public class PageDataModel
{
public bool setting1 { get; set; }
public bool setting2 { get; set; }
public bool setting3 { get; set; }
}
如果一个值是true，则其他值必须是false.
If one value is true, the others must be false.
在我看来，我正在显示三个单选按钮:
In my view, I am displaying three radio buttons:
我认为的剃刀代码:
<div class="row">
<div class="radio">
@if (Model.Setting1)
{
@Html.RadioButtonFor(m => m.Setting1, "Setting1", new { Checked = "checked", Name = "Group"})
}
else
{
@Html.RadioButtonFor(m => m.Setting1, "Setting1", new { Name = "Group"})
}
@Html.Label("Setting1")
</div>
<div class="radio">
@if (Model.Setting2)
{
@Html.RadioButtonFor(m => m.Setting2, "Setting2", new { Checked = "checked", Name = "Group" })
}
else
{
@Html.RadioButtonFor(m => m.Setting2, "Setting2", new { Name = "Group"})
}
@Html.Label("Setting2")
</div>
<div class="radio">
@if (Model.Setting3)
{
@Html.RadioButtonFor(m => m.Setting3, "Setting3", new { Checked = "checked", Name = "Group" })
}
else
{
@Html.RadioButtonFor(m => m.Setting3, "Setting3", new { Name = "Group"})
}
@Html.Label("Setting3")
</div>
<button type="submit" class="btn btn-default">Save</button>
</div>
在我的控制器中，我将返回一个将setting1设置为true的模型:
In my controller, I am returning a model with setting1 set to true:
var model = new PageDataModel
{
Setting1 = true,
Setting2 = false,
Setting3 = false
};
return View(model);
这可以正常工作，页面上的设置1"单选按钮处于选中状态.
This works correctly, the page is loaded with the 'setting 1' radio button checked.
问题
提交表单时，无论选中哪个单选按钮，发布的模型都包含所有假值.
When I submit the form, the posted model contains all false values, regardless of which radio button was checked.
我尝试将值从"setting1"更改为true/false，但这对返回的数据没有影响.
I've tried changing the value from "setting1" to true/false, but that had no impact on the returned data.
我很确定我没有正确设置绑定，但是我不确定我要去哪里.
I'm fairly sure I'm not setting up the binding properly, but I'm not sure where I'm going wrong.
我发现的所有其他示例都将两个单选按钮绑定到一个bool值(例如，将一对单选按钮是/否绑定到一个bool).我可以更改代码以使用一个int属性，但是我想使用布尔值来解决此问题.
All other examples I have found are binding two radio buttons to one bool value (for example, a yes/no pair of radio buttons bound to one bool). I can change the code to use one int property, but I'd like to solve this using bools.
我做错了什么?我在这里滥用单选按钮吗?
What am I doing wrong? Am I misusing radio buttons here?
推荐答案
从技术上讲，只要将值设置为true，就可以正常工作.例如:
Technically, this would work fine as long as you have the value set to true. For example:
@Html.RadioButtonFor(m => m.setting1, true)
这样，如果选择了广播，它将发布true.
With that, if the radio is selected, it will post true.
但是，这里无法解决的问题是，这并不是无线电设计的功能.无线电是组的一部分，由name属性的值确定.这将导致选择一个无线电以取消选择具有相同name属性的所有无线电.但是，使用RadioButtonFor将根据属性名称为每个单选电台赋予不同的名称.换句话说，您将得到:
However, the insurmountable problem here is that this is not how radios are designed to function. A radio is part of a group, determined by the value of the name attribute. This causes selecting one radio to deselect all radios with the same name attribute. Using RadioButtonFor, though, will give each radio a different name, based on the property name. In other words, you'd end up with:
<input type="radio" id="setting1" name="setting1" value="true" />
<input type="radio" id="setting2" name="setting2" value="true" />
<input type="radio" id="setting3" name="setting3" value="true" />
那么，每个无线电将成为不同组的一部分，每个无线电仅由一个无线电组成(这意味着默认情况下将选择每个无线电).您可以覆盖name属性，但是发布的值将不再绑定到实际属性.例如，如果您有:
Each radio, then, would be part of a different group, consisting of only one radio each (meaning each will be selected by default). You could override the name attribute, but then the posted value would no longer bind to the actual property. For example, if you had:
<input type="radio" id="setting1" name="setting" value="true" />
<input type="radio" id="setting2" name="setting" value="true" />
<input type="radio" id="setting3" name="setting" value="true" />
由于它们现在都属于同一广播组，因此该值将发布到setting，并且总是为真.
Such that they're all now part of the same radio group, the value would be posted to setting and it would always be true.
长短不一，根本没有办法做到这一点.您可以 进行的操作是使用另一个属性代理该值.
Long and short, there's just no way to make this work like this. What you can do is proxy the value using another property.
public class PageDataModel
{
public bool setting1 { get; set; }
public bool setting2 { get; set; }
public bool setting3 { get; set; }
public string SelectedSetting
{
get
{
if (setting1) return "setting1";
if (setting2) return "setting2";
if (setting3) return "setting3";
return null; // or you can set a default here
}
set
{
switch (value)
{
case "setting1":
setting1 = true;
break;
case "setting2":
setting2 = true;
break;
case "setting3":
setting3 = true;
break;
}
}
}
}
然后，在您看来:
<div class="radio">
<label>
@Html.RadioButtonFor(m => m.SelectedSetting, "setting1")
@Html.DisplayNameFor(m => m.setting1)
</label>
</div>
<div class="radio">
<label>
@Html.RadioButtonFor(m => m.SelectedSetting, "setting2")
@Html.DisplayNameFor(m => m.setting2)
</label>
</div>
<div class="radio">
<label>
@Html.RadioButtonFor(m => m.SelectedSetting, "setting3")
@Html.DisplayNameFor(m => m.setting3)
</label>
</div>
现在，所有广播都将被分组为"SelectedSetting"，并将发布到SelectedSetting属性.该属性的自定义getter和setter确保在实际的settingX属性上设置正确的布尔值.
Now, the radios will all be grouped as "SelectedSetting" and will post to the SelectedSetting property. The custom getter and setter on that propery ensures that the proper boolean values will be set on the actual settingX properties.
这篇关于将多个单选按钮绑定到单个布尔值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！