Ngôn ngữ ASP.NET - Điều khiển Panel

Điều khiển Panel và PlaceHolder của Web Forms

Hai điều khiển Panel và PlaceHolder được sử dùng để chứa các điều khiển khác. Thuộc tính thường dùng của 2 điều khiển này là Visible. Nếu giá trị của thuộc tính này = True, các điều khiển chứa bên trong sẽ được hiển thị, ngược lại (Visible = False), không có điều khiển nào chứa bên trong được hiển thị.
Tuy nhiên, điều khiển Panel cho phép chúng ta kéo những điều khiển vào bên trong nó lúc thiết kế, còn điều khiển PlaceHolder thì không.

 Để tạo điều khiển Panel và PlaceHolder có thể kéo thả từ toolbox hoặc viết code.

Cú pháp tạo điều khiển Panel:

 <asp:Panel ID="panelnghenghiep" runat="server" GroupingText="Nghề nghiệp" Width="318px" Height="86px"> </asp:Panel>

Phía server xử lý code trên trả về cho trình duyệt dạng HTML: 

<fieldset><legend>nghề nghiệp</legend>       
</fieldset>

 Bảng danh sách các thuộc tính thường dùng

Thuộc tính Ý nghĩa
(ID) Qui định tên của điều khiển. Tên của điều khiển là duy nhất.
AccessKey Qui định ký tự để di chuyển nhanh đến điều khiển - ký tự xử lý phím nóng.
Attributes Tập hợp các thuộc tính của điều khiển HTML
BackColor Qui định màu nền của điều khiển.
BorderColor Qui định màu đường viền của điều khiển.
BorderStyle Qui định kiểu đường viền của điều khiển.
BorderWidth Qui định độ rộng của đường viền.
CssClass Qui định hình thức hiển thị của điều khiển qua tên CSS.
Enabled Qui định điều khiển có được hiển thị hay không. Giá trị mặc định của thuộc tính này là True – được phép hiển thị.
Font Qui định Font hiển thị cho điều khiển
ForeColor Qui định màu chữ hiển thị trên điều khiển
Height Qui định chiều cao của điều khiển
ToolTip Dòng chữ sẽ hiển thị khi rê chuột vào điều khiển.
Width Qui định độ rộng của điều khiển.
DefaultButton Cho phép bạn định nghĩa một button mặc định trong panel mà button mặc định này sẽ được thực hiện khi bạn nhấn phím Enter.
Direction Cho phép bạn gán hoặc thiết đặt hướng hiển thị nội dung được đưa ra trong panel, có thể là các giá trị:NotSet, LeftToRight, and RightToLeft.
GroupingText Cho phép bạn trình bày Panel như 1 Fieldset với một chú giải riêng biệt.
HorizontalAlign Cho phép bạn chỉ ra hướng ngang thể hiện nội dung của panel và nó có thẻ là các giá trị: Center, Justify, Left, NotSet, and Right.
ScrollBars Cho phép bạn hiển thị scrollbars khi bạn cố định chiều cao hoặc chiều rộng của panel và nội dung trong panel vượt quá độ rộng hoặc độ cao đó, nó có thể là các giá trị: Auto, Both, Horizontal, None, and Vertical

Window thuộc tính của điều khiển Panel

Ví dụ: Tao trang sử dụng Panel gồm: 1 panelpage chứa 1 panelsothich va 1 panel nghenghiep, trong panel sothich có vài checkbox, trong panel nghề nghệp hiện thị 100 nghề  (Nghề 1, Nghề 2, . . .) được điền vào khi trang được load.
    Thêm vào panelpage 2 check box: chkSothich và chkNghenghiep. Khi trang hiện thị  người dùng đánh check hoặc bỏ check vào checkbox nào thì panel tương ứng sẽ hiện hoặc ẩn.
Thiết kế:

Code trang Panel.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Pannel.aspx.cs" Inherits="Pannel" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 43px;
            text-align:left;
            vertical-align:top;
            
        }
        </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Panel ID="Panel1" runat="server" BorderColor="#99FF99"  GroupingText="Sở thích &amp; nghề nghiệp" HorizontalAlign="Justify" ScrollBars="Horizontal" Direction="LeftToRight">
            
           <table ><tr><td class="auto-style1">
                <asp:Panel ID="panelsothich" runat="server"  GroupingText="Sở thích" Width="205px" Height="119px">
                    
                    <asp:CheckBox ID="CheckBox1" runat="server" Text="Bóng đá" />
                    <br />
                    <asp:CheckBox ID="CheckBox2" runat="server" Text="Xem Phim" />
                    <br />
                    <asp:CheckBox ID="CheckBox3" runat="server"  Text="Kinh doanh" />
                    
                
            </asp:Panel>
               </td>
            <td class="auto-style1">
            <asp:Panel ID="panelnghenghiep" runat="server" GroupingText="Nghề nghiệp" Width="318px" Height="86px">
                        <asp:BulletedList ID="buletnghenghiep" runat="server">
                        </asp:BulletedList>
                        <br />
                        <br />
                        <br />
                    </asp:Panel>
            </td>
            </tr></table>
            <asp:CheckBox ID="chksothich" runat="server" OnCheckedChanged="chksothich_CheckedChanged" Text="Hiển thị sở thích" AutoPostBack="True" />
            <br />
            <asp:CheckBox ID="chknghenghiep" runat="server"  Text="Hiển thị nghề nghiệp" OnCheckedChanged="chknghenghiep_CheckedChanged" AutoPostBack="True" />
            <br />
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

Code behind

Panel.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 Pannel : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
       
         for (int i = 1; i < 100; i++)
       	    buletnghenghiep.Items.Add("Nghề "+i.ToString());
    }
    protected void chksothich_CheckedChanged(object sender, EventArgs e)
    {
    
           if (chksothich.Checked == true)
               panelsothich.Visible = true;
           else
               panelsothich.Visible = false;
    }
    protected void chknghenghiep_CheckedChanged(object sender, EventArgs e)
    {
          if (chknghenghiep.Checked == true)
               panelnghenghiep.Visible = true;
           else
               panelnghenghiep.Visible = false;

    }
    
}

Thực thi trang web cho kết quả trình duyệt

Khi chọn mục hiển thị sở thích