title: Handle onclick event of Html Button inside ListView
body: <p>I have been struggling to make this work, I have a ListView which has 2 buttons that basically are &quot;Accept&quot; and &quot;Reject&quot; to an image, these buttons are generated by the Listview itself so I can't assign an id. I can't use commandargument because they are html buttons, neither I can use linkbutton because they send a postback causing the page to refresh, can't use Asp buttons because the have an FA icon inside(I know I can download a library but I'm not sure about that), so the question is how I can make so when the use click one button, the other one shade into gray and when I click on a final button I loop through the listview and retrieve all the &quot;Accepted&quot; images?</p>
  <p>List view Code:</p>
  <pre><code>&lt;asp:ListView ID=&quot;listadoImg&quot; runat=&quot;server&quot; Visible=&quot;true&quot; OnItemDataBound=&quot;listadoImg_DataBound&quot;   &gt;
      &lt;ItemTemplate&gt;
          &lt;div class=&quot;col-12 col-md-6&quot;&gt;
              &lt;div class=&quot;card&quot;&gt;
  
                  &lt;asp:Image ID=&quot;Image1&quot; runat=&quot;server&quot; ImageUrl='&lt;%# Eval(&quot;imagen&quot;) %&gt;' CssClass=&quot;card-img-top&quot; /&gt;
  
                  &lt;div class=&quot;card-body&quot;&gt;
                      &lt;div class=&quot;row&quot;&gt;
                          &lt;div class=&quot;col-7  text-right &quot;&gt;
                              &lt;asp:Label ID=&quot;Label13&quot; Text='&lt;%# string.Concat(&quot;SKU: &quot;,Eval(&quot;sku&quot;))%&gt;' runat=&quot;server&quot;
                                  CssClass=&quot;&quot; Font-Size=&quot;Small&quot;  /&gt;&lt;br /&gt;
  
                              &lt;asp:Label ID=&quot;Label17&quot; Font-Size=&quot;Small&quot; Text='&lt;%# Eval(&quot;marca&quot;).ToString() + &quot; &quot; + Eval(&quot;descripcion&quot;).ToString()%&gt;' runat=&quot;server&quot; CssClass=&quot;labelImagenes&quot; /&gt;&lt;br /&gt;
                              &lt;asp:Label ID=&quot;Label15&quot; Font-Size=&quot;Small&quot; Text='&lt;%# string.Concat(&quot;Precio Normal: &quot;,Eval(&quot;precioNormal&quot;))%&gt;'
                                  runat=&quot;server&quot;  CssClass=&quot;labelImagenes&quot; /&gt;&lt;br /&gt;
                              &lt;asp:Label ID=&quot;lblPrecioOferta&quot; Font-Size=&quot;Small&quot; Text='&lt;%# string.Concat(&quot;Precio Oferta: &quot;,Eval(&quot;precioPublicacion&quot;))%&gt;'
                                  runat=&quot;server&quot; CssClass=&quot;labelImagenes&quot; /&gt;
                          &lt;/div&gt;
                          &lt;%--&lt;div class=&quot;col-5 text-left mt-3&quot;&gt;
                                      &lt;p&gt;&lt;i class=&quot;fa fa-check fa-2x ico-verde&quot;&gt;&lt;/i&gt;&amp;nbsp; &lt;span&gt;Aprobar &lt;/span&gt;&lt;/p&gt;
                                      &lt;p&gt;&lt;i class=&quot;fa fa-ban fa-2x mt-1 ico-rojo&quot;&gt;&lt;/i&gt;&amp;nbsp; &lt;span&gt;Rechazar &lt;/span&gt;&lt;/p&gt;
                          &lt;/div&gt;--%&gt;
                          
                          &lt;div class=&quot;col-5 text-left mt-3&quot;&gt;
                              
                              
                              &lt;button  type=&quot;button&quot; id=&quot;btnAceptado1&quot;   class=&quot;btn btn-light&quot; style=&quot;position: relative; display: inline-block; left: 5%; font-size: 18px; top: 3%; padding: 0px; background-color: transparent; margin-top: -10px; border: 1px solid transparent&quot;
                                  aria-label=&quot;Left Align&quot; onclick=&quot;CambiarAceptado1()&quot;   &gt;
                                 &lt;i class=&quot;fa fa-check fa-2x ico-verde&quot;&gt;&lt;/i&gt;
                                   &lt;span&gt;Aprobar &lt;/span&gt;
                              &lt;/button&gt;
                               
                              &lt;button  type=&quot;button&quot; id=&quot;btnAceptado2&quot;  class=&quot;btn btn-light&quot; style=&quot;position: relative; display: none; left: 5%; font-size: 18px; top: 3%; padding: 0px; background-color: transparent; margin-top: -10px; border: 1px solid transparent&quot;
                                  aria-label=&quot;Left Align&quot; onclick=&quot;CambiarAceptado2()&quot; &gt;
                                  &lt;i class=&quot;fa fa-check fa-2x ico-plomo&quot;&gt;&lt;/i&gt;
                                   &lt;span&gt;Aprobar &lt;/span&gt;
                              &lt;/button&gt;
  
                            
                              &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;
                                      &lt;br /&gt;
                              &lt;button type=&quot;button&quot; id=&quot;btnRechazado1&quot; class=&quot;btn btn-light&quot; style=&quot;position: relative; display: inline-block; left: 5%; top: 3%; padding: 0px; font-size: 18px; background-color: transparent; border: 1px solid transparent&quot;
                                  aria-label=&quot;Left Align&quot; onclick=&quot;CambiarRechazado1()&quot;&gt;
                                  &lt;i class=&quot;fa fa-ban fa-2x mt-1 ico-rojo&quot;&gt;&lt;/i&gt;
                                  Rechazar
                              &lt;/button&gt;
                               &lt;button   id=&quot;btnRechazado2&quot; type=&quot;button&quot;   class=&quot;btn btn-light&quot; style=&quot;position: relative; display: none; left: 5%; top: 3%; padding: 0px; font-size: 18px; background-color: transparent; border: 1px solid transparent&quot;
                                  aria-label=&quot;Left Align&quot; onclick=&quot;CambiarRechazado2()&quot; &gt;
                                  &lt;i class=&quot;fa fa-ban fa-2x mt-1 ico-plomo&quot;&gt;&lt;/i&gt;
                                  Rechazar
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/ItemTemplate&gt;
  &lt;/asp:ListView&gt;
  </code></pre>
  <p>So far I've been able to make something similar to one row which make it disappear when is blank like this:</p>
  <pre><code> protected void listadoImg_DataBound(object sender, ListViewItemEventArgs e)
      {
          Label lblPrecioOfe;
          
          if (e.Item.ItemType == ListViewItemType.DataItem)
          {
              lblPrecioOfe = (Label)e.Item.FindControl(&quot;lblPrecioOferta&quot;);
              System.Data.DataRowView rowView = e.Item.DataItem as System.Data.DataRowView;
              string precioPub = rowView[&quot;precioPublicacion&quot;].ToString();
              if (precioPub == &quot;&quot;)
              {
                  lblPrecioOfe.Text = &quot;&quot;;
              }
          }  
      }
  </code></pre>
  <p>The images look like this:</p>
  <p><a href="https://i.stack.imgur.com/3CVY1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3CVY1.png" alt="Image" /></a></p>
  <p>currently I can make it work with the JavaScript which is used in the buttons at the moment but only for the first object in the List.</p>
  <p>The JS used is this:</p>
  <pre><code> function CambiarAceptado1() {            
              document.getElementById('btnAceptado1').style.display = 'inline-block';                
              document.getElementById('btnAceptado2').style.display = 'none';
              document.getElementById('btnRechazado1').style.display = 'none';
              document.getElementById('btnRechazado2').style.display = 'inline-block';
          
      }
      function CambiarAceptado2() {
  
          document.getElementById('btnAceptado1').style.display = 'inline-block';
          document.getElementById('btnAceptado2').style.display = 'none';
          document.getElementById('btnRechazado1').style.display = 'none';
          document.getElementById('btnRechazado2').style.display = 'inline-block';
  
      }
      function CambiarRechazado1() {
  
          document.getElementById('btnAceptado1').style.display = 'none';
          document.getElementById('btnAceptado2').style.display = 'inline-block';
          document.getElementById('btnRechazado1').style.display = 'inline-block';
          document.getElementById('btnRechazado2').style.display = 'none';
  
      }
      function CambiarRechazado2() {
  
          document.getElementById('btnAceptado1').style.display = 'none';
          document.getElementById('btnAceptado2').style.display = 'inline-block';
          document.getElementById('btnRechazado1').style.display = 'inline-block';
          document.getElementById('btnRechazado2').style.display = 'none';
  
      }
  </code></pre>