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
519 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 500 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

Technology Partners: 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!

Question has a verified solution.

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

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 …
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
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 …
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…

688 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