如何在 CommandField 中旋转图像答案

【问题标题】：How do you rotate the image in a CommandField如何在 CommandField 中旋转图像
【发布时间】：2015-04-04 14:43:12
【问题描述】：

所以我有这些行，

在我的 .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 属性，但这样我就没有动画了。

【问题讨论】：

我的建议...检查命令字段中的元素...看起来它呈现为输入...然后使用 jQuery 将单击事件附加到该元素，单击时将旋转它.将带您进行更多研究，但我知道可以做到。我只是没有时间进行研究并为您编写代码。你可以做到！

标签： asp.net .net commandfield

【解决方案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];

现在你的命令域中有箭头图像属性！

【讨论】：