css - Mostrar ValidationSummary MVC3 como "alerta-error" Bootstrap

asp.net-mvc twitter-bootstrap

Question

Quiero mostrar un ValidationSummary mcv3 con un estilo Bootstrap "alerta-error".

Estoy usando una vista Razor, y muestro errores de modelo con este código:

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

Genera código HTML como este:

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

Intenté con esto también:

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

y funciona bien, pero sin el botón de cerrar (X)

Genera código HTML como este:

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

pero Bootstrap alert debería tener este botón en el div:

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

¿Alguien puede ayudar?

¡Esto funciona! - Gracias 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>
} 

También tuve que eliminar la clase ".validation-summary-errors" de "site.css", porque ese estilo define el color y el peso de otra fuente.

Answer 1

Esta respuesta se basa en la de RickB

• Actualizado para el último arranque == >> alert-error no existe a favor del alert-danger de alert-danger .

• Funciona para todos los errores de validación no solo Key String.Empty ("")

Para cualquiera que use Bootstrap 3 y trate de obtener alertas atractivas:

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 solución provista por RickB funciona solo en errores añadidos manualmente en (String.Empty key) pero no en los generados por ModelState (normalmente esto se activa primero a través de javascript, pero siempre es una buena práctica tener un respaldo si (por ejemplo) el Html.ValidationMessageFor falta o muchas otras situaciones.

Answer 2

Ampliando la solución de Daniel Björk puede incluir un pequeño script para ajustar el CSS incluido con la salida ValidationSummary() . La alerta de arranque resultante mostraba un problema de representación hasta que eliminé la clase 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>

También puede proporcionar fácilmente un resaltado bootstrap a los campos con errores. Ver http://chadkuehn.com/convert-razor-validation-summary-into-bootstrap-alert/

Answer 3

Considere escribir un método de extensión para HtmlHelper como:

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

Entonces solo necesita ajustar el estilo ul-li en su hoja de estilo.

Answer 4

En MVC 5, ViewData.ModelState[""] siempre devolvió un valor nulo. Tuve que recurrir al comando IsValid .

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

Answer 5

Esta solución usa Sass para que funcione, pero puedes lograr lo mismo con CSS básico. Para hacer que esto funcione con la validación del lado del cliente, no podemos confiar en comprobar el estado del modelo, ya que supone que se ha producido una devolución de datos. La validación inmediata del lado del cliente de mvc ya hace que las cosas sean visibles en el momento correcto, así que deje que haga su trabajo y simplemente redireccione los elementos de la lista en el resumen de validación para que se muestren como alertas de arranque.

Marcaje de Razor:

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

Hablar con descaro a

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

El css que produjo mi proyecto se veía así: el tuyo será diferente:

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

Answer 6

No me gustó cómo el ValidationSummary rendido usando una lista de viñetas (lista desordenada). Tenía mucho espacio innecesario debajo de la lista de errores.

Una solución a ese problema es simplemente recorrer los errores y presentar los errores como lo desee. Usé párrafos. Por ejemplo:

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

El resultado, en mi caso, se ve así:

Answer 7

Puedes usar jquery:

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

Está buscando cada div que contenga clases de error dadas de bootstrap y escribiendo html al comienzo de div. Estoy agregando clase .alert-block como dice la página bootstrap:

Para mensajes más largos, aumente el relleno en la parte superior e inferior del contenedor de alertas agregando .alert-block.

Answer 8

Solución alternativa con javascript puro (jQuery). Estoy trabajando con MVC4 + Bootstrap3 pero funciona perfecto para ti.

$(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 no desea escribir la lógica del lado del servidor, entonces es una buena solución alternativa.

Answer 9

Solución alternativa. =)

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

Answer 10

Tomé una ruta ligeramente diferente: usando JQuery para engancharme en el formulario enviado:

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

Tengo este conjunto dentro de un módulo JavaScript autoejecutable para que se enganche en los resúmenes de validación que creo.

HTH

Arrojar

Answer 11

TwitterBootstrapMVC se encarga de esto con solo una línea:

@Html.Bootstrap().ValidationSummary()

Importante, para asegurar que se comporte igual durante la validación del lado del servidor y del lado del cliente (no intrusiva), debe incluir un archivo javaScript que se encargue de eso.

Puede personalizar su Ayuda de Validación con métodos de extensión como mejor le parezca.

Descargo de responsabilidad: soy el autor de TwitterBootstrapMVC. Usarlo con Bootstrap 3 requiere una licencia.

Answer 12

editado de nuevo

No entendí tu pregunta al principio. Creo que lo siguiente es lo que quieres:

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

Answer 13

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