title: ASP.NET MVC4 Twitter Bootstrap Radio Button Issues
body: <p>I am currently using Bootstrap V3 and MVC4.</p>
  
  <p>I am having issues accessing and formatting data using bootstrap defined radio buttons.</p>
  
  <p>When I declare my radio buttons using the following - Specifically <code>data-toggle="buttons"</code>:</p>
  
  <pre><code>       &lt;div class="btn-group" data-toggle="buttons" style="padding-bottom:10px"&gt;
      &lt;label class="btn btn-primary"&gt;
          @Html.RadioButtonFor(model =&gt; model.searchType, "radiobutton1") RadioButton 1
      &lt;/label&gt;
  
  
      &lt;label class="btn btn-primary"&gt;
          @Html.RadioButtonFor(model =&gt; model.searchType, "radiobutton2") RadioButton2
      &lt;/label&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The result is:</p>
  
  <p><img src="https://i.stack.imgur.com/BzsvX.png" alt="Radiobuttons"></p>
  
  <p>Everything looks perfect. When I select a button, it gets pressed until I select the other.</p>
  
  <p>However, when I submit the form, the value is not passed through to the controller. It is null. I have a strongly typed view that gets values from a textbox and the radio buttons on the page.</p>
  
  <hr>
  
  <p>When I define my radio buttons using the following - Specifically <code>data-toggle="buttons-radio"</code>:</p>
  
  <pre><code>    &lt;div class="btn-group" data-toggle="buttons-radio" style="padding-bottom:10px"&gt;
  
          &lt;label class="btn btn-primary"&gt;
              @Html.RadioButtonFor(model =&gt; model.searchType, "radiobutton1") RadioButton 1
          &lt;/label&gt;
  
  
          &lt;label class="btn btn-primary"&gt;
              @Html.RadioButtonFor(model =&gt; model.searchType, "radiobutton2") RadioButton2
          &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My result is</p>
  
  <p><img src="https://i.stack.imgur.com/i37wj.png" alt="Radiobuttons"></p>
  
  <p>This is not how I want my buttons. The little circles are visible. Not to mention, once I select one of the buttons there is no turning back. I am forced to keep that one, I cannot select the other option.</p>
  
  <p>The one good thing about this option is that I am able to pass in the value that is selected to the controller. When the form is submitted, I am able to see that the value of searchType in my model object is either Radiobutton1 or Radiobutton2.</p>
  
  <hr>
  
  <p>And for those wondering, this is what my model looks like. It has a spot for searchType and searchString.</p>
  
  <pre><code>public class SearchForm
  {
  
      public string searchString{ get; set; }
  
      public string searchType { get; set; }
  }
  </code></pre>
  
  <hr>
  
  <p>What I am asking is how do I combine the 2 results?</p>
  
  <p>One looks perfect but doesn't pass data, the other looks bad and passes in the date.</p>
  
  <p>I have narrowed it down to the <code>data-toggle</code> property being set to either <code>Buttons</code> or <code>Buttons-Radio</code>.</p>