Use multiview controls in ASP. NET2.0

The so-called multiview control is actually a bit like a tabcontrol control that is common in c/s development. You can place multiple "views" (called tabs) on a single page ), for example, you can use the multiview control to allow users to switch to each tab on the same page to view the content, instead of opening a new window each time.

This document uses visual studio. net 2005 as an example to describe how to use the multiview control in asp.net 2.0.
First, open visual studio. net 2005 and create a website. We use the vb.net language. Then, drag a menu control to the web form. This menu control controls the tabs, that is, the interface that is finally displayed in front of the user, and we specify the image style of each tab, the Code is 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>

Next, drag a multiview control to the WEB form and place it under the menu control. Note that the multiview control is divided into multiple view tabs for convenience, currently, it is set to three tabs. In each tab, a table is designed. In practice, this table is the content displayed to the user when you click each tab. The Code is as follows:

<Asp: MultiView ID = "MultiView1" runat = "server" ActiveViewIndex = "0"> <Asp: View ID = "Tab1" runat = "server"> <Table width = "600" height = "400" cellpadding = 0 cellspacing = 0> <Tr valign = "top"> <Td class = "TabArea" style = "width: 600px"> Tab view 1 INSERT YOUR CONENT IN HERE CHANGE SELECTED IMAGE URL 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> </Tr> </Table> </Asp: View> </Asp: MultiView>

Finally, we write code for the itemclick event of the menu. In the following code, we set two images to demonstrate the effect. When you click the current tab, the tab image shows the "selected tab" pattern, while the other two do not click it, it is displayed in gray, 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 to obtain the following result, which is the result when you click the second tab.
(