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

本文关键字：按钮 颜色 链接 | 更新日期: 2023-09-27 18:09:23

我有一个名为courses的用户控件，它显示所有可用的课程。在我的用户控制文件中，我使用一个重复器控件来显示课程。所有的课程名称都呈现为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>

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

正如我在你的评论中所说的，小心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";
                }
            }
        }
    }

创建两个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>

这里是参考链接. NET LinkButton颜色点击

相关文章：