setting ASP.NET Panel control Visible property to true using JavaScript

Hi experts,

I'm working on using the ASP.NET Web Forms Wizard server control that comes with Visual Studio 2013.

I'm using Visual Studio 2013 .
Here are 2 examples. Example 1 works just fine.
My question is on Example 2. I want Example 2 to work just like Example 1.

Example 1

So on my page I have a ASP Button. When I click on that button it launches a ASP panel which is hidden by default. I'm using the OnClick even of the ASP.NET to set the visible property of the ASP panel. So in the C# button click event I'm setting it like this:

Panel1.Visible = true;

So on launch the page looks like this:
page launch
So after I click the button, the panel becomes visible and shows Wizard Step 1
wizard step 1
So then when I click Next i'm taken to Wizard Step 2
Wizard Step 2
So then when I click Finish in step 2 then I see all the items i entered in the wizard and that is the end of the wizard.

after clicking finish to end the Wizard
This is the full code for it. It works fine.

This is a video showing how it works. It goes through the wizard and then when I click finish button on the last step. It shows the items i entered in the two wizard steps.

asp.net web forms wizard control launching panel with asp button
http://youtu.be/OKRwsdiaSIQ


PanelWithWizard1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PanelWithWizard1.aspx.cs" Inherits="Wizard1.PanelWithWizard1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .Panel1Style{
            width: 600px;
            height: 200px;
            background-color: #4e933b;
        }
    </style>
</head>
<body>
  <form id="form1" runat="server">
  <div>

    <asp:Button ID="Button1" runat="server" Text="Show Panel" OnClick="Button1_Click" />
    
    <br />
    <br />

    <%--@@@@@@@@@@@@@@ Panel 1 @@@@@@@@@@@@@@--%>
    <asp:Panel ID="Panel1" runat="server" Visible="False" class="Panel1Style">
      <asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0" Width="500px" onfinishbuttonclick="Wizard1_FinishButtonClick">
        <%--**************************************************--%>
        <WizardSteps>
          <%-- ************ Wizard Step 1 ************--%>
          <asp:WizardStep runat="server" Title="About You">
            <asp:Label ID="Label1" runat="server" Text="Type your name"></asp:Label>
            <asp:TextBox ID="YourName" runat="server"></asp:TextBox>
          </asp:WizardStep>
          <%-- ***************************************--%>
          <%-- ************ Wizard Step 2 ************--%>
          <asp:WizardStep runat="server" Title="Favorite Language" StepType="Finish">
            <asp:DropDownList ID="FavoriteLanguage" runat="server">
              <asp:ListItem>C#</asp:ListItem>
              <asp:ListItem>Visual Basic</asp:ListItem>
              <asp:ListItem>CSS</asp:ListItem>
            </asp:DropDownList>
          </asp:WizardStep>
          <%-- ***************************************--%>
          <%-- ************ Wizard Step 3 ************--%>
          <asp:WizardStep runat="server" StepType="Complete" Title="Ready">
            <asp:Label ID="Result" runat="server" Text="Label"></asp:Label>
          </asp:WizardStep>
          <%-- ***************************************--%>
        </WizardSteps>
        <%--**************************************************--%>
      </asp:Wizard>
    </asp:Panel>
    <%--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@--%>
  </div>
  </form>
</body>
</html>

Open in new window


PanelWithWizard1.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Wizard1
{
    public partial class PanelWithWizard1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        //protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
        //{
        //    Panel1.Visible = CheckBox1.Checked;
        //}
        protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
        {
            Result.Text = "Your name is " + YourName.Text;
            Result.Text += "<br />Your favorite language is " +
                FavoriteLanguage.SelectedValue;
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Panel1.Visible = true;
        }
    }
}

Open in new window



Example 2

Example 2 is almost the same as Example 1. The only difference is that I'm using a html button instead of a asp.button.  So then in this example I'm handling the click event of the html button to launch the panel.

The wizard works fine but the only problem is that after each step in the wizard, the panel hides again and I have to re-press the show panel button after every step to see the panel.

Anyone know what I'm doing wrong in Example 2?
When I press the Show Panel button to start the wizard, I want the wizard to remain visible all the way through all the steps in the wizard.  It should work just like Example 1.

This is a video showing how it works.

asp.net web forms wizard control launching panel with html button
http://youtu.be/O9fpKZ3OcXQ

PanelWithWizard2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PanelWithWizard2.aspx.cs" Inherits="Wizard1.PanelWithWizard2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <style type="text/css">
        .Panel1Style{
            width: 600px;
            height: 200px;
            background-color: #4e933b;
            display: none;
        }
    </style>
    <script type="text/javascript">

        //$(document).ready(function () {
        //    //************************************
        //    $('input[type=button]').click(function () {
        //        var mypanel = $('#WizardPanelContainer');
        //        mypanel.toggle();
        //    });
        //    //************************************
        //});

        function HidePanel() {

            //var gridcontainer = document.getElementById("Panel1");
            //gridcontainer.style.display = "none";

            document.getElementById('<%=Panel1.ClientID %>').style.display = 'none'
        }

        function ShowPanel() {

           // var gridcontainer = document.getElementById("Panel1");
           //gridcontainer.style.display = "block";
            
            document.getElementById('<%=Panel1.ClientID %>').style.display = 'block'

        }
    </script>
</head>
<!--calls this function on page load-->
<%--<body onload="MakeHidden()">--%>
<body>

    <form id="form1" runat="server">

        <table>
            <tr>
                <td>
                    <input type="button" value="Show Panel" onclick="ShowPanel()" />
                </td>
                <td>
                    <input type="button" value="Hide Panel" onclick="HidePanel()" />
                </td>
            </tr>
        </table>

        <br />
        <br />

        <%--@@@@@@@@@@@@@@ Panel 1 @@@@@@@@@@@@@@--%>
        <div id="WizardPanelContainer">

            <asp:Panel ID="Panel1" runat="server" class="Panel1Style">
                <asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0" Width="500px" OnFinishButtonClick="Wizard1_FinishButtonClick">
                    <%--**************************************************--%>
                    <WizardSteps>
                        <%-- ************ Wizard Step 1 ************--%>
                        <asp:WizardStep runat="server" Title="About You">
                            <asp:Label ID="Label1" runat="server" Text="Type your name"></asp:Label>
                            <asp:TextBox ID="YourName" runat="server"></asp:TextBox>
                        </asp:WizardStep>
                        <%-- ***************************************--%>
                        <%-- ************ Wizard Step 2 ************--%>
                        <asp:WizardStep runat="server" Title="Favorite Language" StepType="Finish">
                            <asp:DropDownList ID="FavoriteLanguage" runat="server">
                                <asp:ListItem>C#</asp:ListItem>
                                <asp:ListItem>Visual Basic</asp:ListItem>
                                <asp:ListItem>CSS</asp:ListItem>
                            </asp:DropDownList>
                        </asp:WizardStep>
                        <%-- ***************************************--%>
                        <%-- ************ Wizard Step 3 ************--%>
                        <asp:WizardStep runat="server" StepType="Complete" Title="Ready">
                            <asp:Label ID="Result" runat="server" Text="Label"></asp:Label>
                        </asp:WizardStep>
                        <%-- ***************************************--%>
                    </WizardSteps>
                    <%--**************************************************--%>
                </asp:Wizard>
            </asp:Panel>
            <%--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@--%>
        </div>

    </form>
</body>
</html>

Open in new window



PanelWithWizard2.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Wizard1
{
    public partial class PanelWithWizard2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
        {
            Result.Text = "Your name is " + YourName.Text;
            Result.Text += "<br />Your favorite language is " + FavoriteLanguage.SelectedValue;
        }

        //protected void Button1_Click(object sender, EventArgs e)
        //{
        //    Panel1.Visible = true;
        //}
    }
}

Open in new window

LVL 1
maqskywalkerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MrunalCommented:
Hi,
In your first example you are using server side control to show and hide Panel control which is again a server side control.

You want to achieve same functionality with HTML button. Now here problem occurs.
When you set any server control's "Visible" property to false, page load happens and after page renders on browser, that control is not exist in rendered HTML code. So even if you try to make it visible from client side (JavaScript) it will not happen.

If you want to do it with HTML button, then you should use "Display" property.

document.getElementById("MyPanelIDHere").style.display = "none";
and
document.getElementById("MyPanelIDHere").style.display = "block";

Remember,
MyPanelIDHere is client id of your server side control which you want to show and hide..

Hope this helps you.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
maqskywalkerAuthor Commented:
Thanks. it turns out that I needed to set my behavior in the WizardNextButton click event
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.