如何从外部ASPX文件访问内部ASCX用户控件中的GridView组件

我有一个包含ASCX用户控件的ASPX页面，ASCX作为用户控件嵌入使用。ASPX页面左侧有菜单栏，当用户控件内的GridView为空时，希望通过JavaScript将对应菜单设置为蓝色，以此解决后端处理卡顿的问题。相关代码及修正方案如下：

外部ASPX文件：Default.aspx #

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Ozgecmis.Default" MaintainScrollPositionOnPostback="true" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" />
<title>Özgeçmiş</title>
<script>
$(document).ready(function () {
    // 通过用户控件获取内部GridView的ClientID，修复语法错误
    var gridView = document.getElementById("<%= ucOzgecmisTecrube.FindControl("gridTecrube").ClientID %>");
    if (gridView) {
        var rows = gridView.getElementsByTagName("tr");
        if (rows.length === 1) {
            // 通过服务器控件ID获取菜单元素，避免依赖索引
            var menuItem = document.getElementById("<%= tecrubeMenu.ClientID %>");
            if (menuItem) {
                menuItem.style.color = 'blue';
            }
        }
    }
});
</script>
</head>
<body data-spy="scroll" data-target=".ozgecmis-sidebar">
<form id="formOzgecmis" runat="server">
    <section id="top" class="section-start" style="position: absolute;"></section>
    <asp:PlaceHolder ID="ctlTemplatePlaceHolder" runat="server"></asp:PlaceHolder>
    <asp:Panel ID="ctlContentPanel" CssClass="SectionPanel" runat="server" Width="100%">
        <link href="/Assets/csspages/ozgecmis-default.css?v=20160307" rel="stylesheet" />
        <div class="row">
            <div class="span3 ozgecmis-sidebar">
                <ul class="nav nav-list ozgecmis-sidenav" id="ozgecmis-nav">                        
                    <li><a href="#ogrenim" class="section-link">Öğrenim Bilgileri</a></li>
                    <li><a href="#meslek" class="section-link">Meslek Bilgileri</a></li>
                    <li id="tecrubeMenu" runat="server" Visible ="true"><a href="#tecrube" class="section-link">İş Tecrübesi</a></li>                         
                </ul>
                <br />
            </div>
            <div class="span9">
                <div style="min-height: 60px; padding-top: 10px;">
                    <table class="pull-right">
                        <tr>
                            <td><span style="font-size: calc(30px + 1vw); font-weight: bold;">Özgeçmiş</span></td>
                            <td style="padding-left: 20px;">
                                <ozgecmisUserControl:OzgecmisDolulukOran runat="server" ID="ucOzgecmisDolulukOran" />
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="divTecrube" runat="server">
                    <section id="tecrube">                          
                         <div class="section-header warning"  style="background-color:pink;" id="isTecrubesiBos" runat="server" ClientIDMode="Static" >
                             İş Tecrübesi                                
                        </div>
                        <div class="section-body">
                            <ozgecmisUserControl:OzgecmisTecrube runat="server" ID="ucOzgecmisTecrube" />
                        </div>                           
                    </section>
                </div>
                 <section id="end" class="section-end"></section>
            </div>
        </div>
        <script src="/Assets/jspages/ozgecmis-default.js?v=20210620" type="text/javascript"></script>
    </asp:Panel>
</form>
</body>
</html>

内部ASCX文件：OzgecmisTecrube.ascx #

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="OzgecmisTecrube.ascx.cs" Inherits="Ozgecmis.UserControls.OzgecmisTecrube" %>
<asp:UpdatePanel runat="server" ID="upOzgecmisTecrube" UpdateMode="Conditional">
<ContentTemplate>
    <div id="divYardimOzgecmisTecrube" class="hide">
        <iskurControls:IskurPortalTableHeader ID="headerOzgecmisTecrube" runat="server">
        </iskurControls:IskurPortalTableHeader>
    </div>
    <asp:GridView ID="gridTecrube" runat="server" AutoGenerateColumns="false" ShowHeader="false"  ShowFooter="false"
        CssClass="table table-bordered table-condensed"
        EmptyDataText="Kayıtlı İş Tecrübesi Bilgisi Bulunmamaktadır."
        OnRowDataBound="OnGridRowDataBound" OnRowCommand="OnGridRowCommand" OnRowCreated="OnGridRowCreated"
        DataKeyNames="KAYITNO"
        RowStyle-CssClass="ozgecmis-grid-row" AlternatingRowStyle-CssClass="ozgecmis-grid-row-alternate" SelectedRowStyle-CssClass="ozgecmis-grid-row-selected">
        <Columns>
            <asp:TemplateField ItemStyle-CssClass="ozgecmis-data-key">
                <ItemTemplate>
                    <asp:Button runat="server" ID="dataKeyButton" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"KAYITNO") %>' Visible="false" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ItemStyle-CssClass="ozgecmis-data-command" ItemStyle-VerticalAlign="Middle">
                <ItemTemplate>
                    <a href="#" class="btn btn-small btn-info">Seç</a>
                </ItemTemplate>
            </asp:TemplateField>            
        </Columns>
    </asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

关键修正点 #

1. 修复JavaScript语法错误：补全getElementById调用的闭合括号，避免脚本执行中断。
2. 正确获取用户控件内GridView的ClientID：由于gridTecrube位于用户控件内部，需通过用户控件IDucOzgecmisTecrube调用FindControl方法获取其客户端ID。
3. 可靠选择菜单元素：不再依赖列表索引（原代码中children[5]与实际元素数量不符），而是通过服务器端菜单控件的ID获取客户端元素，确保选择准确。
4. 增加空值判断：添加元素存在性检查，避免因元素未加载导致的空引用错误。

内容的提问来源于stack exchange，提问作者Haluk Öztürk