如何在 ASP.Net 用户控件中使用 jQuery DropdownChecklist？答案

【问题标题】：How to use jQuery DropdownChecklist within ASP.Net usercontrol?如何在 ASP.Net 用户控件中使用 jQuery DropdownChecklist？
【发布时间】：2011-05-08 02:59:33
【问题描述】：

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

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

我正在使用来自用户控件的代码隐藏的 RegisterClientScriptBlock() 注入必要的脚本标签。根据 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>

【问题讨论】：

你好，ks78！你能告诉我你的用户控制吗？这是 ASCX 吗？
嘿...是的，我又回来了。请稍等，我将发布标记。是的，它是一个 .ascx。
好的，标记已添加到我的问题中。当你提供帮助时，我只是想让它早点工作。现在，我正在尝试将其放入用户控件中，这是下一步。
对不起，我也应该问这个：你能发布你正在注入的脚本吗？
你能看看生成的 HTML（即从你的浏览器点击“查看 HTML”），我猜 ASP.NEt 正在改变你的 ID="" 属性控制

标签： javascript asp.net jquery user-controls

【解决方案1】：

由于您的元素具有 runat="server" 属性，运行时将对其进行重命名，以便它可以将其作为用户控件的子控件进行跟踪。您可以做的是修改您的 javascript，并在您需要引用它的任何地方将其替换为 s1.ClientID。像这样：

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

【讨论】：