javascript change() 函数未在嵌套 Gridview 的 FooterControl 中触发

【问题标题】：javascript change() function not triggered in FooterControl of Nested Gridviewjavascript change() 函数未在嵌套 Gridview 的 FooterControl 中触发
【发布时间】：2015-11-16 22:11:14
【问题描述】：

我有一个嵌套的 gridview，它有一个用于插入数据的页脚行。展开父行时，将创建页脚控件。有 2 个选择的下拉列表，其中第 2 个下拉列表取决于第 1 个。当第一个下拉列表中的值更改时，将启用第二个下拉列表并创建一个列表。问题是当我更改第一个下拉列表中的值时，不会触发 change() 事件。我有在 endRequest 函数中正常工作的编辑函数。但是插入控件不起作用。

这是标记：

 <asp:UpdatePanel ID="updatePnlDeviceNestedGrid" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="div<%# Eval("RecipientID") %>" style="display:none">
            <asp:GridView ID="RecipientDeviceGridView" runat="server" AutoGenerateColumns="false" CssClass="grid" ShowFooter="true" Caption="Device Information" 
                CaptionAlign="Top" AllowPaging="true" PageSize="3" HorizontalAlign="Left"
                 onpageindexchanging="RecipientDeviceGridView_PageIndexChanging" 
                 OnPageIndexChanged="RecipientDeviceGridView_PageIndexChanged" 
                 onrowcommand="RecipientDeviceGridView_RowCommand" 
                 onrowediting="RecipientDeviceGridView_RowEditing"
                 onrowupdating="RecipientDeviceGridView_RowUpdating"
                 OnRowCancelingEdit="RecipientDeviceGridView_RowCancelingEdit"
                 OnRowDeleting="RecipientDeviceGridView_RowDeleting"
                 OnRowDataBound="RecipientDeviceGridView_RowDataBound">
                <Columns>
                    <asp:TemplateField HeaderText="DeviceID">
                        <ItemTemplate>
                            <asp:Label ID="recdevgvLblDeviceID" runat="server" Text='<%# Bind("DeviceID") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Device"  ItemStyle-Wrap="false">
                        <ItemTemplate>
                            <asp:Label ID="recdevgvDeviceID" runat="server" Visible="false" Text='<%# Bind("DeviceID") %>'></asp:Label>
                            <asp:Label ID="recdevgvLblDeviceName" runat="server" Text='<%# Bind("DeviceName") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="recdevgvEditDeviceID" runat="server" Visible="false" Text='<%# Bind("DeviceID") %>'></asp:Label>
                            <asp:Label ID="recdevgvEditDeviceName" runat="server" Visible="false" Text='<%# Bind("DeviceName") %>'></asp:Label>
                            <asp:DropDownList ID="recdevgvDDListDeviceName" runat="server" ClientIDMode="Static" 
                                data-placeholder="Choose device…" class="chosen-single">
                            </asp:DropDownList>
                            <asp:RequiredFieldValidator ID="recdevReqValueDDLDeviceNameEdit" runat="server"  
                                    ControlToValidate="recdevgvDDListDeviceName" ValidationGroup="recdevEditDeviceValidation" 
                                    ErrorMessage="Selection required." CssClass="message-error-dropdown">
                            </asp:RequiredFieldValidator>
                        </EditItemTemplate>
                        <FooterTemplate> 
                            <asp:DropDownList ID="recdevgvDDListDeviceNameInsert" runat="server" ClientIDMode="Static"
                                data-placeholder="Choose device..." class="chosen-single">
                            </asp:DropDownList>
                            <asp:RequiredFieldValidator ID="recdevReqValueDDLDeviceNameInsert" runat="server" InitialValue="0" 
                                ControlToValidate="recdevgvDDListDeviceNameInsert" ValidationGroup="recdevInsertDeviceValidation" 
                                ErrorMessage="Selection required." CssClass="message-error-dropdown">
                            </asp:RequiredFieldValidator>
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Service Provider">
                        <ItemTemplate>
                            <asp:Label ID="recdevgvLblServiceName" runat="server" Text='<%# Bind("ServiceName") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="recdevgvEditServiceName" runat="server" Visible="false" Text='<%# Bind("ServiceName") %>'></asp:Label>
                            <asp:DropDownList ID="recdevgvDDListServiceName" runat="server" ClientIDMode="Static" 
                                OnSelectedIndexChanged="RecipientDeviceGridView_SelectedIndexChanged_EditServiceName" AutoPostBack="true" EnableViewState="true"
                                 data-placeholder="Choose service…" class="chosen-single">
                            </asp:DropDownList>
                            <asp:RequiredFieldValidator ID="recdevReqValueDDLServiceNameEdit" runat="server" 
                                    ControlToValidate="recdevgvDDListServiceName" ValidationGroup="recdevEditDeviceValidation" 
                                    ErrorMessage="Selection required." CssClass="message-error-dropdown">
                            </asp:RequiredFieldValidator>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:DropDownList ID="recdevgvDDListServiceNameInsert" runat="server" ClientIDMode="Static" Enabled="false"
                                OnSelectedIndexChanged="RecipientDeviceGridView_SelectedIndexChanged_InsertServiceName" AutoPostBack="true" EnableViewState="true" 
                                data-placeholder="Choose service…" class="chosen-single">
                            </asp:DropDownList>
                            <asp:RequiredFieldValidator ID="recdevReqValueDDLServiceNameInsert" runat="server" InitialValue="0" 
                                    ControlToValidate="recdevgvDDListServiceNameInsert" ValidationGroup="recdevInsertDeviceValidation" 
                                    ErrorMessage="Selection required." CssClass="message-error-dropdown">
                            </asp:RequiredFieldValidator>
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Address">
                        <ItemTemplate>
                            <asp:Label ID="recdevgvLblAddress" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox ID="recdevgvTxtBoxAddress" runat="server" Text='<%# Bind("Address") %>' ClientIDMode="Static"></asp:TextBox>
                            <asp:Label ID="recdevgvEditAddressExt" runat="server" Visible="false" Text='<%# Bind("ServiceExtension") %>' 
                                    ClientIDMode="Static">
                            </asp:Label>
                            <asp:RequiredFieldValidator ID="recdevReqValueAddressEdit" runat="server" 
                                    ControlToValidate="recdevgvTxtBoxAddress" ValidationGroup="recdevEditDeviceValidation" 
                                    ErrorMessage="Required field." CssClass="message-error">
                            </asp:RequiredFieldValidator>
                            <asp:CustomValidator ID="recdevCustomValAddressEdit" runat="server" ControlToValidate="recdevgvTxtBoxAddress" CssClass="message-error" 
                                ErrorMessage="*" ClientValidationFunction="ValidateAddressEdit" EnableClientScript="true" 
                                ValidationGroup="recdevEditDeviceValidation">
                            </asp:CustomValidator>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="recdevgvTxtBoxAddressInsert" runat="server" ClientIDMode="Static"></asp:TextBox>
                            <asp:Label ID="recdevgvAddressExtInsert" runat="server" Visible="false" ClientIDMode="Static"></asp:Label>
                            <asp:RequiredFieldValidator ID="recdevReqValueAddressInsert" runat="server" 
        ControlToValidate="recdevgvTxtBoxAddressInsert" ValidationGroup="recdevInsertDeviceValidation" 
        ErrorMessage="Required field." CssClass="message-error">
</asp:RequiredFieldValidator>
                            <asp:CustomValidator ID="recdevCustomValAddressInsert" runat="server" ControlToValidate="recdevgvTxtBoxAddressInsert" CssClass="message-error" 
    ErrorMessage="*" ClientValidationFunction="ValidateAddressInsert" EnableClientScript="true" 
    ValidationGroup="recdevInsertDeviceValidation">
</asp:CustomValidator>
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Active">
                        <ItemTemplate>
                            <asp:Label ID="recdevgvLblActive" runat="server" Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:DropDownList ID="recdevgvDDListActive" runat="server" class="no-chosen"
                                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="recdevgvDDListActiveInsert" runat="server" class="no-chosen">
                                <asp:ListItem Selected="True">Yes</asp:ListItem>
                                <asp:ListItem>No</asp:ListItem>
                            </asp:DropDownList>
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Cortext Enabled">
                        <ItemTemplate>
                            <asp:Label ID="recdevgvLblCortextEnabled" runat="server" Text='<%# (Boolean.Parse(Eval("CortextEnabled").ToString())) ? "Yes" : "No" %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Action" ShowHeader="False" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Center">
                        <ItemTemplate>
                            <asp:Button ID="recdevgvEditButton" runat="server" CausesValidation="True" CommandName="Edit" 
            Text="Edit" CssClass="gridActionbutton" ValidationGroup="EditDeviceValidation"></asp:Button>
&nbsp;<asp:Button ID="recdevgvDeleteButton" runat="server" CausesValidation="False" CommandName="Delete" 
            Text="Delete" CssClass="gridActionbutton"  OnClientClick="return confirm('Are you sure you want to delete this Device Information?')" >
                            </asp:Button>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Button ID="recdevgvUpdateButton" runat="server" CausesValidation="True" ValidationGroup="recdevEditDeviceValidation" CommandName="Update" 
                Text="Update" CssClass="gridActionbutton"></asp:Button>
&nbsp;<asp:Button ID="recdevgvCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" 
                Text="Cancel" CssClass="gridActionbutton"></asp:Button>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:Button ID="recdevgvAddButton" runat="server" CommandName="Add" Text="Add Device" CausesValidation="true" 
            CssClass="gridActionbutton" ValidationGroup="recdevInsertDeviceValidation"></asp:Button>
                        </FooterTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

这是在页脚行中创建下拉菜单的代码隐藏：

 protected void RecipientInfoGridView_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        try
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                int tiRecipientID = Convert.ToInt32(RecipientInfoGridView.DataKeys[e.Row.RowIndex].Value.ToString());
                GridView tgvDeviceGrid = (GridView)e.Row.FindControl("RecipientDeviceGridView");
                populateDeviceGrid(tgvDeviceGrid, tiRecipientID);

                // Get the Footer controls that have the new entry data
                Control tFooterControls = CommonMethods.getFooterControls(tgvDeviceGrid);

                DropDownList tddlDeviceNames = tFooterControls.FindControl("recdevgvDDListDeviceNameInsert") as DropDownList;
                m_strXmlTableData = m_pagingClient.GetDeviceTypes();
                DataTable tdtDeviceTypes = CommonMethods.ParseXML(m_strXmlTableData);
                tddlDeviceNames.DataSource = tdtDeviceTypes;
                tddlDeviceNames.DataTextField = tdtDeviceTypes.Columns["DeviceName"].ToString();
                tddlDeviceNames.DataValueField = tdtDeviceTypes.Columns["DeviceTypeID"].ToString();
                tddlDeviceNames.DataBind();
                tddlDeviceNames.Items.Insert(0, new ListItem("", "0"));

                DropDownList tddlServiceNames = tFooterControls.FindControl("recdevgvDDListServiceNameInsert") as DropDownList;
                m_strXmlTableData = m_pagingClient.GetServiceTypes();
                DataTable tdtServiceTypes = CommonMethods.ParseXML(m_strXmlTableData);
                tddlServiceNames.DataSource = tdtServiceTypes;
                tddlServiceNames.DataTextField = tdtServiceTypes.Columns["ServiceName"].ToString();
                tddlServiceNames.DataValueField = tdtServiceTypes.Columns["CombineID_Group"].ToString();
                tddlServiceNames.DataBind();
                tddlServiceNames.Items.Insert(0, new ListItem("", "0"));
            }

        }
        catch (Exception ex)
        {
            //TO DO: Response.Redirect("~/Error.aspx");
        }
    }

这是javascript：

 //This change function is when the Device grid is in Insert Mode
        $("#recdevgvDDListDeviceNameInsert").change(function () {
            alert('Ready Fn - Insert: Device name DDL change fn');
            $("#recdevgvDDListServiceNameInsert").prop("disabled", false);
            $("#recdevgvDDListServiceNameInsert").val('');
            $("#recdevgvDDListServiceNameInsert").chosen({
                search_contains: true,
                no_results_text: "Sorry, no match!"
            });

            var DeviceSelValue = $(this).val();
            $("#recdevgvDDListServiceNameInsert").children("option").hide();
            $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");

            switch (DeviceSelValue) {
                case "1":
                    $("#recdevgvDDListServiceNameInsert option[value*='cell']").show();
                    $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
                    $("#recdevgvAddressExtInsert").hide();
                    break;
                case "2":
                    $("#recdevgvDDListServiceNameInsert option[value*='email']").show();
                    $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
                    $("#recdevgvAddressExtInsert").hide();
                    break;
                case "3":
                    $("#recdevgvDDListServiceNameInsert option[value*='page']").show();
                    $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
                    $("#recdevgvAddressExtInsert").hide();
                    break;
                default:
                    break;
            }
        });

更新 感谢 Aleksey 的建议。我的更改功能现在被触发。但是对 ServiceName 下拉列表的更改没有发生。当嵌套网格处于编辑模式时，我在此页面上使用此函数调用。 当我更改“设备名称”下拉列表的值时，“服务名称”下拉列表未启用，并且“选择服务”值未显示。就好像选择器 #recdevgvDDListServiceNameInsert 无法识别。 该控件具有属性ClientIDMode="Static"。

控件位于更新面板updatePmlDeviceNestedGrid 和Gridview RecipientDeviceGridView。我尝试将更新面板控件添加为选择器中的父级，但这不起作用。 我使用 document.ready() 并且为了让编辑模式工作，我使用 endRequest 函数。

我尝试了bindEvent 函数，但得到了相同的结果。

这是我的javascript：

$(document).ready(function () {
    // alert("ready function");
    //Configure the DropDownBox using the 'chosen' jquery plugin
    $(".chosen-single").chosen({
        search_contains: true,
        width: "200px",
        no_results_text: "Sorry, no match!"
    });
});

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);

function onEndRequest(sender, args) {
    if (sender._postBackSettings.panelsToUpdate != null) {
        $("select:not(.chosen-select, .no-chosen)").chosen({
            search_contains: true,
            width: "200px",
            no_results_text: "Sorry, no match!"
        });
    };
//more code to activate the dropdowns in Edit Mode...
};
//This change function is when the Device grid is in Insert Mode
 $(document).on("change", "#recdevgvDDListDeviceNameInsert", function () {
     alert('Ready Fn - Insert: Device name DDL change fn');
      $("#recdevgvDDListServiceNameInsert").prop("disabled", false);
      $("#recdevgvDDListServiceNameInsert").val('');
      $("#recdevgvDDListServiceNameInsert").chosen({
          search_contains: true,
          no_results_text: "Sorry, no match!"
      });

     var DeviceSelValue = $(this).val();
     $("#recdevgvDDListServiceNameInsert").children("option").hide();
     $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");

     switch (DeviceSelValue) {
         case "1":
             $("#recdevgvDDListServiceNameInsert option[value*='cell']").show();
             $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
             $("#recdevgvAddressExtInsert").hide();
             break;
         case "2":
             $("#recdevgvDDListServiceNameInsert option[value*='email']").show();
             $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
             $("#recdevgvAddressExtInsert").hide();
             break;
         case "3":
             $("#recdevgvDDListServiceNameInsert option[value*='page']").show();
             $("#recdevgvDDListServiceNameInsert").trigger("chosen:updated");
             $("#recdevgvAddressExtInsert").hide();
             break;
         default:
             break;
     }
 });

更新 我在编辑模式下遇到了这个问题...... 我将此添加到更改功能中，下拉菜单至少显示选项Choose service...。

function bindEvents() {
   $(document).on("change", "#recdevgvDDListDeviceNameInsert", function () {
        $("select:not(.chosen-select, .no-chosen)").chosen({
             search_contains: true,
              width: "200px",
             no_results_text: "Sorry, no match!"
          });
});

但是，下拉菜单仍未启用...

更新 为了启用禁用的选择下拉菜单，我不能使用 ID 值，但是： $("select").prop("disabled", false); 启用后，该功能的其余部分就起作用了。

【问题讨论】：

    标签： javascript asp.net gridview webforms


    【解决方案1】：

    我假设您的 updatePnlDeviceNestedGrid 在初始页面调用时出现在页面上，所以让我们将 ClientIDMode="Static" 添加到您的 updatePanel 以使我们的 js 更具可读性

     <asp:UpdatePanel ID="updatePnlDeviceNestedGrid" runat="server" UpdateMode="Conditional" ClientIDMode="Static">

    不要在每个部分回发时重新附加事件，你应该像下面这样定义你的更改事件附加函数，我们将它放在 jQuery 文档中准备好确保 updatePnlDeviceNestedGrid 在 DOM 中

    $(function () {
    $('#updatePnlDeviceNestedGrid').on('change', '#recdevgvDDListDeviceNameInsert', function() {
        alert('Ready Fn - Insert: Device name DDL change fn');
        // ans so on .....
    });
})

    不做额外修改也可以直接附加到文档中

     $(document).on('change', '#recdevgvDDListDeviceNameInsert'

    这里是 jQuery 文档参考http://api.jquery.com/on/

    “委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择一个保证在附加委托事件处理程序时存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视所有冒泡事件，则可以记录在文档。在加载任何其他 HTML 之前，文档元素在文档的头部可用，因此在此处附加事件是安全的，而无需等待文档准备好。"

    更新

    另一方面，您可以在每个部分回发时重新绑定它，如此答案中所示 jQuery $(document).ready and UpdatePanels?

    例如，您将创建函数来绑定事件

    function bindEvents(){
   $("#recdevgvDDListDeviceNameInsert").change(function () {
       // your code......
   }

   //some other bindings
}

// initial page load
$(function () {
   bindEvents();
})

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
   // re-bind your jQuery events here after updatepanel update
    bindEvents(); 
});

    【讨论】：

    • 感谢您的代码和解释。越来越清楚了！现在调用更改事件。但是，更改事件中与控件recdevgvDDListServiceNameInsert 相关的所有函数调用都不起作用。控件未启用等
    • 至于您不想更改所有事件绑定)))，请参阅我的更新
    • 我在上面添加了相关的 javascript 代码。我确实查看了 UpdatePanel 的答案。这帮助我之前让编辑模式工作。我认为我的问题与未更改 within 更改事件的下拉列表的选择器有关。但我不确定……
    • 没关系删除评论，在其他地方看起来问题
    • 很抱歉，无法从您的代码中找出问题所在，例如在 firebug 中，您可以轻松检查元素，或在控制台选项卡的右侧窗格中运行 js 代码，您也可以使用控制台,log() 在你的 js 代码中看看发生了什么
    猜你喜欢
    • 1970-01-01
    • 2019-10-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode