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?
 
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
 
maqskywalkerAuthor Commented:
Thanks. it turns out that I needed to set my behavior in the WizardNextButton click event
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.