控制元件的顯示隱藏方法
阿新 • • 發佈：2018-12-30
由於實際的需要，我需要做出一個類似百度頁面右上角的登陸之前和登陸之後的變化效果，如下：
圖1： 登陸前
圖2：登陸後 但是得保證不跳轉頁面，可百度的這個效果是經過跳轉的。也就是說，我得在同一個頁面上做出兩套效果，於是想到了利用控制元件的顯隱來實現。經過探索，有兩種解決方法：
panel1：
後臺程式碼：
如果使用Js直接呼叫的話，可以操控div顯隱的方法如下：
圖1： 登陸前
圖2：登陸後 但是得保證不跳轉頁面，可百度的這個效果是經過跳轉的。也就是說，我得在同一個頁面上做出兩套效果，於是想到了利用控制元件的顯隱來實現。經過探索，有兩種解決方法：
一、使用Panel作為容器
可以使用Asp控制元件Panel作為容器，然後使用其他Asp控制元件配合實現，這個最為方便，程式碼如下：panel1：
<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> panel2：
<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> 後臺程式碼：
if (Session["UserName"] == null)
{
Panel2.Visible = true;
Panel1.Visible = false;
}
else
{
Panel1.Visible = true;
Panel2.Visible = false;
}二、使用div作為容器
但是我這裡因為使用到了母版，而Asp控制元件必須放在伺服器端form中，這個可能會跟子頁引發衝突，導致一個頁面具有兩個伺服器端form。所以，需要改成Html控制元件。在這裡我使用的方法是將相關html控制元件和標籤放到div中，但是div必須新增runat=“Server”，然後才能跟後臺進行互動。也可以使用Js直接對div的顯隱進行控制，程式碼如下：
div1：
<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><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> if (Session["UserName"] == null)
{
loginBefore.Style["Display"] = "Block";
loginAfter.Style["Display"] = "None";
}
else
{
loginBefore.Style["Display"] = "None";
loginAfter.Style["Display"] = "Block";
}
如果使用Js直接呼叫的話，可以操控div顯隱的方法如下：
document.getElementById("loginAfter").style.display = "none";//隱藏
document.getElementById("loginBefore").style.display = "block";//顯示
圖3：登陸前
圖4：登陸後