在网格视图中的 ASCX 控件内的控件上使用 Javascript 显示隐藏。 （ASP.NET + Javascript）

Posted 2023-02-22

【中文标题】在网格视图中的 ASCX 控件内的控件上使用 Javascript 显示隐藏。 （ASP.NET + Javascript）

【英文标题】：Show Hide using Javascript on a control, inside a ASCX control in a gridview. (ASP.NET + Javascript)

【发布时间】：2011-04-22 23:09:11

【问题描述】：

我写了一个 web 用户控件 (ascx)。在里面，有一个面板，我想在点击用户控件内的超链接时显示/隐藏。

通常，只需执行以下操作即可轻松完成（onclick 属性会添加到预渲染的超链接中）：

 var PanelToShow = document.getElementById('<%=PanelInvoiceHasBeenCreated.ClientID %>');

    if (PanelToHide != null) 
        PanelToHide.style.display = 'none';
    

但是因为 ascx 控件保存在 gridview 中，所以上面将评估名称为“PanelInvoiceHasBeenCreated”的所有控件（其中有很多在 gridview 中）。只有当gridview中有1行时才会起作用。目前，使用我现有的代码，如果我单击任何行中的超链接，它会显示/隐藏 gridview 底行中的面板！

因此，我的问题是如何获得我需要在正确行的正确控件上显示/隐藏的实际唯一 ID??????

提前致谢。

【问题讨论】：

阅读您的问题后不确定，但听起来您有许多具有相同 ID 的元素。元素的 ID 应该是唯一的并且不能重复。如果您需要引用用于同一事物的元素，请改用 className。

你有一些示例输出吗？您的所有 .net 控件在呈现时都应该有一个唯一的 ID。

【参考方案1】：

您可以在 gridview 的 rowdatabound 事件中执行此操作 像这样的

在您的 gridview rowdatabound 事件中编写以下代码

var usercontrol1=(userControl)e.item.findcontrol("usercontrol1");
var hyperLink1=(Hyperlink)usercontrol1.FindControl("hyperLink1");
var PanelInvoiceHasBeenCreated=(Panel)usercontrol1.FindControl("PanelInvoiceHasBeenCreated");

hyperLink1..Attributes.Add("onclick", "javascript:return ShowHidePanel('"+ PanelInvoiceHasBeenCreated.ClientID +"')"); 

你的aspx页面上的java脚本函数应该是这样的

<script type="text/javascript">
function ShowHidePanel(panelid)


var PanelToShow = document.getElementById('panelid');

    if (PanelToHide != null) 
        PanelToHide.style.display = 'none';
    
return false;


</script>

【讨论】：

谢谢。我认为我的问题是我在用户控件本身而不是在主 aspx 页面上执行 javascript。

【参考方案2】：

这很奇怪，ClientID 应该是唯一的。你用的是什么框架版本？