Захват значения данных с помощью Auto Complete Extender

Question

У меня проблемы с захватом выбранных данных в режиме автозаполнения с использованием JavaScript в gridview.Фактически, первые два поля являются успешными, однако, когда я добавляю третье поле, кнопка не запускает событие для захвата данных.Я не могу точно определить, что я сделал неправильно, потому что нет ошибки, бросающей в меня.Это как если бы кнопка была уже отключена.

Вот полный фрагмент кода:

<asp:GridView ID="grdSafeZone" runat="server" CssClass="table"
            GridLines="Horizontal" AutoGenerateColumns="false" UseAccessibleHeader="true" 
            Width="1500" ShowFooter="true">
            <Columns>
                <asp:TemplateField HeaderText="Branch">
                    <ItemTemplate>
                        <%# Eval("Branch") %>
                    </ItemTemplate>
                    <FooterTemplate>
                        <div class="form-group">
                            <asp:TextBox ID="txtBranch" runat="server" CssClass="form-control" placeholder="Enter Branch"></asp:TextBox>
                            <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
                                ServiceMethod="GetBranch" 
                                MinimumPrefixLength="1"
                                CompletionInterval="10"
                                EnableCaching="false"
                                CompletionSetCount="1"
                                TargetControlID="txtBranch"
                                FirstRowSelected="false"
                                OnClientItemSelected="BranchSelected">
                            </ajaxToolkit:AutoCompleteExtender>                                                                   
                        </div> 

                    </FooterTemplate>   

                </asp:TemplateField>

                <asp:TemplateField HeaderText="Employee's Name">
                    <ItemTemplate>
                        <%# Eval("EmployeeName") %>
                    </ItemTemplate>
                    <FooterTemplate>
                        <div class="form-group">
                            <asp:TextBox ID="txtEmployeeName" runat="server" CssClass="form-control" placeholder="Enter Employee Name"></asp:TextBox>
                            <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"
                                ServiceMethod="GetEmployee" 
                                MinimumPrefixLength="2"
                                CompletionInterval="10"
                                EnableCaching="false"
                                CompletionSetCount="1"
                                TargetControlID="txtEmployeeName"
                                FirstRowSelected="false"
                                OnClientItemSelected="EmployeeSelected">
                            </ajaxToolkit:AutoCompleteExtender>
                        </div>
                    </FooterTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Buddy 1">
                    <ItemTemplate>
                        <%# Eval("Buddy1") %>
                    </ItemTemplate>
                    <FooterTemplate>
                        <div class="form-group">
                            <asp:TextBox ID="txtBuddyOne" runat="server" CssClass="form-control" placeholder="Enter Buddy 1"></asp:TextBox>
                            <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender3" runat="server"
                                ServiceMethod="GetBuddyOne" 
                                MinimumPrefixLength="2"
                                CompletionInterval="10"
                                EnableCaching="false"
                                CompletionSetCount="1"
                                TargetControlID="txtBuddyOne"
                                FirstRowSelected="false">
                            </ajaxToolkit:AutoCompleteExtender>
                        </div>
                    </FooterTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Buddy 2">
                    <ItemTemplate>
                        <%# Eval("Buddy2") %>
                    </ItemTemplate>
                    <FooterTemplate>
                        <div class="form-group">
                            <asp:TextBox ID="txtBuddyTwo" runat="server" CssClass="form-control" placeholder="Enter Buddy 2" value=""></asp:TextBox>
                            <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender4" runat="server"
                                ServiceMethod="GetEmployees" 
                                MinimumPrefixLength="2"
                                CompletionInterval="10"
                                EnableCaching="false"
                                CompletionSetCount="1"
                                TargetControlID="txtBuddyTwo"
                                FirstRowSelected="false">
                            </ajaxToolkit:AutoCompleteExtender>
                        </div>
                    </FooterTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Buddy 3">
                    <ItemTemplate>
                        <%# Eval("Buddy3") %>
                    </ItemTemplate>
                    <FooterTemplate>
                        <div class="form-group">
                            <asp:TextBox ID="txtBuddyThree" runat="server" CssClass="form-control" placeholder="Enter Buddy 3" value=""></asp:TextBox>
                            <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender5" runat="server"
                                ServiceMethod="GetEmployees" 
                                MinimumPrefixLength="2"
                                CompletionInterval="10"
                                EnableCaching="false"
                                CompletionSetCount="1"
                                TargetControlID="txtBuddyThree"
                                FirstRowSelected="false">
                            </ajaxToolkit:AutoCompleteExtender>
                        </div>
                    </FooterTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Buddy 4">
                    <ItemTemplate>
                        <%# Eval("Buddy4") %>
                    </ItemTemplate>
                    <FooterTemplate>
                        <div class="form-group">
                            <asp:TextBox ID="txtBuddyFour" runat="server" CssClass="form-control" placeholder="Enter Buddy 4" value=""></asp:TextBox>
                            <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender6" runat="server"
                                ServiceMethod="GetEmployees" 
                                MinimumPrefixLength="2"
                                CompletionInterval="10"
                                EnableCaching="false"
                                CompletionSetCount="1"
                                TargetControlID="txtBuddyFour"
                                FirstRowSelected="false">
                            </ajaxToolkit:AutoCompleteExtender>
                        </div>
                    </FooterTemplate>
                </asp:TemplateField>

                <asp:TemplateField>
                    <ItemTemplate></ItemTemplate>
                    <FooterTemplate>
                        <asp:Button ID="btnSave" runat="server" CssClass="btn btn-secondary" Text="Save New Entry" CommandName="Footer" OnClick="btnSave_Click" />
                    </FooterTemplate>
                </asp:TemplateField>
            </Columns>

            <EmptyDataTemplate>
                <table>
                    <tr>
                        <th>Employee Name</th>
                        <th>Buddy 1</th>
                        <th>Buddy 2</th>
                        <th>Buddy 3</th>
                        <th>Buddy 4</th>
                        <th></th>
                    </tr>
                    <tr>
                        <td><asp:TextBox ID="txtBranch" runat="server"></asp:TextBox></td>
                        <td><asp:TextBox ID="txtEmployeeName" runat="server"></asp:TextBox></td>
                        <td><asp:TextBox ID="txtBuddyOne" runat="server"></asp:TextBox></td>
                        <td><asp:TextBox ID="txtBuddyTwo" runat="server"></asp:TextBox></td>
                        <td><asp:TextBox ID="txtBuddyThree" runat="server"></asp:TextBox></td>
                        <td><asp:TextBox ID="txtBuddyFour" runat="server"></asp:TextBox></td>
                        <td><asp:Button ID="btnSave" runat="server" Text="Save New Entry" CssClass="btn btn-secondary" CommandName="EmptyDataTemplate" OnClick="btnSave_Click" /></td>
                    </tr>
                </table>
            </EmptyDataTemplate>
        </asp:GridView>

        <!-- *********** Branch ID *********** -->

        <script type = "text/javascript">
            function BranchSelected(source, eventArgs) {
                var hdeBranchID = "<%= hdeBranchID.ClientID %>";

                document.getElementById(hdeBranchID).value = eventArgs.get_value();
                __doPostBack(hdeBranchID, "");
            }
        </script>

        <asp:HiddenField ID="hdeBranchID" runat="server" />

        <!-- *********** Employee ID *********** -->

        <script type = "text/javascript">
            function EmployeeSelected(source, eventArgs) {
                var hdeEmployeeID = "<%= hdeEmployeeID.ClientID %>";

                document.getElementById(hdeEmployeeID).value = eventArgs.get_value();
                __doPostBack(hdeEmployeeID, "");
            }
        </script>

        <asp:HiddenField ID="hdeEmployeeID" runat="server" />

        <!-- *********** Buddy One ID *********** -->

        <script type = "text/javascript">
            function BuddyOneSelected(source, eventArgs) {
                var hdeBuddyOneID = "<%= hdeBuddyOneID.ClientID %>";

                document.getElementById(hdeBuddyOneID).value = eventArgs.get_value();
                __doPostBack(hdeBuddyOneID, "");
            }
        </script>

        <asp:HiddenField ID="hdeBuddyOneID" runat="server" />

За кодом в VB:

Protected Sub btnSave_Click(sender As Object, e As EventArgs)

    Dim btn As Button = CType(sender, Button)
    Dim grdRow As GridViewRow = CType(btn.Parent.Parent, GridViewRow)

    ' gets the client id of each data selected from the auto complete list
    Dim branchId As String = hdeBranchID.Value
    Dim employeeId As String = hdeEmployeeID.Value
    Dim buddyOneId As String = hdeBuddyOneID.Value        

End Sub

Что я пытаюсь сделать, это когда выбирается элемент изПри автоматическом заполнении списка кнопка «Сохранить» должна была захватывать данные с помощью ClientID JS - первые 2 работали отлично, когда я добавлял третий (Buddy One), все перестало работать.

Если вы знаете, что не так - это очень важно, в противном случае я открыт для другого подхода к тому, как собрать все данные, используя ClientID, а не буквальные данные.

Спасибо!