Improve company productivity with a Business Account.Sign Up

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
?
526 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
  • 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article discusses how to implement server side field validation and display customized error messages to the client.
There is a wide range of advantages associated with the use of ASP.NET. This is why this programming framework is used to create excellent enterprise-class websites, technologies, and web applications.
In response to a need for security and privacy, and to continue fostering an environment members can turn to for support, solutions, and education, Experts Exchange has created anonymous question capabilities. This new feature is available to our Pr…
Hi, this video explains a free download that you can incorporate into your Access databases, or use stand-alone for contact management. Contacts -- Names, Addresses, Phone Numbers, eMail Addresses, Websites, Lists, Projects, Notes, Attachments…

595 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