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
516 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 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

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

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 …
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
This tutorial gives a high-level tour of the interface of Marketo (a marketing automation tool to help businesses track and engage prospective customers and drive them to purchase). You will see the main areas including Marketing Activities, Design …
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…

773 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