Javascript onClick изменить границу изображения на странице ASP

Question

У меня есть страница ASP с 5 кнопками ASP ImageButtons. Изображения можно щелкнуть, а затем в коде происходит несколько вещей. Я также хочу, чтобы изображения обводились рамкой, когда пользователь щелкает ее, чтобы он знал, что она выбрана. Я использую JavaScript, чтобы завершить наброски с рамкой. Но моя проблема в том, что граница применяется, страница обновляется, и граница исчезает. Я знаю, что кнопки ImageButtons вызывают публикацию назад, но как мне сохранить контур ImageButtons после обратной передачи?

Javascript:

<script language="JavaScript" type="text/javascript">
    function chnageborder(imageid) 
    {
        document.getElementById(imageid).style.border = "solid 2px #2F74D0";
    }
</script>

ASP ImageButton:

<asp:ImageButton 
            ID="Image1" runat="server" 
            style="width: 48px; height: 48px; margin-right: 5px;" OnClick="Image1_Click" OnClientClick="javascript:chnageborder('Image1'); return true;"/>

Answer 1

Определите вашу границу в селекторе классов в CSS, затем примените этот класс к вашему изображению в коде на PostBack.

CSS

.selected { border: 2px solid  #2F74D0};

C #

Image1.CssClass = "selected";

Стоит отметить, что это базовый пример, который перезапишет любые существующие классы.Если вы хотите добавить в коллекцию классов, этот ответ предоставляет решение.

Answer 2

Вы должны справиться с этим на стороне сервера.В основном, стиль может быть применен в обратной передаче определенного события нажатия кнопки изображения.

void Image1_Click()
{
Image1.Styles.Add("border" , "solid 2px #2F74D0");

//And you need to revert the styles of the other buttons if they already have the selected style

Image2.Style["border"] = "";
.
.
Image5.Style["border"] = "";

}

Или, если вы хотите сделать это более чистым способом, вы можете применить один класс CSS и применить этот класс вкод в качестве одного ответа предлагает ниже.Вам может понадобиться другой класс CSS, чтобы иметь невыбранный стиль и применить тот же, что и выше, чтобы они выглядели нормально.

Answer 3

Попробуйте это

   void Image1_Click()
     {
     Image1.Attributes.Add("Style" , "Border:solid 2px #2F74D0");       
     }