ASP.NET实现简单TABPAGE

时间：2020-04-18 15:46:22 阅读：130 评论：0 收藏：0 [点我收藏+]

标签：介绍图片方式 attribute 一个不同 doctype att win

在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 type="text/css" >.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");

    }
}

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/windok2004/archive/2008/07/15/2654245.aspx

ASP.NET实现简单TABPAGE

标签：介绍图片方式 attribute 一个不同 doctype att win

原文地址：https://www.cnblogs.com/qiu18359243869/p/12726029.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行