在asp.net网页中实现tabPage功能(上)

  我是个.net新手,所以我写的东西在好些高手们看来似乎比较粗浅,还请大家海涵!并希望大家多多指导、多提意见,我会十分感激的,谢谢!

  前几天在做一个项目时,项目经理非要让我在asp.net网页中实现类似Windows Form程序中类似TabControl(TabPage)那样的功能,但大家都知道,asp.net中是不提供这种控件的,那如何实现呢?

  第一种方法是用Menu控件+MultiView控件实现:

  第一步是在网页中拖入一个Menu控件,编辑一下项目,并设置一下它的属性通常要把Orientation属性设为Horizontal,每加入一个Item,建议把它的Value设为一个数字,比如1,2,3……,这样方便我们后面的编程:

 

 

   第二步是在网页中拖入一个MultiView控件(注意它的css定位属性一定要是相对定位,relative!),它实际上是View控件的容器:

 

  第三步是往MultiView控件里面拖入若干个View控件,每个View控件都相当于一个页面,我们可以像编辑普通页面那样编辑每一个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>tabPage</title>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
        
<asp:Menu ID="Menu1" runat="server" BackColor="#E3EAEB" DynamicHorizontalOffset="2"
            Font-Names
="Verdana" Font-Size="0.8em" ForeColor="#666666" Orientation="Horizontal"
            StaticSubMenuIndent
="10px" Style="position: relative" Width="801px" OnMenuItemClick="Menu1_MenuItemClick">
            
<StaticSelectedStyle BackColor="#1C5E55" />
            
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            
<DynamicHoverStyle BackColor="#666666" ForeColor="White" />
            
<DynamicMenuStyle BackColor="#E3EAEB" />
            
<DynamicSelectedStyle BackColor="#1C5E55" />
            
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            
<StaticHoverStyle BackColor="#666666" ForeColor="White" />
            
<Items>
                
<asp:MenuItem Text="Page 1" Value="1"></asp:MenuItem>
                
<asp:MenuItem Text="Page 2" Value="2"></asp:MenuItem>
                
<asp:MenuItem Text="Page 3" Value="3"></asp:MenuItem>
                
<asp:MenuItem Text="Page N" Value="4"></asp:MenuItem>
            
</Items>
        
</asp:Menu>
    
    
</div>
        
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
            
<asp:View ID="View1" runat="server">
                这是第 1 页
</asp:View>
            
<asp:View ID="View2" runat="server">
                这是第 2 页
</asp:View>
            
<asp:View ID="View3" runat="server">
                这是第 3 页
</asp:View>
            
<asp:View ID="View4" runat="server">
                这是第 N 页
</asp:View>
        
</asp:MultiView>
    
</form>
</body>
</html>

  接下来需要加入控制页面跳转的代码,首先我们默认网页第一次打开时,Menu的第一项就自动选中,所以要把MultiView1控件的ActiveViewIndex属性设为0,并且把它第一个Item的Selected属性设为true。

  此外,双击Menu1控件,添加MenuItemClick事件的代码如下:

     protected   void  Menu1_MenuItemClick( object  sender, MenuEventArgs e)
    
{
        
switch (Menu1.SelectedValue)
        
{
            
case "1"://这个值是在Menu中加入Item时设定的
                {
                    MultiView1.ActiveViewIndex 
= 0;
                    
break;
                }

            
case "2":
                
{
                    MultiView1.ActiveViewIndex 
= 1;
                    
break;
                }

            
case "3":
                
{
                    MultiView1.ActiveViewIndex 
= 2;
                    
break;
                }

            
case "4":
                
{
                    MultiView1.ActiveViewIndex 
= 3;
                    
break;
                }

            
default:
                
break;
        }

    }

至此,利用Menu+MultiView实现tabPage功能已经做好了,大家看看它的运行效果:

点击Page N:

从功能的角度来讲,tabPage的功能已经实现了。在下篇中,将介绍如何用其它控件实现tabPage,欢迎关注!

你可能感兴趣的:(html,server,asp.net,asp,div,menu)