Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
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
?
522 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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

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…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This course is ideal for IT System Administrators working with VMware vSphere and its associated products in their company infrastructure. This course teaches you how to install and maintain this virtualization technology to store data, prevent vuln…
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…
Suggested Courses

636 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