[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2577
  • Last Modified:

Hiding and unhiding controls client side?

I am working on a web part project using C# and Visual Studio 2005.

I need to add several .Net controls (buttons, text boxes) and hide the when the web part is launched.  Then when the user clicks another (not hidden) control, I need to make the hidden controls visible using JavaScript on the client side.

If I set the visible property of a control to hidden on the server side (at compile time) the control is simply not rendered on the page.  If the control isn't rendered, you can't make it visible.

So I suspect what I need to do is somehow hide the controls on the client side when the web part is displayed and then unhide them (again on the client side) when they are needed.

Can anyone show me an example of the C# and JavaScript code required to do this?

Bob
0
bobsegrest
Asked:
bobsegrest
1 Solution
 
erikTsomikSystem Architect, CF programmer Commented:
I just post the code which shows how to hide/show elements


<script type="text/javascript">
 
 
function toggle(val) {
      if (val == 1) {
            document.getElementById('existing_customer').style.display = 'inline';
            document.getElementById('cust_name').style.display = 'none';
			 document.getElementById('cust_surname').style.display = 'none';
            document.getElementById('cust_city').style.display = 'none';
				 document.getElementById('cust_contact').style.display = 'none';
            document.getElementById('cust_email').style.display = 'none';
			document.getElementById('cust_name2').style.display = 'none';
			document.getElementById('cust_surname2').style.display = 'none';
            document.getElementById('cust_city2').style.display = 'none';
				 document.getElementById('cust_contact2').style.display = 'none';
            document.getElementById('cust_email2').style.display = 'none';
			document.getElementById('existing_customer2').style.display = 'inline';
      }
      else if (val == 2) {
           document.getElementById('existing_customer').style.display = 'none';
            document.getElementById('cust_name').style.display = 'block';
			 document.getElementById('cust_surname').style.display = 'block';
            document.getElementById('cust_city').style.display = 'block';
				 document.getElementById('cust_contact').style.display = 'block';
            document.getElementById('cust_email').style.display = 'block';
			document.getElementById('cust_name2').style.display = 'block';
			 document.getElementById('cust_surname2').style.display = 'block';
            document.getElementById('cust_city2').style.display = 'block';
				 document.getElementById('cust_contact2').style.display = 'block';
            document.getElementById('cust_email2').style.display = 'block';
			document.getElementById('existing_customer2').style.display = 'none';
      }
}
 
 
</script>
 
 
<form name="forma" id="forma" method="POST" action="">
      <table width="550" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td><b>Customer</b></td>
            <td>
                  <input name="cust_type" type="radio" id="cust_type" value="2" onClick="toggle(2)"> new 
                  <input name="cust_type" type="radio" id="cust_type2" value="1" onClick="toggle(1)"> existing
              </td>
        </tr>
        <tr>
            <td id="existing_customer2">Choose existing customer</td>
            <td>
                  <select name="existing_customer" id="existing_customer">
                        <option value="0">New customer</option>
                        <option value="1">Mateja Zavrh</option>
                        <option value="2">Miha Klamfar</option>
                        <option value="3">Goran Tratnik</option>
                        <option value="4">Mojca Maher</option>
                  </select>
            </td>
        </tr>
        <tr>
            <td id="cust_name2">Name</td>
            <td><input name="cust_name" id="cust_name" type="text"></td>
        </tr>
        <tr>
            <td id="cust_surname2">Surname</td>
            <td><input name="cust_surname" id="cust_surname"type="text"></td>
        </tr>
        <tr>
            <td id="cust_city2">City</td>
            <td><input name="cust_city" id="cust_city" type="text"></td>
        </tr>
        <tr>
            <td id="cust_contact2">Contact number</td>
            <td><input name="cust_contact" id="cust_contact" type="text"></td>
        </tr>
        <tr>
            <td id="cust_email2">Email</td>
            <td><input name="cust_email" id="cust_email"type="text"></td>
        </tr>
</form>

Open in new window

0
 
lunadlCommented:
well if you are using .net you need to replace all of the element names he handed you above with
myControl.ClientId if you want to hide/show myControl. It will render the client side id for you to use after the html is rendered.
something like
....document.getelementbyid('<%= textbox1.clientid %>')....... in your actual code or
string javascript ="var id = document.getElementById('"+ myControl.ClientId +"');"; in your server code.
0
 
monarch_ilhanCommented:
to hide a asp.net control
<asp:Textbox ID="txt" runat="server" style="display:none";>
to show it on a asp.net control click
<asp:Button ID="btn" runat="server" Text="Show" OnClientClick="document.getElementById('"+txt.ClientID+"').style.display="inline" />
or
<asp:Image ID="img" runat="server" ImageUrl="show.gif" onclick="document.getElementById('"+txt.ClientID+"').style.display="inline" />

to do programmatically
//assume you have an image control on your form named img
img.Attributes.Add("onclick","document.getElementById('"+txt.ClientID+"').style.display="inline");
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
bobsegrestAuthor Commented:
First, let me thank each of you for your proposed solutions.  I have learned a lot from them, but I'm not where I need to be yet.

The solution proposed by erikTsomik is interesting.  The controls in his example do indeed disappear and reappear on command.  The concern that I have with this approach is that the example does not use asp.net controls and I'm not yet sure how I can push the data they collect client side back to the server (read the input from my C# code behind application code.  I also need to have the controls hidden on startup and I haven't figured how to make this happen yet.  If you can get me through these two knot holes, my problem is solved.

The second two solutions proposed by lunadl and monarch_ilhan both address my perceived need to use asp.net controls.  However web part development requires me to develop using a code behind model.  Each control has to be created in the web parts CreateChildControls method and then rendered in the web parts RenderWebPart method.  This is because a web part is first and foremost a "part" of a page generated dynamically at some point in the future.  If you can show me how to do implement your solution in a something like the following, I will be happy to pursue this avenue further.

                Control webControl;
                cmdTest = new Button();
                cmdTest.Text = "Test Button";
                cmdTest.Font.Size = FontUnit.Small;
                cmdTest.Font.Bold = true;
                cmdTest.ID = "cmdTest";
                webControl = cmdTest;
                Controls.Add(webControl);

Bob
0
 
monarch_ilhanCommented:
Control webControl;
               Textbox txt=new TextBox();
                cmdTest = new Button();
                cmdTest.Text = "Test Button";
             cmdTest.Attributes.Add("onclick","document.getElementById('"+txt.ClientID+"').style.display="inline"); //Add on client side click function. instead of javascript code, you can give the javascript function directly

or

cmdTest.Style.Add(HtmlTextWriterStyle.Display,"none"); // hides control with css style settings

                cmdTest.Font.Size = FontUnit.Small;
                cmdTest.Font.Bold = true;
                cmdTest.ID = "cmdTest";
                webControl = cmdTest;
                Controls.Add(webControl);
0
 
bobsegrestAuthor Commented:

Hello monarch_ilhan,

With a little tweaking (see below) your last sample seems to hide and unhide the textbox.

                Control webControl;
                txt = new System.Web.UI.WebControls.TextBox();
                txt.Text = "Enter you response here";
                txt.Width = 100;
                txt.Style.Add(HtmlTextWriterStyle.Display, "block");
                txt.ID = "txtBox";

                cmdTest = new Button();
                cmdTest.Text = "Test Button";
                cmdTest.Font.Size = FontUnit.Small;
                cmdTest.Font.Bold = true;
                cmdTest.ID = "cmdTest";
                cmdTest.Attributes.Add("onclick","document.getElementById('txtBox').style.display='none'");
                webControl = cmdTest;
                Controls.Add(webControl);

However, there three points to resolve.

1. When the cmdTest button is clicked the inline javascript hides the textbox.  But then it does a postback to the server.  I think I can prevent this by adding a return false statement to the end of the inline javascript.  However, this may not be an issue.

2. When the postback described in point 1 occurs, the text value of the textbox is not being returned to the server.  If I add the textbox to my controls collection as a WebControl, the text value is returned to the server.  However... Making the textbox a WebControl also prevents it from being hidden.

3. In the end I need to be able to unhide my controls using a javascript function.  This is because the control that starts this whole process is client side javascript.

Any more ideas?

Bob

0
 
bobsegrestAuthor Commented:
Hello All,

I managed to figure out that the if  the 'visibility' attribute for a webcontrol is set to either 'show' or 'hidden' I can manipulate the controls as needed.

Now all I have to do is figure out how to find a webcontrol from javascript so that I can set the attribute.

The following line doesn't seem to work...

     document.getElementById('txtBox').style.visibility = 'show';

I also tried using the getElementsByName method with the same result.  

Any ideas?

Bob
0
 
monarch_ilhanCommented:
use ClientID property of textbox.
document.getElementById('<% #txtBox.ClientID%>').style.visibility = 'show';
Look the source of rendered page, and find the correct id of invisible control. probably, since it is a child control of a control, it took the parent control name as prefix (like Control1_txtBox)
0
 
bobsegrestAuthor Commented:
Hello monarch_ilhan,

I have been playing with this for the last couple hours and it isn't working.  Let me elaborate a bit.  Here is where I declare the javascript function:

private const string EmbeddedScipt = @"<script language=javascript>
          function _ShowControls()
         {
              document.getElementById('<% #txt.ClientID>').style.visibility = 'show';
              alert('Got there!');
          }
</script> ";

If I remove the document line I see the alert box pop up with out any difficulty.  When I run the function as shown, I get a an "Error On Page" warning at the bottom of my web part page and do not see the alert.

If I look at the source for the page, I can find the txtBox control is defined as follows:

<input name="ctl00$m$g_001b6c67_13a0_42b5_8114_c10a29de95b7$txtBox" type="text" id="ctl00_m_g_001b6c67_13a0_42b5_8114_c10a29de95b7_txtBox" style="width:300px;visibility:hidden;" />

I can also see that the javascript function I have listed above is included literally and has not been expanded to reflect the id of the control.

Bob
0
 
bobsegrestAuthor Commented:
Hello monarch_ilhan,

Well I finally got it all worked out.  The problem was that the <% %> directive will not work in with a child webcontrol in a webpart.  However I was able to resolve the problem by by referencing the ClientID in my JavaScript function before I embedded it into the webpart with a call to RegisterClientScriptBlock.

Thank you for your help.

Bob
0
 
monarch_ilhanCommented:
Hi Bob,
Sory I couldnt reply to your last comment but you did by yourself :)
You welcome. Knowledge grows as we shared
0
 
jerrygbCommented:
Small mistake Bob, probably a typo,

private const string EmbeddedScipt = @"<script language=javascript>
          function _ShowControls()
         {
              document.getElementById('" +txt.ClientID +"').style.visibility = 'show';
              alert('Got there!');
          }
</script> ";

txt.ClientID should be rendered at server and since you're registering a javascript through a function perhaps, it needs to be unquoted.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now