控件的顯示隱藏方法

    但是得保證不跳轉頁面，可百度的這個效果是經過跳轉的。也就是說，我得在同一個頁面上做出兩套效果，於是想到了利用控件的顯隱來實現。經過探索，有兩種解決方法：

    一、使用Panel作為容器

    可以使用Asp控件Panel作為容器，然后使用其他Asp控件配合實現，這個最為方便，代碼如下：
    panel1：

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

 

    panel2：

<span style="font-size:14px;"><asp:Panel ID="Panel2" runat="server" Font-Size="Medium">
            您好,游客
       <a href="#" onclick="$('#w').window('open')">登陸</a>
       <asp:HyperLink ID="hlRegister" runat="server" NavigateUrl="~/Register.aspx" Target="_blank">注冊</asp:HyperLink>
       <asp:HyperLink ID="hlSearch" runat="server">幫助</asp:HyperLink>
 </asp:Panel></span>

  后台代碼：

<span style="font-size:14px;">            if (Session["UserName"] == null)
            {
                Panel2.Visible = true;
                Panel1.Visible = false;
            }
            else
            {
                Panel1.Visible = true;
                Panel2.Visible = false;
            }</span>

 

    二、使用div作為容器

    但是我這里因為使用到了母版，而Asp控件必須放在服務器端form中，這個可能會跟子頁引發沖突，導致一個頁面具有兩個服務器端form。所以，需要改成Html控件。在這里我使用的方法是將相關html控件和標簽放到div中，但是div必須添加runat=“Server”，然后才能跟后台進行交互。也可以使用Js直接對div的顯隱進行控制，代碼如下：

   

    div1：

<span style="font-size:14px;"><div id="loginBefore" runat ="server" style="font-size:medium">
            <span id="topUser" style="padding-right:25px;">你好游客
                <a href="javascript:void(0)" onclick="$('#w').window('open')">登錄</a>
                <a href="Register.aspx">注冊</a>
                <a href="#">搜索</a>
            </span>
</div></span>

    div2：

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

    C#后台調用方法：

<span style="font-size:14px;">            if (Session["UserName"] == null)
            {

                loginBefore.Style["Display"] = "Block";
                loginAfter.Style["Display"] = "None";
            }
            else
            {
                loginBefore.Style["Display"] = "None";
                loginAfter.Style["Display"] = "Block";
            }
</span>

    如果使用Js直接調用的話，可以操控div顯隱的方法如下：

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

    最終實現的效果如下：

    

                              圖3：登陸前

    

                              圖4：登陸后