CODEWITHSUNDEEP
asp.netjavascript
Yttrium
Yttrium

Reputation: 2137

How do you set the "Visible" property of a ASP.NET control from a Javascript function?

Bascially I want to know the best way to hide/show an ASP.NET control from a Javascript function. I figured I would just access the control in Javascript using:

var theControl = document.getElementById("txtEditBox");

Then just set the control's Visible property to true/false. It doesn't seem to be working, I can't seem to figure out how to set "Visible" to true/false. How can I do that? Also, is that the best way to hide/show a ASP.NET control from a Javascript function?

Thanks, Jeff

Upvotes: 18

Views: 75013

Answers (9)

GreatNews
GreatNews

Reputation: 645

I think the best solution is to put your ASP control inside a div and set the property display to the div element.

<div id="divTest">            
   <asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
</div>

<script type="text/javascript">
    SIN JQuery
    document.getElementById('divTest').style.display = "none";

    CON JQuery
    $('#divTest').hide();
</script>

Upvotes: 0

live-love
live-love

Reputation: 52366

Or if you don't want to use css:

<asp:TextBox ID="txtBox" runat="server" style="display:none;">

Upvotes: 1

Aaron Powell
Aaron Powell

Reputation: 25099

You can't hide/ show the ASP.NET version of the control as that only exists in a server context. To use JavaScript you need to play with the controls style/ visibility state.

The only kind-of way to do it would be to wrap the control in an UpdatePanel and have something like this:

<asp:UpdatePanel ID="panel" runat="server">
  <ContentTemplate>
    <asp:TextBox ID="myTextBox" runat="server" />
  </ContentTemplate>
  <Triggers>
    <asp:AsynchronousPostbackTrigger ControlID="button" EventName="Click" />
  </Triggers>
</asp:UpdatePanel>
<asp:Button ID="button" runat="server" OnClick="toggle" Text="Click!" />

Then you need this in your code behind:

protected void toggle(object sender, EventArgs e){
  myTextBox.Visibility = !myTextBox.Visibility;
}

Now when you click the button an async postback occurs and it will refresh the UpdatePanel.

Note: This is not a good solution, as it'll be a very heavy AJAX request, because you need to submit the ViewState.

Also, it may not be 100% right, I did that from memory.

Upvotes: 4

Jason Bunting
Jason Bunting

Reputation: 58931

The "Visible" property of an ASP.NET control determines whether or not it will be rendered on the client (i.e. sent to the client). If it is false when the page is rendered, it will never arrive at the client.

So, you cannot, technically, set that property of the control.

That said, if the control is rendered on the client because the Visible property is true when the page is rendered, you can then hide it using javascript like this:

var theControl = document.getElementById("txtEditBox");
theControl.style.display = "none";

// to show it again:
theControl.style.display = "";

That assumes that the control's id attribute really is "txtEditBox" on the client and that it is already visible.

Also, is that the best way to hide/show a ASP.NET control from a Javascript function?

There is not necessarily a "best" way, although one better approach is to use CSS class definitions:

.invisible { display: none; }

When you want to hide something, dynamically apply that class to the element; when you want to show it again, remove it. Note, I believe this will only work for elements whose display value starts off as block.

Upvotes: 33

tvanfosson
tvanfosson

Reputation: 532435

You want to set the display style property to 'none' (to hide) or null to show.

   var theControl = document.getElementById("txtEditBox");

   theControl.style.display = 'none';

   theControl.style.display = null;

Doing it the jQuery way:

   $('#txtEditBox').hide();

   $('#txtEditBox').show();

Upvotes: 1

C. Dragon 76
C. Dragon 76

Reputation: 10052

You can use the display property for this. But as Jason noted, this is a DHTML DOM (client-side) property that is completely independent from the ASP.NET (server-side) Visible property which controls rendering.

theControl.style.display = "none";

Display Property

Upvotes: 3

Michael Kniskern
Michael Kniskern

Reputation: 25260

Set the style to "display: none".

var theControl = document.getElementById("<%= txtEditBox.ClientID %>");
theControl.style.display = "none";

Upvotes: 6

gfrizzle
gfrizzle

Reputation: 12609

This should hide the control:

theControl.style.display = 'none';

Upvotes: 3

Jimmy
Jimmy

Reputation: 91452

instead of using visible, set its css to display:none

//css:
.invisible { display:none; }

//C#
txtEditBox.CssClass = 'invisible';
txtEditBox.CssClass = ''; // visible again

//javascript
document.getElementById('txtEditBox').className = 'invisible'
document.getElementById('txtEditBox').className = ''

Upvotes: 6

Related Questions