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" ".dtd">
<html xmlns="" >
<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.
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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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.
Share Improve this question edited Jun 6, 2011 at 6:20 Muhammad Akhtar 52.2k37 gold badges139 silver badges191 bronze badges asked Jun 6, 2011 at 4:55 Arindam RudraArindam Rudra 6242 gold badges9 silver badges24 bronze badges3 Answers
Reset to default 8If you set the control visible=false it will not render at client side, But there is a tricky solution, that will acplish 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';
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.
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");