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ả