Montrer ValidationSummary MVC3 comme “alerte d'erreur” Bootstrap
Je veux montrer une ValidationSummary mcv3 avec "alerte d'erreur" Bootstrap style.
Je suis à l'aide d'un Rasoir de vue, et je montre des erreurs de modèle avec ce code:
@Html.ValidationSummary(true, "Errors: ")
Il génère du 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 ce trop:
@Html.ValidationSummary(true, "Errors:", new { @class = "alert alert-error" })
et ça marche ok, mais sans le bouton fermer (X)
Il génère du 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 Bootstrap alerte devrait avoir ce bouton dans le div:
<button type="button" class="close" data-dismiss="alert">×</button>
Peut aider quelqu'un?
Cela Fonctionne! - 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 eu à supprimer la classe ".validation-résumé-erreurs" de "du site.css", parce que le style définit une police de couleur et de poids.
- Qu'est-ce que le code HTML généré avec la classe étant définie sur "alert alert-error".
- autre manière tenter cette astuce à retour bootstrap message d'alerte espoir aide à quelqu'un.
Vous devez vous connecter pour publier un commentaire.
réédité
J'ai mal compris votre question. Je pense que la suivante est ce que vous voulez:
Cette réponse est fondée sur RickB un
Mis à jour pour la dernière bootstrap ==>>
n'existe pas en faveur dealert-error
alert-danger
.Fonctionne pour toutes les Erreurs de Validation non seulement la Clé de la Chaîne.Vide ("")
Pour toute personne en utilisant Bootstrap 3 et essayer d'obtenir de jolies alertes:
De la solution fournie par RickB ne fonctionne que sur les ajoutés manuellement les erreurs sur la Corde.Clé vide), mais pas sur ceux générés par ModelState (normalement, elle est déclenchée en premier via javascript, mais c'est toujours une bonne idée d'avoir une solution de secours si (par exemple) le
Html.ValidationMessageFor
est manquant ou de nombreuses autres situations.Solution Alternative. =)
Je n'ai pas aimé la façon dont le ValidationSummary rendu à l'aide d'une liste à puce (liste non ordonnée). Il y avait beaucoup d'espace inutile en dessous de la liste d'erreurs.
Une solution à ce problème est de simplement faire une boucle par les erreurs et de rendre les erreurs de la façon dont vous le souhaitez. J'ai utilisé les paragraphes. Par exemple:
Le résultat, dans mon cas, ressemble à quelque chose comme ceci:
Envisager la rédaction d'une méthode d'extension de la HtmlHelper comme:
Ensuite vous avez juste besoin d'ajustement de l'ul-li style dans votre feuille de style.
MVC 5,
ViewData.ModelState[""]
retourne toujours une valeur null. J'ai dû recourir à laIsValid
commande.J'ai pris une voie légèrement différente: l'utilisation de JQuery pour accrocher dans le formulaire de soumission:
J'ai cet ensemble à l'intérieur d'une auto-exécution de javascript module afin de l'accrocher sur n'importe quel validation des résumés que j'ai créer.
HTH
Chuck
var $element = $(".validation-summary-errors"); $element.addClass("alert alert-danger"); if($element.data("hasTitle") === true) {} else $element.prepend("<p><strong>Please fix these errors:</strong></p>") .data("hasTitle", true);
Vous pouvez utiliser jquery:
Il est à la recherche pour chaque div contenant d'erreur donné des classes de bootstrap et l'écriture de code html au début de la div. Je suis ajoutant des
.alert-block
classe que le bootstrap page dit:Solution Alternative à javascript (jQuery). Je travaille avec MVC4 + Bootstrap3, mais il fonctionne parfaitement pour vous.
Si vous ne voulez pas écrire de côté de serveur logique est alors une bonne alternative à la solution.
TwitterBootstrapMVC prend soin de celui-ci, avec juste une ligne:
Important, pour s'assurer qu'il se comporte de la même au cours de la côté serveur et côté client (unobtrissive) de validation, vous devez inclure une fichier javaScript qui prend soin de cela.
Vous pouvez personnaliser votre Validation helper avec les méthodes d'extension mais vous voyez l'ajustement.
Disclaimer: je suis l'auteur de TwitterBootstrapMVC. En l'utilisant avec Bootstrap 3 nécessite une licence.
Cette solution utilise Sass à le faire fonctionner, mais vous pouvez obtenir la même chose avec les css de base. Pour faire ce travail avec la validation côté client on ne peut pas compter sur la vérification de la ModelState depuis que suppose une publication a eu lieu. L'out-of-the-box mvc côté client, la validation se fait déjà des choses visibles au bon moment afin de laisser faire sa chose et tout simplement le style de la liste des éléments dans le récapitulatif de la validation de rendre comme bootstrap alertes.
Rasoir balisage:
Sass
Le css qui produit pour mon projet était comme ça - le vôtre sera différent:
@import (less) "bootstrap.css";
pour importer le CSS que MOINS, et_.validation-summary-errors { &:extend(.alert); &:extend(.alert-danger); }
d'étendre l'alerte classes.D'une expansion Daniel Björk de la solution, vous pouvez inclure un petit script pour régler le CSS inclus avec
ValidationSummary()
de sortie. La résultante de bootstrap alerte a été montrant un problème de rendu jusqu'à ce que j'ai enlevé levalidation-summary-errors
classe.Vous pouvez également facilement donner un bootstrap en surbrillance les champs avec des erreurs. Voir http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/
Pour atteindre le même dans le bootstrap 4, utilisez la commande suivante:
Si il doit travailler avec javascript côté client, je suggère de le faire:
Vous pouvez toujours affecter la classe de bootstrap
mais il n'affiche que lorsque vous avez des erreurs réelles.