Want to make the visibility true from client side of the control which made invisible from server side
Question
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.
3 answers
solution1
7 ACCPTED 2011-06-06 05:09:53
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';
solution2
2 2011-06-06 05:02:53
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.
solution3
0 2018-03-05 23:30:00
set the style["visibility"] = "hidden" on the server side. IE 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");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.