Solved

How to change style from code behind?

Posted on 2008-10-13
19
4,202 Views
Last Modified: 2013-11-08
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
Comment
Question by:brettr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 5
  • 2
  • +2
19 Comments
 
LVL 7

Expert Comment

by:ajolly
ID: 22702495
yourDIV.Attributes.Add ("style","width :200px");
0
 
LVL 13

Expert Comment

by:SameerJagdale
ID: 22702563
in c#
myDiv.Attributes['your attribute name'] = 'new value';
0
 
LVL 8

Expert Comment

by:tiagosalgado
ID: 22702568
<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
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!

 

Author Comment

by:brettr
ID: 22702574
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
 
LVL 7

Accepted Solution

by:
ajolly earned 500 total points
ID: 22702679
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
 

Author Comment

by:brettr
ID: 22702737
@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
 

Author Comment

by:brettr
ID: 22702847
@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
 
LVL 8

Expert Comment

by:tiagosalgado
ID: 22702875
brettr, remove the style from aspx code and manage it only on code-behing.
0
 

Author Comment

by:brettr
ID: 22702901
@tiagosalgado
Actually, with ajolly's code is works fine.  I just want to know how to tell if it is visible or not.
0
 
LVL 8

Expert Comment

by:tiagosalgado
ID: 22702952
In that code you have 2 functions. One for hide and the other to show it. Just call the one you want!!
0
 

Author Comment

by:brettr
ID: 22702984
" Just call the one you want!!"
...based on the visibility.  I think you are missing the point.
0
 

Author Comment

by:brettr
ID: 22703100
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
 
LVL 8

Expert Comment

by:tiagosalgado
ID: 22703349
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
 
LVL 22

Expert Comment

by:prairiedog
ID: 22703365
>>>
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
 

Author Comment

by:brettr
ID: 22703556
@prairiedog
No, that doesn't work.  The hard coded style="dispay:none" value overrides the code behind setting.
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 22703580
You don't need style="display:none", just set Visible="false" (with runat="server"). Will that do?
0
 

Author Comment

by:brettr
ID: 22703720
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
 
LVL 8

Expert Comment

by:tiagosalgado
ID: 22703855
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
 

Author Comment

by:brettr
ID: 22703916
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

Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
In this video, viewers are given an introduction to using the Windows 10 Snipping Tool, how to quickly locate it when it's needed and also how make it always available with a single click of a mouse button, by pinning it to the Desktop Task Bar. Int…
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question