Tengo un ImageButton dentro de un DataList que al darle click se agrega una clase a sí mismo (lo que en realidad sería al input
del tipo image cuando está renderizado).
El problema es que agrega la clase pero la pierde al recibir la respuesta del servidor, estuve tratando de controlaro con el EnableViewState
y ViewStateMode
pero no funcionó.
Código .aspx con el script que utilizo para agregar la clase.
<%@ Page Title="ValidarImagenes" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ValidarImagenes.aspx.cs" Inherits="GD.ModuloParametros.ValidarImagenes" ValidateRequest="false" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:Accordion ID="accValidarImagenes" runat="server" FadeTransitions="True" FramesPerSecond="40" Width="100%"
TransitionDuration="200" RequireOpenedPane="false" SuppressHeaderPostbacks="true" HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent" HeaderSelectedCssClass="accordionHeader_selected">
<Panes>
<asp:AccordionPane ID="accPaneValidarImagenes" runat="server">
<Header>
<div class="accordionTitulo">
<span class="TituloFiltros" id="TituloFiltros">
<asp:Literal ID="Literal1" runat="server" Text="<%$ Resources:GD, TituloValidarImagenesClientes%>"></asp:Literal>
</span> - Seleccione las imágenes que desea validar.
</div>
</Header>
<Content>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DataList ID="dlImagenes" ClientIDMode="Static" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" HorizontalAlign="Center" PagedControlID="dlImagenes" CellSpacing="10" ViewStateMode="Enabled" EnableViewState="true" OnItemCommand="dlImagenes_ItemCommand"> <%----%>
<ItemTemplate>
<asp:ImageButton ID="imgValidarImagenes" runat="server" Width="200px" Height="150px" ImageUrl='<%# Bind("imagen") %>' OnClientClick="modImg(this)" CommandArgument='<%# Container.ItemIndex %>' CssClass="previewImg" EnableViewState="true" />
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="dlImagenes"/>
</Triggers>
</asp:UpdatePanel>
<div style="text-align:end; padding:10px;" id="divBtnValidar">
<asp:Button ID="btnValidar" runat="server" Text="Validar" CssClass="lnkDocumento" OnClick="btnValidar_Click" />
</div>
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion><br />
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<!--Imagen Modal-->
<script type="text/javascript" src="../Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript" defer="defer">
// Obtengo el modal
var modal = document.getElementById('myModal');
var captionText = document.getElementById("caption");
function modImg(input) {
if ($(input).hasClass('clicked')) {
$(input).removeClass('clicked');
//código doble click para mostrar la imagen en modal
var src = $(input).attr('src');
modal.style.display = "block";
modalImg.src = src;
captionText.innerHTML = this.alt;
}
else {
$(input).addClass('clicked');
setTimeout(function sto() {
if ($(input).hasClass('clicked')) {
$(input).removeClass('clicked');
//código click para seleccionar la imagen
$(input).toggleClass('imagenSeleccionada');
}
}, 400);
}
}
// Obtengo el <span> para cerrar
var span = document.getElementsByClassName("close")[0];
// Cuando el usuario de click en <span> que es la "x", cierro la ventana modal
span.onclick = function () {
modal.style.display = "none";
}
</script>