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