web-dev-qa-db-fra.com

Afficher ValidationSummary MVC3 en tant que bootstrap "alert-error"

Je souhaite afficher un mcv3 ValidationSummary avec un style Bootstrap "alert-error".

J'utilise une vue Razor et je montre les erreurs de modèle avec ce code:

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

Il génère un code HTML comme ceci:

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

J'ai essayé avec ça aussi:

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

et cela fonctionne bien, mais sans le bouton de fermeture (X)

Il génère un code HTML comme ceci:

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

mais l'alerte Bootstrap devrait avoir ce bouton dans le div:

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

Quelqu'un peut-il aider?

Cela marche! - Merci 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>
}

J'ai également dû supprimer la classe ".validation-summary-errors" de "site.css", car ce style définit d'autres couleur et épaisseur de police.

cssasp.net-mvctwitter-bootstrapvalidationsummary
49
Gonzalo

édité à nouveau

J'ai mal compris votre question au début. Je pense que ce qui suit est ce que vous voulez:

@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

Cette réponse est basée sur celle de RickB

  • Mis à jour pour le dernier bootstrap == >> alert-error n'existe pas en faveur de alert-danger.

  • Fonctionne pour toutes les erreurs de validation, pas seulement Key String.Empty ("")

Pour tous ceux qui utilisent Bootstrap 3 et essaient d’obtenir de belles alertes:

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

La solution fournie par RickB ne fonctionne que sur les erreurs ajoutées manuellement sur (clé String.Empty), mais pas sur celles générées par ModelState (normalement, cela se déclenche en premier via javascript, mais il est toujours conseillé de recourir à un repli si (par exemple) le Html.ValidationMessageFor est manquant ou de nombreuses autres situations.

37
Bart Calixto

Solution alternative. =) 

@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
Peter Lindström

Je n’ai pas aimé le rendu du résumé de validation à l’aide d’une liste à puces (liste non ordonnée) Il y avait beaucoup d'espace inutile sous la liste des erreurs. 

Une solution à ce problème - consiste simplement à parcourir les erreurs et à les rendre comme vous le souhaitez. J'ai utilisé des paragraphes. Par exemple:

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

Le résultat, dans mon cas, ressemble à ceci:  enter image description here

12
Donal

Pensez à écrire une méthode d’extension sur HtmlHelper comme ceci:

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

Ensuite, il vous suffit d’adapter le style ul-li à votre feuille de style.

6
oexenhave

Dans MVC 5, ViewData.ModelState[""] renvoyait toujours une valeur null. J'ai dû recourir à la commande IsValid.

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

J'ai emprunté un chemin légèrement différent: en utilisant JQuery pour accrocher dans le formulaire, envoyez:

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

J'ai cet ensemble dans un module javascript à exécution automatique, de sorte qu'il s'accroche aux résumés de validation que je crée.

HTH

Mandrin

3
SwampyFox

Vous pouvez utiliser jquery:

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

Il recherche toutes les div contenant des classes d'erreur données à partir de bootstrap et écrit en HTML au début de la div. J'ajoute la classe .alert-block car la page de démarrage dit:

Pour les messages plus longs, augmentez le remplissage en haut et en bas du alerte wrapper en ajoutant .alert-block.

2
Mariusz

TwitterBootstrapMVC prend soin de celui-ci avec une seule ligne:

@Html.Bootstrap().ValidationSummary()

Important: pour garantir le même comportement lors des validations côté serveur et côté client (sans obstruction), vous devez inclure un fichier javaScript qui s’occupe de cela.

Vous pouvez personnaliser votre assistant de validation avec des méthodes d'extension comme bon vous semble.

Disclaimer: Je suis l'auteur de TwitterBootstrapMVC. Son utilisation avec Bootstrap 3 nécessite une licence.

1
Dmitry

Cette solution utilise Sass pour le faire fonctionner, mais vous pouvez obtenir le même résultat avec des CSS de base. Pour que cela fonctionne avec la validation côté client, nous ne pouvons pas compter sur la vérification de ModelState car cela suppose qu'une publication a eu lieu. La validation prête à l'emploi de côté client mvc rend déjà les choses visibles au bon moment, alors laissez-les faire et appelez simplement les éléments de la liste dans le récapitulatif de validation pour les rendre comme des alertes bootstrap.

Balisage de rasoir: 

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

Le css produit pour mon projet ressemblait à ceci - le vôtre sera différent:

.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

Solution alternative avec javascript pur (jQuery). Je travaille avec MVC4 + Bootstrap3 mais cela fonctionne parfaitement pour vous.

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

Si vous ne voulez pas écrire de logique côté serveur, c'est une solution alternative intéressante.

1
snekkke

Pour obtenir la même chose dans bootstrap 4, utilisez ce qui suit:

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

En développant la solution de Daniel Björk, vous pouvez inclure un petit script pour ajuster le CSS inclus dans la sortie de ValidationSummary(). L'alerte d'amorçage résultante montrait un problème de rendu jusqu'à ce que je supprime la classe 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>

Vous pouvez aussi facilement donner une surbrillance bootstrap aux champs contenant des erreurs. Voir http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/

0
Chad Kuehn