GridView 内的自动完成
Posted
技术标签:
【中文标题】GridView 内的自动完成【英文标题】：Autocomplete inside a GridView 【发布时间】：2018-06-25 17:12:44 【问题描述】：我似乎无法让它工作。我确信这将是一系列问题（除非有人可以向我展示一些工作示例），但首先...
我收到一条错误消息：
The name 'txtNewSongName' does not exist in the current context
这是我的 asp.net 代码的相关部分： $（函数（） NewEmptyTrackName();
);
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null)
prm.add_endRequest(function (sender, e)
if (sender._postBackSettings.panelsToUpdate != null)
NewEmptyTrackName();
);
;
function NewEmptyTrackName()
$("#<%=txtNewSongName.ClientID %>").autocomplete(
source: function (request, response)
$.ajax(
url: '<%=ResolveUrl("~/AutocompleteSetlist.asmx/SongCompletionList") %>',
data: " 'cSong': '" + request.term + "'",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data)
response($.map(data.d, function (item)
return
label: item.split('|')[0],
val: item.split('|')[1]
))
,
error: function (response)
alert(response.responseText);
,
failure: function (response)
alert(response.responseText);
);
,
select: function (e, i)
$("#<%=hfNewSongName.ClientID %>").val(i.item.val);
,
minLength: 1
);
;
</script>
<asp:Panel runat="server" ID="ShowDiv3" Visible="false" BorderStyle="Solid" BorderWidth="0" Width="1389px">
<asp:Label ID="lblShowSetlist" runat="server" Text="Setlist:" Font-Bold="true"></asp:Label>
<br />
<%-- This line needed to be commented out when paging was removed: AllowPaging="True" AllowCustomPaging="True" PageSize="10" --%>
<div id="divGrid3" style='width:800px; overflow:auto'>
<asp:GridView ID="DataGrid_Setlist" runat="server" ShowHeaderWhenEmpty="true"
AllowSorting="True" OnSorting="DataGrid_Setlist_Sorting" AutoGenerateColumns="False" ShowFooter ="true" CellPadding="1"
CssClass="hoverTable"
HeaderStyle-BackColor="#4DA6A6" HeaderStyle-BorderColor="#4DA6A6"
HeaderStyle-Font-Size="Small" HeaderStyle-ForeColor="White"
FooterStyle-BackColor="#4DA6A6" FooterStyle-BorderColor="#4DA6A6" FooterStyle-ForeColor="White"
DataKeyNames="DateID"
OnDataBound="DataGrid_Setlist_OnDataBound"
OnRowDataBound="DataGrid_Setlist_RowDataBound"
OnRowCancelingEdit="DataGrid_Setlist_CancelCommand"
OnRowEditing="DataGrid_Setlist_EditCommand"
OnRowDeleting="DataGrid_Setlist_DeleteCommand"
OnRowUpdating="DataGrid_Setlist_UpdateCommand">
<EmptyDataTemplate>
<columns>
<asp:TemplateField HeaderText="Song Order">
<ItemTemplate>
<asp:TextBox ID="txtNewSongOrder" runat="server" Width="100px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Song Name">
<ItemTemplate>
<asp:TextBox ID="txtNewSongName" runat="server" Width="370px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Song Name">
<ItemTemplate>
<asp:HiddenField ID="hfNewSongName" runat="server"></asp:HiddenField>
</ItemTemplate>
</asp:TemplateField>
<FooterTemplate>
<asp:Button ID="btn_Add" runat="server" Text="Add" OnClick="DataGrid_Setlist_RowCreated" />
</FooterTemplate>
</columns>
</EmptyDataTemplate>
<Columns>
<asp:TemplateField HeaderText="Song Order">
<ItemTemplate>
<asp:Label ID="lblSongOrder" runat="server" Width="100px" Text='<%#Eval("SongOrder") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtNewSongOrder" runat="server" Width="100px" Text='<%#Eval("SongOrder") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtNewSongOrder" runat="server" Width="100px" ></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Song Name">
<ItemTemplate>
<asp:Label ID="lblSongID" runat="server" Width="370px" Text='<%#Eval("SongID") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtNewSongName" runat="server" Width="370px" Text='<%#Eval("SongID") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtNewSongName" runat="server" Width="370px" ></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="90px">
<ItemTemplate>
<asp:Button ID="btn_Edit" runat="server" Text="Edit" CommandName="Edit" />
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="btn_Update" runat="server" Text="Update" CommandName="Update"/>
<asp:Button ID="btn_Cancel" runat="server" Text="Cancel" CommandName="Cancel"/>
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="btn_Add" runat="server" Text="Add" OnClick="DataGrid_Setlist_RowCreated" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btn_Delete" runat="server" OnClientClick="javascript:return confirm('Are you sure?');" Text="Delete" CommandName="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Label ID="lblEmpty1" runat="server" Visible="false" Style="font-weight:bold; font-size:large;"></asp:Label>
</div>
</asp:Panel>
我正在尝试按特定顺序输入歌曲。使用自动完成网络服务填充歌曲标题。我已经在其他几个页面上使用了 Web 服务，所以我确信这没问题，但我不擅长 Javascript，无法弄清楚为什么当文本框位于 GridView 中时，代码不起作用。
【问题讨论】：
我已经很久没有在asp.net 工作了，但我记得你在aspx 文件中看到的名称与浏览器呈现的名称不同。我怀疑您从中读取数据或传递数据的字段以破坏 javascript 的方式更改其名称。 【参考方案1】：<%=txtNewSongName.ClientID %> 不起作用的原因是因为txtNewSongName 仅存在于单个 GridView 行中。因此，从 GridView 外部无法访问它，因为可能不止一个。
最简单的解决方法是将autocomplete 分配给GridView 中的每个TextBox。
开始 bij 给 TextBox 一个唯一的类来识别它们
<asp:TextBox ID="txtNewSongName" runat="server" CssClass="AutoCompleteMe"></asp:TextBox>
然后您可以使用 jQuery each 将自动完成功能绑定到它。请参阅下面的 sn-p。当焦点丢失时，它将更改每个 TextBox 的文本。
function NewEmptyTrackName()
$('#<%=DataGrid_Setlist.ClientID %> .AutoCompleteMe').each(function ()
$(this).blur(function ()
$(this).val("Testing...");
);
);
;
在你的情况下，它会变成这样
function NewEmptyTrackName()
$('#<%=DataGrid_Setlist.ClientID %> .AutoCompleteMe').each(function ()
$(this).autocomplete(
...
如果您绝对需要带有 GridView 的 TextBox 中的 ClientID，则必须通过索引访问它。
<%= ((TextBox)GridView1.Rows[i].FindControl("txtNewSongName")).ClientID %>
【讨论】：
自动完成效果很好。但是，当我将数据写入表时，我需要 SongID 而不是 Songname，并且我将您编写的最后一行代码放入我有 $("#") 的代码中。 val（i.item.val）；它给了我一个错误，说“当前上下文中不存在名称'i'”。我是不是误会了什么？ @JohnnyBones 抱歉，我不太理解您的评论。但是如果您需要在同一行中查找另一个元素，请使用closest：$(this).closest('tr').find('input[type=hidden]').val('Song ID');
我需要获取 Web 服务传回的 SongID，所以我只是用 i.item.val 替换了“Song ID”，那行代码运行良好。非常感谢！以上是关于GridView 内的自动完成的主要内容，如果未能解决你的问题，请参考以下文章
jquery自动完成asp.net Gridview中的多个文本框