【问题标题】:Styling Html.ValidationMessageFor with Bootstrap3使用 Bootstrap3 设置 Html.ValidationMessageFor 样式
【发布时间】:2016-06-06 18:42:56
【问题描述】:

我正在尝试使用 Bootstrap 3 设置 @HTML.ValidationMessageFor 元素的样式,但没有应用 CSS。在咨询Bootstrap's documentation时,它表示:

要使用,请将 .has-warning、.has-error 或 .has-success 添加到父元素。该元素中的任何 .control-label、.form-control 和 .help-block 都将接收验证样式。

即使如上所述嵌套了所需的@Html.ValidationMessageFor,也不会应用任何样式:

请看下面我的代码sn-ps:

模型属性:

[Range(0, int.MaxValue, ErrorMessage = "Client ID cannot be larger than 2147483647.")]
[RegularExpression(@"^[0-9]+$", ErrorMessage = "Client ID must be a positive number.")]
public int searchClientID { get; set; }

查看:

<div class="form-group col-sm-4">
    <div class="input-group">
        <span class="input-group-addon" id="client-ID">Client ID</span>
        @Html.TextBoxFor(m => m.searchClientID, new { @class = "form-control" })
    </div>
    <div class="has-error">
        @Html.ValidationMessageFor(m => m.searchClientID, null, new { @class = "has-error" })
    </div>
</div>

编辑答案:

<div class="has-error">
    @Html.ValidationMessageFor(m => m.searchClientName, String.Empty, new { @class = "help-block" })
</div>

【问题讨论】:

  • has-error 类应该用于 form-group 元素
  • @PavanTeja 我尝试将 div 的类从 form-group 替换为 has-error 并且它根本没有改变样式.我尝试将 has-error 类应用于 div 和 razor 标记,但没有区别。

标签: html css twitter-bootstrap razor asp.net-mvc-5


【解决方案1】:

不要将form-group 替换为has-error。我最近使用了类似的东西并尝试以下标记。

            <div class="form-group has-error">
                <div >
                    @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
                </div>
                @Html.LabelFor(m => m.ConfirmPassword, new { @class = "control-label" })
                @Html.ValidationMessageFor(m => m.ConfirmPassword, "", new { @class = "help-block" })


            </div>

【讨论】:

  • 我将has-error 类留给div 元素,并将help-block 类添加到@Html.ValidationMessageFor HTML 帮助程序。这非常有效!非常感谢。
猜你喜欢
  • 2013-08-23
  • 2014-05-13
  • 1970-01-01
  • 2014-02-10
  • 2018-07-30
  • 2011-08-25
  • 2019-04-07
  • 2011-05-25
  • 2013-06-09
相关资源
最近更新 更多