CSS 将 ValidationSummary MVC3 显示为“警报错误”引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13867307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show ValidationSummary MVC3 as "alert-error" Bootstrap
提问by Gonzalo
I want to show a ValidationSummary mcv3 with "alert-error" Bootstrap styling.
我想显示带有“警报错误”引导程序样式的 ValidationSummary mcv3。
I'm using a Razor view, and I show model errors with this code:
我正在使用 Razor 视图，并使用以下代码显示模型错误：
@Html.ValidationSummary(true, "Errors: ")
It generates HTML code like this:
它生成这样的 HTML 代码：
<div class="validation-summary-errors">
<span>Errors:</span>
<ul>
<li>Error 1</li>
<li>Error 2</li>
<li>Error 3</li>
</ul>
</div>
I tried with this too:
我也试过这个：
@Html.ValidationSummary(true, "Errors:", new { @class = "alert alert-error" })
and it works ok, but without the close button (X)
它工作正常，但没有关闭按钮（X）
It generates HTML code like this:
它生成这样的 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>
but Bootstrap alert should have this button into the div:
但是 Bootstrap 警报应该将此按钮放入 div：
<button type="button" class="close" data-dismiss="alert">×</button>
Can anyone help?
任何人都可以帮忙吗？
This Works! - Thanks Rick B
这有效！- 谢谢里克 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>
}
I also had to remove the class ".validation-summary-errors" from "site.css", because that style defines other font color and weight.
我还必须从“site.css”中删除“.validation-summary-errors”类，因为该样式定义了其他字体颜色和粗细。
采纳答案by Rick B
edited again
再次编辑
I misunderstood your question at first. I think the following is what you want:
我一开始误解了你的问题。我认为以下是您想要的：
@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>
}
回答by Bart Calixto
This answer is based on RickB's one
这个答案是基于 RickB 的一个
Updated for the latest bootstrap ==>>
alert-erroralert-danger.Works for all Validation Errors not only Key String.Empty ("")
更新为最新的引导程序 ==>>
alert-erroralert-danger.适用于所有验证错误，不仅是 Key String.Empty ("")
For anyone using Bootstrap 3 and trying to get nice looking alerts:
对于使用 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>
}
The solution provided by RickB works only on manually added errors on (String.Empty key) but not on those generated by ModelState (normally this gets triggered first via javascript but it's always a good practice to have a fallback if (for example) the Html.ValidationMessageForis missing or many other situations.
通过RickB提供的解决方案仅适用于而不是那些由ModelState中产生的（通常这首先得到通过JavaScript触发手动添加的错误（的String.Empty键），但它始终是一个很好的做法，有一个后备，如果（比如）Html.ValidationMessageFor是失踪或许多其他情况。
回答by Daniel Bj?rk
Alternative solution. =)
替代解决方案。=)
@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>
}
回答by Donal
I did not like how the ValidationSummary rendered using a bullet list (unordered list). It had a lot of unnecessary space below the error list.
我不喜欢使用项目符号列表（无序列表）呈现 ValidationSummary 的方式。它在错误列表下方有很多不必要的空间。
A solution to that issue - is simply to loop through the errors and render the errors how you want. I used paragraphs. For example:
该问题的解决方案 - 只需遍历错误并按照您想要的方式呈现错误。我用了段落。例如：
@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>
}
The result, in my case, looks something like this:
就我而言，结果如下所示：
回答by Peter Lindstr?m
@Html.ValidationSummary("", new { @class = "alert alert-danger" })
回答by oexenhave
Consider writing an extension method to the HtmlHelper like:
考虑为 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>");
}
}
Then you just need to fit the ul-li styling in your stylesheet.
然后你只需要在你的样式表中适应 ul-li 样式。
回答by Rethic
In MVC 5, ViewData.ModelState[""]always returned a null value. I had to resort to the IsValidcommand.
在 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>
}
回答by SwampyFox
I took a slightly different route: using JQuery to hook into the form submit:
我采取了稍微不同的路线：使用 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>');
}
}
});
});
I have this set inside a self-executing javascript module so that it hooks onto any validation summaries that I create.
我在一个自动执行的 javascript 模块中设置了这个集，以便它连接到我创建的任何验证摘要。
HTH
HTH
Chuck
查克
回答by Mariusz
You can use jquery:
您可以使用 jquery：
$(function(){
$('.validation-summary-errors.alert.alert-error.alert-block').each(function () {
$(this).prepend('<button type="button" class="close" data-dismiss="alert">×</button>');
});
});
It is looking for every div containing given error classes from bootstrap and writing html at beginning of the div. I am adding .alert-blockclass as the bootstrap page says:
它从引导程序中查找包含给定错误类的每个 div，并在 div 的开头写入 html。我正在添加.alert-block类作为引导页面说：
For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.
对于较长的消息，通过添加 .alert-block 增加警报包装器顶部和底部的填充。
回答by Dmitry Efimenko
TwitterBootstrapMVCtakes care of this one with just one line:
TwitterBootstrapMVC只用一行来处理这个问题：
@Html.Bootstrap().ValidationSummary()
Important, to assure that it behaves the same during the server side and client side (unobtrissive) validation, you need to include a javaScript filethat takes care of that.
重要的是，为了确保它在服务器端和客户端（不引人注意的）验证期间的行为相同，您需要包含一个处理此问题的javaScript 文件。
You can customize your Validation helper with extension methods however you see fit.
您可以使用扩展方法自定义您的验证助手，但您认为合适。
Disclaimer: I'm the author of TwitterBootstrapMVC. Using it with Bootstrap 3 requires a license.
免责声明：我是 TwitterBootstrapMVC 的作者。将它与 Bootstrap 3 一起使用需要许可证。
