Solved

How to change style from code behind?

Posted on 2008-10-13
19
4,193 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
  • 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
 

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now