?
Solved

Trying to change the CSS of a DIV by clicking an asp:linkbutton which also will trigger an UpdatePanel in Codebehind C#

Posted on 2010-11-17
5
Medium Priority
?
520 Views
Last Modified: 2012-05-10
I'm just coming up to speed using .NET 4. I'm trying to change the background image of a div that surrounds my updatepanel.  Whenever a user clicks on the asp:linkbuttons which are also my updatepanel triggers, the background image of the div should update.  I have attached what I have now but its not working.

thanks for your help
CSS
---------------------
#RightColumnContainer1
{
    background: url(/images/rightcolumn/LeftTab.gif);
}

#RightColumnContainer2
{
    background: url(/images/rightcolumn/MiddleTab.gif);
}

#RightColumnContainer3
{
    background: url(/images/rightcolumn/RightTab.gif);
}


default.aspx
----------------------------------
<div id="RightColumnContainer1" runat="server">
	<div><asp:LinkButton ID="lnkbtn1" runat="server" onclick="lnkbtn1_Click">Link 1</asp:LinkButton></div>
	<div><asp:LinkButton ID="lnkbtn2" runat="server" onclick="lnkbtn2_Click">Link 2</asp:LinkButton></div>
	<div><asp:LinkButton ID="lnkbtn3" runat="server" onclick="lnkbtn3_Click">Link 3</asp:LinkButton></div>
                    
	<asp:UpdatePanel ID="RightColumnUpdatePanel" runat="server">
   <ContentTemplate>
   	<div>
      	Database results go here              
      </div>
	</ContentTemplate>
	<Triggers>
		<asp:AsyncPostBackTrigger ControlID="lnkbtn1"/>
		<asp:AsyncPostBackTrigger ControlID="lnkbtn2"/>
		<asp:AsyncPostBackTrigger ControlID="lnkbtn3"/>
	</Triggers>
	</asp:UpdatePanel>
</div>


C# Codebehind
---------------------------------
protected void lnkbtn1_Click(object sender, EventArgs e)
{
	RightColumnContainer1.Attributes.CssStyle.Value = "RightColumnContainer1";
}
    
protected void lnkbtn2_Click(object sender, EventArgs e)
{
	RightColumnContainer1.Attributes.CssStyle.Value = "RightColumnContainer2";
}
    
protected void lnkbtn3_Click(object sender, EventArgs e)
{
	RightColumnContainer1.Attributes.CssStyle.Value = "RightColumnContainer3";      
}

Open in new window

0
Comment
Question by:maddhacker24
[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
  • 2
  • 2
5 Comments
 
LVL 18

Expert Comment

by:Richard Lee
ID: 34156529
Since you are manipulating the styles server side and the UpdatePanel only updates its contents then the outer div would never update. Try including the div inside the update panel.

DaTribe
0
 
LVL 12

Expert Comment

by:jagssidurala
ID: 34157296
RightColumnContainer1.Attributes.CssStyle.Value = "RightColumnContainer1";

Change this code to

RightColumnContainer1.Attributes.Add("class", "RightColumnContainer1");


0
 

Author Comment

by:maddhacker24
ID: 34158450
Neither of those seem to work for me. hmmm
0
 
LVL 12

Accepted Solution

by:
jagssidurala earned 2000 total points
ID: 34158479
You need to write the class like this instead if using # use .(dot) for class names.

CSS
---------------------
.RightColumnContainer1
{
    background: url(/images/rightcolumn/LeftTab.gif);
}

.RightColumnContainer2
{
    background: url(/images/rightcolumn/MiddleTab.gif);
}

.RightColumnContainer3
{
    background: url(/images/rightcolumn/RightTab.gif);
}

Change this code to

RightColumnContainer1.Attributes.Add("class", "RightColumnContainer1");

Defenitly this will work
0
 

Author Closing Comment

by:maddhacker24
ID: 34160148
Works like a charm.

Thank you
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…
Suggested Courses
Course of the Month12 days, 17 hours left to enroll

777 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