Question

我想显示一个面板，点击一个位于gridview内部的链接按钮，无论是使用javascript还是代码隐藏。

Answer 1

这应该适合你：

showPanel = function(this){
    var panel = document.getElementById("<%=pnlDetails.ClientID%>");
    if (panel){
        panel.style.display = "block";
    }
}

由于你没有对它做任何事情，我认为你不需要传递对LinkButton的引用。

Answer 2

我将假设 Panel 是名为Panel的ASP控件，<asp:panel ...。

无论您的控件在哪里（网格内部或外部），程序始终相同，您需要将click事件连接到该面板的显示/隐藏。

使用更新面板（这样你就可以避免只是为了加载页面的一部分而进行全部回发）这一年让我远离这种方法而今天我只是使用显示/隐藏div，例如：

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="lnk" runat="server" Text="Click to open" OnClientClick="showPanel(this);" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<asp:Panel ID="pnlDetails" runat="server" CssClass="panel" style="display:none;">
    <h2>
        This is a title</h2>
    <p>
        This is the description</p>
</asp:Panel>

<script type="text/javascript">
    function ShowPanel(elm) {
        alert('you have clicked me');
    }
</script>

每当您点击该链接按钮时，它都会提醒您。

<asp:panel转换为简单的<div>因此很容易使用，您可以简单验证<div>是否已打开，然后关闭它，如果已关闭，请将其打开

使用jQuery来促进javascript的处理和编写，你可以将ShowPanel作为：

<script type="text/javascript">
    var pnlId = '#<%= pnlDetails.ClientID %>';

    function ShowPanel(elm) {


        if ($(pnlId).is("visible"))
            $(pnlId).hide();
        else
            $(pnlId).show();
    }
</script>

如果要区分链接按钮行，可以使用变量elm（元素）。

如何在Gridview内部的linkbutton点击上显示面板

2 个答案: