ASP.NET中使用MultiView和View以及Menu实现Tablecontrol的功能

最新推荐文章于 2019-11-29 20:17:18 发布

deanlee1982

最新推荐文章于 2019-11-29 20:17:18 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

文章标签： menu asp.net asp border server div

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/deanlee1982/article/details/1755477

本文介绍如何使用 ASP.NET 中的 Menu 和 MultiView 控件实现选项卡切换功能，并通过 C# 代码设置点击菜单项时对应的视图显示。此外还介绍了如何添加 CSS 样式来美化界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在参考了别人的方法后,我自己也做了一个,在这儿也把自己做的过程拿出来,与大家分享,共同进步 .

1:首先创建一个新Web应用.

2:在页面上添加一个Menu控件,然后在Menu里添加三项(注:每一项都有一个Value值,从0开始计算,此处是为了和view的编号对应).然后Menu下方添加MultiView和View控件,(此处我仅作三个分页的例子).MultiView控件一个,View控件三个:

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

<!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>TableControl示例</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Width="300px" Height="30px"

EnableViewState="False" DisappearAfter="100" SkipLinkText="" StaticDisplayLevels="2" Font-Size="Small">

<Items>

<asp:MenuItem Text="TableControl1" Value="0"></asp:MenuItem>

<asp:MenuItem Text="TableControl2" Value="1"></asp:MenuItem>

<asp:MenuItem Text="TableControl3" Value="2"></asp:MenuItem>

</Items>

</asp:Menu>

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">

<asp:View ID="View1" runat="server">

deanlee1982------------1</asp:View>

<asp:View ID="View2" runat="server">

deanlee1982------------2</asp:View>

<asp:View ID="View3" runat="server">

deanlee1982------------3</asp:View>

</asp:MultiView>

</div>

</form>

</body>

</html>

3:在Menu的MenuItemClick事件中写如下代码:

protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)

{

MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);

}

4:功能基本上实现了,现在加入样式表,美化一下:),样式表如下

.tabItem

{

border: 1px solid #778;

background: #aaa;

text-decoration: none;

width:120px;

height: 20px;

padding-top: 3px;

text-align: center;

font-size:small;

color:White;

}

.tabSelected

{

color:Black;

background-color: #eee;

border-bottom: 1px solid white;

}

.tabHover

{

color: #000;

background: white;

}

.tabbernav

{

margin: 0;

font: bold 12px Verdana , sans-serif;

font:

vertical-align: bottom;

width: 10px;

}

.tabbernav1

{

margin: 0;

padding: 3px 0;

border-bottom: 1px solid #778;

font: bold 12px Verdana, sans-serif;

width: 5px;

}

.tabbernav2

{

margin: 0;

padding: 3px 0;

border-bottom: 1px solid #778;

font: bold 12px Verdana, sans-serif;

}

.tabcontent

{

padding: 5px;

border: 1px solid #aaa;

border-top: 0;

}

最后也加入了淡入淡出效果,具体的看附件里面的吧:)

评论 2

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。