Question

我有一个带有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>

Services.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

我从未使用过网络方法或Jquery，我发现这些例子并让它们适合我 - 直到我注意到这个问题。任何帮助是极大的赞赏。

Answer 1

问题是，当值发生变化时，您的级联下拉菜单会设置为回发，这会导致页面刷新但您的BindControls()功能未重新运行。这是因为回发是一个＆＃34;部分页面更新＆＃34;并且不会为此类更新刷新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);

Answer 2

这可能是在黑暗中拍摄的，但您可能会尝试剥离focus()处理程序。

即。替换最后一个块

}).focus(function(){
    $(this).autocomplete("search", "");
});

用这个：

});

我建议这样做是因为该块中的代码（$(this).autocomplete("search", "");）似乎正在撤消代码中第一个.autocomplete()调用的工作（即以$("#txtSearch").autocomplete({开头的内容）

我说focus()处理程序中的代码可能会撤消第一个autocomplete()调用的工作，因为我无法看到或告诉我们＆＃34;搜索＆＃34;指的是，第二个参数是一个空字符串似乎并不好。 autocomplete jQuery小部件为autocomplete()的参数接受一个事件和ui，因此为ui param提供一个空字符串，为事件创建一个未知名称可能解释为什么该列表不再出现。

无论如何，要尝试一下！

级联下降干扰自动完成文本框

2 个答案: