Using the MultiView control in asp.net 2.0

In ASP.net 2.0, many new controls and features have been added that greatly facilitate developer development. This time we will explain the use of the new MultiView control in asp.net 2.0. The so-called MultiView control, in fact, is a bit like in the C/s development of a very common TabControl control, can be in a page, put more than "view" (We call it a tab), such as the use of MultiView control, you can let users on the same page, By switching to each tab to see what you want to see, instead of reopening a new window each time. In this article, you will take Visual Studio. NET 2005 as an example of how to use the MultiView control in asp.net 2.0.

First, open Visual Studio. NET 2005, create a new website, and we choose the vb.net language. Then, drag a menu control into the Web form that controls each tab, which is the interface that is ultimately presented to the user, and we specify the picture style for each tab, the code reads as follows:

<asp:Menu ID="Menu1" Width="168px" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False" OnMenuItemClick="Menu1_MenuItemClick">
<Items>
<asp:MenuItem ImageUrl="~/selectedtab.GIF" Text=" " Value="0"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/unselectedtab.GIF" Text=" " Value="1"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/unselectedtab.GIF" Text=" " Value="2"></asp:MenuItem>
</Items>
</asp:Menu>

Then, drag a MultiView control into the Web form, put it under the menu control just now, notice that the MultiView control is divided into a number of view tabs, which we've set up to 3 tabs for convenience, and in each tab, design a table, In practice, this table is the content that is displayed to the user when the user chooses each tab. The code is as follows

<asp:multiview id= "MultiView1" runat= "server" activeviewindex= "0"
<asp:view id= "TAB1" Server "
<table width=" height= "cellpadding=0 cellspacing=0>
<tr valign=" Top "
<TD class= "Tabarea" style= "width:600px"
Tab VIEW 1
INSERT YOUR conent in here
Change SELECTED IMAGE UR L as necessary
</td>
</tr>
</table>
</asp:view>
<asp:view id= "TAB2" runat= "Server"
<table width= "600px" height= "400px" cellpadding=0 cellspacing=0>
<tr valign= "Top"
<td class= "Tabarea" style= "width:600px"
Tab VIEW 2
INSERT YOUR conent in here
Change SELECTED IMAGE URL as necessary
</td>
</tr>
</table>
</asp:view>
<asp:view id= " TAB3 "runat=" Server "
<table width=" 600px "height=" 400px "cellpadding=0 cellspacing=0>
<tr valign= "Top" "
<td class=" Tabarea "style=" width:600pX "
TAB VIEW 3
INSERT YOUR conent in here
Change SELECTED IMAGE URL as necessary
</td>
</t R>
</table>
</asp:view>
</asp:multiview>

Finally, we write code for the ItemClick event of the menu, in the following code, we set up two pictures to illustrate the effect, and when the user chooses the current tab, the picture of the tab shows the pattern of "selected tab," while the other two are grayed out, The code is as follows

Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
ByVal e As MenuEventArgs) Handles Menu1.MenuItemClick
MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value)
　Dim i As Integer
　For i = 0 To Menu1.Items.Count - 1
If i = e.Item.Value Then
　Menu1.Items(i).ImageUrl = "selectedtab.gif"
Else
　Menu1.Items(i).ImageUrl = "unselectedtab.gif"
End If
　Next
End Sub

Run the above program, you can get the following results, the following figure is the result of the click of the Second tab.