单击asp:按钮即可显示和隐藏面板

Question

我的面板最初是隐藏的。我想在点击<asp:按钮。以下是我的代码：

<asp:Button ID="btnSubmit" runat="server" Text="Submit"  Width="167px" 
data-icon="check" OnClick="btnSubmit_Click" 
OnClientClick="showProgress();"     />

我的面板代码是这样的：

<asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress" Visible="false">
<div id="imageDiv">
<div style="float: left; margin: 9px">
<img src="Images/loader.gif" id="img1" width="32px"
height="32px" style="display:none"/>
</div>
<div style="padding-top: 17.5px; font-family: Arial,Helvetica,sans-serif; font-size: 12px;">
Loading. Please wait...
</div>
</div>
</asp:Panel>

单击按钮时，我有一个名为showProgress((的javascript函数，如下所示：

function showProgress() {

if (Page_IsValid) {
// panel visible code here
}
}

Answer 1

而不是使用Visible="false"；在您的面板上，请改用CSS类。可见="；false"；不会在生成的html中呈现div。

<asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress hidden">
...
</asp:Panel>
function showProgress() {          
if (Page_IsValid) {
$("div[name$='pnlPopup']").removeClass("hidden");              
}
return false; //To prevent triggering of postback
}

Answer 2

您需要添加这个jquery代码并检查它是否正常工作

此外，请添加正确的按钮id和面板id，然后在正常工作后

<script type="text/javascript">
$(function() {
$("#btnSubmit").click(function(evt) {
evt.preventDefault();
$('#pnlPopup').toggle('fast');
});
});
</script>