javascript - 如何在 ASP.Net 用户控件中使用 jQuery DropdownChecklist？

Question

我正在开发 ASP.Net 用户控件，我想包含一个 jQuery DropdownChecklist ( http://code.google.com/p/dropdown-check-list/ )。有谁知道这是否可能？

到目前为止，当我将用户控件放置在页面上时，它会显示基本列表，而不是样式化的 DropdownChecklist，因此我知道有些地方不对。

我使用 RegisterClientScriptBlock() 从用户控件的代码隐藏中注入(inject)必要的脚本标记。根据 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>

这是我正在注入(inject)的自定义脚本...

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

我注入(inject)的其余部分是 jQuery DropdownChecklist 所必需的。这只是引用，而不是我用来注入(inject)它们的代码。我认为这可能是相当标准的东西......

<!-- 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( ... );