Как вы поворачиваете изображение в CommandField?

Question

Итак, у меня есть эти строки,

У каждой строки есть поле команды на моей странице.aspx.

<asp:CommandField ControlStyle-BackColor="White" ItemStyle-BackColor="White"     SelectImageUrl="~/Styles/img/arrow_state_blue_right.png"
                                            ShowSelectButton="true" ButtonType="Image" ItemStyle-Width="3px"></asp:CommandField>

Как видите, тип кнопки, используемой в поле команды, - изображение. Изображение - маленькие синие стрелки, которые вы видите в каждом командном поле на рисунке.

Я хочу, чтобы стрелки вращались с помощью анимации, когда пользователь нажимает на поле команды. Итак, я написал небольшую функцию JavaScript:

function rotateArrow() {
  document.getElementById("#arrow").style.WebkitTransitionDuration = "1s";
  document.getElementById("#arrow").style.webkitTransform = 'rotate(40deg)';
}

Эта функция прекрасно работает, когда стрелка является полем изображения. Т.е. если я поменяю стрелку на что-то вроде:

<asp:Image ImageURL=".....

Но я не хочу, чтобы стрелки были полями изображения asp.NET, я хочу, чтобы они были кнопкой в ​​моем командном поле.

Есть ли способ сделать это? Как я могу сказать JavaScript вращать атрибут изображения стрелки моего командного поля? Я ничего не могу найти по этому поводу, поэтому я начинаю думать, что это просто не поддерживается. Единственный обходной путь, который я могу придумать, не будет означать, что я потеряю функциональность командного поля - я могу просто обновить атрибут selectImageURL в коде позади, но тогда у меня не будет анимации.

Answer 1

В случае, если кто-то еще борется с доступом к атрибуту в пределах командного поля или чего-то подобного, вот одно из решений. Изображение в скрытом поле - это кнопка ImageButton. Вот мой обзор сетки с полем команд в моем файле.aspx:

<asp:GridView ID="gvColumnsViewSettings" runat="server" Width="90%"  OnRowDataBound="gvColumnsViewSettings_RowDataBound" AutoGenerateColumns="false" GridLines="None" ShowHeader="false" ShowFooter="false" OnSelectedIndexChanged="gvColumnsViewSettings_SelectedIndexChanged" DataKeyNames="ColumnOrder">
    <Columns>
    <asp:CommandField ControlStyle-BackColor="White" ItemStyle-BackColor="White" SelectImageUrl="~/Styles/img/arrow_state_blue_right.png" ShowSelectButton="true" ButtonType="Image" ItemStyle-Width="3px"></asp:CommandField>
...

Обратите внимание, что при изменении индекса gridview вызывается функция gvColumnsViewSettings_SelectedIndexChanged.

Теперь внутри функции SelectedIndexChanged в моем коде:

ImageButton arrow = null;
if(selectedRow.Cells != null && selectedRow.Cells.Count > 0 && selectedRow.Cells[0].Controls != null && selectedRow.Cells[0].Controls.Count > 0)
    arrow = (ImageButton)selectedRow.Cells[0].Controls[0];

Теперь у вас есть атрибут изображения стрелки в вашем командном поле!