我有一个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,我可以使用所有的名称和类,还是有其他方法来处理这个?
答案 0 :(得分:1)
如果您将liAutoCompleteTextBox
div更改为Panel(在html中为div)并将脚本放在UserControl中,那么它将起作用。如果是Panel,您可以访问它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和Control.ClientID在同一个Page / UserControl中时,它们的ID将是正确的。