如何在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
});