ValidationSummary mcv3に「alert-error」Bootstrapスタイリング。
私は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= alertには、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」クラスを削除する必要がありました。そのスタイルは他のフォントの色と太さを定義するためです。
再度編集
最初はあなたの質問を誤解しました。以下があなたが望むものだと思います:
@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>
}
最新のbootstrap == >>に更新 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">×</button>
@Html.ValidationSummary(false, "Errors: ")
</div>
}
RickBが提供するソリューションは、(String.Emptyキー)に手動で追加されたエラーに対してのみ機能しますが、ModelStateによって生成されたエラーには機能しません(通常、これはjavascriptを介して最初にトリガーされますが、(たとえば)Html.ValidationMessageFor
がないか、他の多くの状況。
代替ソリューション。 =)
@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[""]
は常にnull値を返しました。 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モジュール内にあります。
HTH
チャック
Jqueryを使用できます。
$(function(){
$('.validation-summary-errors.alert.alert-error.alert-block').each(function () {
$(this).prepend('<button type="button" class="close" data-dismiss="alert">×</button>');
});
});
bootstrap=の特定のエラークラスを含むすべてのdivを探し、divの先頭にhtmlを記述しています。.alert-block
bootstrapページが言うように:
長いメッセージの場合、.alert-blockを追加して、アラートラッパーの上部と下部のパディングを増やします。
TwitterBootstrapMVCは1行だけでこれを処理します。
@Html.Bootstrap().ValidationSummary()
重要なことは、サーバー側とクライアント側の(信頼できない)検証中に同じ動作を保証するために、それを処理する javaScriptファイル を含める必要があることです。
検証ヘルパーは、拡張メソッドを使用してカスタマイズできますが、適切と思われます。
免責事項:私はTwitterBootstrapMVCの著者です。 Bootstrap 3で使用するにはライセンスが必要です。
このソリューションではSassを使用して機能させていますが、基本的なcssでも同じことを実現できます。これをクライアント側の検証で機能させるために、ポストバックが発生したと想定しているためModelStateのチェックに依存することはできません。すぐに使用できるmvcクライアント側の検証により、適切なタイミングですでに物事が見えるようになっているので、それを実行し、検証サマリーのリスト項目をスタイルしてbootstrap= alerts 。
カミソリのマークアップ:
@Html.ValidationSummary(false, null, new { @class = "validation-summary-errors-alerts" })
Sass
.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;}
純粋な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">×</button>')
});
サーバー側のロジックを書きたくない場合は、ニースの代替ソリューションです。
クライアントサイドのjavascriptで動作する必要がある場合、これを行うことをお勧めします:
.validation-summary-valid {
display: none;
}
それでもbootstrapクラスを割り当てることができます
@Html.ValidationSummary(null, new {@class= "alert alert-danger" })
ただし、実際のエラーがある場合にのみ表示されます。
bootstrap 4で同じことを実現するには、次を使用します。
@if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0)
{
<div class="col-auto alert alert-danger" role="alert">
@Html.ValidationSummary(true)
</div>
}
DanielBjörkのソリューションを拡張して、ValidationSummary()
出力に含まれるCSSを調整する小さなスクリプトを含めることができます。 validation-summary-errors
クラスを削除するまで、結果のbootstrap=アラートはレンダリングの問題を示していました。
@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>
エラーのあるフィールドにbootstrapハイライトを簡単に付けることもできます。 http://chadkuehn.com/convert-razor-validation-summary-into-を参照してください。 bootstrap-alert /