Как сохранить функциональность стилизации / наведения гиперссылок изображения в GridView TemplateField с помощью ImageButtons - PullRequest
Новая
       27

Как сохранить функциональность стилизации / наведения гиперссылок изображения в GridView TemplateField с помощью ImageButtons

1 голос
/ 14 марта 2012

В каждой строке GridView (используя TemplateField) я хотел бы отобразить кнопки изображений, которые будут использоваться для управления данными в этой строке. Затем я хотел бы поменять изображения кнопок, когда пользователь сначала наводит курсор мыши на строку GridView, а затем снова, когда пользователь наводит курсор на определенную кнопку.

Я легко могу выполнить эту функцию при наведении курсора, используя CSS и гиперссылки с изображениями, однако при использовании гиперссылок с изображениями я не могу вызывать какие-либо события на стороне сервера для обработки редактирования конкретной строки.

В прошлом я использовал ImageButtons вместо гиперссылок изображений. Я добавил параметр CommandName в ImageButtons, а затем обработал GridView RowCommand в коде: 

<asp:ImageButton ID="btnSelect" CommandName="select" runat="server" ImageUrl="~/images/iconSelect1.png" />

Чтобы изменить изображение ImageButton при наведении, я использовал Javascript: 

<asp:ImageButton ID="btnSelect" onmouseover="this.src='../images/iconSelect3.png';" onmouseout="this.src='../images/iconSelect2.png';" runat="server" ImageUrl="~/images/iconSelect1.png" />

Однако в этом случае мне также необходимо заменить изображение ImageButton, когда пользователь впервые наводит курсор на саму строку GridView.

Подводя итог, можно сказать, что когда пользователь наводит курсор на строку GridView, все кнопки ImageButtons в этой строке заменят image1 на image2. Затем, когда пользователь наводит указатель мыши на определенную кнопку ImageButton, его изображение переключается с image2 на изображение 3.

Заранее благодарим Вас за любые предложения относительно наилучшего подхода.

------------------------------------- EDIT --------- --------------------------------

Не уверен, что это лучший подход, но я нашел потенциальное решение с использованием jQuery: 

<ItemTemplate>
    <div class="gvRow">

        <asp:ImageButton ID="btnSelect" CssClass="btnSelect" runat="server" ImageUrl="~/images/iconSelect1.png" onmouseover="this.src='../images/iconSelect3.png';" onmouseout="this.src='../images/iconSelect2.png';" />

    </div>
</ItemTemplate>

<script type="text/javascript">                                         
    $('.gvRow').hover(
        function () {
            $(this).find(".btnSelect").attr("src", "../images/iconSelect2.png");
        },
        function () {
            $(this).find(".btnSelect").attr("src", "../images/iconSelect1.png");
        }
    );
</script>

Пока что это работает хорошо, но я открыт для предложений по улучшению этого.

Надеюсь, это поможет кому-то еще.

1 Ответ

0 голосов
/ 08 февраля 2013

Ваше решение выглядит как хорошее!

Для согласованности я бы немного подправил его, чтобы jquery использовался для реализации обоих режимов наведения, например добавив это в существующий скрипт: 

$('.btnSelect').hover(
    function () {
        $(this).attr("src", "../images/iconSelect3.png");
    },
    function () {
        $(this).attr("src", "../images/iconSelect2.png");
    }
);
...