ASP.NET - MultiView 和 View Web 服务器控件概述（一）
2009-11-24 16:05
453 查看
MultiView 和 View Web 服务器控件用作其他控件和标记的容器，并提供了一种可方便地显示信息的替换视图的方式。
一、方案
可以使用 MultiView 和 View 控件执行如下任务：
·根据用户选择或其他条件提供备选控件集。例如，您可能允许用户从一个源 (feed) 列表中选择，其中每个源都在独立的 View 控件中配置。然后可以显示包含用户选择的源的 View 控件。可以使用 MultiView 和 View 控件作为创建多个 Panel 控件的一种替代方法。
·创建多页窗体。MultiView 和 View 控件可以提供与 Wizard 控件相似的行为。Wizard 控件尤其适合于创建用户分步骤填写的窗体。Wizard 控件还支持更多内置 UI 元素（如页眉和页脚）、“上一页”和“下一页”按钮以及模板。如果要创建根据条件（而不是按顺序）更改的显示，或者不需要 Wizard 控件支持的额外功能，则可以使用 MultiView 控件来代替 Wizard。
二、背景
MultiView 控件用作一个或多个 View 控件的外部容器。View 控件又可包含标记和控件的任何组合。
MultiView 控件一次显示一个 View 控件，并公开该 View 控件内的标记和控件。通过设置 MultiView 控件的 ActiveViewIndex 属性，可以指定当前可见的 View 控件。
1、呈现 View 控件内容
未选择某个 View 控件时，该控件不会呈现到页面中。但是，每次呈现页面时都会创建所有 View 控件中的所有 Web 服务器控件的实例，并且将这些实例的值存储为页面的视图状态的一部分。
无论是 MultiView 控件还是各个 View 控件，除当前 View 控件的内容外，都不会在页面中显示任何标记。例如，这些控件不会以与 Panel 控件相同的方式来呈现 div 元素。这些控件也不支持可以作为一个整体应用于当前 View 控件的外观属性。但是可以将一个主题分配给 MultiView 或 View 控件，控件将该主题应用于当前 View 控件的所有子控件。
2、引用控件
每个 View 控件都支持 Controls 属性，该属性包含该 View 控件中的控件集合。也可以在代码中单独引用 View 控件中的控件。
3、在视图间导航
通过将 MultiView 控件的 ActiveViewIndex 属性设置为要显示的 View 控件的索引值，可以在视图间移动。MultiView 控件还支持可以添加到每个 View 控件的导航按钮。
若要创建导航按钮，可以向每个 View 控件添加一个按钮控件（Button、LinkButton 或 ImageButton）。然后可以将每个按钮的 CommandName 和 CommandArgument 属性设置为保留值以使 MultiView 控件移动到另一个视图。下表列出了保留的 CommandName 值和相应的 CommandArgument 值。
下面的代码示例显示一个包含三个 View 控件的 MultiView 控件。每个 View 控件包含一个移动到特定 View 控件的 Button 控件。
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
View 1<br />
<br />
<asp:Button ID="Button1" runat="server"
CommandArgument="View2"
CommandName="SwitchViewByID"
Text="Go to View2" />
</asp:View>
<asp:View ID="View2" runat="server">
View 2<br />
<br />
<asp:Button ID="Button2" runat="server"
CommandArgument="View3"
CommandName="SwitchViewByID"
Text="Go to View 3" />
</asp:View>
<asp:View ID="View3" runat="server">
View 3<br />
<br />
<asp:Button ID="Button3" runat="server"
CommandArgument="View1"
CommandName="SwitchViewByID"
Text="Go to View 1" />
</asp:View>
</asp:MultiView>
三、如何：向 Web 窗体页添加 MultiView Web 服务器控件
MultiView 和 View Web 服务器控件用作其他控件和标记的容器，并提供了一种显示控件和标记备选集的方式。MultiView 和 View 控件最初主要设计用于移动设备的浏览器中，但现在任何 ASP.NET 页面都支持它们。
1、从工具箱的“标准”选项卡中，将 MultiView 控件拖动到页面上。
2、从工具箱的“标准”选项卡中，将 View 控件拖动到 MultiView 控件上。
3、键入任何您想要添加到 View 控件中的静态文本。若要向 View 控件添加控件，请将它们从“工具箱”中拖动到 View 控件上，以创建您想要的布局。
4、对要创建的每一个 View 控件重复步骤 2 和 3。
5、将 MultiView 控件的 ActiveViewIndex 属性设置为要显示的 View 控件的索引值。如果不想显示任何 View 控件，则将此属性设置为 -1。
6、通过添加代码来以编程方式设置 ActiveViewIndex 属性，从而设置要显示的 View 控件。
下面的示例演示如何使用 MultiView 控件。该页包含两个 View 控件。用户单击一个 RadioButton 控件，在该按钮的 CheckedChanged 事件处理程序中，代码通过设置 ActiveViewIndex 属性来显示合适的 View 控件。当用户单击“搜索”按钮时，代码将从适当的 View 控件中获取 TextBox 控件的值。
安全说明： 该示例具有一个文本框，用于接受用户输入，这是一个潜在的安全威胁。
<%@ Page Language="C#" %>
<script runat="server">
public enum SearchType
{
NotSet = -1,
Products = 0,
Category = 1
}
protected void Button1_Click(Object sender, System.EventArgs e)
{
if(MultiView1.ActiveViewIndex > -1)
{
String searchTerm = "";
SearchType mSearchType =
(SearchType) MultiView1.ActiveViewIndex;
switch(mSearchType)
{
case SearchType.Products:
DoSearch(textProductName.Text, mSearchType);
break;
case SearchType.Category:
DoSearch(textCategory.Text, mSearchType);
break;
case SearchType.NotSet:
break;
}
}
}
protected void DoSearch(String searchTerm, SearchType type)
{
// Code here to perform a search.
}
protected void radioButton_CheckedChanged(Object sender,
System.EventArgs e)
{
if(radioProduct.Checked)
{
MultiView1.ActiveViewIndex = (int) SearchType.Products;
}
else if(radioCategory.Checked)
{
MultiView1.ActiveViewIndex = (int) SearchType.Category;
}
}
</script>
<html>
<head id="Head1" runat="server"></head>
<body>
<form id="form1" runat="server">
<div>
Search by product or by category?
<br />
<asp:RadioButton ID="radioProduct"
runat="server"
autopostback="true"
GroupName="SearchType"
Text="Product"
OnCheckedChanged="radioButton_CheckedChanged" />
<asp:RadioButton ID="radioCategory"
runat="server"
autopostback="true"
GroupName="SearchType"
Text="Category"
OnCheckedChanged="radioButton_CheckedChanged" />
<br />
<br />
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="viewProductSearch" runat="server">
Enter product name:
<asp:TextBox ID="textProductName" runat="server">
</asp:TextBox>
</asp:View>
<asp:View ID="viewCategorySearch" runat="server">
Enter category:
<asp:TextBox ID="textCategory" runat="server">
</asp:TextBox>
</asp:View>
</asp:MultiView> <br />
<br />
<asp:Button ID="btnSearch"
OnClick="Button1_Click"
runat="server" Text="Search" />
</div>
</form>
</body>
</html>
一、方案
可以使用 MultiView 和 View 控件执行如下任务：
·根据用户选择或其他条件提供备选控件集。例如，您可能允许用户从一个源 (feed) 列表中选择，其中每个源都在独立的 View 控件中配置。然后可以显示包含用户选择的源的 View 控件。可以使用 MultiView 和 View 控件作为创建多个 Panel 控件的一种替代方法。
·创建多页窗体。MultiView 和 View 控件可以提供与 Wizard 控件相似的行为。Wizard 控件尤其适合于创建用户分步骤填写的窗体。Wizard 控件还支持更多内置 UI 元素（如页眉和页脚）、“上一页”和“下一页”按钮以及模板。如果要创建根据条件（而不是按顺序）更改的显示，或者不需要 Wizard 控件支持的额外功能，则可以使用 MultiView 控件来代替 Wizard。
二、背景
MultiView 控件用作一个或多个 View 控件的外部容器。View 控件又可包含标记和控件的任何组合。
MultiView 控件一次显示一个 View 控件，并公开该 View 控件内的标记和控件。通过设置 MultiView 控件的 ActiveViewIndex 属性，可以指定当前可见的 View 控件。
1、呈现 View 控件内容
未选择某个 View 控件时，该控件不会呈现到页面中。但是，每次呈现页面时都会创建所有 View 控件中的所有 Web 服务器控件的实例，并且将这些实例的值存储为页面的视图状态的一部分。
无论是 MultiView 控件还是各个 View 控件，除当前 View 控件的内容外，都不会在页面中显示任何标记。例如，这些控件不会以与 Panel 控件相同的方式来呈现 div 元素。这些控件也不支持可以作为一个整体应用于当前 View 控件的外观属性。但是可以将一个主题分配给 MultiView 或 View 控件，控件将该主题应用于当前 View 控件的所有子控件。
2、引用控件
每个 View 控件都支持 Controls 属性，该属性包含该 View 控件中的控件集合。也可以在代码中单独引用 View 控件中的控件。
3、在视图间导航
通过将 MultiView 控件的 ActiveViewIndex 属性设置为要显示的 View 控件的索引值，可以在视图间移动。MultiView 控件还支持可以添加到每个 View 控件的导航按钮。
若要创建导航按钮，可以向每个 View 控件添加一个按钮控件（Button、LinkButton 或 ImageButton）。然后可以将每个按钮的 CommandName 和 CommandArgument 属性设置为保留值以使 MultiView 控件移动到另一个视图。下表列出了保留的 CommandName 值和相应的 CommandArgument 值。
| CommandName 值 | CommandArgument 值 |
| NextView | （没有值） |
| PrevView | （没有值） |
| SwitchViewByID | 要切换到的 View 控件的 ID。 |
| SwitchViewByIndex | 要切换到的 View 控件的索引号。 |
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
View 1<br />
<br />
<asp:Button ID="Button1" runat="server"
CommandArgument="View2"
CommandName="SwitchViewByID"
Text="Go to View2" />
</asp:View>
<asp:View ID="View2" runat="server">
View 2<br />
<br />
<asp:Button ID="Button2" runat="server"
CommandArgument="View3"
CommandName="SwitchViewByID"
Text="Go to View 3" />
</asp:View>
<asp:View ID="View3" runat="server">
View 3<br />
<br />
<asp:Button ID="Button3" runat="server"
CommandArgument="View1"
CommandName="SwitchViewByID"
Text="Go to View 1" />
</asp:View>
</asp:MultiView>
三、如何：向 Web 窗体页添加 MultiView Web 服务器控件
MultiView 和 View Web 服务器控件用作其他控件和标记的容器，并提供了一种显示控件和标记备选集的方式。MultiView 和 View 控件最初主要设计用于移动设备的浏览器中，但现在任何 ASP.NET 页面都支持它们。
1、从工具箱的“标准”选项卡中，将 MultiView 控件拖动到页面上。
2、从工具箱的“标准”选项卡中，将 View 控件拖动到 MultiView 控件上。
3、键入任何您想要添加到 View 控件中的静态文本。若要向 View 控件添加控件，请将它们从“工具箱”中拖动到 View 控件上，以创建您想要的布局。
4、对要创建的每一个 View 控件重复步骤 2 和 3。
5、将 MultiView 控件的 ActiveViewIndex 属性设置为要显示的 View 控件的索引值。如果不想显示任何 View 控件，则将此属性设置为 -1。
6、通过添加代码来以编程方式设置 ActiveViewIndex 属性，从而设置要显示的 View 控件。
下面的示例演示如何使用 MultiView 控件。该页包含两个 View 控件。用户单击一个 RadioButton 控件，在该按钮的 CheckedChanged 事件处理程序中，代码通过设置 ActiveViewIndex 属性来显示合适的 View 控件。当用户单击“搜索”按钮时，代码将从适当的 View 控件中获取 TextBox 控件的值。
安全说明： 该示例具有一个文本框，用于接受用户输入，这是一个潜在的安全威胁。
<%@ Page Language="C#" %>
<script runat="server">
public enum SearchType
{
NotSet = -1,
Products = 0,
Category = 1
}
protected void Button1_Click(Object sender, System.EventArgs e)
{
if(MultiView1.ActiveViewIndex > -1)
{
String searchTerm = "";
SearchType mSearchType =
(SearchType) MultiView1.ActiveViewIndex;
switch(mSearchType)
{
case SearchType.Products:
DoSearch(textProductName.Text, mSearchType);
break;
case SearchType.Category:
DoSearch(textCategory.Text, mSearchType);
break;
case SearchType.NotSet:
break;
}
}
}
protected void DoSearch(String searchTerm, SearchType type)
{
// Code here to perform a search.
}
protected void radioButton_CheckedChanged(Object sender,
System.EventArgs e)
{
if(radioProduct.Checked)
{
MultiView1.ActiveViewIndex = (int) SearchType.Products;
}
else if(radioCategory.Checked)
{
MultiView1.ActiveViewIndex = (int) SearchType.Category;
}
}
</script>
<html>
<head id="Head1" runat="server"></head>
<body>
<form id="form1" runat="server">
<div>
Search by product or by category?
<br />
<asp:RadioButton ID="radioProduct"
runat="server"
autopostback="true"
GroupName="SearchType"
Text="Product"
OnCheckedChanged="radioButton_CheckedChanged" />
<asp:RadioButton ID="radioCategory"
runat="server"
autopostback="true"
GroupName="SearchType"
Text="Category"
OnCheckedChanged="radioButton_CheckedChanged" />
<br />
<br />
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="viewProductSearch" runat="server">
Enter product name:
<asp:TextBox ID="textProductName" runat="server">
</asp:TextBox>
</asp:View>
<asp:View ID="viewCategorySearch" runat="server">
Enter category:
<asp:TextBox ID="textCategory" runat="server">
</asp:TextBox>
</asp:View>
</asp:MultiView> <br />
<br />
<asp:Button ID="btnSearch"
OnClick="Button1_Click"
runat="server" Text="Search" />
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET - MultiView 和 View Web 服务器控件概述（三）
- ASP.NET - MultiView 和 View Web 服务器控件概述（二）
- ASP.NET - Table、TableRow 和 TableCell Web 服务器控件概述
- ASP.NET - Web 服务器控件概述
- ASP.NET - Button Web 服务器控件概述
- ASP.NET - Calendar Web 服务器控件概述（上）
- ASP.NET - ImageMap Web 服务器控件概述（一）
- ASP.NET - SiteMapPath Web 服务器控件概述
- ASP.NET - EditorZone Web 服务器控件概述
- ASP.NET - SiteMapDataSource Web 服务器控件概述
- ASP.NET - XML Web 服务器控件概述
- ASP.NET - HyperLink Web 服务器控件概述
- ASP.NET - ImageMap Web 服务器控件概述（二）
- ASP.NET 数据绑定 Web 服务器控件概述
- ASP.NET - HiddenField Web 服务器控件概述
- ASP.NET - ImageMap Web 服务器控件概述（三）
- ASP.NET - ListBox Web 服务器控件概述（上）
- ASP.NET - CatalogZone Web 服务器控件概述
- ASP.NET - ImportCatalogPart Web 服务器控件概述
- ASP.NET - SiteMapPath Web 服务器控件概述