如何在ASP.NET Forms中将Bootstrap的关闭按钮添加到ValidationSummary？

Question

我正在尝试使用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现在是不可见的。

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

此外，您需要处理导致验证重置可见性的按钮单击，然后清除验证摘要中的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
});

Answer 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，这将是很好的:)