单选按钮的按钮组未使用 Bootstrap 3 设置任何活动按钮答案

【问题标题】：Button Group of Radio Buttons is not setting any active Button with Bootstrap 3单选按钮的按钮组未使用 Bootstrap 3 设置任何活动按钮
【发布时间】：2016-02-19 17:14:35
【问题描述】：

我正在尝试使用 MVC 和 Bootstrap 3 创建一组漂亮的单选按钮：

选择一个选项后：

我将值存储在数据库中，但是当我再次显示视图时，没有选择任何内容：

模型是：

[Table("QuotePiecePrinting")]
public partial class QuotePiecePrinting
{
    [Key]
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
    public int Id { get; set; }

    [Display(Name = "Tipo de Impressão")]
    public int PrintType { get; set; }
}

视图是：

<div class="form-group">
    @Html.LabelFor(model => model.PrintType, htmlAttributes: new { @class = "control-label col-xs-12 col-sm-4 col-md-3" })
    <div class="col-xs-6 col-sm-3 col-md-7 col-lg-6">
        <div class="btn-group btn-group-justified" data-toggle="buttons">
            <label class="btn btn-primary">
                @Html.RadioButtonFor(model => model.PrintType, "1") Digital
            </label>
            <label class="btn btn-primary">
                @Html.RadioButtonFor(model => model.PrintType, "2") Offset Convencional
            </label>
            <label class="btn btn-primary">
                @Html.RadioButtonFor(model => model.PrintType, "3") Offset UV
            </label>
        </div>
    </div>
</div>

为什么当我再次呈现视图时，所选选项的存储值没有反映？

该值已正确存储在数据库中。

【问题讨论】：

只要您在视图的 Action 方法中设置正确的 PrintType 值，这应该可以工作。您是否验证了 PrintType 变量的值？
嗨，是的，我测试了一个隐藏值，我得到
我复制并粘贴了您的代码，它对我有用。单选按钮已选中。
我不确定它是否应该添加一个活动的 CSS 类。当我检查查看源时，单选按钮被选中。
查看我发布的答案。你可以使用jQuery来启用它。

标签： c# asp.net-mvc twitter-bootstrap razor

【解决方案1】：

只要您为您传递给视图的视图模型的 PrintType 属性设置正确的值，这应该可以正常工作（它将选择单选按钮）。

public ActionResult Index()
{
  return View( new QuotePiecePrinting { PrintType=2});
}

但是，如果您希望 css 类处于活动状态，则可以将该 css 类显式应用到文档就绪事件上选定单选按钮的父标签。所以把它添加到你的页面脚本中。

$(function(){
   $("input[name='PrintType']:checked").closest("label.btn").addClass("active");
});

【讨论】：

您好，谢谢。那么不使用jQuery或者测试值来将值“active”添加到元素有没有解决方案？
我什么都不知道
我现在将条件 @(Model.PrintType == 1 ? "active" : "") 添加到标签中，在这种情况下我更喜欢它而不是 jQuery，也许有人带有更好的解决方案，但无论如何感谢您的帮助。
是的。那是另一种解决方案。我更喜欢避免在视图中使用魔术字符串 :)
我想我会使用你的解决方案，我可以这样做 $(".qpp-print-type-check-box:checked") 吗？并在复选框组的每个选项中插入类 .qpp-print-type-check-box ？ -> $(".qpp-print-type-check-box:checked").addClass("active");

【解决方案2】：

尝试下面的代码以使用默认选择功能呈现引导单选按钮组

查看：

<div class="form-group">
    <div id="genderButtonGroup" class="btn-group btn-group-justified" role="group" aria-label="...">
        @{
            foreach (var item in Model.GenderList)
            {
                <div class="btn-group" role="group">
                   <label class="btn btn-default">
                       @Html.RadioButtonFor(m => m.Gender, item.Key, (int)Model.Gender==item.Key ? new { @checked = "checked" } : null)
                       @item.Value
                  </label>
                </div>
            }
        }
    </div>
    @Html.ValidationMessageFor(m => m.Gender)
</div>

性别枚举：

public enum Gender
{
    Male = 0,
    Female = 1,
    RatherNotSay = 2
}

性别列表

它是 Model 类中的一个 IEnumerable 属性，可以使用 Gender Enum 在 Get 控制器操作中填充。

public IEnumerable<KeyValuePair<int, string>> GenderList { get; set; }

视图将呈现如下：

【讨论】：