Блог

Главная - Вопросы по программированию - Изменение цвета кнопки ссылки при нажатии?

Изменение цвета кнопки ссылки при нажатии?

#c# #javascript #asp.net

#c# #javascript #asp.net

Вопрос:

У меня есть пользовательский элемент управления courses, который отображает все доступные курсы. В моем файле пользовательского управления я использую элемент управления repeater для отображения курсов. Все названия курсов отображаются как кнопки ссылок внутри 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>

Комментарии:

1. При asp:LinkButton asp:Repeater щелчке внутри ваш повторитель вызовет OnItemCommand это PostBack на вашей странице. При выполнении страницы PostBack ваш HTML-код будет отображаться снова. Вот почему LinkButton цвет снова будет сброшен.

2. @WillyLazuardi Спасибо за ответ. Есть ли способ это исправить?

3. Есть более простой способ сделать это, чем с помощью javascript, см. Мой ответ ниже

Ответ №1:

Как я уже сказал в вашем комментарии, будьте осторожны со страницей 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";
                }
            }
        }
    }

Ответ №2:

Создайте два класса 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>

Вот изменение ссылочной ссылки ASP.NET Цвет кнопки ссылки при нажатии

Метки: