Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4210
  • Last Modified:

How to change style from code behind?

I'm including an asp.net 3.5 project that I'd like to change the style attribute of a DIV tag.   The attribute remains set to what ever I've coded it in the aspx.  How do I overwrite the aspx value from code behind?
0
brettr
Asked:
brettr
  • 9
  • 5
  • 2
  • +2
1 Solution
 
ajollyCommented:
yourDIV.Attributes.Add ("style","width :200px");
0
 
SameerJagdaleCommented:
in c#
myDiv.Attributes['your attribute name'] = 'new value';
0
 
tiagosalgadoCommented:
<div id="mydiv" runat="server" style="text-align: center">my div text</div>
And in code-behind you can mydiv.style.add("text-align","left")
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
brettrAuthor Commented:
If you look at the project, I tried that and the values in the aspx aren't overwritten.  Project didn't come through b/c of the extensions.  Here's the code:

.CS
----
void btnShowPanel_Click(object sender, EventArgs e)
        {
            Panel2.Style.Clear();
            Panel2.Style.Add("display", "none");
}

ASPX
-----
<div id=Panel2 style="display:none" runat="server">
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" Visible="true" UpdateMode="Always">
        <ContentTemplate>
        this panel is hidden<br />
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        </ContentTemplate>
        </asp:UpdatePanel>
        </div>

btnShowPanel is in an UpdatePanel just above this one.
0
 
ajollyCommented:
add the following javascript to your aspx page.

function hideBox(id){
document.getElementById(id).style.display = "none"
}

To show it:

function showBox(id){
document.getElementById(id).style.display = "block"
}


To hide, in code behind, write:

ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), "hideBox('"+Panel2.ClientID+");", true);


To show, in code behind, write:

ScriptManager.RegisterStartupScript(Page, Page.GetType(), Guid.NewGuid().ToString(), "showBox('"+Panel2.ClientID+");", true);
0
 
brettrAuthor Commented:
@SameerJagdale
That doesn't work either.

@ajolly
I'm trying to keep the code consolidated and don't want custom JS in the aspx.  

One solution is to create my own DIV with a visibility property and maintain its state via a private var.
0
 
brettrAuthor Commented:
@ajolly
I tried your code and that does work nicely.   How can I tell if the box is visible or not so I can toggle it?
0
 
tiagosalgadoCommented:
brettr, remove the style from aspx code and manage it only on code-behing.
0
 
brettrAuthor Commented:
@tiagosalgado
Actually, with ajolly's code is works fine.  I just want to know how to tell if it is visible or not.
0
 
tiagosalgadoCommented:
In that code you have 2 functions. One for hide and the other to show it. Just call the one you want!!
0
 
brettrAuthor Commented:
" Just call the one you want!!"
...based on the visibility.  I think you are missing the point.
0
 
brettrAuthor Commented:
Since visiblity is being changed by JS, I'll have to grab that state via JS as well.  If I do Panel2.Style and look at the visibility attribute, it will always show "hidden", even when it is actually "block", since that is how it's coded in the aspx.
0
 
tiagosalgadoCommented:
When you change the visibility attribute in JS function, you can set the value to an hidden field to that state, and access it on code-behind. Can be a possible solution for you?
0
 
prairiedogCommented:
>>>
void btnShowPanel_Click(object sender, EventArgs e)
        {
            Panel2.Style.Clear();
            Panel2.Style.Add("display", "none");
}

So all you need is to hide/display the panel?  Can't you just use this?
void btnShowPanel_Click(object sender, EventArgs e)
{
       Panel2.Visible = true;
}

0
 
brettrAuthor Commented:
@prairiedog
No, that doesn't work.  The hard coded style="dispay:none" value overrides the code behind setting.
0
 
prairiedogCommented:
You don't need style="display:none", just set Visible="false" (with runat="server"). Will that do?
0
 
brettrAuthor Commented:
I think the best way would be to change ajolly's code to be completed client side but also generic enough that I could pass a particular element id to it.

@prairiedog
You can't do that since the server div isn't there when you try to make it visible.  It needs to be inside another UpdatePanel for that to work, which I don't want.
0
 
tiagosalgadoCommented:
brettr, i think using a __doPostBack() and passing the visible state can solve your problem.
http://aspalliance.com/895_Understanding_the_JavaScript___doPostBack_Function.all
 
0
 
brettrAuthor Commented:
This works fine:

function showHideBox(id) {
            var el = document.getElementById(id);
            if (el.style.display == "none")
                el.style.display = "block";
            else
                el.style.display = "none";
        }

And in the control:
OnClientClick="showHideBox('Panel2')"

The DIV does need to be a regular DIV and not an UpdatePanel.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 9
  • 5
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now