因此,我有一个简单的ASP.NET应用程序,当单击按钮时,我想给用户一个成功警报或错误警报,这取决于他们的提交。 我陷入的困境是,当我能够隐藏我的消息时,我不能让它在asp:按钮被点击时显示出来。
这是我要隐藏的引导警报:
<div class="alert alert-success collapse" role="alert">
<a href="#" class ="close" data-dismiss="alert">×</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#代码的东西,所以就这么定下来了。 我有什么问题,我怎么才能让它工作?
您必须向按钮添加属性ClientIdMode
,并在RegisterClientScriptBlock
中扩展代码,以便它将listener附加到按钮。
ClientIdMode
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>");
示例
null
$(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">×</a> This is a success alert—check it out!</div>
<!--That would be asp:button-->
<button id="button">Show Alert</button>
</div>