源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 488|回复: 12

[ASP.NET] ASP.NET中MultiView和View选项卡控件的使用方法

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2016-4-23 10:06:31 | 显示全部楼层 |阅读模式
ASP.NET中的MultiView和View控件可以作为承载其他控件的容器,一般我们都很少使用,本文主要介绍使用MultiView和View实现选项卡效果。

MultiView 控件可用作一个或多个 View 控件的外部容器。而 View 控件可以包含标记和控件的任意组合。您可以使用 MultiView 和 View 控件来执行各种任务,例如基于用户选择提供替换控件集或者创建多页表单。

MultiView 控件一次显示一个 View 控件,并公开该 View 控件内的标记和控件。通过设置 MultiView 控件的 ActiveViewIndex 属性,可以指定当前可见的 View 控件。

如果要切换视图,可以使用控件的ID或者View控件的索引值。在 MultiView 控件中,一次只能将一个 View 控件定义为活动视图。如果某个 View 控件定义为活动视图,它所包含的子控件则会呈现到客户端。可以使用 ActiveViewIndex 属性或SetActiveView 方法定义活动视图。如果 ActiveViewIndex 属性为空,则 MultiView 控件不向客户端呈现任何内容。如果活动视图设置为MultiView 控件中不存在的 View,则会在运行时引发 ArgumentOutOfRangeException。

废话说的有点多,直接上例子吧

创建新的 ASP.NET 网站项目

1.在“文件”菜单中,指向“新建”,然后选择“网站”。

2.在“新建网站”对话框中,从“语言”下拉列表中选择 Visual C#,并选择 ASP.NET 网站模板。

3.在“位置”中,选择 HTTP 并键入网站的 URL。默认的 URL 为 http://localhost/WebSite。改为http://localhost/MultiViewTest,单击“确定”。

4. 打开Default.aspx设计器,切换到代码区,Ctrl+A全选,替换为以下代码:

复制代码 代码如下:
<%@ 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>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">first</asp:LinkButton>
    <asp:LinkButton ID="LinkButton2" runat="server" onclick="LinkButton2_Click">second</asp:LinkButton>
    <asp:LinkButton ID="LinkButton3" runat="server" onclick="LinkButton3_Click">third</asp:LinkButton>
    <br />
    <hr />
    <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex = 1>
        <asp:View ID="View1" runat="server">
        this is the first page
        </asp:View>
        <asp:View ID="View2" runat="server">
        this is the second page
        </asp:View>  
        <asp:View ID="View3" runat="server">
        this is the third page
        </asp:View>              
    </asp:MultiView>
    </div>
    </form>
</body>
</html>

对以上代码的解释:

MultiView 和 View Web 服务器控件用作其他控件和标记的容器,并提供了一种可方便地显示信息的替换视图的方式。

MultiView 控件用作一个或多个 View 控件的外部容器。View 控件又可包含标记和控件的任何组合。

MultiView 控件一次显示一个 View 控件,并公开该 View 控件内的标记和控件。通过设置 MultiView 控件的ActiveViewIndex 属性,可以指定当前可见的 View 控件。

简单的说,MultiView是一个父容器,它包括3个View容器。通过ActiveViewIndex=1属性指明index为1的View容器显示,其他两个隐藏。(index按照view排列的顺序从0开始)

5. 打开Default.aspx.cs,   按Ctrl+A全选,删除后替换为以下代码:

复制代码 代码如下:
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        this.MultiView1.ActiveViewIndex = 0;
    }
    protected void LinkButton2_Click(object sender, EventArgs e)
    {
        this.MultiView1.ActiveViewIndex = 1;
    }
    protected void LinkButton3_Click(object sender, EventArgs e)
    {
        this.MultiView1.ActiveViewIndex = 2;
    }
}

6.保存后按Ctrl+F5启动运行,如果一切顺利,您可以看到以下界面:

MultiView效果演示

点击first,second,third选项卡,可以切换内容。

回复

使用道具 举报

15

主题

2万

回帖

122

积分

注册会员

Rank: 2

积分
122
发表于 2023-1-23 14:28:36 | 显示全部楼层
好人好人好人好人
回复 支持 反对

使用道具 举报

7

主题

2万

回帖

288

积分

中级会员

Rank: 3Rank: 3

积分
288
发表于 2023-7-30 16:46:36 | 显示全部楼层
还不错啊
回复 支持 反对

使用道具 举报

7

主题

2万

回帖

398

积分

中级会员

Rank: 3Rank: 3

积分
398
发表于 2023-9-11 20:45:50 | 显示全部楼层
大家都不容易!
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

221

积分

中级会员

Rank: 3Rank: 3

积分
221
发表于 2023-10-26 08:59:43 | 显示全部楼层
2222222222222222
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

97

积分

注册会员

Rank: 2

积分
97
发表于 2023-12-3 00:12:44 | 显示全部楼层
儿飞飞微风DVD谁vdsvd
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-1-7 10:03:00 | 显示全部楼层
好东西一定要看看!
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

380

积分

中级会员

Rank: 3Rank: 3

积分
380
发表于 2024-5-19 17:55:27 | 显示全部楼层
这个源码不错啊
回复 支持 反对

使用道具 举报

11

主题

1万

回帖

103

积分

注册会员

Rank: 2

积分
103
发表于 2024-6-21 00:38:39 | 显示全部楼层
数据库了多久撒快乐的健身卡啦
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

473

积分

中级会员

Rank: 3Rank: 3

积分
473
发表于 2024-7-14 10:30:53 | 显示全部楼层
有什么好的服务器
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-23 16:45 , Processed in 0.074749 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表