Use multiview controls in ASP. NET2.0

Source: Internet
Author: User

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.

(

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.