asp.net實現簡單Tab頁

來源:互聯網
上載者:User

在C/S模式下,經常採用Tab分頁的方式來做,然後將不同的資訊放到不同的Tab頁中,然後可以點擊頁簽去查看不同頁面中的內容。在Web開發中,也需要用到這樣的Tab頁,實現的方式有很多種,現在來介紹一種簡單的Tab頁的實現方式:用iframe來實現。
       具體步驟是:先建立一個主TabForm.aspx,在上面放兩個按鈕來類比頁簽(今後也可以用Photoshop來製作更精美的圖片來作Tab標籤),然後再建立兩個子Form,WebForm1,WebForm2,當按鈕被按下的時候來切換IFRAME的src屬性去顯示不同的子頁面。 

具體代碼如下:

TabForm.aspx

<%...@ Page Language="C#" AutoEventWireup="true" CodeFile="TabForm.aspx.cs" Inherits="TabForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無標題頁</title>
    <STYLE>....aaa {...}{ 
            BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; 

            BACKGROUND-COLOR: #ffcc33; BORDER-BOTTOM-STYLE: none 
        } 
        .bbb {...}{ 
            BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; 

            BACKGROUND-COLOR: #99ffcc; BORDER-BOTTOM-STYLE: none 
        } 
    </STYLE> 

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:button id="Button1" style="Z-INDEX: 101;  POSITION: absolute; TOP: 24px; width:100px;" runat="server" 
Text="WebFrom1Tab" CssClass="aaa" OnClick="Button1_Click"></asp:button> 
        <asp:Button id="Button2" style="Z-INDEX: 102;  POSITION: absolute; TOP: 25px; left: 111px;width:100px;" runat="server" 
Text="WebFrom2Tab" CssClass="bbb" OnClick="Button2_Click"></asp:Button> 
        <iframe id="IFRAME1" style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; Z-INDEX: 103; 
LEFT: 11px; BORDER-LEFT: 0px solid; WIDTH: 924px; BORDER-BOTTOM: 0px solid; POSITION: absolute; TOP: 47px; HEIGHT: 555px" 
runat="server"></iframe> 
    </div>
    </form>
</body>
</html>

TabForm.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class TabForm : System.Web.UI.Page
...{
    protected void Page_Load(object sender, EventArgs e)
    ...{

    }
    protected void Button1_Click(object sender, EventArgs e)
    ...{
        IFRAME1.Attributes.Add("src", "Webform1.aspx"); 

    }
    protected void Button2_Click(object sender, EventArgs e)
    ...{
        IFRAME1.Attributes.Add("src", "Webform2.aspx"); 

    }
}
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.