将 ValidationSummary MVC3 显示为“警报错误”引导程序

Posted

技术标签:

【中文标题】将 ValidationSummary MVC3 显示为“警报错误”引导程序【英文标题】:Show ValidationSummary MVC3 as "alert-error" Bootstrap 【发布时间】:2012-12-01 18:47:54 【问题描述】:

我想显示一个带有“alert-error”引导样式的 ValidationSummary mcv3。

我正在使用 Razor 视图,并使用以下代码显示模型错误:

 @html.ValidationSummary(true, "Errors: ")

它会生成这样的 HTML 代码:

<div class="validation-summary-errors">
   <span>Errors:</span>
   <ul>
      <li>Error 1</li>
      <li>Error 2</li>
      <li>Error 3</li>
   </ul>
</div>

我也试过这个:

@Html.ValidationSummary(true, "Errors:", new  @class = "alert alert-error" )   

它工作正常,但没有关闭按钮 (X)

它会生成这样的 HTML 代码:

<div class="validation-summary-errors alert alert-error">
   <span>Errors:</span>
   <ul>
      <li>Error 1</li>
      <li>Error 2</li>
      <li>Error 3</li>
   </ul>
</div>

但是 Bootstrap 警报应该在 div 中有这个按钮:

<button type="button" class="close" data-dismiss="alert">×</button>

谁能帮忙?


这行得通! - 谢谢瑞克 B

@if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0) 
 
   <div class="alert alert-error"> 
      <a class="close" data-dismiss="alert">×</a> 
      <h5 class="alert-heading">Ingreso Incorrecto</h5> 
      @Html.ValidationSummary(true)
   </div>
 

我还必须从“site.css”中删除类“.validation-summary-errors”,因为该样式定义了其他字体颜色和粗细。

【问题讨论】:

类设置为“alert alert-error”时生成的 HTML 是什么。 其他方式尝试this tip 返回引导警报消息希望对某人有所帮助。 【参考方案1】:

再次编辑

一开始我误解了你的问题。我认为以下是您想要的:

@if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count > 0)
 
    <div class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">×</button>
        @Html.ValidationSummary(true, "Errors: ")
    </div>

【讨论】:

该代码不起作用,因为validationsummary 仅在模型中有错误时可见。您的代码会在视图中生成一个永久 div。 我写的内容只是为了测试 html 是否产生了您对 bootstrap 的期望。如果这个简单的静态 html 没有按您的预期显示,那么您有一个 css 问题。 好的,我明白了。您的代码生成相同的 html,但没有关闭按钮。它是正确的。我需要将按钮动态添加到 div 中,因为验证摘要 div 是由 Razor 在更改模型状态时自动生成的。也许还有另一种方式...... @user1898594:您应该将此作为问题的附录发布,而不是作为答案的编辑。 if (!ViewData.ModelState.IsValid) 会简单得多。也可以使用 @Html.ValidationSummary(true, "Errors: ", new @class= "alert alert-danger") 将类附加到验证摘要本身【参考方案2】:

你可以使用jquery:

$(function()
 $('.validation-summary-errors.alert.alert-error.alert-block').each(function () 
     $(this).prepend('<button type="button" class="close" data-dismiss="alert">×</button>');
 );
);

它正在从引导程序中查找包含给定错误类的每个 div,并在 div 的开头编写 html。正如引导页面所说,我正在添加.alert-block 类:

对于较长的消息,增加顶部和底部的填充 通过添加 .alert-block 来提醒包装器。

【讨论】:

【参考方案3】:

我采取了稍微不同的路线:使用 JQuery 挂钩到表单提交:

$('form').each(function() 
    var theForm = $(this);
    theForm.submit(function() 
        if ($(this).valid()) 
            if ($(this).find('.validation-summary-valid').length) 
                $('.validation-summary-errors').hide();
            
         else 
            if ($(this).find('.validation-summary-errors').length) 
                $('.validation-summary-errors')
                    .addClass('alert alert-error')
                    .prepend('<p><strong>Validation Exceptions:</strong></p>');
            
        
    );
);

我在一个自动执行的 javascript 模块中设置了这个,这样它就可以连接到我创建的任何验证摘要上。

HTH

查克

【讨论】:

在重新提交失败时,前置 HTML 多次显示,因此我必须在其上附加一个类并在前置前将其清除。否则,工作得很好。谢谢! @swampyfox,建议修改以修复前置标题:var $element = $(".validation-summary-errors"); $element.addClass("alert alert-danger"); if($element.data("hasTitle") === true) else $element.prepend("&lt;p&gt;&lt;strong&gt;Please fix these errors:&lt;/strong&gt;&lt;/p&gt;") .data("hasTitle", true);【参考方案4】:

此答案基于 RickB 的答案

为最新的引导程序更新 ==>> alert-error 不存在支持alert-danger

不仅适用于所有验证错误 Key String.Empty ("")

对于任何使用 Bootstrap 3 并试图获得漂亮警报的人:

if (ViewData.ModelState.Keys.Any(k=> ViewData.ModelState[k].Errors.Any()))  
    <div class="alert alert-danger">
        <button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        @Html.ValidationSummary(false, "Errors: ")
    </div>

RickB 提供的解决方案仅适用于 (String.Empty key) 上手动添加的错误,但不适用于 ModelState 生成的错误(通常这会首先通过 javascript 触发,但如果(例如) Html.ValidationMessageFor 丢失或许多其他情况。

【讨论】:

【参考方案5】:

替代解决方案。 =)

@if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) 
 
   // Bootstrap 2 = "alert-error", Bootstrap 3 and 4 = "alert-danger"
   <div class="alert alert-danger alert-error"> 
      <a class="close" data-dismiss="alert">&times;</a> 
      @Html.ValidationSummary(true, "Errors: ")
   </div>

【讨论】:

肯定比我的 linq 更好:D 正是我所需要的——我所做的唯一更改是将 false 作为参数传递给 ValidationSummary(),因为我有一个选项卡式 UI,并且还希望显示所有属性级模型错误。跨度> 很好的答案,正是我想要的:)【参考方案6】:

TwitterBootstrapMVC 只需一行代码就可以解决这个问题:

@Html.Bootstrap().ValidationSummary()

重要的是,为了确保它在服务器端和客户端(不显眼)验证期间的行为相同,您需要包含一个 javaScript file 来处理这个问题。

您可以使用扩展方法自定义您的验证助手,但您认为合适。

免责声明:我是 TwitterBootstrapMVC 的作者。在 Bootstrap 3 中使用它需要许可证。

【讨论】:

这是一个整洁的库。好主意! 值得注意的是,如果您将其用于 Bootstrap 3,则需要付费许可证。价格为twitterbootstrapmvc.com/Download【参考方案7】:

考虑为 HtmlHelper 编写一个扩展方法,例如:

public static class HtmlHelperExtensions

    public static HtmlString ValidationSummaryBootstrap(this HtmlHelper htmlHelper)
    
        if (htmlHelper == null)
        
            throw new ArgumentNullException("htmlHelper");
        

        if (htmlHelper.ViewData.ModelState.IsValid)
        
            return new HtmlString(string.Empty);
        

        return new HtmlString(
            "<div class=\"alert alert-warning\">"
            + htmlHelper.ValidationSummary()
            + "</div>");
    

那么你只需要在你的样式表中适配 ul-li 样式。

【讨论】:

【参考方案8】:

纯 javascript (jQuery) 的替代解决方案。我正在使用 MVC4 + Bootstrap3,但它非常适合您。

$(function () 
        $(".validation-summary-errors").addClass('alert alert-danger');
        $(".validation-summary-errors").prepend('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>')
    );

如果您不想编写服务器端逻辑,那么这是一个不错的替代解决方案。

【讨论】:

【参考方案9】:

在 MVC 5 中,ViewData.ModelState[""] 总是返回一个空值。我不得不求助于IsValid 命令。

if (!ViewData.ModelState.IsValid)

   <div class="alert alert-danger">
      <a class="close" data-dismiss="alert">×</a>
      <strong>Validation Errors</strong>
      @Html.ValidationSummary()
   </div>

【讨论】:

【参考方案10】:

扩展 Daniel Björk 的解决方案,您可以包含一个小脚本来调整 ValidationSummary() 输出中包含的 CSS。在我删除 validation-summary-errors 类之前,生成的引导警报一直显示呈现问题。

@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");
</script>

您还可以轻松地为有错误的字段提供引导突出显示。见http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/

【讨论】:

【参考方案11】:
@Html.ValidationSummary("", new  @class = "alert alert-danger" )

【讨论】:

很惊讶这上面没有 cmets。这是完美的,即使是 4 年后。 没关系,我收回了。无论是否有错误,都将 div 放入。【参考方案12】:

我不喜欢 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>

在我的例子中,结果如下所示:

【讨论】:

【参考方案13】:

此解决方案使用 Sass 使其工作,但您可以使用基本的 css 实现相同的目标。为了使这项工作与客户端验证一起工作,我们不能依赖检查 ModelState,因为它假设已经发生了回发。开箱即用的 mvc 客户端验证已经让事情在正确的时间可见,所以让它做它的事情并简单地设置验证摘要中的列表项的样式,以像引导警报一样呈现。

Razor 标记:

@Html.ValidationSummary(false, null, new  @class = "validation-summary-errors-alerts" )

萨斯

.validation-summary-errors-alerts
ul
    margin: 0;
    list-style: none;
    li
        @extend .alert;
        @extend .alert-danger;
    

为我的项目生成的 css 看起来像这样 - 你的会有所不同:

.validation-summary-errors-alerts ul li 
min-height: 10px;
padding: 15px 20px 15px 62px;
position: relative;
border: 1px solid #ca972b;
color: #bb7629;
background-color: #fedc50;
font-family: Arial;
font-size: 13px;
font-weight: bold;
text-shadow: none;

【讨论】:

这并没有解决关闭按钮的问题,但是我赞成,因为这是在不更改验证器标记的情况下使用 Bootstrap 样式的绝佳方式。 BootStrap 警报的“关闭”行为无论如何都依赖于 JavaScript/progressive-enhancement,因此通过 JavaScript 添加按钮可能更有效。使用 LESS,可以使用以下语法实现相同的目的:@import (less) "bootstrap.css"; 将 CSS 导入为 LESS,_.validation-summary-errors &amp;:extend(.alert); &amp;:extend(.alert-danger); 扩展警报类。【参考方案14】:

要在 bootstrap 4 中实现相同的效果,请使用以下命令:

 @if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0)
        
            <div class="col-auto alert alert-danger" role="alert">
                @Html.ValidationSummary(true)
            </div>
        

【讨论】:

【参考方案15】:

如果它需要使用客户端 javascript,我建议这样做:

  .validation-summary-valid 
    display: none;
  

你仍然可以分配引导类

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

但它只会在您有实际错误时显示。

【讨论】:

【参考方案16】:

根据这里的答案:

@if (!ViewData.ModelState.IsValid)

    <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert">×</button>
        @Html.ValidationSummary(false, "Errors: ")
    </div>

(我使用的是 Bootstrap 4)

【讨论】:

以上是关于将 ValidationSummary MVC3 显示为“警报错误”引导程序的主要内容,如果未能解决你的问题,请参考以下文章

使用以编程方式添加的验证器将超链接添加到 ValidationSummary

ASP.NET MVC Html.ValidationSummary(true) 不显示模型错误

使用 OnClientClick 检查 ValidationSummary 是不是有效

通过 CSS 用框包围 ValidationSummary

ValidationSummary 超链接不会更改选项卡

如何在 ASP.NET Forms 中将 Bootstrap 的关闭按钮添加到 ValidationSummary?