如何在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，這將是很好的:)