Tài liệu Standard controls_bài 2 ppt

--1-- 264 Lê Văn Sỹ, P.14, Q.3 BÀI 2: STANDARD CONTROLS I. GIỚI THIỆU 1. Label(Nhãn) --2-- 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. --3-- 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. --4-- 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();" --5-- 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. --6-- 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 <asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem Value="1">Việt Nam</asp:ListItem> --7-- 264 Lê Văn Sỹ, P.14, Q.3 <asp:ListItem Value="2">Lào</asp:ListItem> <asp:ListItem Value="3">Campuchia</asp:ListItem> </asp:DropDownList> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" /> 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 --8-- 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: <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple"> <asp:ListItem Value="1">Administrator</asp:ListItem> <asp:ListItem Value="2">Power User</asp:ListItem> <asp:ListItem Value="3">User</asp:ListItem> </asp:ListBox> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> 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 << di chuyển 1 phần tử đã chọn từ ListBox phải sang trái. --9-- 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 --10-- 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. [...].. .26 4 Lê Văn Sỹ, P.14, Q.3 11 26 4 Lê Văn Sỹ, P.14, Q.3 12 26 4 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 26 4 Lê Văn Sỹ, P.14,... nút Next PreviousButtonClick Sự kiện xảy ra khi nhấn nút Previous 17 26 4 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... ContentPlaceHolderID=“ID PlaceHoler” trong trang MasterPage 13 26 4 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 26 4 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... Runat="server> 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 26 4 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... 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 26 4 Lê Văn Sỹ, P.14, Q.3 { var obj =document.getElementById(‘divCalendar'); obj.style.display = 'block'; } . --1-- 26 4 Lê Văn Sỹ, P.14, Q.3 BÀI 2: STANDARD CONTROLS I. GIỚI THIỆU 1. Label(Nhãn) - -2- - 26 4 Lê Văn Sỹ, P.14, Q.3 Tên thuộc. đượ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. --6-- 26 4 Lê Văn Sỹ, P.14, Q.3