Как добавить кнопку закрытия Bootstrap в ValidationSummary в формах ASP.NET?

Я пытаюсь получить asp: ValidationSummary, чтобы использовать стили предупреждения Bootstrap и включить кнопку закрытия. Стилирование работает, но кнопка закрытия не добавляется.

Вот как выглядит мой .aspx:

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

Я попытался добавить jQuery в кнопку $(document).ready, например:

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

Это работает отлично, если я использую обычный элемент div, но не с asp: ValidationSummary. Если я проверю разметку на клиенте, кнопка не отображается там.

Я также пробовал подклассу asp: ValidationSummary, чтобы вставить разметку в Render (HtmlTextWriter writer). Но результат такой же, как и с предыдущими попытками.

Я также попытался заключить ValidationSummary внутри div, например:

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

Кажется, что он отлично выглядит в браузере, но закрытие с помощью кнопки предотвращает отображение ValidationSummary снова, поскольку его родительский div теперь невидим.

Ответ 1

Я думаю, что вы на правильном пути с этим

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

Кроме того, вам необходимо обработать щелчок кнопки, который вызывает проверку на reset видимость, а затем также очистить html из сводки валидации.

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

Ответ 2

Я думаю, что это самый простой способ:

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

Это псевдокод, чтобы дать вам представление. Измените clearConfirmation на свои собственные потребности, и это будет хорошо:)