我正在使用 .NET 4.0、AJAX 4.1.7.1005 和 VS2010 C#。
我已经多次使用 ajax 自动完成编写代码,没有任何问题。我现在需要将一个自动完成文本框放在一个表单视图中,该表单视图从一个从数据库中选择记录的网格视图打开,我可以让自动完成的初始部分工作 - 它从数据库中获取数据并将其显示在选择列表。我遇到的问题是对我的 javascript 的 OnClientPopulated 和 OnClientItemSelected 调用。我尝试将 js 作为 scriptmanager.registerclientscriptblock 放在页面、formview 和代码隐藏中...但是,无论我将 js 代码放在哪里,它都会引发此错误:
JavaScript 运行时错误:属性“OnSelectedItem”的值为 null 或未定义,不是 Function 对象
如果我删除 OnClientxxx 调用,则自动完成适用于文本框,但我需要获取其他详细信息以填充一些隐藏字段(当前未隐藏以进行测试)。我在文本框上调用 OnTextChanged 事件来尝试设置其他文本框的值。
我知道它与它的呈现方式以及它如何调用脚本有关,但我仍在学习,并且在搜索 google/bing 或在 SO 上还没有找到一个好的答案。
也许我会朝着错误的方向前进,但非常感谢任何帮助。
我的代码:
页面
<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页面
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";
}
如果您需要任何其他详细信息,我可以提供。先感谢您!
此外,我需要在这个表单视图中有两个自动完成字段,所以如果我可以让一个工作,那么我可以解决另一个。