Solved

How to change style from code behind?

Posted on 2008-10-13
19
4,196 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
imap read mail 1 27
VB.NET - Error - Object not set in Module 4 33
PHP AJAX Wordpress 9 19
Example works but why do I need to click twice on button 4 36
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In a recent question (https://www.experts-exchange.com/questions/28997919/Pagination-in-Adobe-Acrobat.html) here at Experts Exchange, a member asked how to add page numbers to a PDF file using Adobe Acrobat XI Pro. This short video Micro Tutorial sh…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

786 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