jquery-删除所有 Gridview 项目时未填充所选下拉列表

Question

当用户想要添加到 table 时，我在 FooterTemplate 的 Gridview 中有一个 jquery 选择的下拉框。如果 table 中没有项目，下拉列表会正确显示用户可以 select 的列表。但是，如果用户删除 table 中的所有项目，EmptyDataTemplate 中的下拉列表不会显示任何项目。

我想我必须更新所选的下拉菜单，但没有用。

这是我的标记：

<asp:GridView ID="DelegateInfoGridView" runat="server" 
        AutoGenerateColumns="false" Caption="Delegate Information" 
        CaptionAlign="Top" CssClass="grid" RowStyle-Wrap="true" 
        HorizontalAlign="Left" ShowFooter="true" 
        AllowPaging="true" PageSize="5"  ShowHeaderWhenEmpty="false" onrowediting="DelegateInfoGridView_RowEditing" 
        onrowcancelingedit="DelegateInfoGridView_RowCancelingEdit" onrowdeleting="DelegateInfoGridView_RowDeleting" 
        onrowupdating="DelegateInfoGridView_RowUpdating" 
        ondatabound="DelegateInfoGridView_DataBound" 
        onrowcommand="DelegateInfoGridView_RowCommand">
        <Columns>
             <asp:TemplateField HeaderText="Recipient ID">
                <ItemTemplate>
                    <asp:Label ID="deligvLblRecipientID" runat="server" Text='<%# Bind("RecipientID") %>'></asp:Label>
                </ItemTemplate>
             </asp:TemplateField>

             <asp:TemplateField HeaderText="Delegate" ItemStyle-Wrap="false"> 
                <ItemTemplate>
                    <asp:Label ID="deligvLblRecipientName" runat="server" Text='<%# Bind("RecipientName") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:DropDownList ID="deligvDDLRecipientName" runat="server" 
                                        data-placeholder="Choose delegate…" class="chosen-single">
                    </asp:DropDownList>
                </FooterTemplate>
             </asp:TemplateField>
             <asp:TemplateField HeaderText="Active"> 
                <ItemTemplate>
                    <asp:Label ID="deligvLblActive" runat="server" Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'></asp:Label>
                </ItemTemplate>         
                 <EditItemTemplate>
                    <asp:DropDownList ID="deligvDDLActive" runat="server" Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'>
                        <asp:ListItem>Yes</asp:ListItem>
                        <asp:ListItem>No</asp:ListItem>
                    </asp:DropDownList>
                </EditItemTemplate> 
                <FooterTemplate>
                    <asp:DropDownList ID="deligvDDLActiveInsert" runat="server">
                        <asp:ListItem Selected="True">Yes</asp:ListItem>
                        <asp:ListItem>No</asp:ListItem>
                    </asp:DropDownList>
                </FooterTemplate>                         
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Action" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Center">
                 <ItemTemplate>
                    <asp:Button ID="deligvEditButton" runat="server" CausesValidation="False" CommandName="Edit" 
                                Text="Edit" CssClass="gridActionbutton">
                    </asp:Button>
                    &nbsp;<asp:Button ID="deligvDeleteButton" runat="server" CausesValidation="False" CommandName="Delete" 
                                Text="Delete" CssClass="gridActionbutton"  OnClientClick="return confirm('Are you sure you want to delete this Delegate Information?')" >
                    </asp:Button>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:Button ID="deligvUpdateButton" runat="server" CausesValidation="False" CommandName="Update" 
                                    Text="Update" CssClass="gridActionbutton"></asp:Button>
                    &nbsp;<asp:Button ID="deligvCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" 
                                    Text="Cancel" CssClass="gridActionbutton"></asp:Button>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:Button ID="deligvAddButton" runat="server" CommandName="Add" Text="Add Delegate" Width="90%" CausesValidation="false" 
                                CssClass="gridActionbutton">
                    </asp:Button>
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
        <EmptyDataTemplate>
            <tr>
                <th>Recipient ID</th>
                <th>Delegate</th>
                <th>Active</th>
                <th>Action</th>
            </tr>
            <tr> 
                <td colspan="4" style="text-align:center;">
                    No Delegates were found for you. Delegates can be added by clicking the 'Add Delegate' Button.
                </td> 
            </tr>
            <tr>
                <td></td>
                <td>
                    <asp:DropDownList ID="deligvDDLRecipientName" runat="server" 
                                        data-placeholder="Choose delegate…" class="chosen-single">
                    </asp:DropDownList>
                </td>
                <td>
                     <asp:DropDownList ID="deligvDDLActiveInsert" runat="server">
                        <asp:ListItem Selected="True">Yes</asp:ListItem>
                        <asp:ListItem>No</asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td>
                    <asp:Button ID="deligvAddButton" runat="server" CommandName="Add" Text="Add Delegate" Width="90%" CausesValidation="false" 
                        CssClass="gridActionbutton">
                    </asp:Button>
                </td>
            </tr>
        </EmptyDataTemplate>
     </asp:GridView>

这是填充页脚下拉列表的代码隐藏：

 protected void DelegateInfoGridView_DataBound(object sender, EventArgs e)
    {
        try
        {
            m_strUserID = CommonMethods.ParseUserID(User.Identity.Name);

            //Get the Footer controls that have the new entry data
            Control tFooterControls = getFooterControls(DelegateInfoGridView);
            DropDownList ddlRecipientNames = tFooterControls.FindControl("deligvDDLRecipientName") as DropDownList;
            m_strXmlTableData = m_pagingClient.GetAllPossibleDelegates(m_strUserID);
            DataTable tdtAllDelegates = CommonMethods.ParseXML(m_strXmlTableData);
            ddlRecipientNames.DataSource = tdtAllDelegates;
            ddlRecipientNames.DataTextField = "RecipientName";
            ddlRecipientNames.DataValueField = "RecipientID";
            ddlRecipientNames.DataBind();
            ddlRecipientNames.Items.Insert(0, new ListItem("", "0"));//This is needed for the jquery-chosen dropdown to add data-holder text
        }
        catch (Exception ex)
        {
            //TO DO: Response.Redirect("~/Error.aspx");
        }
    }

这是我的 javascript:

 <script type="text/javascript">
    $(document).ready(function () {
        //Configure the DropDownBox using the 'chosen' jquery plugin
        $(".chosen-single").chosen({
            search_contains: true,
            no_results_text: "Sorry, no match!"                           
        });
    });

    $('#deligvAddButtonEmpty').click(function () {
        $(".chosen-single").chosen().val('').trigger("chosen:updated");
    });

</script>

因此，当单击按钮 deligvAddButtonEmpty 时，项目不会添加到下拉列表中。我逐步执行了代码，并在返回数据时调用了方法 DelegateInfoGridView_DataBound。但是下拉菜单是空的。

我认为我的 javascript 不正确，但我不知道如何修复它。如有任何建议，我们将不胜感激。

谢谢。

更新

我将点击按钮上的 javascript 更改为：

 $('#deligvAddButtonEmpty').click(function () {
        $("#deligvDDLRecipientName").trigger("chosen:updated");
    });

但是当网格为空时，下拉列表仍然是空的。

更新

我正在尝试使用 Firebug 调试 javascript，似乎没有调用 .click 函数。至少，当我在函数中放置一个断点时，它不会像在 document.ready 函数中那样停止。我正在使用 MasterPages 并且我有属性 ClientIDMode = 'Static' 但我可能没有正确定义 'selector'。

更新

不是在点击'Add Button'时，而是在点击'Delete button'，网格中没有更多项目时，选择的下拉列表不刷新。但是，我似乎无法让点击事件触发按钮。这是我的 jquery 点击函数：

 $(document).on("click", "input[id$=deligvDeleteButton]", function () {
        alert("Delegate delete button clicked");
    });

更新至少，现在正在触发点击功能...... 我将 ClientIDMode-'Static' 添加到我正在访问的控件中，并将 'click' 函数放在 document.ready() 函数中。但是，更新没有将列表添加到下拉列表中。这是函数：

$("input[id$=deligvDeleteButton]").click(function () {
              $("input[id$=deligvDDLRecipientName]").val('').trigger("chosen:updated");
            });

更新

我不知道这是否是问题所在，但它可能与 GridView 或 EmptyDataTemplate 中 jquery 脚本中的控件 ID 有关。对于 GridView 或 EmptyDataTemplate 中的下拉列表，我保持相同的 ID。在代码隐藏中，我通过确定 FooterControl 是否为 null 来确定使用了哪个控件。然后其余的 C# 代码是相同的，因为 ID 是相同的。但是，在 javascript 中，如果 ID 相同，这可能会出现问题。

如何识别 EmptyDataTemplate 而不是 Gridview 中的控件？

更新

我不知道这是否是问题所在，但它可能与 GridView 或 EmptyDataTemplate 中 jquery 脚本中的控件 ID 有关。对于 GridView 或 EmptyDataTemplate 中的下拉列表，我保持相同的 ID。在代码隐藏中，我通过确定 FooterControl 是否为 null 来确定使用了哪个控件。然后其余的 C# 代码是相同的，因为 ID 是相同的。但是，在 javascript 中，如果 ID 相同，这可能会出现问题。

如何识别 EmptyDataTemplate 而不是 Gridview 中的控件？

我使用以下 javascript 获取了 2 个下拉控件的 ID 并更新了它们，但下拉列表仍未填充：

 $("input[id$=deligvDeleteButton]").click(function () {               
            $("[id*='deligvDDLRecipientName']").each(function () {
                alert($(this).attr('id'));
                $(this).val("").trigger("chosen:updated");
            });            
        });

警报显示 ID。一个是 'deligvDDLRecipientName'，另一个是 deligvDDLRecipientName_chosen。我用 .trigger 函数更新了它们，但列表仍未填充。

Answer 1

我想通了... 如果有人遇到这个问题...

与选择的插件无关。这是我识别 FooterControl 是否被实例化的方式。我检查为空。但是当用户删除所有行时，FooterControl 不为空，但您仍然需要使用 EmptyTemplateData 控件。因此，我没有检查空值，而是检查了 Row Count > 0。成功了。

jquery-删除所有 Gridview 项目时未填充所选下拉列表

jquery-chosen Dropdown is not populated when all Gridview items are deleted

gridview

jquery-chosen