Ngôn ngữ ASP.NET - Điều khiển MultiView
Điều khiển hiển thị các trang – MultiView
Điều khiển MultiView cho phép bạn ẩn hoặc hiện các phần khác nhau của trang Web, điều khiển này tiện ích khi bạn tạo một TabPage. Nó thực sự tiện ích khi bạn muốn chia 1 trang web có độ dài lớn thành các phần để hiển thị.
Điều khiển MultiView chứa đựng 1 hoặc nhiều điều khiển View, bạn sử dụng Multiview để lựa chọn các điều khiển View để trình bày.
Để tạo điều khiển MultiView có thể kéo thả từ toolbox hoặc viết code
Cú pháp tạo điều khiển MultiView phía Server:
<asp:MultiView ID="MultiView1" runat="server"> </asp:MultiView>
Điều khiển MultiView hỗ trợ các thuộc tính.
- ActiveViewIndex: Lựa chọn điều khiển View được đưa ra hiển thị bằng chỉ số Index
- Views: Cho phép bạn lấy về tập hợp các điều khiển View chứa đựng trong điều khiển MultiView.
Điều khiển MultiView hỗ trợ hai phương thức.
- GetActiveView: Cho phép lấy về thông tin của điều khiển View được lựa chọn.
- SetActiveView: cho phép bạn thiết lập điều khiển View được hiên thị.
Và MultiView hỗ trợ sự kiện sau:
ActiveViewChanged: Xảy ra khi điều khiển View được lựa chọn
Window thuộc tính của điều khiển MultiView
Ví dụ: Tạo 1 website MultiView: Sử dụng MultiView kết hợp với điều khiển Menu để tạo một TabPage
Thiết kế
Trên trang thiết kế tạo: 1 Multiview1 bên trong gồm 3 View (View1 View2, View3)
Tạo Control Menu1 từ nhóm Control Navigation : Gồm 3 Tab (Tab1, Tab2, Tab3)
- Tạo Control Menu vào Form
- Chọn Edit Menu Item
- Bổ sung nội dung vào các view tương ứng
Code trang MultiView.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultiView.aspx.cs" Inherits="MultiView" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" BackColor="#FFFBD6" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#990000" OnMenuItemClick="Menu1_MenuItemClick" Orientation="Horizontal" StaticSubMenuIndent="10px">
<DynamicHoverStyle BackColor="#990000" ForeColor="White" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicMenuStyle BackColor="#FFFBD6" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<Items>
<asp:MenuItem Text="Tab 1" Value="0"></asp:MenuItem>
<asp:MenuItem Text="Tab 2" Value="1"></asp:MenuItem>
<asp:MenuItem Text="Tab 3" Value="2"></asp:MenuItem>
</Items>
<StaticHoverStyle BackColor="#990000" ForeColor="White" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticSelectedStyle BackColor="#FFCC66" />
</asp:Menu>
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
Đây là View 1<asp:Button ID="Button1" runat="server" Text="Button" />
<br />
Đây là View 1<asp:Button ID="Button4" runat="server" Text="Button" />
<br />
Đây là View 1<asp:Button ID="Button5" runat="server" Text="Button" />
<br />
Đây là View 1<asp:Button ID="Button6" runat="server" Text="Button" />
</asp:View>
<br />
<asp:View ID="View2" runat="server">
Đây là View 2<asp:Button ID="Button2" runat="server" Text="Button" />
<br />
Đây là View 2<asp:Button ID="Button9" runat="server" Text="Button" />
<br />
Đây là View 2<asp:Button ID="Button10" runat="server" Text="Button" />
<br />
Đây là View 2<asp:Button ID="Button11" runat="server" Text="Button" />
<br />
Đây là View 2<asp:Button ID="Button12" runat="server" Text="Button" />
</asp:View>
<br />
<asp:View ID="View3" runat="server">
Đây là View 3<asp:Button ID="Button3" runat="server" Text="Button" />
<br />
Đây là View 3<asp:Button ID="Button14" runat="server" Text="Button" />
<br />
Đây là View 3<asp:Button ID="Button15" runat="server" Text="Button" />
<br />
Đây là View 3<asp:Button ID="Button16" runat="server" Text="Button" />
<br />
Đây là View 3<asp:Button ID="Button17" runat="server" Text="Button" />
<br />
Đây là View 3<asp:Button ID="Button18" runat="server" Text="Button" />
</asp:View>
<br />
<br />
<br />
<br />
</asp:MultiView>
</div>
</form>
</body>
</html>
Code behind
MultiView.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class MultiView : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MultiView1.ActiveViewIndex = 0;
}
}
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
int index = int.Parse(e.Item.Value);
MultiView1.ActiveViewIndex = index;
}
}
Thực thi trang MultiView.aspx kết quả
Khi Click vào tab2 cho kết quả