Comment appliquer le bouton jQuery UI à un bouton html dans ASP.NET?

Question

J'ai un GridView avec un bouton appelé btnShowTradeScreenshot. Le GridView crée de nombreux boutons et je veux y appliquer le bouton jQuery. Voici mon code GridView pertinent:

<asp:GridView 
    ID="grdTrades" 
    runat="server" 
    >    
    <Columns>    
     <asp:TemplateField HeaderText="Screenshot" > 
      <ItemTemplate> 
       <input name="btnShowTradeScreenshot" runat="server" visible='<%# Eval("screenshotId") != DBNull.Value %>' type="button" value='View...' onclick='<%# "ShowImageInNewPage(\"App_Handlers/ImageHandler.ashx?screenshotId=" + Eval("screenshotId") + "\")" %>' /> 
      </ItemTemplate> 
     </asp:TemplateField>    
    </Columns> 
</asp:GridView> 

Je suis en train d'appliquer le jQuery en utilisant ce code:

<script type="text/javascript"> 
    $(document).ready(function() { $("#<%= btnShowTradeScreenshot.ClientID %>").button(); }); 
</script> 

Rien ne se passe et je reçois le bouton standard, pas le bouton jQuery. Quand je regarde la source de la page, je remarque que les boutons ont des noms déchiquetés comme:

ctl00$contentMain$grdTrades$ctl05$ctl03

ctl00$contentMain$grdTrades$ctl10$ctl03 etc

Toutes les idées sur la façon d'appliquer le jQuery à tous mes boutons?

Merci.

Answer 1

Vous pouvez utiliser un nom de classe sur les boutons au lieu de vous fier au code client; De cette façon, vous économisez sur la longueur JavaScript et n'avez pas besoin de lier à chaque contrôle spécifique.

Dans JS:

// equivalent to $(document).ready(function() { 
$(function() { 
    $('.customButton').button(); 
}); 

Dans ASP.NET:

<input type="button" runat="server" class="customButton" .../> 

De plus, si votre grille est une grille liée AJAX, les éléments <input/> seront recréés et vous aurez besoin de réexécutez le code sur la grille pour appliquer les styles:

$('#<%= grdTrades.ClientID %> .customButton').button(); 

Answer 2

Essayez d'utiliser un sélecteur de nom à la place:

$('input[name$=btnShowTradeScreenshot]').button(); 

ou mieux encore appliquer une classe CSS à votre entrée, puis:

$('.button').button(); 

Answer 3

Il y a beaucoup de boutons créés et ASP va générer des ID pour eux de manière à assurer que chacun a un identifiant unique . Puisque $ ('# ...') vise à sélectionner un seul élément identifié de manière unique, vous ne pouvez pas l'utiliser pour sélectionner plusieurs boutons.

Essayez $ (':') pour sélectionner tous les objets de bouton. Vous pouvez également définir la classe de chaque bouton sur ShowTradeScreenshot, puis les sélectionner tous avec $ ('. ShowTradeScreenshot').