multiview
和view
控件允许将页面的内容分成不同的组,每次只显示一个组。每个view
控件管理一组内容,所有的view
控件一起放在一个multiview
控件中。
multiview
控件一次负责显示一个view
控件。显示的视图称为活动视图。
multiview
控件的语法是:
<asp:multview id= "multiview1" runat= "server"></asp:multiview>
view
控件的语法是:
<asp:view id= "view1" runat= "server"></asp:view>
但是,view
控件不能独立存在。如果尝试单独使用它,则会导致错误。它始终与多视图控件一起使用,如下所示:
<asp:multview id= "multiview1" runat= "server">
<asp:view id= "view1" runat= "server"> </asp:view>
</asp:multiview>
view
和multiview
控件都是从control
类派生的,并继承了它的所有属性,方法和事件。 view
控件最重要的属性是boolean
类型的visible
属性,它设置视图的可见性。
multiview
控件具有以下重要属性:
编号 | 属性 | 描述 |
---|---|---|
1 | views |
multiview 中的view 控件的集合。 |
2 | activeviewindex |
表示活动视图的基于0 的索引。如果没有视图处于活动状态,则索引为-1 。 |
与multiview
控件导航关联的按钮控件的commandname
属性与multiview
控件的某个相关字段相关联。
例如,如果commandname
值为nextview
的按钮控件与多视图的导航相关联,则单击按钮时会自动导航到下一个视图。
下表显示了上述属性的默认命令名称:
编号 | 属性 | 描述 |
---|---|---|
1 | nextviewcommandname |
nextview |
2 | previousviewcommandname |
prevview |
3 | switchviewbyidcommandname |
switchviewbyid |
4 | switchviewbyindexcommandname |
switchviewbyindex |
多视图控制的重要方法是:
编号 | 方法 | 描述 |
---|---|---|
1 | setactiveview |
设置活动视图 |
2 | getactiveview |
检索活动视图 |
每次更改视图时,页面都会回发到服务器,并引发许多事件。一些重要事件是:
编号 | 方法 | 描述 |
---|---|---|
1 | activeviewchanged |
当视图改变时引发 |
2 | activate |
由活动的视图引发 |
3 | deactivate |
由非活动的视图引发 |
除了上面提到的属性,方法和事件,multiview
控件继承了控件和对象类的成员。
示例页面有三个视图。每个视图都有两个按钮用于导航视图。首先打开visual studio,创建一个名称为:multiviews 的空asp.net网站项目,如下所示 -
在这个项目名称上点击右键,在弹出的选项中选择:添加 -> 添加新项,选择web窗体,创建一个文件:default.aspx, 如下所示 -
以下是default.aspx 文件代码:
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>多视图示例</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>多视图和视图控件</h2>
<hr />
选择视图:<asp:dropdownlist id="dropdownlist1" runat="server" autopostback="true" onselectedindexchanged="dropdownlist1_selectedindexchanged">
<asp:listitem value="0">1</asp:listitem>
<asp:listitem value="1">2</asp:listitem>
<asp:listitem value="2">3</asp:listitem>
</asp:dropdownlist>
<asp:multiview id="multiview1" runat="server" activeviewindex="0" onactiveviewchanged="multiview1_activeviewchanged">
<asp:view id="view1" runat="server">
<h3>这是第一个视图</h3>
<br />
<asp:button commandargument="view3" commandname="switchviewbyid" id="btnlast" runat="server" text ="<<前一个视图" />
<asp:button commandname="nextview" id="btnnext1" runat="server" text = "后一个视图>>" />
</asp:view>
<asp:view id="view2" runat="server">
<h3>这是第二个视图</h3>
<asp:button commandname="prevview" id="btnprevious2" runat="server" text = "<<前一个视图" />
<asp:button commandname="nextview" id="btnnext2" runat="server" text = "下一个视图>>" />
</asp:view>
<asp:view id="view3" runat="server">
<h3> 这是第三个视图</h3>
<br />
<asp:calendar id="calender1" runat="server"></asp:calendar>
<br />
<asp:button commandname="prevview" id="btnprevious" runat="server" text = "<<前一个视图" />
<asp:button commandargument="0" commandname="switchviewbyindex" id="btnfirst" runat="server" text = "后一个视图>>" />
</asp:view>
</asp:multiview>
</div>
</form>
</body>
</html>
以下是default.aspx.cs 文件代码:
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.ui;
using system.web.ui.webcontrols;
public partial class _default : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
if (request.querystring["id"] != null)
{
multiview1.activeviewindex = convert.toint32(request.querystring["id"]);
}
}
protected void dropdownlist1_selectedindexchanged(object sender, eventargs e)
{
//设置当前被显示的控件为下拉列表被选中的值
multiview1.activeviewindex = convert.toint32(dropdownlist1.selectedvalue);
}
// 默认显示哪个视图?
protected void multiview1_activeviewchanged(object sender, eventargs e)
{
// multiview1.activeviewindex = 0;
}
}
运行上面项目,得到以第一个界面如下 -
可通过上面的按钮提示,切换视图 -
注意以下几点:
multiview.activeviewindex
确定将显示哪个视图。这是在页面上呈现的唯一视图。 当没有显示视图时,activeviewindex
的默认值是-1
。由于activeviewindex
在本例中定义为2
,所以在执行时会显示第三个视图。