changing color of particular link button - asp.net

Question

i am using a series of linkbuttons A-z which are dynamically created what i want on the click of each its text color change to something else to make it different from others what i am doing
protected void Page_Init(object sender, EventArgs e)
{
// Adding Dynamically linkbuttons for all alphabets(i.e. A-Z)
for (char asciiValue = 'A'; asciiValue <= 'Z'; asciiValue++)
{
LinkButton lbtnCharacter = new LinkButton();
lbtnCharacter.ID = "lbtnCharacter" + asciiValue;
divAlphabets.Controls.Add(lbtnCharacter);
lbtnCharacter.Text = Convert.ToString(asciiValue);
lbtnCharacter.CssClass = "firstCharacter";
lbtnCharacter.ToolTip = "Show users whose name starts with '" + Convert.ToString(asciiValue) + "'";
lbtnCharacter.CommandArgument = Convert.ToString(asciiValue);
lbtnCharacter.Command += new CommandEventHandler(lbtnCharacter_Command);
}
}
void lbtnCharacter_Command(object sender, CommandEventArgs e)
{
ViewState["Selected_Character"] = e.CommandArgument;
LinkButton lbtn = (LinkButton)divAlphabets.FindControl("lbtnCharacter" + e.CommandArgument);
lbtn.ForeColor = System.Drawing.Color.Orange;
txtNameFilter.Text = string.Empty;
BindUserList();
}
it is working fine but on clicking more then one buttons all the buttons which are clicked changes their color to orange but what i want is whichever button i click only that button color should change on click of next button previous button should go to default state is this approach right or tell me if it can be achieved by css

Answer 1

Your problem is that the ViewState of the linkbuttons is being saved just before the controls are rendered, including the updated styling. Then, on your postback, after Page_Init, the ViewState is re-applied to each control, with the orange styling. This overrides the setting that you add in Page_Init. So in Page_Load, you need to reset the styling on each of the controls.
Add another style to your stylesheet
.highlighted { color:orange; }
In lbtnCharacter_Command, replace
lbtn.ForeColor = System.Drawing.Color.Orange;
with
lbtn.CssClass = "firstCharacter highlighted ";
In Page_Load, add:
foreach (var ctrl in divAlphabets.Controls)
{
if (ctrl is LinkButton)
((LinkButton)ctrl).CssClass = "firstCharacter";
}
On each Page_Load, all of the linkbuttons css class will be reset to the default. This is after the ViewState has been applied to them (between PageInit and PageLoad). Then on the Command event, the clicked button will have the new style appended. The color setting in this style will override whatever color setting is in the firstCharacter style.
UPDATE
protected void Page_Init(object sender, EventArgs e) {
for (char asciiValue = 'A'; asciiValue <= 'Z'; asciiValue++) {
var lbtnCharacter = new LinkButton {
ID = "lbtnCharacter" + asciiValue,
Text = Convert.ToString(asciiValue),
ToolTip = "Show users whose name starts with '" + Convert.ToString(asciiValue) + "'",
CommandArgument = Convert.ToString(asciiValue)
};
lbtnCharacter.Command += lbtnCharacter_Command;
divAlphabets.Controls.Add(lbtnCharacter);
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (Session["CurrentLetter"] != null) {
foreach (var ctrl in divAlphabets.Controls) {
if (ctrl is LinkButton) {
if (((LinkButton) ctrl).Text == Session["CurrentLetter"].ToString()) {
((LinkButton) ctrl).CssClass = "firstCharacter highlighted";
}
}
}
}
}
void lbtnCharacter_Command(object sender, CommandEventArgs e) {
//Reset all of the other buttons only when clicking a new one
foreach (var ctrl in divAlphabets.Controls) {
if (ctrl is LinkButton) {
((LinkButton) ctrl).CssClass = "firstCharacter";
}
}
//Set the clicked button and save the Session state
var lbtn = (LinkButton)divAlphabets.FindControl("lbtnCharacter" + e.CommandArgument);
lbtn.CssClass = "firstCharacter highlighted";
Session["CurrentLetter"] = lbtn.Text;
}