Afficher ValidationSummary MVC3 en tant que «erreur d’alerte» Bootstrap

Je veux afficher un ValidationSummary mcv3 avec un style Bootstrap “alert-error”.

J’utilise une vue Razor et j’affiche les erreurs de modèle avec ce code:

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

Il génère du code HTML comme celui-ci:

 
Errors:
  • Error 1
  • Error 2
  • Error 3

J’ai essayé avec ça aussi:

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

et ça marche bien, mais sans le bouton de fermeture (X)

Il génère du code HTML comme celui-ci:

 
Errors:
  • Error 1
  • Error 2
  • Error 3

mais l’alerte Bootstrap devrait avoir ce bouton dans la div:

  

Quelqu’un peut-il aider?


Cela marche! – Merci Rick B

 @if (ViewData.ModelState[""] != null && ViewData.ModelState[""].Errors.Count() > 0) { 
×
Ingreso Incorrecto
@Html.ValidationSummary(true)
}

J’ai également dû supprimer la classe “.validation-summary-errors” de “site.css“, car ce style définit une autre couleur et un poids de police.

é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) { 
@Html.ValidationSummary(true, "Errors: ")
}

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

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

  • Fonctionne pour toutes les erreurs de validation non seulement Key Ssortingng.Empty (“”)

Pour toute personne utilisant Bootstrap 3 et essayant d’obtenir de belles alertes:

 if (ViewData.ModelState.Keys.Any(k=> ViewData.ModelState[k].Errors.Any())) { 
@Html.ValidationSummary(false, "Errors: ")
}

La solution fournie par RickB ne fonctionne que sur les erreurs ajoutées manuellement (clé Ssortingng.Empty) mais pas sur celles générées par ModelState (normalement, cela est déclenché d’abord par javascript, mais il est toujours recommandé d’avoir une solution de secours si (par exemple) le Html.ValidationMessageFor manque ou beaucoup d’autres situations.

Solution alternative. =)

 @if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) { // Bootstrap 2 = "alert-error", Bootstrap 3 and 4 = "alert-danger" 
× @Html.ValidationSummary(true, "Errors: ")
}
 @Html.ValidationSummary("", new { @class = "alert alert-danger" }) 

Je n’ai pas aimé comment le rendu ValidationSummary utilisant une liste de 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 à rendre les erreurs comme vous le souhaitez. J’ai utilisé des paragraphes. Par exemple:

 @if (ViewData.ModelState.Any(x => x.Value.Errors.Any())) {  } 

Le résultat, dans mon cas, ressemble à ceci: entrer la description de l'image ici

Envisagez d’écrire une méthode d’extension sur HtmlHelper comme:

 public static class HtmlHelperExtensions { public static HtmlSsortingng ValidationSummaryBootstrap(this HtmlHelper htmlHelper) { if (htmlHelper == null) { throw new ArgumentNullException("htmlHelper"); } if (htmlHelper.ViewData.ModelState.IsValid) { return new HtmlSsortingng(ssortingng.Empty); } return new HtmlSsortingng( "
" + htmlHelper.ValidationSummary() + "
"); } }

Ensuite, il vous suffit de placer le style ul-li dans votre feuille de style.

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

 if (!ViewData.ModelState.IsValid) { 
× Validation Errors @Html.ValidationSummary()
}

J’ai pris une route légèrement différente: utiliser JQuery pour accéder au formulaire de soumission:

 $('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('

Validation Exceptions:

'); } } }); });

Je l’ai mis dans un module javascript auto-exécutable afin qu’il s’accroche à tous les résumés de validation que je crée.

HTH

Mandrin

Vous pouvez utiliser jquery:

 $(function(){ $('.validation-summary-errors.alert.alert-error.alert-block').each(function () { $(this).prepend(''); }); }); 

Il recherche tous les div contenant des classes d’erreur données de bootstrap et écrit html au début du div. .alert-block classe .alert-block car la page bootstrap dit:

Pour les messages plus longs, augmentez le remplissage en haut et en bas de l’encapsuleur d’alerte en ajoutant .alert-block.

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

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

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

 @Html.Bootstrap().ValidationSummary() 

Important: pour vous assurer qu’il se comporte de la même manière lors de la validation côté serveur et côté client (non intrusif), vous devez inclure un fichier javaScript qui s’en charge.

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

Disclaimer: Je suis l’auteur de TwitterBootstrapMVC. L’utiliser avec Bootstrap 3 nécessite une licence.

Cette solution utilise Sass pour le faire fonctionner mais vous pouvez réaliser la même chose avec css de base. Pour que cela fonctionne avec la validation côté client, nous ne pouvons pas vérifier le ModelState car cela suppose qu’une publication a eu lieu. La validation côté client du client mvc rend déjà les choses visibles au bon moment, alors laissez-les faire leur travail et collez simplement les éléments de la liste dans le résumé de validation pour les rendre comme des alertes bootstrap.

Balisage de razor:

 @Html.ValidationSummary(false, null, new { @class = "validation-summary-errors-alerts" }) 

Toupet

 .validation-summary-errors-alerts{ ul{ margin: 0; list-style: none; li{ @extend .alert; @extend .alert-danger; } }} 

Le css qui a 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;} 

En développant la solution de Daniel Björk, vous pouvez inclure un petit script pour ajuster le CSS inclus avec la sortie ValidationSummary() . L’alerte bootstrap 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())) { 
×

Validation Errors

@Html.ValidationSummary()
}

Vous pouvez également facilement mettre en évidence les champs avec des erreurs. Voir http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/