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

Posted 2023-02-22

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

【英文标题】：How do you add Bootstrap's close button to ValidationSummary in ASP.NET Forms?

【发布时间】：2015-06-17 05:20:40

【问题描述】：

我正在尝试让 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 来插入标记 渲染（HtmlTextWriter 编写器）。但是结果和之前的尝试一样。

我还尝试将 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>

此外，您需要处理导致验证重置可见性的按钮单击，然后还要从验证摘要中清除 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 更改为您自己的需求，这会很好:)