web-dev-qa-db-de.com

ValidationSummary MVC3 als Bootstrap "alert-error" anzeigen

Ich möchte eine ValidationSummary mcv3 mit "alert-error" Bootstrap-Stil anzeigen.

Ich verwende eine Rasiereransicht und zeige Modellfehler mit diesem Code:

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

Es generiert HTML-Code wie folgt:

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

Ich habe es auch versucht:

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

und es funktioniert in Ordnung, aber ohne die Schaltfläche zum Schließen (X)

Es generiert HTML-Code wie folgt:

<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>

aber der Bootstrap-Alarm sollte diese Schaltfläche im div enthalten:

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

Kann jemand helfen?


Das funktioniert! - Danke Rick 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>
} 

Ich musste auch die Klasse ".validation-summary-errors" aus "site.css" entfernen, da dieser Stil andere Schriftfarbe und Schriftstärke definiert.

49
Gonzalo

erneut bearbeitet

Ich habe deine Frage zuerst missverstanden. Ich denke, das Folgende ist, was Sie wollen:

@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>
}
43
Rick B

Diese Antwort basiert auf RickBs Antwort

  • Aktualisiert für die neueste Bootstrap == >> alert-error existiert nicht zugunsten von alert-danger.

  • Funktioniert bei allen Validierungsfehlern nicht nur Key String.Empty ("")

Für alle, die Bootstrap 3 verwenden und versuchen, schön aussehende Warnungen zu erhalten:

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>
}

Die von RickB bereitgestellte Lösung funktioniert nur bei manuell hinzugefügten Fehlern in (String.Empty-Schlüssel), jedoch nicht bei den von ModelState generierten Fehlern (normalerweise wird dies zuerst über Javascript ausgelöst. Es ist jedoch immer ratsam, einen Fallback auszuführen, wenn beispielsweise der Html.ValidationMessageFor fehlt oder viele andere Situationen.

37
Bart Calixto

Alternative Lösung. =) 

@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>
}
28
Daniel Björk
@Html.ValidationSummary("", new { @class = "alert alert-danger" })
13

Mir hat es nicht gefallen, wie die ValidationSummary mithilfe einer Aufzählungsliste (ungeordnete Liste) gerendert wurde. Es hatte viel unnötigen Platz unter der Fehlerliste. 

Eine Lösung für dieses Problem besteht darin, die Fehler einfach durchzugehen und die Fehler so darzustellen, wie Sie es möchten. Ich habe Absätze verwendet. Zum Beispiel:

@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>
}

Das Ergebnis sieht in meinem Fall ungefähr so ​​aus:  enter image description here

12
Donal

Erwägen Sie, eine Erweiterungsmethode in den HtmlHelper zu schreiben:

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>");
    }
}

Dann müssen Sie nur noch das ul-li-Styling in Ihr Stylesheet einfügen.

6
oexenhave

In MVC 5 hat ViewData.ModelState[""] immer einen Nullwert zurückgegeben. Ich musste auf den Befehl IsValid zurückgreifen.

if (!ViewData.ModelState.IsValid)
{
   <div class="alert alert-danger">
      <a class="close" data-dismiss="alert">×</a>
      <strong>Validation Errors</strong>
      @Html.ValidationSummary()
   </div>
}
4
Rethic

Ich habe einen etwas anderen Weg genommen: Verwenden von JQuery zum Einhängen in das Formular senden:

$('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>');
            }
        }
    });
});

Ich habe dieses Set in ein selbstausführendes Javascript-Modul gesetzt, so dass es sich in alle Validierungszusammenfassungen einfügt, die ich erstelle.

HTH

Futter

3
SwampyFox

Sie können jquery verwenden:

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

Es sucht nach jedem div, das die angegebenen Fehlerklassen von bootstrap und dem Schreiben von html am Anfang des div enthält. Ich füge .alert-block class hinzu, da auf der Bootstrap-Seite Folgendes angezeigt wird:

Erhöhen Sie für längere Nachrichten die Auffüllung oben und unten in der Alert-Wrapper durch Hinzufügen von .alert-block.

2
Mariusz

TWITTERBOOTSTRAPMVC erledigt dies mit nur einer Zeile:

@Html.Bootstrap().ValidationSummary()

Um sicherzustellen, dass es sich auf der serverseitigen und der clientseitigen (unauffälligen) Überprüfung gleich verhält, müssen Sie ein javaScript-Datei hinzufügen, das dies übernimmt.

Sie können Ihren Validation-Helfer mit Erweiterungsmethoden beliebig anpassen.

Haftungsausschluss: Ich bin der Autor von TwitterBootstrapMVC. Die Verwendung mit Bootstrap 3 erfordert eine Lizenz.

1
Dmitry

Diese Lösung verwendet Sass , damit es funktioniert, aber Sie könnten dasselbe mit Basis-Css erreichen. Damit dies mit der clientseitigen Validierung funktioniert, können wir uns nicht auf die Überprüfung des ModelState verlassen, da davon ausgegangen wird, dass ein Postback aufgetreten ist. Die standardmäßige mvc-clientseitige Validierung macht die Dinge bereits zur richtigen Zeit sichtbar. Lassen Sie es also genau das tun und ordnen Sie die Listenelemente in der Validierungszusammenfassung einfach so an, dass sie wie Bootstrap-Alarme dargestellt werden.

Rasiererauszeichnung:

@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;
    }
}}

Die CSS, die für mein Projekt erstellt wurde, sah folgendermaßen aus - Ihre wird anders sein:

.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;}
1
Daniel Kereama

Alternative Lösung mit reinem Javascript (jQuery). Ich arbeite mit MVC4 + Bootstrap3, aber es funktioniert perfekt für Sie.

$(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>')
    });

Wenn Sie keine serverseitige Logik schreiben möchten, ist dies eine Alternative von Nice.

1
snekkke

Wenn es mit clientseitigem Javascript funktionieren soll, empfehle ich Folgendes:

  .validation-summary-valid {
    display: none;
  }

Sie können die Klasse bootstrap weiterhin zuweisen

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

es wird jedoch nur angezeigt, wenn Sie tatsächliche Fehler haben.

0
Quarkson

Um dies in Bootstrap 4 zu erreichen, verwenden Sie Folgendes:

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

Um die Lösung von Daniel Björk zu erweitern, können Sie ein kleines Skript hinzufügen, um das in der ValidationSummary()-Ausgabe enthaltene CSS anzupassen. Die resultierende Bootstrap-Warnung zeigte ein Rendering-Problem an, bis ich die validation-summary-errors-Klasse entfernt habe.

@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>

Sie können Feldern, die fehlerhaft sind, auch ein Bootstrap-Highlight geben. Siehe http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/

0
Chad Kuehn