formview中的ajax自动完成扩展程序会引发javascript错误

时间:2013-11-07 16:04:24

标签: c# javascript jquery asp.net ajax

我使用的是.NET 4.0,AJAX 4.1.7.1005和VS2010 C#。

我已经多次使用ajax自动完成编写代码而没有任何问题。我现在需要在一个窗体视图中放置一个自动完成文本框,该窗体从数据库中的记录的gridview选项打开,我可以使自动完成的初始部分工作 - 它从数据库中抓取数据并显示在选择列表。我遇到的问题是对我的javascript的OnClientPopulated和OnClientItemSelected调用。我尝试将js放在页面,formview和codebehind中作为scriptmanager.registerclientscriptblock ...但是,无论我把js代码放在哪里,它都会抛出这个错误:

  

JavaScript运行时错误:属性' OnSelectedItem'是null或undefined,不是Function对象

如果我删除了OnClientxxx调用,则自动完成功能适用于文本框,但我需要获取其他详细信息以填充一些隐藏字段(当前未隐藏用于测试)。我在文本框上调用了OnTextChanged事件,试图设置其他文本框'值。

我知道这与它的呈现方式以及它如何调用脚本有关但我仍然在学习并且还没有找到一个很好的答案,但在搜索google / bing或者在这里搜索。

也许我正朝着错误的方向前进,但我们非常感谢任何帮助。

我的代码:


aspx page

<asp:TextBox ID="txt_approver1name" runat="server" Width="225px" Text='<%#Bind("APPROVER1_NAME")%>' AutoPostBack="true" OnTextChanged="txt_approver1name_TextChanged" />

<ajaxToolkit:AutoCompleteExtender runat="server" BehaviorID="AutoCompleteEx1" ID="autoComplete1" TargetControlID="txt_approver1name"
ServicePath="~/webservices/autocomplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="3"
CompletionInterval="200" EnableCaching="false" CompletionSetCount="5" CompletionListCssClass="autocomplete_completionListElement"
CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
ShowOnlyCurrentWordInCompletionListItem="true">

<Animations>
    <OnShow>
        <Sequence>
            <%-- Make the completion list transparent and then show it --%>
            <OpacityAction Opacity="0" />
            <HideAction Visible="true" />

            <%--Cache the original size of the completion list the first time
                the animation is played and then set it to zero --%>
            <ScriptAction Script="
                // Cache the size and setup the initial size
                var behavior = $find('AutoCompleteEx1');
                if (!behavior._height) {
                    var target = behavior.get_completionList();
                    behavior._height = target.offsetHeight - 2;
                    target.style.height = '0px';
                }"
            />

            <%-- Expand from 0px to the appropriate size while fading in --%>
            <Parallel Duration=".1">
                <FadeIn />
                <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx1')._height" />
            </Parallel>
        </Sequence>
    </OnShow>
    <OnHide>
        <%-- Collapse down to 0px and fade out --%>
        <Parallel Duration=".1">
            <FadeOut />
            <Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx1')._height" EndValue="0" />
        </Parallel>
    </OnHide>
</Animations>
</ajaxToolkit:AutoCompleteExtender>

<asp:TextBox ID="hdn_txt_approver1username" runat="server" Text='<%#Bind("APPROVER1_USERNAME")%>' />
<asp:TextBox ID="hdn_txt_approver1email" runat="server" Text='<%#Bind("APPROVER1_EMAIL")%>' />
<asp:TextBox ID="hdn_txt_approver1emplid" runat="server" Text='<%#Bind("APPROVER1_EMPLID")%>' />

cs page

    protected void txt_approver1name_TextChanged(object sender, EventArgs e)
{
    TextBox txt_approver1name = (TextBox)FormView_UpdateMode.FindControl("txt_approver1name");
    string cleanname = txt_approver1name.Text.ToString();
    string[] split = cleanname.Split(new Char[] { '|' });
    txt_approver1name.Text = split[0].Trim();

    string onListPopulated = "<script type='text/javascript'>" +
                    "function onListPopulated {" +
                    "var completionlist = $find('AutoCompleteEx1').get_completionList();" +
                    "completionlist.style.width = 'auto';}</script>";

    string OnSelectedItem = "<script type='text/javascript'>" +
                    "function OnSelectedItem(source, eventArgs) {" +
                    "var empdetails = eventArgs.get_value();" +
                    "empdetails = empdetails.split('|');" +
                    "var edTitle = empdetails[0];" +
                    "var edEmpID = empdetails[1];" +
                    "var edEmail = empdetails[2];" +
                    "var edUsername = empdetails[3];" +
                    "var approver1email = document.getElementById('<%=(TextBox)FormView_UpdateMode.FindControl('hdn_txt_approver1email').ClientID %>');" +
                    "var approver1emplid = document.getElementById('<%=(TextBox)FormView_UpdateMode.FindControl('hdn_txt_approver1emplid').ClientID %>');" +
                    "var approver1username = document.getElementById('<%=(TextBox)FormView_UpdateMode.FindControl('hdn_txt_approver1username').ClientID %>');" +
                    "approver1email.value = edEmail;"+
                    "approver1emplid.value = edEmpID;"+
                    "approver1username.value = edUsername;" +
                    "</script>";


    ScriptManager.RegisterClientScriptBlock(this.FormView_UpdateMode, this.GetType(), "onListPopulated", onListPopulated, true);
    ScriptManager.RegisterClientScriptBlock(this.FormView_UpdateMode, this.GetType(), "OnSelectedItem", OnSelectedItem, true);

    var acx = (AjaxControlToolkit.AutoCompleteExtender)FormView_UpdateMode.FindControl("autoComplete1");
    acx.OnClientItemSelected = "OnSelectedItem";
    acx.OnClientPopulated = "onListPopulated";
}

如果您需要我可以提供的任何其他详细信息。 提前谢谢!

此外,我需要在此formview中有两个自动填充字段,所以如果我可以使用一个,那么我可以解决另一个。

1 个答案:

答案 0 :(得分:0)

我,通过在formview外部放置隐藏字段然后添加on change事件以使用隐藏字段的值填充窗体视图中的可见字段来解决这个问题。是的,一些额外的步骤来获得我的结果,但它永远不会有效。