虽然我还没有测试过，但是我觉得有必要收藏一下，谢谢原创者

最新推荐文章于 2020-12-14 22:06:04 发布

HanYanBin

最新推荐文章于 2020-12-14 22:06:04 发布

阅读量550

点赞数

分类专栏： C#程序设计

C#程序设计专栏收录该内容

24 篇文章 0 订阅

订阅专栏

ASP.NET 实现Tab控件效果

我这里提供两种方法，都使用控件的，一种是Menu控件与MultiView组合，另一种是DataList与MultiView组合；这里只说第二种

具体如下，先建一个用户控件（.ascx），里面添加DataList控件
先看看.ascx 文件的源码吧（我这里没有把代码和源码分开）

TabControl.ascx 文件源码：
<%@ Control Language="C#" ClassName="TabControl" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">

    public event EventHandler TabsClick;//声明一个不含任何事件参数的委托方法
    public int SelectIndex
    {
        get
        {
            return DataList1.SelectedIndex;
        }
    }
    protected void Page_Load()
    {
        if(!Page.IsPostBack)
        {
            List<string> tabs = new List<string>();
            tabs.Add("新闻导读");
            tabs.Add("体育快讯");
            tabs.Add("娱乐爆料");
            DataList1.DataSource = tabs;
            DataList1.DataBind();
            DataList1.SelectedIndex = 0;
        }

    }
    protected void SelectedIndexChanged(object sender ,System.EventArgs e)
    {
           //判断委托存在
        if(TabsClick != null)
        {
            //前一个参数是触发事件的对象（用户控件本身，这里的this不是DataList），后一个参数表明该事件数据为空
            TabsClick(this ,EventArgs.Empty); //实现委托方法
        }
    }
</script>

<asp:DataList runat="server" ID="DataList1" RepeatDirection="Horizontal" ItemStyle-CssClass="tab"
    SelectedItemStyle-CssClass="SelectedTab" OnSelectedIndexChanged="SelectedIndexChanged"
    CssClass="tabs">
    <ItemTemplate>
        <asp:LinkButton runat="server" ID="LinkButton1" CommandName="Select"><%#Container.DataItem %></asp:LinkButton>
    </ItemTemplate>
</asp:DataList>

注意：自定义控件中提供了一个只读属性，用来记录DataList1选的是哪一个项，同时LinkButton1的CommandName枚举的是开发环境识别的项Select，用来确定选择SelectedIndex所指向的Item，这里的CSS样式均可在调用的页面实现，看下面文件。

实现方代码（也是将代码源码置于一个文件ShowTabs.aspx）

代码如下：

<%@ Page Language="C#" %>

<%@ Register Src="TabControl.ascx" TagName="TabControl" TagPrefix="user" %>
<!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>Show Tabs</title>
    <style type="text/css">
    html
    {
       background-color:silver;
       font:14px Georgia Serif;
    }
    .tabs a
    {
      color:blue;
      text-decoration:none;
      font:14px Arial,Sans-Serif;

    }
    .tab
    {
       background-color:#eee;
       padding:5px;
       border:solid 1px black;
       border-bottom:none
    }
    .views
    {
      background-color:orange;
      width:400px;
      border:solid 1px black;
      border-top:none;
      padding:10px
    }
    .SelectedTab
    {
            background-color:orange;
            padding:5px;
            border:Solid 1px black;
            border-bottom:none;
    }
    </style>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <user:TabControl ID="TabControl1" runat="server" OnTabsClick="TabClick"></user:TabControl>
            <div class="views">
                <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                    <asp:View ID="News" runat="server">
                        <h1>
                            News Navigation</h1>
                        微软为Windows 7大力造势 Vista何去何从？目前，微软正全力为其下一代操作系统Windows 7大造声势，Windows 7 RC今日已开放下载。而业界人士最为关心的是：
                        Windows 7正式版发布后，微软计划继续销售Windows Vista操作系统多长时间？
                    </asp:View>
                    <asp:View ID="Sports" runat="server">
                        <h1>
                            Sport News</h1>
                        微软WMM手机应用商店向开发者开放 9月上线70%收入归开发者商业周刊：谷歌云计算武器App Engine微软和Rackspace是主要竞争对手史上最恶毒10大病毒
                        Conficker排名第八Melissa来自浪漫爱情故事 Windows 7 RC今日开放下载服务器或不堪重负重蹈Vista时期覆辙惠普与RIM合作推黑莓手机打印服务ProLiant服务器上可运行黑莓软件
                        技术与产品
                    </asp:View>
                    <asp:View ID="Entertainment" runat="server">
                        <h1>
                            Entertainment</h1>
                        50000年薪，顶级嵌入式课程并不是所有云都相同用AWS快速构建自己的云计算经典案例讲述自定义Veloci 服务器节电小妙招多线程多核的并行度分析强大的Moblin开发应用程序
                        U盘将AMT配置成SMB模式【惊】一个人玩转一个公司【赞】SOA的十大技术理论体系【赞】看专家教你用CUDA编程【免费】VSTS项目管理培训推荐好友注册，赢索爱手机
                        【快】专业手机主题片刻完成
                    </asp:View>
                </asp:MultiView>
            </div>
        </div>
    </form>
</body>
</html>

这里用到了MultiView控件，对于他的使用可以查看ASP.NET 3.5揭秘和详细的。或者查看CSDN。TabControl编译成功之后就成了控件类，你可以调用它的属性，比如这里的SelectIndex

注意：该页面的上面

<%@ Register Src="TabControl.ascx" TagName="TabControl" TagPrefix="user" %>

只要你拖过来就会生成，不过TagPrefix 默认的是uc1 我改成了user，这个都没关系的，不过下面的引用控件部分也要改成<user: 开始，</use结束。 TagName是你的控件标签名 <user:TabControl ID="TabControl1" runat="server" OnTabsClick="TabClick"></user:TabControl>就是这里的TabControl

效果如下：

HanYanBin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
虽然我还没有测试过，但是我觉得有必要收藏一下，谢谢原创者

ASP.NET 实现Tab控件效果我这里提供两种方法，都使用控件的，一种是Menu控件与MultiView组合，另一种是DataList与MultiView组合；这里只说第二种具体如下，先建一个用户控件（.ascx），里面添加DataList控件先看看.ascx 文件的源码吧（我这里没有把代码和源码分开）TabControl.ascx 文件源码：
复制链接

扫一扫

专栏目录