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>

Can you show your complete aspx code?

Salah Akbari
– Salah Akbari

2017-09-27 19:15:51 +00:00
Commented Sep 27, 2017 at 19:15 — Salah Akbari
– Salah Akbari, Commented Sep 27, 2017 at 19:15
Added the relevant lines above.

my_work__account
– my_work__account

2017-09-27 19:23:50 +00:00
Commented Sep 27, 2017 at 19:23 — my_work__account
– my_work__account, Commented Sep 27, 2017 at 19:23

Marisa · Accepted Answer · 2017-09-27 19:36:11Z

2

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>

edited Sep 27, 2017 at 19:36

answered Sep 27, 2017 at 19:20

Marisa

8027 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

my_work__account Over a year ago

What would be the easiest way to pass this Boolean variable (show or hide) from the C# script to some JavaScript?

Bozhidar Stoyneff · Accepted Answer · 2017-09-27 19:40:21Z

0

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.

answered Sep 27, 2017 at 19:40

Bozhidar Stoyneff

3,6721 gold badge20 silver badges30 bronze badges

1 Comment

Circle Hsiao Over a year ago

@cbreden1 If this reply solves your problem. You should click the gray tick at the left side to mark it accepted.

Benjamin · Accepted Answer · 2021-06-11 12:50:00Z

0

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

answered Jun 11, 2021 at 12:50

Benjamin

111 bronze badge

Collectives™ on Stack Overflow

Using ASP.NET to Hide an HTML Div

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related