ASP 类似于WINFORM选项卡的控件是什么
- 提问者网友：伴风望海
- 2021-07-31 04:40
- 五星知识达人网友：大漠
- 2021-07-31 05:59
MultiView 控件是一个比较复杂一点控件，它有点类似于WinForm 中的TabControl 控件，它是View 控件的容器，而View 控件则可以当作控件的容器，类似于WinForm 中的TabPage 控件。
一次只能设置一个View 控件为活动视图，只有处于活动状态的View 才会呈现到客户端。如果没有设置任何View 为活动视图则不向客户端呈现任何内容。可以通过设计视图或者编码的方式设置活动视图。
MultiView 有两个常见属性：
ActiveViewIndex: 当前活动的View 索引，我们通常就是通过设置ActiveViewIndex 来控制View 的显示的。
Views ：当前MultiView 控件的View 集合
下面是一个利用MultiView 控件实现的类似于Windows 应用程序中的选项卡式效果。前台设计代码如下：
1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultiViewDemo.aspx.cs" Inherits="MultiViewDemo" %>
2.
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.
5. <html >
6. <head runat="server">
7. <title>MultiView应用实例</title>
8. <style type="text/css">
9. body
10. {
11. font-size: 11pt;
12. font-family: 宋体;
13. }
14. .mainTitle
15. {
16. font-size: 12pt;
17. font-weight: bold;
18. font-family: 宋体;
19. }
20. .commonText
21. {
22. font-size: 11pt;
23. font-family: 宋体;
24. }
25. .littleMainTitle
26. {
27. font-size: 10pt;
28. font-weight: bold;
29. font-family: 宋体;
30. }
31. .TopTitle
32. {
33. border: 0px;
34. font-size: 10pt;
35. font-weight: bold;
36. text-decoration: none;
37. color: Black;
38. display: inline-block;
39. width: 100%;
40. }
41. .SelectedTopTitle
42. {
43. border: 0px;
44. font-size: 10pt;
45. text-decoration: none;
46. color: Black;
47. display: inline-block;
48. width: 100%;
49. background-color: White;
50. }
51. .ContentView
52. {
53. border: 0px;
54. padding: 3px 3px 3px 3px;
55. background-color: White;
56. display: inline-block;
57. width: 390px;
58. }
59. .SepBorder
60. {
61. border-top-width: 0px;
62. border-left-width: 0px;
63. font-size: 1px;
64. border-bottom: Gray 1px solid;
65. border-right-width: 0px;
66. }
67. .TopBorder
68. {
69. border-right: Gray 1px solid;
70. border-top: Gray 1px solid;
71. background: #DCDCDC;
72. border-left: Gray 1px solid;
73. color: black;
74. border-bottom: Gray 1px solid;
75. }
76. .ContentBorder
77. {
78. border-right: Gray 1px solid;
79. border-top: Gray 0px solid;
80. border-left: Gray 1px solid;
81. border-bottom: Gray 1px solid;
82. height: 100%;
83. width: 100%;
84. }
85. .SelectedTopBorder
86. {
87. border-right: Gray 1px solid;
88. border-top: Gray 1px solid;
89. background: none transparent scroll repeat 0% 0%;
90. border-left: Gray 1px solid;
91. color: black;
92. border-bottom: Gray 0px solid;
93. }
94. </style>
95. </head>
96. <body>
97. <form id="form1" runat="server">
98. <div>
99. <fieldset style="width:400px">
100. <legend>MultiView应用实例</legend>
101. <table cellpadding="0" cellspacing="0" width="100%" border="0">
102. <tr>
103. <td>
104. <table id="Table1" runat="server" cellpadding="0" cellspacing="0" width="100%" border="0">
105. <tr style="height:22px">
106. <td class="SelectedTopBorder" id="Cell1" align="center" style="width:80px;">
107. <asp:LinkButton ID="lButtonCompany" runat="server" OnClick="lButtonCompany_Click">公司介绍</asp:LinkButton></td>
108. <td class="SepBorder" style="width:2px; height: 22px;"></td>
109. <td class="TopBorder" id="Cell2" align="center" style="width:80px;">
110. <asp:LinkButton ID="lButtonProduct" runat="server" OnClick="lButtonProduct_Click">产品介绍</asp:LinkButton></td>
111. <td class="SepBorder" style="width:2px; height: 22px;"></td>
112. <td class="TopBorder" id="Cell3" align="center" style="width:80px;">
113. <asp:LinkButton ID="lButtonContact" runat="server" OnClick="lButtonContact_Click">联系我们</asp:LinkButton></td>
114. <td class="SepBorder" style="width:2px; height: 22px;"></td>
115. </tr>
116. </table>
117. </td>
118. </tr>
119. <tr>
120. <td>
121. <table class="ContentBorder" cellpadding="0" cellspacing="0" width="100%">
122. <tr>
123. <td valign="top">
124. <asp:MultiView ID="mvCompany" runat="server" ActiveViewIndex="0">
125. <asp:View ID="View1" runat="server">
126. 我们公司是一个正在上升时期的公司。公司目前有中科院计算机院士3人，博士后32人，博士63人，研究生120人，本科生356人，具有非常强大研发实力。</asp:View>
127. <asp:View ID="View2" runat="server">
128. 我们有丰富的产品线，还可以为用户单独定制。目前有CMS文章发布系统、CRM客户资源关系管理系统、OA自动办公系统、BBS论坛系统及ERP企业资产管理系统等等，正在研发的软件有GPS车辆定位导航系统及工作流定制系统等等。</asp:View>
129. <asp:View ID="View3" runat="server">
130. 本公司热烈欢迎技术界和销售界的精英加入我们的团队，待遇优厚。我们的联系方式是119，传真是110，客服电话是120，售后电话114。</asp:View>
131. </asp:MultiView>
132. </td>
133. </tr>
134. </table>
135. </td>
136. </tr>
137. </table>
138. </fieldset>
139. </div>
140. </form>
141. </body>
142. </html>
后台程序代码如下：
1. using System;
2. using System.Data;
3. using System.Configuration;
4. using System.Collections;
5. using System.Web;
6. using System.Web.Security;
7. using System.Web.UI;
8. using System.Web.UI.WebControls;
9. using System.Web.UI.WebControls.WebParts;
10. using System.Web.UI.HtmlControls;
11.
12. public partial class MultiViewDemo : System.Web.UI.Page
13. {
14. protected void Page_Load(object sender, EventArgs e)
15. {
16.
17. }
18. /// <summary>
19. /// 点击公司介绍时的css设置
20. /// </summary>
21. /// <param name="sender"></param>
22. /// <param name="e"></param>
23. protected void lButtonCompany_Click(object sender, EventArgs e)
24. {
25. mvCompany.ActiveViewIndex = 0;
26. Cell1.Attributes["class"] = "SelectedTopBorder";
27. Cell2.Attributes["class"] = "TopBorder";
28. Cell3.Attributes["class"] = "TopBorder";
29. }
30. /// <summary>
31. /// 点击产品介绍时的css设置
32. /// </summary>
33. /// <param name="sender"></param>
34. /// <param name="e"></param>
35. protected void lButtonProduct_Click(object sender, EventArgs e)
36. {
37. mvCompany.ActiveViewIndex = 1;
38. Cell1.Attributes["class"] = "TopBorder";
39. Cell2.Attributes["class"] = "SelectedTopBorder";
40. Cell3.Attributes["class"] = "TopBorder";
41. }
42. /// <summary>
43. /// 点击联系我们时的css设置
44. /// </summary>
45. /// <param name="sender"></param>
46. /// <param name="e"></param>
47. protected void lButtonContact_Click(object sender, EventArgs e)
48. {
49. mvCompany.ActiveViewIndex = 2;
50. Cell1.Attributes["class"] = "TopBorder";
51. Cell2.Attributes["class"] = "TopBorder";
52. Cell3.Attributes["class"] = "SelectedTopBorder";
53. }
54.
55. }