在GridView中自动完成

时间:2018-01-16 22:11:00

标签: javascript c# asp.net gridview

我似乎无法让这个工作。我相信这将是一系列问题(除非有人能给我看一些有用的例子),但要开始......

我收到错误声明:

The name 'txtNewSongName' does not exist in the current context

这是我的asp.net代码的相关部分:              $(function(){             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服务填充。我已经在其他几个页面上使用了Web服务,所以我确定没关系,但是我对Javascript很擅长并且无法弄清楚为什么,当文本框在GridView中时,代码不起作用。

1 个答案:

答案 0 :(得分:1)

<%=txtNewSongName.ClientID %>不起作用的原因是因为txtNewSongName仅存在于单个GridView行中。因此,从GridView外部来看,它不可访问,因为可能有多个。

最简单的解决方法是将autocomplete分配给GridView中的每个TextBox。 启动bij,为TextBox提供一个唯一的类来识别它们

<asp:TextBox ID="txtNewSongName" runat="server" CssClass="AutoCompleteMe"></asp:TextBox>

然后你可以使用jQuery each将自动完成功能绑定到它。请参阅下面的代码段。当焦点丢失时,它将改变每个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,则必须通过Index访问它。

<%= ((TextBox)GridView1.Rows[i].FindControl("txtNewSongName")).ClientID %>