Button Group of Radio Buttons is not setting any active Button with Bootstrap 3

Question

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.

This should work as long as you are setting the correct PrintType value in your Action method for the view. Did you verify what the value for the PrintType variable ? — Shyju, Feb 19 '16 at 18:04
I copied and pasted your code and it worked for me. Radio button was checked . — Shyju, Feb 19 '16 at 18:16
I don't know how is this possible. In my case I don't get any button active :( — Patrick, Feb 19 '16 at 18:17
I am not sure it is supposed to add a active CSS class. When i checked view source, the radio button was checked. — Shyju, Feb 19 '16 at 18:20
It seems that it add an active call when I select...but this way how can MV add this class? — Patrick, Feb 19 '16 at 18:21

score 2 · Answer 1 · answered Feb 19 '16 at 18:33

2

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

answered Feb 19 '16 at 18:33

Shyju

214,206
104
411
497

Hi thanks. So there is no solution without using jQuery or testing the value to add the value "active" to the element? – Patrick Feb 19 '16 at 18:34
Nothing i am aware of – Shyju Feb 19 '16 at 18:35
I will add the condition @(Model.PrintType == 1 ? "active" : "") to the label for now, I prefer it rather then jQuery in this case, maybe someone come with a better solution, but thanks anyway for your help. – Patrick Feb 19 '16 at 18:52
Yea. That is another solution. I prefer to avoid magic strings to the view :) – Shyju Feb 19 '16 at 19:20
1

I think I am going to use your solution, can I do that $(".qpp-print-type-check-box:checked") ? and insert the class .qpp-print-type-check-box in every option of the checkbox group? -> $(".qpp-print-type-check-box:checked").addClass("active"); – Patrick Feb 22 '16 at 17:26

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

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

Button Group of Radio Buttons is not setting any active Button with Bootstrap 3

2 Answers2

View:

Gender Enum:

GenderList

View will render as below:

Linked