Ngôn ngữ ASP.NET - Điều khiển CheckBox
Điều khiển CheckBox của Web Forms
Checkbox thường sử dụng để nhận giá trị từ người sử dụng. Checkbox cho phép người sử dụng chọn nhiều trong nhiều chọn lựa
Để tạo CheckBox bạn có thể viết code hoặc kéo thả từ công cụ trực quan của Visual Studio.
Cú pháp tạo điều khiển Calendar phía Server:
< asp:CheckBox ID="CheckBox2" runat="server" Text="J2EE"/>
Phía server xử lý code trên trả về cho trình duyệt dạng HTML:
< input id="CheckBox2" type="checkbox" name="CheckBox2" /><label for="CheckBox2">J2EE</label>
Điều khiển CheckBox có 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. |
Text | Chuỗi văn bản sẽ được hiển thị trên điều khiển. Trong trường hợp cả 2 thuộc tính ImageURL và Text được thiết lập, thuộc tính ImageURL được ưu tiên, thuộc tính Text sẽ được hiển thị như Tooltip |
BorderWidth | Qui định độ rộng của đường viền. |
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. |
Checked | Đường dẫn cần liên kết đến. |
TextAlign | Qui định vị trí hiển thị của điều khiển so với chuỗi văn bản |
Ví dụ: Tạo trang CheckBox.aspx có 3 checkbox sau:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckBox.aspx.cs" Inherits="CheckBox" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>Select Courses</h2>
<asp:CheckBox ID="CheckBox1" runat="server" Text="J2SE" />
<asp:CheckBox ID="CheckBox2" runat="server" Text="J2EE" />
<asp:CheckBox ID="CheckBox3" runat="server" Text="Spring" />
</div>
<p>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</p>
</form>
<p>
Courses Selected: <asp:Label runat="server" ID="ShowCourses"></asp:Label>
</p>
</body>
</html>
Code Behind
//CheckBox.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 CheckBox : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ShowCourses.Text = "None";
}
protected void Button1_Click(object sender, EventArgs e)
{
var message = "";
if (CheckBox1.Checked)
{
message = CheckBox1.Text + " ";
}
if (CheckBox2.Checked)
{
message += CheckBox2.Text + " ";
}
if (CheckBox3.Checked)
{
message += CheckBox3.Text;
}
ShowCourses.Text = message;
}
}
Thực thi trang web cho kết quả:
Khi click CheckBox và click nút submit :