页面加载时如何统计GridView行数并控制Div可见性？

我希望根据同一页面中GridView的行数设置某个Div的可见性，该GridView会在页面打开时加载。我编写了如下代码，但运行报错，请协助解决：

GridView代码 #

<asp:GridView ID="grid" 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>
        <asp:TemplateField ItemStyle-CssClass="ozgecmis-data-text">
            <ItemTemplate>
                <%#FormatData(Eval("ISYERIUNVAN"),Eval("GIRISTARIHSTR"),Eval("CIKISTARIHSTR"),Eval("ISTANIMI"),Eval("SEKTOR"),Eval("POZISYON"),Eval("MESLEK"),Eval("MESLEKUZMANLIK")) %>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

报错的JavaScript代码 #

$( "#grid" ).on( "load", function() {
    var gridView = document.getElementById("<%=grid.ClientID %>");
    var rows = gridView.getElementsByTagName("tr")
    if (rows.length>0){
        isTecrubesiBos.Visible = true;
    }
} );

1. 事件绑定错误 #

表格元素没有load事件，load仅针对图片、脚本等外部资源。应该在DOM完全加载后执行逻辑，用$(document).ready()或者将脚本放在页面底部。

2. 服务器控件ID匹配问题 #

ASP.NET会自动生成带前缀的ClientID，原代码中$("#grid")无法找到GridView元素，需替换为$("#<%=grid.ClientID %>")。

3. 服务器控件可见性操作错误 #

isTecrubesiBos.Visible = true是服务器端语法，前端JS无法直接操作。需通过修改CSS样式控制显示/隐藏，比如style.display = "block"或"none"。同时要确保服务器端isTecrubesiBos.Visible为true，否则元素不会渲染到页面，JS无法操作。

4. GridView行计数逻辑问题 #

即使无数据，GridView也会生成包含EmptyDataText的<tr>，所以rows.length>0永远为真。需通过你自定义的行样式类（ozgecmis-grid-row、ozgecmis-grid-row-alternate）筛选真实数据行。

方案1：前端JS实现 #

$(document).ready(function() {
    // 获取GridView DOM元素
    var grid = $("#<%=grid.ClientID %>");
    // 筛选真实数据行
    var dataRows = grid.find(".ozgecmis-grid-row, .ozgecmis-grid-row-alternate");
    // 获取目标Div
    var targetDiv = $("#<%=isTecrubesiBos.ClientID %>");

    if (dataRows.length > 0) {
        targetDiv.show();
    } else {
        targetDiv.hide();
    }
});

方案2：服务器端直接控制（更可靠） #

如果GridView在页面加载时绑定数据，直接在后台代码控制Div可见性更简单，无需JS：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 绑定GridView数据
        grid.DataSource = yourDataSource;
        grid.DataBind();

        // 根据数据行数控制Div可见性
        isTecrubesiBos.Visible = grid.Rows.Count > 0;
    }
}

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