Button Group of Radio Buttons is not setting any a

问题:

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

After selecting an option:

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

The Model is:

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

The View is:

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

回答1:

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

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

回答2:

Try below code to render bootstrap radio button group with default select feature

View:

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

Gender Enum:

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

GenderList

It is an IEnumerable property in Model class which can be populated in the Get controller action using the Gender Enum.

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

View will render as below: