使用Razor语法的Twitterbootstrap输入组 [英] Twitterbootstrap input-groups with Razor syntax

问题描述

我正在尝试转换此 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 -->

转换为 Razor 语法如下：

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

但这是我得到的结果：

在左侧，您会看到一个

我缺少了什么？

推荐答案

鉴于您问题中的示例HTML是正确的。

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

不同的是，我删除了类 form-control 来自 @ Html.CheckBoxFor ，因为这不是必需的。

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

这篇关于使用Razor语法的Twitterbootstrap输入组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！