单击时更改链接按钮的颜色?

时间:2014-06-20 03:04:48

标签: c# javascript asp.net

我有一个名为课程的用户控件,显示所有可用的课程。在我的用户控制文件中,我使用转发器控件来显示课程。所有课程名称都呈现为itemtemplate中的链接按钮。我在名为foo.aspx的页面中使用此用户控件。我正在使用javascript函数在单击时更改itemtemplate中的值的颜色。单击时颜色会发生变化,但会恢复原来的颜色。有谁知道我在这里做错了什么?

我的javascript功能。

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

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

2 个答案:

答案 0 :(得分:2)

正如我在评论中所说,请注意页面PostBack

为防止您重置LinkButton颜色,我认为您应将其保存在ViewState

我不知道它是否是最好的解决方案,但至少我试图提供帮助:)

这是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>

这是(C#)背后的代码:

首先创建ViewState(这是防止PostBack后数据丢失的关键)

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

在页面加载:

    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();
    }

当您点击LinkButton时,转发器将触发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";
                }
            }
        }
    }

答案 1 :(得分:0)

创建两个CSS类并检查转发器是否启用或禁用链接并根据该条件显示css类,如下所示:

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

.InActiveLinkBtn
{
    color:blue;
}

然后按以下步骤更改转发器

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

以下是参考链接Change ASP.NET LinkButton color on click