将 Twitter 引导验证样式和消息应用于 ASP.NET MVC 验证

Posted 2023-03-06

技术标签:

【中文标题】将 Twitter 引导验证样式和消息应用于 ASP.NET MVC 验证【英文标题】：Apply Twitter Bootstrap Validation Style and Message to ASP.NET MVC validation 【发布时间】：2012-07-13 03:57:51 【问题描述】：

如何集成 ASP.NET MVC 不显眼的验证和 Twitter Bootstrap？我想适当地拥有所有这些验证消息和样式。

【问题讨论】：

可能和这个***.com/questions/11065442/…有关 【参考方案1】：

如果您使用的是 Bootstrap 2，一个很好的处理方法是......

将此添加到您的_Layout.cshtml：

<script type="text/javascript">

jQuery.validator.setDefaults(
    highlight: function (element, errorClass, validClass) 
        if (element.type === 'radio') 
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
         else 
            $(element).addClass(errorClass).removeClass(validClass);
            $(element).closest('.control-group').removeClass('success').addClass('error');
        
    ,
    unhighlight: function (element, errorClass, validClass) 
        if (element.type === 'radio') 
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
         else 
            $(element).removeClass(errorClass).addClass(validClass);
            $(element).closest('.control-group').removeClass('error').addClass('success');
        
    
);

$(function () 

    $("span.field-validation-valid, span.field-validation-error").addClass('help-inline');
    $("div.control-group").has("span.field-validation-error").addClass('error');
    $("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-error");

);

</script>

这些是我在上面找到代码片段的帖子：

Integrating Bootstrap Error styling with MVC’s Unobtrusive Error Validation

Twitter Bootstrap validation styles with ASP.NET MVC

MVC Twitter Bootstrap unobtrusive error handling

更新

现在我在使用Bootstrap 3 时也需要这样做。以下是类名更改后所需的修改：

<script type="text/javascript">

    jQuery.validator.setDefaults(
        highlight: function (element, errorClass, validClass)
        
            if (element.type === 'radio')
            
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
             else
            
                $(element).addClass(errorClass).removeClass(validClass);
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            
        ,
        unhighlight: function (element, errorClass, validClass)
        
            if (element.type === 'radio')
            
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
             else
            
                $(element).removeClass(errorClass).addClass(validClass);
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            
        
    );

$(function () 

    $("span.field-validation-valid, span.field-validation-error").addClass('help-block');
    $("div.form-group").has("span.field-validation-error").addClass('has-error');
    $("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-danger");

);

</script>

【讨论】：

@628426 很高兴它有帮助。 :) 还想感谢您提供 3.0 版本。节省了我一些时间。 ;) @NateJackson 来回馈！很高兴它有帮助。 :) Bootstrap 4 有推荐的方法吗？【参考方案2】：

在您的 css 文件中复制验证器的 css 并相应地更改颜色。这样的事情应该做

.field-validation-error 
    color: #b94a48;
    display: inline-block;
    *display: inline;
    padding-left: 5px;
    vertical-align: middle;
    *zoom: 1;


.field-validation-valid 
    display: none;


.input-validation-error 
    /*
    border: 1px solid #ff0000;
    background-color: #ffeeee;
    */
    color: #b94a48;
    border-color: #b94a48;


.input-validation-error:focus 
  border-color: #953b39;
  -webkit-box-shadow: 0 0 6px #d59392;
  -moz-box-shadow: 0 0 6px #d59392;
  box-shadow: 0 0 6px #d59392;


.validation-summary-errors 
    /*font-weight: bold;*/
    color: #b94a48;


.validation-summary-valid 
    display: none;

【讨论】：

为了满足我的需要，肯定更喜欢 CSS 解决方案而不是 JS 解决方案（并且还没有使用 LESS） - 谢谢！如果您喜欢我，请将用户身份验证字段放在徽标对面的标题中。在 .field-validation-error 中，您可以添加 position:absolute 和背景颜色。它不会影响标题的外观。【参考方案3】：

我建议以更少的格式包含 Bootstrapper，并执行与 Iridio 建议的相同的操作，但使用 .less。这样你就可以有类似的东西：

.validation-summary-errors

    .alert();
    .alert-error();

.field-validation-error 

    .label();
    .label-important();

因此，当引导程序发生更改时，您将自动获取更改。处理来自 MVC 默认 Site.css 的可见性的常规样式将保留在原地并处理可见性。

【讨论】：

就我个人而言，我更喜欢简单地使用单独的文件来处理这样的小文件。我同意this article，但像往常一样，我认为这是品味问题 @Shaddix 我该怎么做？我有我的 Bootstrap.css 文件，而且我刚刚添加了一个 Alerts.less 文件，其中包含您发布的内容。但它似乎不是那样工作的。正确的做法是什么？您可以在不使用 LESS、复制粘贴 CSS 样式或使用 JavaScript 的情况下实现此目的。请看我添加的答案。完美 - 即使在 Bootstrap 3 中也非常适合我，除了 alert-error() 必须是 alert-danger() 和 label-important() 需要是 label-warning()。【参考方案4】：

为什么不直接使用 css !important 并收工：

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error 
    color: #f00 !important;


.field-validation-valid 
    display: none;


.input-validation-error 
    border: 1px solid #f00 !important;
    background-color: #fee !important;


.validation-summary-errors 
    font-weight: bold;
    color: #f00;


.validation-summary-valid 
    display: none;

【讨论】：

【参考方案5】：

在 Bootstrap 3 你必须添加：

.validation-summary-errors

    .alert();
    .alert-danger();

.field-validation-error 

    .label();
    .label-danger();

你会看到类似的东西：

【讨论】：

那是css的一部分吗？ Resharper 向我抱怨说，警报后的 () 是一个意外标记。少了。如果您想在纯 CSS 中执行此操作，则必须复制那些 alert/alert-danger/label/label-danger 涵盖的样式。顺便说一句，这看起来很整洁。不将has-error 应用于整个控制组，因此标签不着色/不使用默认引导验证样式。也没有涵盖该字段本身，但这很简单，因为该字段无论如何都会有一个类。看起来确实很整洁。我会使用这个想法 - 非常感谢！【参考方案6】：

对于ValidationSummary，您可以使用允许您指定htmlAttributes 的重载。这允许您将其设置为使用 Twitter Bootstrap 警报 css 样式。

@Html.ValidationSummary(string.Empty, new  @class = "alert alert-danger" )

ValidationMessage 和 ValidationMessageFor 辅助方法存在类似的重载。

【讨论】：

如果你遇到验证消息分成两行的情况，它不起作用这应该是公认的答案。无需破解。【参考方案7】：

您可以通过将以下 javascript 添加到您的页面（视图）来将 MVC3 验证与 Bootstrap 框架集成

<script>
$(document).ready(function () 
/* Bootstrap Fix */
$.validator.setDefaults(
    highlight: function (element) 
        $(element).closest("div.control-group").addClass("error");
    ,
    unhighlight: function (element) 
        $(element).closest("div.control-group").removeClass("error");
    
);
var current_div;
$(".editor-label, .editor-field").each(function () 
    var $this = $(this);
    if ($this.hasClass("editor-label")) 
        current_div = $('<div class="control-group"></div>').insertBefore(this);
    
    current_div.append(this);
);
$(".editor-label").each(function () 
    $(this).contents().unwrap();
);
$(".editor-field").each(function () 
    $(this).addClass("controls");
    $(this).removeClass("editor-field");
);
$("label").each(function () 
    $(this).addClass("control-label");
);
$("span.field-validation-valid, span.field-validation-error").each(function () 
    $(this).addClass("help-inline");
);
$("form").each(function () 
    $(this).addClass("form-horizontal");
    $(this).find("div.control-group").each(function () 
        if ($(this).find("span.field-validation-error").length > 0) 
            $(this).addClass("error");
        
    );
);
);
</script>

此外，在视图（例如“Create.cshtml”）上，确保表单中的字段格式如下...

    <div class="editor-label">
        @Html.LabelFor(Function(model) model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(Function(model) model.Name)
        @Html.ValidationMessageFor(Function(model) model.Name)
    </div>

【讨论】：

【参考方案8】：

对于那些使用 Bootstrap 3 的人，css 类已经改变，上面的解决方案需要修改才能与 Bootstrap 3 一起使用。我已经成功地使用了 MVC 4 和 Bootstrap 3。请参阅this SO 线程了解更多信息：

$(function () 
 // any validation summary items should be encapsulated by a class alert and alert-danger
    $('.validation-summary-errors').each(function () 
        $(this).addClass('alert');
        $(this).addClass('alert-danger');
    );

    // update validation fields on submission of form
    $('form').submit(function () 
        if ($(this).valid()) 
            $(this).find('div.control-group').each(function () 
                if ($(this).find('span.field-validation-error').length == 0) 
                    $(this).removeClass('has-error');
                    $(this).addClass('has-success');
                
            );
        
        else 
            $(this).find('div.control-group').each(function () 
                if ($(this).find('span.field-validation-error').length > 0) 
                    $(this).removeClass('has-success');
                    $(this).addClass('has-error');
                
            );
            $('.validation-summary-errors').each(function () 
                if ($(this).hasClass('alert-danger') == false) 
                    $(this).addClass('alert');
                    $(this).addClass('alert-danger');
                
            );
        
    );

    // check each form-group for errors on ready
    $('form').each(function () 
        $(this).find('div.form-group').each(function () 
            if ($(this).find('span.field-validation-error').length > 0) 
                $(this).addClass('has-error');
            
        );
    );
);

var page = function () 
    //Update the validator
    $.validator.setDefaults(
        highlight: function (element) 
            $(element).closest(".form-group").addClass("has-error");
            $(element).closest(".form-group").removeClass("has-success");
        ,
        unhighlight: function (element) 
            $(element).closest(".form-group").removeClass("has-error");
            $(element).closest(".form-group").addClass("has-success");
        
    );
();

【讨论】：

【参考方案9】：

您可以在 Site.css 文件中添加一些类：

/* styles for validation helpers */
.field-validation-error 
    color: #b94a48;


.field-validation-valid 
    display: none;


input.input-validation-error 
    border: 1px solid #b94a48;


select.input-validation-error 
    border: 1px solid #b94a48;


input[type="checkbox"].input-validation-error 
    border: 0 none;


.validation-summary-errors 
    color: #b94a48;


.validation-summary-valid 
    display: none;

仅供参考：http://weblogs.asp.net/jdanforth/form-validation-formatting-in-asp-net-mvc-5-and-bootstrap-3

【讨论】：

【参考方案10】：

这会将ValidationSummary() 转换为自举警报。您可以包含一个小脚本来删除不必要的类并突出显示有问题的字段。

@if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) 
   <div class="alert alert-danger">
      <a href="#" class="close" data-dismiss="alert">&times;</a>
      <h4>Validation Errors</h4>
      @Html.ValidationSummary()
   </div>


<script>
$(".validation-summary-errors").removeClass("validation-summary-errors");
$(".input-validation-error").removeClass("input-validation-error").parent().addClass("has-error");
</script>

在http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/查看更多信息

【讨论】：

【参考方案11】：

这是一个简洁的解决方案，让您可以更好地控制 ValidationSummary 如何将错误呈现给视图。它生成的无序列表在警报中看起来并不正确。因此，我只是简单地遍历错误并按照我想要的方式呈现它们 - 在这种情况下使用段落。例如：

@if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))

    <div class="alert alert-danger" role="alert">
        <a class="close" data-dismiss="alert">×</a>
        @foreach (var modelError in Html.ViewData.ModelState.SelectMany(keyValuePair => keyValuePair.Value.Errors))
        
            <p>@modelError.ErrorMessage</p>
        
    </div>

这会产生简洁的验证摘要警报：

【讨论】：

此方法仅适用于服务器端验证，不适用于客户端验证，因为无法在客户端评估 if 语句。【参考方案12】：

以下内容对我有用：

$(function () 
    // any validation summary items should be encapsulated by a class alert and alert-danger
    $('.validation-summary-errors').each(function () 
        $(this).addClass('alert');
        $(this).addClass('alert-danger');
    );

    // update validation fields on submission of form
    $('form').submit(function () 
        if ($(this).valid()) 
            $(this).find('div.control-group').each(function () 
                if ($(this).find('span.field-validation-error').length == 0) 
                    $(this).removeClass('has-error');
                    $(this).addClass('has-success');
                
            );
        
        else 
            $(this).find('div.control-group').each(function () 
                if ($(this).find('span.field-validation-error').length > 0) 
                    $(this).removeClass('has-success');
                    $(this).addClass('has-error');
                
            );
            $('.validation-summary-errors').each(function () 
                if ($(this).hasClass('alert-danger') == false) 
                    $(this).addClass('alert');
                    $(this).addClass('alert-danger');
                
            );
        
    );

    // check each form-group for errors on ready
    $('form').each(function () 
        $(this).find('div.form-group').each(function () 
            if ($(this).find('span.field-validation-error').length > 0) 
                $(this).addClass('has-error');
            
        );
    );
);

var page = function () 
    //Update the validator
    $.validator.setDefaults(
        highlight: function (element) 
            $(element).closest(".form-group").addClass("has-error");
            $(element).closest(".form-group").removeClass("has-success");
        ,
        unhighlight: function (element) 
            $(element).closest(".form-group").removeClass("has-error");
            $(element).closest(".form-group").addClass("has-success");
        
    );
();

取自http://www.benripley.com/development/javascript/asp-mvc-4-validation-with-bootstrap-3。

【讨论】：

以上是关于将 Twitter 引导验证样式和消息应用于 ASP.NET MVC 验证的主要内容，如果未能解决你的问题，请参考以下文章

如何验证 twitter 引导表单向导

样式化 twitter 引导按钮

配置 KnpPaginator 以使用 Twitter Bootstrap

将引导样式应用于 django 表单

如何将样式仅应用于引导程序中的特定屏幕类型

PHP 分页使用twitter引导样式