Show/Hide Panel in Client Side

Hi.
I have tow asp panels and tow html buttons to navigate between the panels.like this:
document.getElementById('Panel1').style.display ='block'; 
document.getElementById('Panel2').style.display ='none';

 
 the first button to show the first panel and hide the second panel . the second button had the opposite purpose. inside the panels there is asp controsl.
every thing work good until I use postback  by any control in the panels,for example when I click an asp button in the panel evry panel return to the defaut style.
I put this example to explain my problem:
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Pagetitle>
<script language="javascript" type="text/javascript">
function Show1_onclick() {
document.getElementById('Panel1').style.display ='block';
document.getElementById('Panel2').style.display ='none';
}

function Show2_onclick() {
document.getElementById('Panel1').style.display ='none';
document.getElementById('Panel2').style.display ='block';
}

// -->
script>
head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Show1" type="button" value="Show1" language="javascript" onclick="return Show1_onclick()"  />
        <input id="Show2" type="button" value="Show2" language="javascript" onclick="return Show2_onclick()"  />
    
     <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
                    
                    <table id="Table1"  >
        <tr>
        <td style="width: 95px">
           table1<br />
            <asp:Label ID="Label1" runat="server" Text="Label">asp:Label>
              <asp:Button ID="Button1" runat="server" Text="Click1" OnClick="Button1_Click" />
        td>
        tr>
        table>
        
       
        asp:Panel>
            <asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px"  >
          <table id="Table2"  >
        <tr>
        <td style="width: 99px">
           table2<br />
            <asp:Label ID="Label2" runat="server" Text="Label">asp:Label>
          
            <asp:Button ID="Button2" runat="server" Text="Click2" OnClick="Button2_Click" /> 
        td>
        tr>
        table>
          asp:Panel>
    div>
    form>
body>
html>
 I try to solve this problem with many way but don't solve my problem. on of what I try to do I put a HiddenField to save which panel I focus , but I couldn't return what I want in the page load and Render event.
I think how to solve the focus in ViewState. 
Is there any Suggestion?

kojoh

6/22/2007 4:37:26 PM

📁 asp.net.client-side
📃 24353 articles.
⭐ 0 followers.

💬 4 Replies
👁️‍🗨️ 299 Views

Like you said, you can use a HiddenField. You can either store in it the panel you want to be expanded, or you can have two HiddenFields and store in them the value of the style.display of each panel. You should be able to access this value (or these values if using two Hiddens) using Request.Form["myHiddenId"]. In your Show1_onclick() and Show2_onclick() javascript functions, just set the appropriate value in the hidden. You should be able to grab this and set the panels appropriately.

What does your code look like where you're trying to retrieve these values in the Page_Load and Render?

Jason

6/22/2007 7:58:55 PM

Thank's for reply.
yeah I store the Value on the HiddenField  the panel I want to be expanded like this:

document.getElementById('HiddenField1').value ="Panel1";
That's work fine. and there is no problem to detirmine which panel I must expaned after postback. but my problem is after postback how can access the Panels in javascript code. I use this code in page_load then in Render event.
I try to access the panels by fixed code:
  protected override void Render(System.Web.UI.HtmlTextWriter writer)
    {
        string str;
        str = "<script>document.getElementById('Panel1').style.display ='none'";
        this.RegisterStartupScript("Quant", str);
        base.Render(writer);
    }
 How can I do that?

kojoh

6/22/2007 9:00:43 PM

Hi kojoh,

In my opinion, this behavior can be done by client script. The following code is for your reference. I hope it is helpful to you. If there has been any misunderstanding, please let me know.

Untitled Page

onload="StartUpScript()">

                            value="Show1" />
                            value="Show2" />

                            table1

                            table2

Sincerely,
Benson Yu
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help. This can be beneficial to other community members reading the thread.

Benson

6/25/2007 3:06:56 AM

Benson's solution would probably be easiest, because it seems like you only care about client-side behavior. You wouldn't have to work with anything on the server-side if you didn't want to. Since you are trying to work with it on the server-side in your example, why not just set the style properties on the server-side instead of trying to manipulate it in javascript? You're already in the Render(), so you could just find the panel you want to be expanded and set the style attribute accordingly.

PanelNameFromHidden.Style.Add("display", "none");

PanelNameFromHidden.Style.Add("display", "block");

Jason

6/25/2007 1:30:29 PM

Show/Hide Panel in Client Side

Related Posts: