单选按钮的按钮组未使用Bootstrap 3设置任何活动按钮 [英] Button Group of Radio Buttons is not setting any active Button with Bootstrap 3

问题描述

我正在尝试使用MVC和Bootstrap 3创建一组不错的单选按钮:

I am trying to create a nice group of radio buttons with MVC and Bootstrap 3:

选择一个选项后:

我将值存储在数据库中，但是当我再次显示View时，什么都没选择:

I store the value in the database but when I present the View again nothing comes selected:

模型是:

[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>

当我再次显示视图时，为什么未反映所选选项的存储值?

Why is the stored value of the selected option is not reflected when I present the view again?

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

The value is correctly stored in the database.

推荐答案

只要将正确的值设置为要传递给的视图模型的PrintType属性，此方法就可以正常工作(它将选择单选按钮).您的看法.

This should work fine (It will select the radio button) as long as you set the correct value to the PrintType property of your view model which you are passing to your view.

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

但是，如果要使css类处于活动状态，则可以在文档准备事件中将该css类显式应用于所选单选按钮的父标签.因此，将其添加到页面脚本中.

But if you want that to have the css class active, you can explicitly apply that css class to the parent label of the selected radio button on the document ready event. So add this to your page's script.

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

这篇关于单选按钮的按钮组未使用Bootstrap 3设置任何活动按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！