ASP.NET2.0中使用multiview控件
ASP.NET源碼社區
在asp.net 2.0中，增加了許多新的控件和功能，大大方便了開發者的開發。這次要講解的是在asp.net 2.0中新增的multiview控件的使用。所謂multiview控件，實際上是有點象在c/s開發中很常見的tabcontrol控件，可以在一個頁面中，放置多個"view"(我們稱為選項卡)，比如可以用multiview控件，可以讓用戶在同一頁面中，通過切換到每個選項卡，從而看到要看的內容，而不用每次都重新打開一個新的窗口。本文，將以visual studio .net 2005 為例，說明如何使用asp.net 2.0中的multiview控件。
首先，打開visual studio .net 2005,新建一個website,我們選用vb.net語言。然后，往web窗體中拖拉一個menu控件，這個menu控件是負責控制各個選項卡的，也就是最終呈現在用戶面前的界面，并且我們指定每個選項卡的圖片樣式，代碼如下：
接著，拖拉一個multiview控件到WEB窗體中，放在剛才的menu控件下，注意，multiview控件中，分成很多個view選項卡，我們這里為了方便，暫時設置為3個選項卡，并且在每一個選項卡中，都設計一個表格，在實際應用中，這個表格就是當用戶點選每個選項卡時顯示給用戶看的內容。代碼如下
最后，我們對menu的itemclick事件進行編寫代碼，在下面的代碼中，為了演示效果，我們設置了兩幅圖片，當用戶點選當前選項卡時，選項卡的圖片顯示出"selected tab"的圖案，而其他的兩個沒點選的則顯示灰色，代碼如下
運行上面的程序，可以得到下面的結果，下圖是點選第二個選項卡時的結果。
在asp.net 2.0中，增加了許多新的控件和功能，大大方便了開發者的開發。這次要講解的是在asp.net 2.0中新增的multiview控件的使用。所謂multiview控件，實際上是有點象在c/s開發中很常見的tabcontrol控件，可以在一個頁面中，放置多個"view"(我們稱為選項卡)，比如可以用multiview控件，可以讓用戶在同一頁面中，通過切換到每個選項卡，從而看到要看的內容，而不用每次都重新打開一個新的窗口。本文，將以visual studio .net 2005 為例，說明如何使用asp.net 2.0中的multiview控件。
首先，打開visual studio .net 2005,新建一個website,我們選用vb.net語言。然后，往web窗體中拖拉一個menu控件，這個menu控件是負責控制各個選項卡的，也就是最終呈現在用戶面前的界面，并且我們指定每個選項卡的圖片樣式，代碼如下：
| ＜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＞ |
接著，拖拉一個multiview控件到WEB窗體中，放在剛才的menu控件下，注意，multiview控件中，分成很多個view選項卡，我們這里為了方便，暫時設置為3個選項卡，并且在每一個選項卡中，都設計一個表格，在實際應用中，這個表格就是當用戶點選每個選項卡時顯示給用戶看的內容。代碼如下
| ＜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＞ |
最后，我們對menu的itemclick事件進行編寫代碼，在下面的代碼中，為了演示效果，我們設置了兩幅圖片，當用戶點選當前選項卡時，選項卡的圖片顯示出"selected tab"的圖案，而其他的兩個沒點選的則顯示灰色，代碼如下
| 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 |
運行上面的程序，可以得到下面的結果，下圖是點選第二個選項卡時的結果。
 |