Comment utiliser jQuery DropdownChecklist dans ASP.Net usercontrol?

Question

Je travaille sur une commande ASP.Net et je voudrais inclure une liste jQuery DropdownCheck (http://code.google.com/p/dropdown-check-list/). Est-ce que quelqu'un sait si c'est possible? Jusqu'à présent, lorsque je place le contrôle usercontrol sur une page, il affiche la liste de base et non la DropdownChecklist de style, donc je sais que quelque chose ne va pas.

J'injecte les balises de script nécessaires à l'aide de RegisterClientScriptBlock() à partir du code-behind d'usercontrol. Il semble que cela réussisse en fonction de ce que Firebug me dit, mais pour une raison quelconque, la DropdownChecklist ne fonctionne pas.

Quelqu'un a-t-il des idées? Est-ce que quelqu'un a déjà essayé cela?

J'apprécierais toute aide que vous pouvez me donner. Merci d'avance.

Voici le balisage de mon usercontrol ...

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="SelectedFilterBox.ascx.vb" 
    Inherits="SelectedFilterBox.SelectedFilterBox" %> 
<div> 
    <asp:Table ID="tblFilters" runat="server" Width="200"> 
     <asp:TableRow> 
      <asp:TableCell> 
       <table> 
        <tr> 
         <td> 
          <select id="s1" multiple="true" runat="server" /> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <asp:UpdatePanel ID="UP1" runat="server"> 
           <ContentTemplate> 
            <input id="inpHide" type="hidden" runat="server" /> 
            <asp:Repeater ID="rpFilters" runat="server" Visible="false"> 
             <ItemTemplate> 
              <table class="selectedFilter"> 
               <tr> 
                <td class="selectedFilterLeft"> 
                 <%# Eval("filterName")%> 
                </td> 
                <td class="selectedFilterRight" align="right"> 
                 <a onclick='DeselectFilter("s1","<%#Eval("filterName") %>");'> 
                  <asp:ImageButton ID="ibRemove" runat="server" ImageUrl="~/images/delete.gif" CommandArgument='<%#Eval("filterName") %>' 
                   OnCommand="ibRemove_Click" /> 
                 </a> 
                </td> 
               </tr> 
              </table> 
             </ItemTemplate> 
            </asp:Repeater> 
            <asp:Label ID="lblFilters" runat="server" /> 
           </ContentTemplate> 
          </asp:UpdatePanel> 
         </td> 
        </tr> 
       </table> 
      </asp:TableCell> 
     </asp:TableRow> 
    </asp:Table> 
</div> 

Voici le script personnalisé ... Je l'injection

function DoPostback() { 
    __doPostBack('UP1', ''); // Note: You must have a server control on the form somewhere in order for this function to work. 
}; 

// deselects item matching targetString within specified dropdownchecklist 
function DeselectFilter(selectID, targetString){ 
    $("#" + selectID + " option").each(function(){ 
    if($(this).text() === targetString) $(this).attr("selected", ""); 
    }); 
    $("#" + selectID).dropdownchecklist("refresh"); 
}; 

$(function() { 
    // sets default dropdownchecklist settings, I'm assuming this is run when the control is instantiated 
    $("#s1").dropdownchecklist({ forceMultiple: true, width: 200, textFormatFunction: function() { 
     return "Filters:"; 
     } 
    }); 

    // binds the following function to the dropdownchecklist's "change" event 
    $('#s1').change(function() { 
     // collect selected values 
     var values = $(this).val(); 
     // store values in hidden input field 
     document.getElementById("inpHide").value = values; 
     // perform postback, allowing server to handle those values 
     DoPostback(); 
    }); 
}); 

Le reste que je l'injection sont nécessaires par le jQuery DropdownChecklist. Ce sont juste les références, pas le code que j'utilise pour les injecter. Je pense que des choses probablement assez standard ...

<!-- Use a JQuery ThemeRoller theme, in this case 'smoothness' --> 
<link rel="stylesheet" type="text/css" href="smoothness/jquery-ui-1.8.4.custom.css" /> 
<link rel="stylesheet" type="text/css" href="ui.dropdownchecklist.themeroller.css" /> 
<!-- Include the basic JQuery support (core and ui) --> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.4.custom.min.js"></script> 
<!-- Include the DropDownCheckList support --> 
<script type="text/javascript" src="ui.dropdownchecklist-1.1-min.js"></script> 

Answer 1

Étant donné que votre élément a un attribut runat = « serveur », le moteur d'exécution sera le renommer pour qu'il puisse le suivre comme un contrôle enfant de votre contrôle utilisateur. Ce que vous pouvez faire est de modifier votre javascript et partout où vous avez besoin de s'y référer, remplacez-le par s1.ClientID. Comme ceci:

$("<# s1.ClientID %>").dropdownchecklist(...);