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 & 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