Button group and MVC questions

I'm making a Radio Buttons Button Group using Bootstrap latest version (following this tutorial), on a field bool? (true/false) from my Model. Here's my code:

<div class="btn-group" role="group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <i class="fas fa-check-circle"></i>
        @Html.RadioButtonFor(m => m.Paid, true) Paid
    </label>
    <label class="btn btn-primary">
        <i class="far fa-times-circle"></i>
        @Html.RadioButtonFor(m => m.Paid, false) Not Paid
    </label>
</div>

which renders in this way:

enter image description here

But I've some problems:

  1. how can I hidden the "radio" check on rendering? I see it next the (fontawesome) icon;
  2. how can I manage this with LabelFor from MVC? So it apply the class "active" when the input is true;
  3. since its a bool?, how can I manage the case null? Right now its only for true or false;

Hope you can help me with this one.

1 answer

  • answered 2018-07-12 08:42 kiranvj

    how can I hidden the "radio" check on rendering? I see it within the icon

    You should add the class btn-group-toggle for this

    <div class="btn-group btn-group-toggle" role="group" data-toggle="buttons">
    

    how can I manage this with LabelFor from MVC? So it apply the class "active" when the input is true;

    You should do something like this.

    <%
    if(Model.isPaid == true) { 
    %>
        <label class="btn btn-primary active">
            <i class="fas fa-check-circle"></i>
            @Html.RadioButtonFor(m => m.Paid, true, new {@checked="checked"}) Paid
        </label>
    <%
    }
    %>
    

    since its a bool?, how can I manage the case null? Right now its only for true or false;

    Initially if neither of the radio buttons are checked, the value will be null. If you select any radio button the value will thereafter either true or false . You cannot make it null after a selection is made.