更改点击时链接按钮的颜色？

Question

I have a user control called courses that displays all the available courses. In my user control file, I use a repeater control to display the courses. All the course names are rendered as linkbuttons inside itemtemplate. I use this user control in page called foo.aspx. I am using a javascript function to change the color of the value inside the itemtemplate when clicked. The color changes for a second when I click, but it goes back to its original color. Does anyone know what I am doing wrong here?

My javascript function.

<script>
function changeColor(e) {
    e.style.color = "red";
}
</script>

<asp:LinkButton ID="LinkButton1" OnClientClick="return changeColor(this);" runat="server">LinkButton</asp:LinkButton>

Answer 1

As I said on your comment, be careful about page PostBack .

To prevent your LinkButton color reseted, I think you should save them inside ViewState

I don't know whether it's the best solution or not, but at least I've try to help :)

Here is the aspx:

<asp:Repeater ID="myRepeater" OnItemCommand="myRepeater_ItemCommand" runat="server">
     <ItemTemplate>
           <asp:LinkButton ID="myLinkButton" runat="server" CommandName="CHANGE_COLOR" ForeColor="<%# System.Drawing.Color.FromName(Container.DataItem.ToString()) %>">Your Text</asp:LinkButton>
     </ItemTemplate>
</asp:Repeater>

Here is the code behind (C#):

First create the ViewState (this is the key to prevent data lost after PostBack )

List<string> listData
{
    set { ViewState["listData"] = value; }
    get
    {
        if (ViewState["listData"] == null)
            return new List<string>();
        else
            return (List<string>)ViewState["listData"];
    }
}

On the page Load:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            listData = new List<string>();
            listData.Add("Blue");
            listData.Add("Blue");
            listData.Add("Blue");
        }

        myRepeater.DataSource = listData;
        myRepeater.DataBind();
    }

When you click the LinkButton the repeater will trigger OnItemCommand

protected void myRepeater_ItemCommand(object sender, RepeaterCommandEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            if (e.CommandName == "CHANGE_COLOR")
            {
                LinkButton linkButton = (LinkButton)e.Item.FindControl("myLinkButton");
                if (linkButton.ForeColor != System.Drawing.Color.Red)
                {
                    linkButton.ForeColor = System.Drawing.Color.FromName("Red");
                    listData[e.Item.ItemIndex] = "Red"; //This is the key! This will prevent your color reset, as we save them inside ViewState
                }
                else
                {
                    linkButton.ForeColor = System.Drawing.Color.FromName("Blue");
                    listData[e.Item.ItemIndex] = "Blue";
                }
            }
        }
    }

Answer 2

Create two CSS classes and check in your repeater if the link is enabled or disabled and show css class based on that condition, something like this:

.ActiveLinkBtn
{
    color:red;
    font:bold 12px Tahoma;
}

.InActiveLinkBtn
{
    color:blue;
}

Then change the repeater as following

<asp:Repeater ID="rptPager" runat="server">
<ItemTemplate>
   <asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' 
   CommandArgument='<%# Eval("Value") %>'
   Enabled='<%# Eval("Enabled") %>' OnClick="Page_Changed" CssClass='<%#      
   Convert.ToBoolean(Eval("Enabled")) ? "ActiveLinkBtn" :"InActiveLinkBtn"%>'>
   </asp:LinkButton>
</ItemTemplate>
</asp:Repeater>

Here is the reference link Change ASP.NET LinkButton color on click