Standard controls_bài 2
Kiểu hiển thị của texbox gồm 3 giá trị:
+ Singleline: hiển thị 1 trường nhập liệu trên 1 dòng
+ Multiline: hiển thị 1 trường nhập liệu nhiều dòng
+ Password: hiển thị 1 trường nhập mà text sẽ được thay thế bằng các ký tự đặc biệt. b
264 Lê Văn Sỹ, P.14, Q.3
BÀI 2: STANDARD CONTROLS
I. GIỚI THIỆU
1. Label(Nhãn)
--1--
264 Lê Văn Sỹ, P.14, Q.3
Tên thuộc tính Mô tả
ID Tên điều khiển
Text Nội dung hiển thị
BackColor Màu nền của Label
BorderColor Màu đường viền
BorderStyle Kiểu đường viền của Label
CssClass Gán lớp css
Font Phông chữ
ForeColor Màu chữ nội dung
ToolTip Chú thích(di chuyển chuột vào Label)
2. TextBox
Tên thuộc tính Mô tả
ID Tên điều khiển
Text Nội dung hiển thị
TextMode Kiểu hiển thị của Textbox gồm 3 giá trị:
+SingleLine: hiển thị 1 trường nhập liệu trên 1 dòng
+MultiLine: hiển thị 1 trường nhập liệu nhiều dòng
+ Password: hiển thị 1 trường nhập mà Text sẽ được thay thế
bằng các ký tự đặc biệt
Columns Chỉ định số cột được hiển thị trong TextBox
Rows Cho phép chỉ định số dòng hiển thị trong TextBox
TabIndex Cho phép chỉ định thứ tự Tab của TextBox
MaxLength Cho phép quy đinh độ dài của dữ liệu mà một người sử dụng
có thể nhập trên TextBox
Focus cho phép thiết lập form khởi tạo ưu tiên tới TextBox
TextChanged Xảy ra trên Server khi nội dung TextBox thay đổi. để sự kiên
này xảy ra bạn cần thiết đặt thuộc tính AutoPostback là true.
--2--
264 Lê Văn Sỹ, P.14, Q.3
3. Button
Tên thuộc tính Mô tả
ID Tên điều khiển
Text Nội dung hiển thị
CommandArgument Cho phép bạn chỉ rõ đối số được truyền tới lệnh thực hiện.
CommandName Chỉ định tên một lệnh được truyền tới trong Command Event.
Enabled Vô hiệu hóa Button
OnClientClick Cho phép chỉ định đến một hàm phía client khi nhấn vào Button.
Click Xảy ra khi Button được nhấn
Command Xảy ra khi điều khiển Button được nhấn. CommandName và
CommandArgument được truyền qua sự kiện.
• Bài tập
– Tạo giao diện gửi thông tin góp ý.
– Khi nhấn nút gửi góp ý .
• Nếu chưa nhập thông tin Họ Tên, Địa chỉ, Tiêu đề, Nội dung thì hiển thị thông
báo ‘’Bạn phải nhập thông tin’’
• Nếu đã nhập thông tin thì hiện thị thông tin.
--3--
264 Lê Văn Sỹ, P.14, Q.3
– Gợi ý:
• Dùng JavaScript để hiển thị thông báo.
function KiemTraDuLieu()
{
if (document.getElementById("HoTen").value=="")
{
alert("Bạn phải nhập Họ tên");
return false;
}
return true;
}
Gọi hàm ở nút nhấn:
OnClientClick="return KiemTraDuLieu();"
--4--
264 Lê Văn Sỹ, P.14, Q.3
4. ImageButton
Tên thuộc tính Mô tả
ImageUrl Đường dẫn đến tập tin ảnh
ImageAlign Canh lề ảnh
Click Xảy ra khi Button được nhấn
Command Xảy ra khi điều khiển Button được nhấn. CommandName và
CommandArgument được truyền qua sự kiện.
• Bài tập :
Bài 1:Tạo giao diện cho phần quản trị gồm 2 trang :Admin.aspx và ChangePassword.aspx.
--5--
264 Lê Văn Sỹ, P.14, Q.3
5. DropDownList
– Giới thiệu:Hiển thị một danh sách các lựa chọn, nguời sử dụng chỉ chọn một lựa chọn 1 lần.
– Các thuộc tính cơ bản:
Thuộc tính - Sự kiện Mô tả
Data Source Nguồn dữ liệu
DataTextField Tên trường hiển thị.
DataValueField Tên trường giá trị.
SelectedValue Giá trị của Item được chọn
SelectedIndex Chỉ số của Item được chọn
SelectedItem Phần tử được chọn
AutoPostBack =True:Chạy sự kiện khi thay đổi chỉ số.
=False:Không chạy sự kiện khi thay đổi chỉ số
AppendDataBoundItems Lấy hoặc gán giá trị chỉ định liệu có xóa danh
sách trước khi ràng buộc dữ liệu
SelectedIndexChanged() Xảy ra khi chỉ số thay đổi
– Phương thức :
Phương thức Mô tả
Items.Add(ListItem list) Thêm phần tử vào danh ListBox
Items.RemoveAt(int index) Xóa phần tử theo chỉ số
Items.Clear() Xóa tất cả phần tử
– Sự kiện:
OnSelectedIndexChanged: Xảy ra khi thay đổi lựa chọn 1 giá trị.
– Vi dụ 1:
Tâp tin: DropDownList.aspx
Quốc gia
Việt Nam
--6--
264 Lê Văn Sỹ, P.14, Q.3
Lào
Campuchia
Tâp tin: DropDownList.aspx.cs
protected void Button1_Click(object sender, EventArgs e){
Response.Write("Quoc gia:" + DropDownList1.SelectedItem.Text);
Response.Write("Gia tri:"+DropDownList1.SelectedValue);
}
6. ListBox
– Giới thiệu: Hiển thị một danh sách trên trang và chúng ta có thể lựa chọn một hoặc nhiều
phần tử
– Các thuộc tính cơ bản :
Tham số Mô tả
Data Source Nguồn dữ liệu
DataTextField Tên trường hiển thị.
DataValueField Tên trường giá trị.
SelectionMode =Single:Chọn môt phần tử
=Multiple:Chọn nhiều phần tử
Rows Số dòng hiển thị
SelectedValue Giá trị của Item được chọn
SelectedIndex Chỉ số của Item được chọn
AutoPostBack =True:Chạy sự kiện khi thay đổi chỉ số.
=False:Không chạy sự kiện khi thay đổi chỉ số
AppendDataBoundItems Lấy hoặc gán giá trị chỉ định liệu có xóa danh sách trước
khi ràng buộc dữ liệu
--7--
264 Lê Văn Sỹ, P.14, Q.3
– Sự kiện
Sự kiện Mô tả
SelectedIndexChanged Xảy ra khi chỉ số thay đổi
– Các phương thức:
Phương thức Mô tả
Items.Add(ListItem list) Thêm phần tử vào danh ListBox
Items.RemoveAt(int index) Xóa phần tử theo chỉ số
Items.Clear() Xóa tất cả phần tử
– Vi dụ 1:
Tâp tin: ListBox.aspx
Danh sách quyền:
Administrator Power User
User
Tâp tin: ListBox.aspx.cs
protected void Button1_Click(object sender, EventArgs e){
foreach (ListItem item in ListBox1.Items){
if (item.Selected){
Response.Write("Quyen:"+ item.Text);
Response.Write("Gia tri:" + item.Value);
}
}
}
– Bài tập:Xây dựng giao diện sau
Khi nhấn nút >> thì di chuyển 1 phần tử đã chọn từ ListBox trái sang ListBox phải và
khi nhấn nút 264 Lê Văn Sỹ, P.14, Q.3
Mở rộng chọn di chuyển nhiều phần tử.
7. CheckBox
Tên thuộc tính Mô tả
ID Tên điều khiển
Checked Chỉ định trạng thái chọn hay không chọn
-True:Chọn
-False:Không chọn
Text Nội dung hiển thị
TextAlign Canh lề nội dung hiển thị
- Left:Bên trái CheckBox
- Right:Bên phải CheckBox
8. RadioButton
Tên thuộc tính Mô tả
ID Tên điều khiển
Checked Chỉ định trạng thái chọn hay không chọn
-True:Chọn
-False:Không chọn
Text Nội dung hiển thị
TextAlign Canh lề nội dung hiển thị
- Left:Bên trái CheckBox
- Right:Bên phải CheckBox
GroupName Chỉ định nhóm cho RadioButton
--9--
264 Lê Văn Sỹ, P.14, Q.3
9. HiddenField
Tên thuộc tính Mô tả
ID Tên điều khiển
Value Giá trị
10. File Upload
Tên thuộc tính Mô tả
ID Tên điều khiển
Enable Gán thuộc tín vô hiệu hóa điều khiển
FileName Lấy tên file được upload
HasFile Trả về giá trị =true nếu đã chọn File upload.Ngược lại =False
FileBytes Lấy nội dung đã Upload như 1 mảng byte
FileContent Lấy nội dung của file đã được upload theo dòng dữ liệu
Tên phương thức , Sự kiện Mô tả
Focus() Đặt con trỏ đến điều khiển
SaveAs(string filename) Lưu File Upload vào hệ thống
Kích thước mặc định và 4096 byte
11. Master Page
Giới thiệu:
• Master tạo bố cục cho 1 trang web (banner,footer,left,right).Tập tin master có đuôi mở
rộng .Master
• Master có thể lồng nhiều cấp.
--10--
264 Lê Văn Sỹ, P.14, Q.3
--11--
264 Lê Văn Sỹ, P.14, Q.3
--12--
264 Lê Văn Sỹ, P.14, Q.3
• Master Page :
– asp:ContentPlaceHolder :phần nội dung thay đổi
– Các trang sử dụng Master phải khai báo :MasterPageFile =“Tên_MasterPage’’ ở phần
đấu trang()
– Khái báo thuộc tính trong thẻ asp:content là ContentPlaceHolderID=“ID PlaceHoler”
trong trang MasterPage.
--13--
264 Lê Văn Sỹ, P.14, Q.3
Bài tập: Tạo trang master page theo cấu trúc sau:
12. Calendar
Tên thuộc tính-Phương thức Mô tả
SelectedDate Lấy hoặc gán giá trị ngày chọn
SelectionChanged() Sự kiện xảy ra khi thay đổi chọn ngày
--14--
264 Lê Văn Sỹ, P.14, Q.3
Ví dụ: Chọn 1 ngày trên Calendar hiện ngày đã chọn lên TextBox.
– Ví dụ:
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
TextBox1.Text = Calendar1.SelectedDate.ToString();
}
Gợi ý :
Hiển thị theo định dạng ngày/tháng/năm
ToString(‘’dd/MM/yyyy’’)
Bài :Nhấn vào Image hiện Calendar .Khi chọn ngày trên điều khiển Calendar sẽ hiện
ngày lên TextBox.
Gợi ý:
function displayCalendar()
--15--
264 Lê Văn Sỹ, P.14, Q.3
{
var obj =document.getElementById(‘divCalendar'); obj.style.display =
'block';
}
13. MultiView
– Giới thiệu:
• Điều khiển Multiview sử dụng để ẩn hiện các phần của 1 trang web.Có thể sử dụng
điều khiển này để tạo TabPage.
• MultiView chứa nhiều điều khiển View.
--16--
264 Lê Văn Sỹ, P.14, Q.3
Tên thuộc tính-Phương thức Mô tả
ActiveViewIndex Chỉ định điều khiển View hiển thị thông qua chỉ số
SetActiveView(View view) Gán điều khiển View hiển thị
View GetActiveView() Lấy thông tin điều khiển view hiển thị
14. Wizard
– Giới thiệu:
• Điều khiển Wizard sử dụng chia giao diện lớn thành từng phần.
• Điều khiển Wizard chứa nhiều WizardStep.
Tên thuộc tính-Phương thức Mô tả
ActiveStepIndex Gán hoặc lấy chỉ số bước hiển thị
FinishButtonClick Sự kiện xảy ra khi nhấn nút Finish
NextButtonClick Sự kiện xảy ra khi nhấn nút Next
PreviousButtonClick Sự kiện xảy ra khi nhấn nút Previous
--17--
264 Lê Văn Sỹ, P.14, Q.3
15. Adrotator
Tên thuộc tính Mô tả
AdvertisementFile Chỉ định đường dẫn đến tập tin XML chứa danh sách ảnh quảng cáo
AlternateTextField Chỉ định đến tên trường để hiển thị
DataMember Chỉ định phần tử cơ sở dữ liệu
DataSource Chỉ định đến dữ liệu
~/company.png
60
190
http://www.abc.com
abc 80
Topic1
…
16. Adrotator:Cấu trúc tập tin XML
Tên thuộc tính Mô tả
ImageURL URL của hình ảnh trình bày
Height Chiều cao hình ảnh theo pixels
Width Chiều rộng hình ảnh theo pixels
NavigateURL URL sẽ chuyển đến khi nhấn vào hình ảnh
AlternateText Đoạn văn bản trình bày khi hình ảnh không hiển thị được
Keyword Chỉ định loại quảng cáo để điều khiển lọc danh sách quảng cáo dựa trên loại
Impressions Chỉ định giá trị mức độ hiển thị của quảng cáo
--18--
