用户控件中的动态 ID 以避免 JavaScript 和 Asp 页面中的重复

Question

我有一个 ASP.Net 用户控件，它有一个文本框和列表框，我给了它们唯一的 ID 和类，作为用户控件，如果我将它拖动两次或更多次asp.net页，编译时id相同会导致无法正常工作，请看下面的代码-

 $("#liAutoCompleteTextBox").html("<ul class='ecm-autocomp-light'>");
              $("#ddlAutoCompleteTextBox > option").each(function () {
                  if($(this).text().toLowerCase().match(txtVal)) {
                      $("#liAutoCompleteTextBox").append("<li class='ecm-autocomp-light' onclick=updateToAutoCompleteTextBox('" + encodeURI(this.text) + "')><a onclick=updateToAutoCompleteTextBox('" +encodeURI( this.text) + "')>" + this.text + "</a></li>");
                      }
              });

用户控件有如上脚本，这只是一个例子。

而在 aspx 中我们有，

<label class="input" id="AutoCompleteTextBoxText" runat="server">
    <asp:TextBox ID="txtAutoCompleteTextBox" AutoCompleteType="None" autocomplete="off" onfocusout="$('#liAutoCompleteTextBox').fadeOut()" onkeyup="liAutoCompleteTextBoxFunc()" runat="server" CssClass="input-sm isReq isRestrictedText txtAutoCompleteTextBoxCls"></asp:TextBox>
</label>
<label class="select" style="display: none">
    <asp:DropDownList ID="ddlAutoCompleteTextBox" ClientIDMode="Static" runat="server" CssClass="input-sm ddlAutoCompleteTextBoxCls">
    </asp:DropDownList>
    <i></i>
</label>
<div id="liAutoCompleteTextBox" class="customAutoCompDiv" style="position: absolute; display: none; padding: 5px; border: 1px #808080 solid; background: #fff; z-index: 1000; width: 90.5%;">
</div>

我想让所有的id完全动态化。是否有我可以与所有名称和类一起使用的任何特定控件 ID，或者是否有任何其他方法来处理此问题？

Answer 1

如果您将 liAutoCompleteTextBox div 更改为面板（即 html 中的 div）并将脚本放在 UserControl 中，那么它将起作用。当它是一个面板时，您可以访问它 ClientID。现在无论您在父页面上放置多少控件，javascript 仍会引用正确的控件。

 <!-- begin user control -->

<label class="input" id="AutoCompleteTextBoxText" runat="server">
    <asp:TextBox ID="txtAutoCompleteTextBox" AutoCompleteType="None" autocomplete="off" onfocusout="$('#liAutoCompleteTextBox').fadeOut()" onkeyup="liAutoCompleteTextBoxFunc()" runat="server" CssClass="input-sm isReq isRestrictedText txtAutoCompleteTextBoxCls"></asp:TextBox>
</label>
<label class="select" style="display: none">
    <asp:DropDownList ID="ddlAutoCompleteTextBox" ClientIDMode="Static" runat="server" CssClass="input-sm ddlAutoCompleteTextBoxCls">
    </asp:DropDownList>
    <i></i>
</label>

<asp:Panel ID="liAutoCompleteTextBox" runat="server" CssClass="customAutoCompDiv" Style="position: absolute; display: none; padding: 5px; border: 1px #808080 solid; background: #fff; z-index: 1000; width: 90.5%;"></asp:Panel>

<script type="text/javascript">
    $("#<%= liAutoCompleteTextBox.ClientID %>").html("<ul class='ecm-autocomp-light'>");
    $("#<%= AutoCompleteTextBoxText.ClientID %> > option").each(function () {
        if ($(this).text().toLowerCase().match(txtVal)) {
            $("#<%= liAutoCompleteTextBox.ClientID %>").append("<li class='ecm-autocomp-light' onclick=updateToAutoCompleteTextBox('" + encodeURI(this.text) + "')><a onclick=updateToAutoCompleteTextBox('" + encodeURI(this.text) + "')>" + this.text + "</a></li>");
        }
    });
</script>

<!-- end user control -->

重要的是要记住，当控件和 Control.ClientID 在同一个 Page/UserControl 中时，它们的 ID 将是正确的。

用户控件中的动态 ID 以避免 JavaScript 和 Asp 页面中的重复

Dynamic Ids in User Control to avoid duplication in JavaScript and Asp page

asp.net

.net

user-controls

web-user-controls