如何使用 c# 在 asp.net 中隐藏和显示警报

Question

因此，我有一个简单的 asp.net 应用程序，当单击按钮时，我想根据用户的提交向用户提供成功警报或错误警报。 我陷入困境的是，当我能够隐藏我的消息时，我无法在单击 asp:button 时显示它。

这是我想要隐藏的引导警报：

<div class="alert alert-success collapse" role="alert">
                        <a href="#" class ="close" data-dismiss="alert">&times;</a>
                        This is a success alert—check it out!</div>

这是我用来尝试调用它的 c# 代码：

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Alert", 
                    "<script>$(document).ready(function(){ $('.alert-success').show(); " +
                    "$('.alert-danger'); }); </script>");

无法在网上找到 c# 代码的太多信息，因此选择了该代码。 我所拥有的有什么问题，我怎样才能让它发挥作用？

Answer 1

您必须将属性ClientIDMode添加到按钮并扩展RegisterClientScriptBlock中的代码，以便它将侦听器附加到按钮。

客户端ID模式

ClientID 值设置为 ID 属性的值。 如果控件是命名容器，则该控件用作其包含的任何控件的命名容器层次结构的顶部。

<asp:Button ID="button" runat="server" ClientIDMode="Static" Text="Button" />

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Alert", 
                    @"<script>$(document).ready(function() {

  $('#button').click(function() {
    $('.alert-success').show();
  })

});</script>");

例子

 $(document).ready(function() { $('#button').click(function() { $('.alert-success').show(); }) });

 .alert { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <div> <div class="alert alert-success alert-dismissible" role="alert"> <a href="#" class="close" data-dismiss="alert">&times;</a> This is a success alert—check it out:</div> <!--That would be asp:button--> <button id="button">Show Alert</button> </div>