Want to make the visibility true from client side of the control which made invisible from server side

I have a text box in a page. Whose visibility is set false from the server side. Now I want to make it visible from client side by using java-script. (Any post back or partial post back can not be implemented in this case.)

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>ControlVisibilityClientSide</title>
            <script type="text/javascript">
                function toggleVisibility(controlId)
                {
                    var control = document.getElementById(controlId);
                    if(control.style.visibility == "visible" || control.style.visibility == "")
                        control.style.visibility = "hidden";
                    else
                        control.style.visibility = "visible";
                }
            </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <input type="button" ID="btnShowHide" value="Show/Hide" onclick="toggleVisibility('TextBox1');" />
            </div>
        </form>
    </body>
</html>

This is working fine.

But when I use

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

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.Visible = false;
    }
}

The above code is not working at all.

Can any one please help me out from this problem or any suggestion will be appreciated.

Contents hide

Answers:

Method 1

Method 2

Method 3

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

If you set the control visible=false it will not render at client side, But there is a tricky solution, that will accomplish the same thing.

In your page load, where you are set Visible=false, you can set the style to display:none

protected void Page_Load(object sender, EventArgs e)
{
   TextBox1.Attributes.Add("style", "display:none");
}

It will render the control in client side, but user can’t see and then you can visible the control in Javascript function to set style Diplay:block, LIKE…

document.getElementById('<%=TextBox2.ClientID %>').style.display = 'block';

Method 2

Once control is marked as invisible at server side, no mark-up (html) is emitted for it. So it cannot be made visible at JS, because it (corresponding html) does not exists at client side.

Instead of making invisible at server side, you need to emit a start-up script to hide it on client side.

Method 3

set the style["visibility"] = "hidden" on the server side.
I.E. in c# btnSave.style["visibility"] = "hidden";
It will get the button rendered and therefore on the client side this element is accessible.
On the client side change the visibility style to visible.

$('#btnSave).css("visibility", "visible");

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating