asp.NET中 MultiView 选项卡控件的用法

1.拖一个标题控件<asp:Menu>,设置好标题,这里我们设置三个卡片。

 代码如下 复制代码

 <asp:Menu ID="Menu1" runat="server"  Orientation="Horizontal"
            StaticEnableDefaultPopOutImage="False"  OnMenuItemClick="Menu1_MenuItemClick">
            <Items>
                <asp:MenuItem Text="tab1" Value="0"></asp:MenuItem>
                <asp:MenuItem Text="tab2" Value="1"></asp:MenuItem>
                <asp:MenuItem Text="tab3" Value="2"></asp:MenuItem>
            </Items>
        </asp:Menu>   

2.再<asp:Menu>后面拖一个<asp:MultiView>选项卡控件,这只相当一一个容器。

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

</asp:MultiView>

3.再往<asp:MultiView>里拖入三个<asp:view>控件。

 代码如下 复制代码

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

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

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

4.给<asp:Menu >添加OnMenuItemClick="Menu1_MenuItemClick"方法。

代码

 代码如下 复制代码
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
  MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);
}

注意:<asp:MenuItem>的Value索引值要以0开始,要不会报错。

<asp:MultiView>中是否有行为属性:ActiveViewIndex="0"

下面看实例

打开visual studio .net 2005,新建一个website,我们选用vb.net语言。然后,往web窗体中拖拉一个menu控件,这个menu控件是负责控制各个选项卡的,也就是最终呈现在用户面前的界面,并且我们指定每个选项卡的图片样式,代码如下:

 代码如下 复制代码
<asp:Menu ID="Menu1" Width="168px" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False" OnMenuItemClick="Menu1_MenuItemClick">
<Items>
<asp:MenuItem ImageUrl="~/selectedtab.GIF" Text=" " Value="0"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/unselectedtab.GIF" Text=" " Value="1"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/unselectedtab.GIF" Text=" " Value="2"></asp:MenuItem>
</Items>
</asp:Menu>

  接着,拖拉一个multiview控件到WEB窗体中,放在刚才的menu控件下,注意,multiview控件中,分成很多个view选项卡,我们这里为了方便,暂时设置为3个选项卡,并且在每一个选项卡中,都设计一个表格,在实际应用中,这个表格就是当用户点选每个选项卡时显示给用户看的内容。代码如下

 代码如下 复制代码

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0" >
<asp:View ID="Tab1" runat="server" >
<table width="600" height="400" cellpadding=0 cellspacing=0>
<tr valign="top">
<td class="TabArea" style="width: 600px">
TAB VIEW 1
INSERT YOUR CONENT IN HERE
CHANGE SELECTED IMAGE URL AS NECESSARY
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab2" runat="server">
<table width="600px" height="400px" cellpadding=0 cellspacing=0>
<tr valign="top">
<td class="TabArea" style="width: 600px">

TAB VIEW 2
INSERT YOUR CONENT IN HERE
CHANGE SELECTED IMAGE URL AS NECESSARY
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab3" runat="server">
<table width="600px" height="400px" cellpadding=0 cellspacing=0>
<tr valign="top">
<td class="TabArea" style="width: 600px">

TAB VIEW 3
INSERT YOUR CONENT IN HERE
CHANGE SELECTED IMAGE URL AS NECESSARY
</td>
</tr>
</table>
</asp:View>
</asp:MultiView>

  最后,我们对menu的itemclick事件进行编写代码,在下面的代码中,为了演示效果,我们设置了两幅图片,当用户点选当前选项卡时,选项卡的图片显示出"selected tab"的图案,而其他的两个没点选的则显示灰色,代码如下

 代码如下 复制代码

Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
ByVal e As MenuEventArgs) Handles Menu1.MenuItemClick
MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value)
 Dim i As Integer

 For i = 0 To Menu1.Items.Count - 1
  If i = e.Item.Value Then
   Menu1.Items(i).ImageUrl = "selectedtab.gif"
  Else
   Menu1.Items(i).ImageUrl = "unselectedtab.gif"
  End If
 Next
End Sub

效果图


时间: 2024-09-17 02:30:15

asp.NET中 MultiView 选项卡控件的用法的相关文章

Asp.Net中使用Highcharts控件X轴的categories数据一多会被截断

问题描述 Asp.Net中使用Highcharts控件X轴的categories数据一多会被截断 xAxis: { tickmarkPlacement: ""on"" type: 'datetime' tickInterval: [<%=num %>] categories: [<%=lastModifyTime %>] } xAxis中 categories数据会被截断的问题怎么解决 解决方案 ASP.NET中通过WebService获取数

在ASP.NET中使用AdRotator控件(转)

asp.net|控件 在ASP.NET中使用AdRotator控件 通过使用ASP.NET携带的AdRotator服务器控件,ASP.NET中的广告可以随时显示出来.本文中,我们将看到两个例子,它们使用这个控件在一个页面上显示广告. 使用AdRotator服务器控件有以下几个步骤: 第一步 创建一个包含着广告细节的XML文件,比如说叫art008_ads.xml,它包含以下元素: ●ImageUrl-包含将被显示图象的URL,可以是绝对路径,也可以是相对于显示广告的页面的相对路径.●Naviga

asp.net中显示DataGrid控件列序号的几种方法

asp.net|datagrid|datagrid控件|显示 asp.net中显示DataGrid控件列序号的几种方法 作者:郑佐 2004-9-10 在aps.net中多数据绑定的控件很多,论功能来说,应该属DataGrid最为齐全,但它没有提供现成的显示记录序号的功能,不过我们可以通过它所带的一些参数来间接得到序号,下面来看看怎样得到和显示序号值计算方式如下: (1)在后台 DataGrid.CurrentPageIndex * DataGrid.PageSize + e.Item.Item

asp .net中Ztree树控件,如何与导航栏联动,点击导航栏上的栏目,对应的树节点也要展开

问题描述 asp .net中Ztree树控件,如何与导航栏联动,点击导航栏上的栏目,对应的树节点也要展开 点击上面的栏目名称,对应的树节点也要展开 解决方案 导航和ztree什么关系..不就是调用getNodeByParam (key, value, parentNode)找到节点,然后expandNode展开节点而已.自己看api详细参数说明 解决方案二: 就是一个展开事件,在ztree官方例子有

aspnet-请问ASP.NET中web用户控件中使用Session出错,麻烦帮忙解决下,拜托了

问题描述 请问ASP.NET中web用户控件中使用Session出错,麻烦帮忙解决下,拜托了 在用户控件中有下列代码: protected void Page_Load(object sender, EventArgs e) { if (Session["user"] != null) { login.Text = "欢迎你," + Session["user"].ToString().Trim(); login.NavigateUrl = Re

asp.net中使用 Repeater控件拖拽实现排序并同步数据库字段排序_实用技巧

数据库表中有一个单位表,里面包括ID.Name.Order等字段,现在有个后台管理功能,可以设置这些单位在某些统计表格中的先后显示顺序,于是想到用拖拽方式实现,这样操作起来更简便. 使用了GifCam软件做了一个示例动画,效果如下图所示: 于是就动手起来,发现jquery.ui中提供sortable函数,可用于排序,界面中从数据库绑定的单位使用Repeater控件,下面简单介绍下主要步骤: 1.项目中使用到的jquery-1.7.2.min.js和jquery-ui.min.js请点击进行下载,

asp.net中的TreeView控件节点文字怎么倾斜90度显示

问题描述 asp.net中的TreeView控件节点文字怎么倾斜90度显示? 解决方案 解决方案二:transform:rotate(angle)加这个CSS,自己设置个角度值就好了解决方案三:不行呀,你这个是treeview的旋转,我想要的是treeview中节点中文字的倾斜,树不动,中人是各节点中文字倾斜90度,文字如图

在ASP.NET中使用用户控件

asp.net|控件 [摘要]ASP.NET中提供的用户控件,可以解决ASP中无法解决的代码重用问题,更方便了调试工作中的错误检查.本文通过用户控件实现方法讲解和一个用户控件例程的实现,进一步验证了利用用户控件解决代码重用的可行性和有效性. [关键字]代码重用.用户控件.@Register指令 ASP.NET提供了比传统ASP更好的代码分离方案.在传统的ASP中,要将用Server. Execute执行的ASP文件或事务对象组件的代码分离开,一般只能将代码分离成几个文件,然后使用"include

灵活使用asp.net中的gridview控件_实用技巧

gridview是asp.net常用的显示数据控件,对于.net开发人员来说应该是非常的熟悉了.gridview自带有许多功能,包括分页,排序等等,但是作为一个.net开发人员来说熟练掌握利用存储过程分页或者第三方自定义分页十分重要,这不仅是项目的需要,也是我们经验能力的提示,下面我就来讲利用存储过程分页实现绑定gridview 1.执行存储过程         网上有许多sql分页存储过程的例子,但是你会发现其中有许多一部分是不能用的,例如有些使用in或者not in来分页效率非常的低,有些s