javascript - bootstrap templates

¿Cómo agregar el botón de cierre de Bootstrap a ValidationSummary en ASP.NET Forms?

Question

Estoy tratando de obtener asp: ValidationSummary para usar los estilos de alerta de Bootstrap e incluir un botón de cierre. El estilo funciona, pero el botón de cierre no se agrega.

Así es como se ve mi .aspx:

<asp:ValidationSummary class="alert alert-danger alert-dismissable"
   ID="ValidationSummary1" ShowSummary="true" runat="server"
   DisplayMode="BulletList"/>

He intentado que jQuery agregue el botón, en $ (document) .ready , así:

$(''.alert-dismissable'').each(function () 
{
   $(this).prepend(''<button type="button" class="close"
      data-dismiss="alert">&times;</button>'');
});

Esto funciona bien si uso un elemento div normal, pero no con asp: ValidationSummary. Si examino el marcado en el cliente, el botón no se representa allí.

También he intentado subclasificar asp: ValidationSummary para insertar el marcado en Render (escritor HtmlTextWriter) . Pero el resultado es el mismo que con los intentos anteriores.

También traté de incluir el resumen de validación dentro de un div, como este:

<div class="alert alert-danger alert-dismissable">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <asp:ValidationSummary
      ID="ValidationSummary1" ShowSummary="true" runat="server"
      DisplayMode="BulletList"/>
</div>

Lo que parece funcionar bien en el navegador, pero cerrar con el botón evita que el resumen de validación se muestre nuevamente, ya que su división principal ahora es invisible.

Answer 1

Creo que estás en el camino correcto con esto

<div id="validationSummary" class="alert alert-danger alert-dismissable">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <asp:ValidationSummary
      ID="ValidationSummary1" ShowSummary="true" runat="server"
      DisplayMode="BulletList"/>
</div>

Además, debe controlar el clic del botón que hace que la validación restablezca la visibilidad y, a continuación, también borre el html del resumen de validación.

$( "#myform" ).submit(function( event ) {
  //clear the validation summary html
  $("#ValidationSummary1").empty(); //this should be the ClientID not the serverID of your validation control.
  //display the validation summary div
  $("#validationSummary").toggle();
  //you might want to remove the ''hidden'' class instead of toggling the divs visibility
});

Answer 2

Creo que esta es la forma más fácil:

      var container = $(''form'').find(''[data-valmsg-summary="true"]'');
                container.addClass(''whatever'').removeclass(''if-you-want'');
                container.find(''ul'').find(''li'').append(''<a class="close" onclick="clearConfirmation()">×</a>'');

  function clearConfirmation() {
            var container = $(''form'').find(''[data-valmsg-summary="true"]'');
            var html = container.html();
            container.find(''ul'').html(null);
            container.removeClass(''alert'').removeClass(''alert-error'');
        }

Este es un pseudocódigo solo para darte una idea. Cambie clearConfirmation a sus propias necesidades y será bueno :)