将ValidationSummary MVC3显示为“alert-error”Bootstrap
我想用“alert-error”Bootstrap样式显示一个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" })
它工作正常，但没有closuresbutton（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>
但引导警报应该有这个button到div：
<button type="button" class="close" data-dismiss="alert">×</button>
谁能帮忙？
这工作！ – 谢谢里克乙
@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”，因为该样式定义了其他字体颜色和重量。
再次编辑
起初我误解了你的问题。 我想以下是你想要的：
@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> }
这个答案是基于RickB的
-
更新了最新的bootstrap == >>
alert-erroralert-danger。 -
适用于所有validation错误不仅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">×</button> @Html.ValidationSummary(false, "Errors: ") </div> }
由RickB提供的解决scheme只能在（String.Empty键）上手动添加错误，而不能在由ModelState生成的错误上（通常这会首先通过JavaScript触发，但是如果（例如） Html.ValidationMessageFor缺失或许多其他情况。
替代scheme。 =）
@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">×</a> @Html.ValidationSummary(true, "Errors: ") </div> }
@Html.ValidationSummary("", new { @class = "alert alert-danger" })
我不喜欢如何使用项目符号列表（无序列表）呈现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> }
结果，就我而言，看起来像这样： 
考虑写一个扩展方法的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的样式。
在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> }
我采取了一个稍微不同的路线：使用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模块内的这个集合，以便它挂钩到我创build的任何validation摘要。
HTH
查
你可以使用jquery：
$(function(){ $('.validation-summary-errors.alert.alert-error.alert-block').each(function () { $(this).prepend('<button type="button" class="close" data-dismiss="alert">×</button>'); }); });
它正在寻找每个div包含给定的错误类从引导和编写html开始的div。 我正在添加.alert-block类作为引导页面说：
对于更长的消息，通过添加.alert-block来增加警报包装的顶部和底部的填充。
纯JavaScript（jQuery）的替代解决scheme。 我正在使用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">×</button>') });
如果你不想编写服务器端的逻辑，那么是一个不错的替代解决scheme。
TwitterBootstrapMVC只需要一行就可以处理这个问题：
@Html.Bootstrap().ValidationSummary()
重要的是，为了确保在服务器端和客户端（无分离）validation期间performance相同，您需要包含一个处理该问题的javaScript文件 。
您可以使用扩展方法自定义您的validation帮助程序，但您认为合适。
免责声明：我是TwitterBootstrapMVC的作者。 与Bootstrap 3一起使用需要许可证。
这个解决scheme使用Sass使其工作，但你可以用基本的CSS来实现相同的事情。 为了使这个工作与客户端validation，我们不能依靠检查ModelState，因为假定发生回发。 开箱即用的mvc客户端validationfunction已经可以在正确的时间显示出来，所以让它做到这一点，并简单地在validation摘要中设置列表项，以便像引导警报一样呈现。
剃刀标记：
@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;}
通过DanielBjörk的解决scheme，您可以添加一个脚本来调整包含在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">×</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/
