[英]asp.net snackbar not working on button click c#
在 asp.net 按鈕單擊上,我想調用此 function 以顯示小吃欄。 然而,它沒有這樣做。 我嘗試將按鈕放在表單 runat="server" 之外並且它可以工作。 但是,我需要它在表單 runat="server" 標記內並單擊 asp.net 按鈕,我該如何解決這個問題?
主頁.aspx
<style>
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
@-webkit-keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
@keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
</style>
<script>
function myFunction() {
var x = document.getElementById("snackbar");
x.className = "show";
setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
}
</script>
<form runat="server">
<asp:LinkButton ID="reportThreadBtn" class="btn btn-default btn-sm" ForeColor="red" runat="server" OnClick="myFunction()" Font-Size="Medium"><i class="glyphicon glyphicon-flag"></i></asp:LinkButton>
</form>
為此,您可以使用OnClientClick 。
確保您放入其中的 javascript 返回值false
,這確保不執行默認的 LinkButton 行為(即:激活 Form PostBack)。
<asp:LinkButton .... OnClientClick="myFunction(); return false;" ...> ... </asp:LinkButton>
更新:下面是我的/Default.aspx的完整代碼,並且使用此代碼它可以工作 - 黑色的 Snackbar 框會在底部彈出(雖然它在消失時會閃爍一點,但我沒有調查為什么會這樣)。
我將它創建為一個全新的、盡可能簡單且為空的“ASP.NET Web 應用程序”(.NET 4.7.2)的一部分。 檢查我的代碼和你的代碼之間的差異,尤其是 HTML/CSS,並根據需要進行更改。
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebForms1._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<style>
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
@-webkit-keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
@keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
</style>
<script>
function myFunction() {
var x = document.getElementById("snackbar");
x.className = "show";
setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
}
</script>
<br/>
<asp:LinkButton ID="reportThreadBtn" class="btn btn-default btn-sm" ForeColor="red" runat="server" OnClientClick="myFunction(); return false;" Font-Size="Medium">CLICK IT</asp:LinkButton>
<br/>
<div id="snackbar"><h2>snackbar</h2></div>
</asp:Content>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.