css – 当使用Bootstrap和MVC5没有附带的标签时,复选框输入格式不正确

当使用布尔值的模型构建编辑视图时，Visual Studio 2013会生成以下CSHTML：

<div class="form-group">
    @Html.LabelFor(model => model.IsUrgent,htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div class="checkBox">
            @Html.EditorFor(model => model.IsUrgent)
         </div>
    </div>
</div>

经过剃刀后，你会得到这个：

<div class="form-group">
  <label class="control-label col-md-2" for="IsUrgent">Is bad :(</label>
   <div class="col-md-10">
    <div class="checkBox">
      <input class="check-Box" data-val="true" id="IsUrgent" name="IsUrgent" type="checkBox" value="true">
      <input name="IsUrgent" type="hidden" value="false">
    </div>
  </div>
</div>

然而，Twitter Bootstrap 3.2并不喜欢这种使用标签的方法，因为这是结果：

请注意，该复选框位于左侧太多。

如果我把输入包含在一个带有空格的虚拟标签中，即

<div class="form-group">
    <label class="control-label col-md-2" for="IsUrgent">Is good!</label>

    <div class="col-md-10">
      <div class="checkBox">
        <label><input class="check-Box" data-val="true" id="IsUrgent" name="IsUrgent" type="checkBox" value="true">
        <input name="IsUrgent" type="hidden" value="false">&nbsp;</label>
      </div>
    </div>
</div>

我得到这个：

看起来不错，但它无效HTML：

The label element may contain at most one input,button,select,textarea,or keygen descendant.

我的CSS课程有问题吗？

编辑

如果我将标签之外的第二个输入移动到@Saranga表示，我仍然留下不具有语义功能的冗余标签

解决方法

我实现了一个Html Helper CheckBoxForBootstrap，将复选框放在一个标签中，但没有任何标签文本，因此没有冗余标签，但是您仍然可以获得所需的格式。 mvc模型绑定器所需的隐藏字段在添加标签后应该是有效的html。

public static MvcHtmlString CheckBoxForBootstrap(this HtmlHelper htmlHelper,string name,bool isChecked)
{

    TagBuilder checkBox = new TagBuilder("input");
    checkBox.Attributes.Add("type","checkBox");
    checkBox.Attributes.Add("name",name);
    checkBox.Attributes.Add("id",name);
    checkBox.Attributes.Add("data-val","true");
    checkBox.Attributes.Add("value","true");
    if (isChecked)
        checkBox.Attributes.Add("checked","checked");

    TagBuilder label = new TagBuilder("label");
    //nest the checkBox inside the label
    label.InnerHtml = checkBox.ToString(TagRenderMode.Normal);

    TagBuilder hidden = new TagBuilder("input");
    hidden.Attributes.Add("type","hidden");
    hidden.Attributes.Add("name",name);
    hidden.Attributes.Add("value","false");

    return MvcHtmlString.Create(
    label.ToString(TagRenderMode.Normal) 
    + hidden.ToString(TagRenderMode.Normal)
    );
}

原文链接：https://www.f2er.com/css/218105.html

css – 当使用Bootstrap和MVC5没有附带的标签时,复选框输入格式不正确

解决方法

猜你在找的CSS相关文章