Twitterbootstrap input-groups with Razor syntax

Question

I'm trying to convert this html:

<div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
</div><!-- /.col-lg-6 -->

Into Razor syntax like this:

<div class="col-lg-6">
    <div class="input-group">
        <span class="input-group-addon">
            @Html.CheckBoxFor(model => model.Negotiable, new { @class = "form-control", @checked = "checked" })
        </span>
        @Html.TextBoxFor(model => model.Price, new { id = "price", @class = "form-control", })
    </div><!-- /input-group -->
</div><!-- /.col-lg-6 -->

But this is the result I get:

On the left you see a vertical grey thing which should have displayed a checkbox.

What am I missing?

Answer 1

Given that the example HTML in your question is correct. Then this is the Razor equivalent of it.

Razor

<div class="col-lg-6">
    <div class="input-group">
        <span class="input-group-addon">
        @Html.CheckBoxFor(model => model.Negotiable, new { @checked = "checked" })
        </span>
        @Html.TextBoxFor(model => model.Price, new { id = "price", @class = "form-control", })
    </div><!-- /input-group -->
</div><!-- /.col-lg-6 -->

The difference is, I have removed the class form-control from @Html.CheckBoxFor as this is not required.