How do you add Bootstrap's close button to ValidationSummary in ASP.NET Forms?

Question

I'm trying to get asp:ValidationSummary to use Bootstrap's alert styles and to include a close button. The styling works, but the close button isn't added.

This is how my .aspx looks like:

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

I've tried to get jQuery to add the button, in $(document).ready , like this:

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

This works just fine if I use a regular div element, but not with asp:ValidationSummary. If I examine the markup on the client, the button isn't rendered there.

I've also tried subclassing asp:ValidationSummary to insert the markup in Render (HtmlTextWriter writer) . But the result is the same as with the previous attempts.

I've also tried to enclose the ValidationSummary inside a div, like this:

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

Which seems to render fine in the browser, but closing with the button prevents the ValidationSummary from showing up again as its parent div is now invisible.

Answer 1

I think you are on the right track with this

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

Additionally you need to handle the button click that causes validation to reset the visibility and then also clear the html from the validation summary.

$( "#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

i think this is the easiest way:

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

this is a pseudo-code just to give you an idea. Change clearConfirmation to your own needs and it will be good :)