我有一个页面，其中包含 Ajax Toolkit 选项卡容器、一对级联下拉菜单和一个自动完成文本框。当我第一次打开页面时，如果单击自动完成文本框，单词/短语列表会立即下降。如果我单击第一个下拉列表，然后返回并单击自动完成文本框，则该文本框中不会发生任何情况。单词/短语不会掉落。谁能帮我弄清楚为什么会发生这种情况，以及如何防止这种情况发生？
在aspx中:
<script>
$(document).ready(function () {
BindControls();
});
function BindControls() {
$("#txtSearch").autocomplete({
source: function (request, response) {
$.ajax({
url: "ServiceCS.asmx/GetScopes",
data: "{ 'sLookUP': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item,
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
select: function (e, i) {
$("#<%=txtScopeID.ClientID%>").val(i.item.value);
},
minLength: 0,
scroll: true
}).focus(function(){
$(this).autocomplete("search", "");
})
}
</script>
...
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server"
TabStripPlacement="Top">
<ajaxToolkit:TabPanel runat="server" ID="JobPanel" HeaderText="Job Info">
<ContentTemplate>
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<table>
<tr>
<td class="right_column">
<asp:DropDownList ID="ddlClient" AutoPostBack="true"
OnSelectedIndexChanged="ddlClient_SelectedIndexChanged"
runat="server">
</asp:DropDownList>
<ajaxToolkit:CascadingDropDown ID="cddlClient" runat="server"
Category="ClientID" LoadingText="Loading..."
PromptText="Select Client" ServiceMethod="GetClients"
ServicePath="~/ServiceCS.asmx" TargetControlID="ddlClient">
</ajaxToolkit:CascadingDropDown>
</td>
<td class="right_column">
<asp:DropDownList ID="ddlLoc" AutoPostBack="true"
OnSelectedIndexChanged="ddlLoc_SelectedIndexChanged" runat="server">
</asp:DropDownList>
<ajaxToolkit:CascadingDropDown ID="cdlLocs" runat="server"
Category="ClientLocationID" LoadingText="Loading..."
ParentControlID="ddlClient" PromptText="Select Location"
PromptValue="" ServiceMethod="GetLocations"
ServicePath="~/ServiceCS.asmx" TargetControlID="ddlLoc">
</ajaxToolkit:CascadingDropDown>
</td>
</tr>
<tr>
<td class="right_column">
<input type="text" value="" id="txtSearch" style="text-align:left;
width:300px;" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
服务.asmx:
<WebMethod()> _
Public Function GetClients(knownCategoryValues As String) As CascadingDropDownNameValue()
Dim query As String = "SELECT ClientCode + ' | ' + ClientName"
query &= " , ClientID"
query &= " FROM view_ClientCombo"
query &= " ORDER BY ClientCode"
Dim clients As List(Of CascadingDropDownNameValue) = GetData(query)
Return clients.ToArray()
End Function
<WebMethod()> _
Public Function GetLocations(knownCategoryValues As String) As CascadingDropDownNameValue()
Dim client As String = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)("ClientId")
'Dim query As String = String.Format("SELECT CliLocNumber FROM view_ClientLocation WHERE ClientID = {0}", client)
Dim query As String = String.Format("SELECT CliLocNumber + ' | ' + CliLocCity + ' | ' + CliLocState, replace(CliLocName, '''', '''''') FROM dbo.view_ClientLocCombo WHERE ClientID = {0}", client)
Dim locations As List(Of CascadingDropDownNameValue) = GetData(query)
Return locations.ToArray()
End Function
Private Function GetData(query As String) As List(Of CascadingDropDownNameValue)
Dim conString As String = ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString
Dim cmd As New SqlCommand(query)
Dim values As New List(Of CascadingDropDownNameValue)()
Using con As New SqlConnection(conString)
con.Open()
cmd.Connection = con
Using reader As SqlDataReader = cmd.ExecuteReader()
While reader.Read()
values.Add(New CascadingDropDownNameValue() With { _
.name = reader(0).ToString(), _
.value = reader(1).ToString() _
})
End While
reader.Close()
con.Close()
Return values
End Using
End Using
End Function
<WebMethod()> _
Public Function GetScopes(ByVal sLookUP As String) As String()
Dim scopes As New List(Of String)()
Using conn As New SqlConnection()
conn.ConnectionString = ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString
Using cmd As New SqlCommand()
cmd.CommandText = "SELECT JobScopeDesc + ' | ' + JobScopeID AS JobScopeDesc FROM view_JobScopeCode where JobScopeDesc like '%' + @SearchText + '%' ORDER BY JobScopeDesc"
cmd.Parameters.AddWithValue("@SearchText", sLookUP)
cmd.Connection = conn
conn.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
scopes.Add(sdr("JobScopeDesc").ToString())
End While
End Using
conn.Close()
End Using
Return scopes.ToArray()
End Using
End Function
我从未使用过 Web 方法或 Jquery，我找到了这些示例并让它们为我工作 — 直到我注意到这个问题。任何帮助是极大的赞赏。
最佳答案
问题是您的级联下拉菜单设置为在值更改时回发，这会导致页面刷新，但您的 BindControls() 函数不会重新运行。发生这种情况是因为回发是“部分页面更新”，并且不会针对此类更新刷新 DOM。因此，您的 $(document).ready 函数在回发后不会执行，并且您的自动完成文本框似乎已损坏。有关部分页面更新的更多信息，请参阅此页面:http://www.asp.net/web-forms/overview/older-versions-getting-started/aspnet-ajax/understanding-partial-page-updates-with-asp-net-ajax .
这里的问题是，您是否在服务器端代码(ddlClient_SelectedIndexChanged 和 ddlLoc_SelectedIndexChanged 函数)中执行了任何需要您在下拉列表中选择值后回发的操作？如果没有，那么您可以通过重写下拉字段来禁用回发功能，如下所示:
<asp:DropDownList ID="ddlClient" AutoPostBack="false" runat="server"></asp:DropDownList>
和:
<asp:DropDownList ID="ddlLoc" AutoPostBack="false" runat="server"></asp:DropDownList>
如果您确实需要将回发保留在那里，那么您只需确保您的 BindControls() 函数在部分页面更新后运行。为此，您可以在 $(document).ready 函数上方添加一个页面请求管理器行，该函数在部分页面更新时调用 BindControls 函数:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(BindControls);
关于javascript - 级联下拉菜单干扰自动完成文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28505522/