Use MultiView control in asp.net 2.0

Source: Internet
Author: User
Tags insert visual studio
The asp.net| control adds a number of new controls and features to the ASP.net 2.0, greatly facilitating 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, 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

<asp:multiview id= "MultiView1" runat= "server" activeviewindex= "0"
<asp:view id= "TAB1" runat= "Server"
<table width= "height=" cellpadding=0 cellspacing=0>
<TR valign= "Top" >
<TD class= "Tabarea" style= "width:600px"
TAB VIEW 1
INSERT YOUR conent in
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
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
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 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.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.