1. Drag a caption control <asp:menu>, set the title, here we set three cards.
The code is as follows |
Copy Code |
<asp:menu id= "Menu1" runat= "server" orientation= "horizontal" staticenabledefaultpopoutimage= "False" onmenuitemclick= "menu1_ Menuitemclick " <items> <asp:menuitem Text = "Tab1" value= "0" ></ASP:MENUITEM> <asp:menuitem text= "tab2" value= "1" ></ASP:MENUITEM> <asp:menuitem text= "Tab3" Value = "2" ></asp:menuitem> </items </asp:menu> |
2. Then <asp:Menu> drag a <asp:MultiView> tab control, which is quite one by one containers.
<asp:multiview id= "MultiView1" runat= "server" activeviewindex= "0" >
</asp:MultiView>
3. Drag into <asp:MultiView> again three <asp:view> controls.
The code is as follows |
Copy Code |
<asp:view id= "View1" runat= "Server" > <asp:view id= "View2" runat= "Server" > <asp:view id= "VIEW3" runat= "Server" > |
4. Add the Onmenuitemclick= "Menu1_MenuItemClick" method to <asp:menu >.
Code
The code is as follows |
Copy Code |
protected void Menu1_MenuItemClick (object sender, MenuEventArgs e) { Multiview1.activeviewindex = Int32.Parse (E.item.value); }
|
Note that the value index of:<asp:menuitem> should start with 0, without an error.
<asp:MultiView> whether there are behavioral attributes: activeviewindex= "0"
Look at the example below
Open Visual Studio. NET 2005, create a new website, 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:
code is as follows |
copy code |
|
Then, drag a MultiView control into the Web form, put it under the menu control, and 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, we 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
The code is as follows |
Copy Code |
TAB VIEW 1 INSERT YOUR conent in Change SELECTED IMAGE URL as necessary
|
TAB VIEW 2 INSERT YOUR conent in Change SELECTED IMAGE URL as necessary
TAB VIEW 3 INSERT YOUR conent in Change SELECTED IMAGE URL as necessary
|
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
The code is as follows |
Copy Code |
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 |
Effect chart