ASP.NET基础 专题
您的位置:csharp > ASP.NET基础专题 > ASP.NET多视图
ASP.NET多视图
作者:--    发布时间:2019-11-20

multiviewview控件允许将页面的内容分成不同的组,每次只显示一个组。每个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>

视图和多视图控件的属性

viewmultiview控件都是从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,所以在执行时会显示第三个视图。


网站声明:
本站部分内容来自网络,如您发现本站内容
侵害到您的利益,请联系本站管理员处理。
联系站长
373515719@qq.com
关于本站:
编程参考手册