Как использовать jQuery DropdownChecklist в ASP.Net usercontrol?

Question

Я работаю над пользовательским контролем ASP.Net и хотел бы добавить jQuery DropdownChecklist (http://code.google.com/p/dropdown-check-list/). Кто-нибудь знает, возможно ли это?

Пока что, когда я размещаю элемент управления пользователя на странице, он отображает основной список, а не стилизованный DropdownChecklist, поэтому я знаю, что что-то не так.

Я внедряю необходимые теги сценариев с помощью RegisterClientScriptBlock () из кода пользователя usercontrol. Похоже, что это успешно, на основании того, что Firebug говорит мне, но по какой-то причине DropdownChecklist не работает.

У кого-нибудь есть идеи? Кто-нибудь пробовал это раньше?

Буду признателен за любую помощь, которую вы сможете мне оказать. Заранее спасибо.

Вот разметка моего пользовательского контроля ...

<%@ 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>

Вот пользовательский скрипт, который я внедряю ...

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();
    });
});

Остальное, что я делаю, требуется jQuery DropdownChecklist. Это просто ссылки, а не код, который я использую для их внедрения. Я думаю, что это, вероятно, довольно стандартный материал ...

<!-- 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

Поскольку ваш элемент имеет атрибут runat = "server", среда выполнения переименует его, чтобы он мог отслеживать его как дочерний элемент управления вашего пользовательского элемента управления. Что вы можете сделать, так это изменить свой javascript и в любом месте, где вам нужно сослаться на него, заменить его на s1.ClientID. Как это:

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