Example of showing/hiding panels

C

Charlie Dison

Hi There,
Should I be able to show and hide panels in an asp.net page without
requiring a postback? I thought there was a way to do this using java
script. Can anyone give me an example? I can't seem to find one that makes
sense. Thanks.
 
C

Curt_C [MVP]

you'll have to get the clientside names but bascially something like

controlName.style.display = 'none' (then '' or 'block')
 
S

Steven Cheng[MSFT]

Hi Charlie,

As for the ASP.NET Panel WebServer control, when the page is rendered out
to client , the Panel will be output as a
<div> html element. And as Curt has mentioned, we can generally use the
"display" style attribute to control the html element's visible. For
example, if here is a Panel rendered as

<div id="MyPanel" ...> ...</div>

We can use the following script code to hide it.

document.getElementById("MyPanel").style.display = "none";

And here is a demo page I made to show the above means, you can have a look
if you have anything unclear:

=============aspx page===================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>ManPanel</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
function ShowElement(id)
{
var elm = document.getElementById(id);
elm.style.display = "";
}

function HideElement(id)
{
var elm = document.getElementById(id);
elm.style.display = "none";
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td>
<asp:panel id="Panel1" runat="server">
<P><FONT face="ËÎÌå">Here is Panel1<BR>
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<asp:Button id="Button1" runat="server"
Text="Button"></asp:Button></FONT></P>
</asp:panel>
</td>
</tr>
<tr>
<td>
<INPUT id="btnShow" type="button" value="Show"
onclick="ShowElement('Panel1');">
<INPUT id="btnHide" type="button" value="Hide"
onclick="HideElement('Panel1');">
</td>
</tr>
</table>
</form>
</body>
</HTML>
=============================================

Hope also helps. Thanks.


Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Get Preview at ASP.NET whidbey
http://msdn.microsoft.com/asp.net/whidbey/default.aspx
 
S

Steven Cheng[MSFT]

Hi Charlie,

Thanks for your followup. Yes, it can't span rows in a table because the
Panel is actually a <div> html element and the
rows in table is just like

<table>
<tr>
...
</tr>
<tr>
...
</tr>
</table>

they are a single html element and is not spanable by another html
element:). Anyway, I'm glad that my suggestion has helped you. Have a good
day!

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Get Preview at ASP.NET whidbey
http://msdn.microsoft.com/asp.net/whidbey/default.aspx
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top