ASP.NET 2.0中使用multiview控制項

來源:互聯網
上載者:User
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控制項是負責控制各個選項卡的,也就是最終呈現在使用者面前的介面,並且我們指定每個選項卡的圖片樣式,代碼如下:

<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
  運行上面的程式,可以得到下面的結果,下圖是點選第二個選項卡時的結果。



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

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.