单击链接按钮时显示面板

时间:2014-01-24 08:12:36

标签: c# javascript asp.net css ajax

我想在点击链接按钮时显示/隐藏面板。当我在简单的页面上使用它时,这工作正常,但是当我在用作母版页的页面上尝试它时,它不起作用。

我的代码:

<%@ Page Language="C#" MasterPageFile="~/Master_Institute.master" AutoEventWireup="true" CodeFile="frm_Student_Renewal_Reg.aspx.cs" Inherits="frm_Student_Renewal_Reg" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
    <style type="text/css">
        .panel{
            display:none;
        }
        .style1{
            width: 620%;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            $("#Link1").click(function(evt) {
                evt.preventDefault();
                $('#panelText').slideToggle('slow');
            });
        });
    </script>
    <table>
        <tr>
            <td>
                <asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">
                    Using slideToggle
                </asp:HyperLink>
                <br />
                <asp:Panel ID="panelText" runat="server" CssClass="panel">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc turpis nunc, placerat ac, bibendum non, pellentesque nec, odio.
                </asp:Panel> 
            </td>
        </tr>
        <tr>
            <td>
            </td>
        </tr>
    </table>
</asp:Content>

我做错了什么?

1 个答案:

答案 0 :(得分:2)

控件的所有ID都是根据ID和其他打开的页面自动创建的。如果你有一个单页很可能Link1再次呈现为Link1但是当你在主页面中添加它时,那么为了避免冲突,asp.net会在前面添加更多的名字,例如占位符的名称。

现在实际上,您需要使用客户端javascript代码,最终呈现的ID,这可以使用Link1.ClientID。 因此,在您必须获取ID的每一行上,您都将其用作

$("#<%=Link1.ClientID%>").click(function(evt) {

并且您为在javascript上使用的所有asp.net控件执行此操作。

您也可以设置ClientIDMode="Static",但这样做不能在同一页面上使用相同的控件两次,并且您还必须注意其他控件没有相同的ID。

ClientIDMode =静态属性告诉asp.net保留你设置的id而不是动态创建新的id。这个属性介绍了asp.net版本4。