Using ASP.NET to Hide an HTML Div

Question

I am using ASP.NET for a web page in order to make some server calls that involve looking up user organization information. Based on that information, we need to either hide or display a div. In the header I have a C# function that definitely runs. I have tried the following lines to hide the div.

divID.Style.Add("display","none");

and

divID.Visible = false;

In the body, I am currently using an asp:Panel that runs at server and contains the id "divID". No matter what I do, I can't get the div to hide (without manually putting the styling in). I tried putting the scripts before and after the body, and it didn't make a difference. Any suggestions on the best way to do this would be appreciated.

EDIT:

Here is the C# initiating code.

<script runat="server" language="C#">
  void getUserInfo(Object sender, EventArgs ev){

The rest of the C# code is irrelevant, but the relevant line shown above is definitely being run.

The HTML portion looks something like this.

<asp:Panel runat="server" id="divID" style="width:200px; height:130px; ">
   <div style="text-align:center">Test Data</div>
</asp:Panel>

Answer 1

C# code is always compiled and run from the server-side, and so cannot impact the state of a page once rendered unless you use postbacks or callbacks. If you want to change the visible state of a control on the client-side, you will need to use Javascript on the client side (possibly triggered by a button click) to show and hide the control.

As an example, check out the solution at the link below. https://forums.asp.net/t/1603211.aspx?Show+hide+div+on+button+click+without+postback

<script type="text/javascript">
    function ToggleDiv(Flag) {
        if (Flag == "first") {
            document.getElementById('dvFirstDiv').style.display = 'block';
            document.getElementById('dvSecondDiv').style.display = 'none';
        }
        else {
            document.getElementById('dvFirstDiv').style.display = 'none';
            document.getElementById('dvSecondDiv').style.display = 'block';
        }
    }
</script>
<asp:Button ID="btn" runat="server" Text="Show First Div"
    OnClientClick="ToggleDiv('first');return false;" />

<asp:Button ID="Button1" runat="server" Text="Show Second Div"
OnClientClick="ToggleDiv('second');return false;" />
<br />
<div id="dvFirstDiv" style="display: none;">
    First Div
</div>
<div id="dvSecondDiv" style="display: none;">
    Second Div
</div>

Answer 2

In the header I have a C# function that definitely runs.

If you're talking about the HTML page header - no, it definitely not running. C# code is executed only server side.

Based on your post, I'm assuming we're talking WebForms here and yo have a script block in your aspx file. While this is fine, I recommend placing the server-side code into a code behind file.

So all you need to do is to add a handler for the PreRender phase of the page life cycle and place your logic for showing/hiding the div in there.

public void Page_Prerender(object sender, EventArgs e)
{
    divID.Visible = false;
    ' OR
    'divID.Style.Add("display","none");
}

Note that setting the Visible property of a WebForms control excludes the control from rendering to the page, whilst setting display: none renders it as HTML but it isn't displayed on the page.

Answer 3

Try in backcode: divID.Controls.clear(); This worked for me.