控件的显示隐藏方法

但是得保证不跳转页面，可百度的这个效果是经过跳转的。也就是说，我得在同一个页面上做出两套效果，于是想到了利用控件的显隐来实现。经过探索，有两种解决方法：

一、使用Panel作为容器

可以使用Asp控件Panel作为容器，然后使用其他Asp控件配合实现，这个最为方便，代码如下：
    panel1：

[html] view plain copy

1. <span style="font-size:14px;"><asp:Panel ID="Panel1" runat="server" Font-Size="Medium">
2. <span id="sayHello">您好,<span><%=Session["UserName"] %></span></span>
3. <asp:HyperLink ID="hlPersonalSpace" runat="server" NavigateUrl="~/NeedHelpSpace.aspx" Target="_self">个人空间</asp:HyperLink>
4. <asp:HyperLink ID="hlInfo" runat="server">消息</asp:HyperLink>
5. <asp:LinkButton ID="hlQuit" runat="server" OnClick="hlQuit_Click" >退出</asp:LinkButton>
6. </asp:Panel></span>

panel2：

[html] view plain copy

1. <span style="font-size:14px;"><asp:Panel ID="Panel2" runat="server" Font-Size="Medium">
2. 您好,游客
3. <a href="#" onclick="$(‘#w‘).window(‘open‘)">登陆</a>
4. <asp:HyperLink ID="hlRegister" runat="server" NavigateUrl="~/Register.aspx" Target="_blank">注册</asp:HyperLink>
5. <asp:HyperLink ID="hlSearch" runat="server">帮助</asp:HyperLink>
6. </asp:Panel></span>

后台代码：

[csharp] view plain copy

1. <span style="font-size:14px;">            if (Session["UserName"] == null)
2. {
3. Panel2.Visible = true;
4. Panel1.Visible = false;
5. }
6. else
7. {
8. Panel1.Visible = true;
9. Panel2.Visible = false;
10. }</span>

二、使用div作为容器

但是我这里因为使用到了母版，而Asp控件必须放在服务器端form中，这个可能会跟子页引发冲突，导致一个页面具有两个服务器端form。所以，需要改成Html控件。在这里我使用的方法是将相关html控件和标签放到div中，但是div必须添加runat=“Server”，然后才能跟后台进行交互。也可以使用Js直接对div的显隐进行控制，代码如下：

div1：

[html] view plain copy

1. <span style="font-size:14px;"><div id="loginBefore" runat ="server" style="font-size:medium">
2. <span id="topUser" style="padding-right:25px;">你好游客
3. <a href="javascript:void(0)" onclick="$(‘#w‘).window(‘open‘)">登录</a>
4. <a href="Register.aspx">注册</a>
5. <a href="#">搜索</a>
6. </span>
7. </div></span>

div2：

[html] view plain copy

1. <span style="font-size:14px;"><div id="loginAfter" runat="server" style="font-size:medium" >
2. <span id="topUser1" style="padding-right:25px;">您好,<span><%=Session["UserName"] %></span> |
3. <a href="UserLogList.aspx?id=<%=Session["UserID"] %>" >个人空间</a> |
4. <a href="UnreadEmail.aspx">消息</a> |
5. <a href="#" onclick="loginQuit()">退出</a>
6. </span>
7. </div></span>

C#后台调用方法：

[html] view plain copy

1. <span style="font-size:14px;">            if (Session["UserName"] == null)
2. {
3. loginBefore.Style["Display"] = "Block";
4. loginAfter.Style["Display"] = "None";
5. }
6. else
7. {
8. loginBefore.Style["Display"] = "None";
9. loginAfter.Style["Display"] = "Block";
10. }
11. </span>

如果使用Js直接调用的话，可以操控div显隐的方法如下：

[html] view plain copy

1. <span style="font-size:14px;">         document.getElementById("loginAfter").style.display = "none";//隐藏
2. document.getElementById("loginBefore").style.display = "block";//显示</span>

最终实现的效果如下：

图3：登陆前

图4：登陆后