intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE

Bài giảng Thiết kế và lập trình Website: Chương 5 - ThS. Dương Thành Phết

Chia sẻ: Ngocnga Ngocnga | Ngày: | Loại File: PDF | Số trang:150

114
lượt xem
11
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Chương 5 của bài giảng Thiết kế và lập trình Website giúp người học có những hiểu biết về các điều khiển trong ASP.Net. Chương này trình bày những nội dung cụ thể như: Tổng quan về các controls, HTML Control, Web Server Controls, Validation Controls, Web User controls, Master Pages, Data Controls. Mời các bạn tham khảo.

Chủ đề:
Lưu

Nội dung Text: Bài giảng Thiết kế và lập trình Website: Chương 5 - ThS. Dương Thành Phết

  1. KHOA CAO ĐẲNG THỰC HÀNH THIẾT KẾ & LẬP TRÌNH WEBSITE (Chuyên ngành: Đồ Họa Đa Truyền Thông) Chương 5: CÁC ĐIỀU KHIỂN TRONG ASP.NET 1 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  2. NỘI DUNG 1. Tổng quan về các controls 2. HTML Control 3. Web Server Controls 4. Validation Controls 5. Web User controls 6. Master Pages 7. Data Controls 2 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  3. 1. TỔNG QUAN VỀ CÁC CONTROLS 3 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  4. 2. HTML CONTROL  HTML Control được tạo ra từ các tag HTML tĩnh thường được sử dụng lập trình ở phía client Khi sử dụng HTML Control để lập trình phía Server ta gán thuộc tính runat="Server" cho HTML Control đó được gọi là HTML Server Control. 4 HTML Control trên Toolbox © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  5. 2. HTML CONTROL Để chuyển các HTML Control thành các HTML Server Control, ta chọn Run As Server Control từ menu ngữ cảnh hoặc gán thuộc tính runat=“Server” cho HTML Control 5 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  6. 3. WEB SERVER CONTROL Những lý do nên sử dụng Standard Web Control: Đơn giản, tương tự như Windows Form Controls. Đồng nhất: Có các thuộc tính giống nhau  dễ tìm hiểu và sử dụng. Hiệu quả: Tự động phát sinh ra các tag HTML theo từng loại Browser 6 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  7. 3. WEB SERVER CONTROL Thuộc tính Ý nghĩa (ID) Tên của điều khiển. Tên của điều khiển là duy nhất. AccessKey Ký tự để di chuyển nhanh đến điều khiển - phím nóng. Attributes Tập hợp các thuộc tính của điều khiển HTML BackColor Màu nền của điều khiển. BorderColor Màu đường viền của điều khiển. BorderStyle Kiểu đường viền của điều khiển. BorderWidth Độ rộng của đường viền. CssClass Hình thức hiển thị của điều khiển qua tên CSS. Enabled Điều khiển có được hiển thị hay không. Mặc định là True. Font Font hiển thị cho điều khiển ForeColor Màu chữ hiển thị trên điều khiển Height 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 Độ rộng của điều khiển. 7 Bảng liệt kê các thuộc tính chung của các Web control © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  8. 3. WEB SERVER CONTROL 3.1. Label Được sử dụng để hiển thị và trình bày nội dung văn bản, chấp nhận hiển thị nội dung với các tag HTML. Ví dụ: lblA.Text = "Đây là chuỗi văn bản thường"; lblB.Text ="Còn đây là chuỗi được in đậm"; 8 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  9. 3. WEB SERVER CONTROL 3.2 TextBox Được dùng để nhập và hiển thị dữ liệu văn bản. Các thuộc tính: Text: Nội dung chứa trong Textbox TextMode: SingleLine: Hiển thị và nhập liệu 1 dòng MultiLine: Hiển thị và nhập liệu nhiều dòng Password: Hiển thị dấu * thay cho các ký tự. Rows: Số dòng hiển thị nếu textbox có nhiều dòng. Maxlength: Số ký tự tối đa được nhập Wrap: Văn bản có được phép tự động xuống dòng khi độ rộng của textbox không đủ. 9 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  10. 3. WEB SERVER CONTROL 3.3. Image Được dùng để hiển thị hình ảnh lên trang Web. Các thuộc tính: ImageURL: Đường dẫn tập tin hình ảnh. AlternateText: Chuỗi văn bản sẽ hiển thị chú thích. ImageAlign: Vị trí hiển thị giữa hình và nội dung. NotSet,Left, Middle,TextTop,Right 10 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  11. 3. WEB SERVER CONTROL 3.4. Button, ImageButton, LinkButton Mặc định là các nút Submit Button, khi được nhấn vào sẽ PostBack về Server. Các thuộc tính: - Text: Chuỗi văn bản hiển thị trên điều khiển. - CommandName: Tên lệnh được sử dụng trong sự kiện Command. - Ngoài những thuộc tính trên, điều khiển ImageButton còn có các thuộc tính ImageURL, ImageAlign và AlternateText như điều khiển Image. 11 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  12. 3. WEB SERVER CONTROL Ví dụ: Tạo trang web với các điều khiển: Label, Textbox, Button thực hiện chức năng tính toán như sau: Xử lý sự kiện: protected void btTinhtien_Click(object sender, EventArgs e) { int soluong=int.Parse(txtSoluong.Text ); int dongia=int.Parse(txtDongia.Text ); int Thanhtien=soluong * dongia; txtThanhtien.Text = Thanhtien.ToString(); } 12 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  13. 3. WEB SERVER CONTROL 3.5. HyperLink Được sử dụng để tạo ra các liên kết siêu văn bản. Các thuộc tính: ImageURL: Tập tin ảnh hiển thị trên điều khiển. Text: Nhãn văn bản hiển thị trên điều khiển. NavigateUrl: Đường dẫn cần liên kết đến. Target: Xác định cửa sổ sẽ hiển thị cho mối liên kết _blank: Hiển thị trang liên kết ở cửa sổ mới. _self: Hiển thị trang liên kết tại cửa sổ chứa liên kết _parent: Hiển thị trang liên kết ở frame cha. 13 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  14. 3. WEB SERVER CONTROL Ví dụ: Tạo trang web gồm 3 điều khiển Hyperlink 14 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  15. 3. WEB SERVER CONTROL 3.6. Listbox và DropdownList Là điều khiển hiển thị danh sách lựa chọn, có thể chọn một hoặc nhiều. Các thuộc tính: + AutoPostBack: Có tự động PostBack về Server khi chỉ số của mục chọn bị thay đổi. Mặc định False + Items: Tập chứa các mục chọn của điều khiển. thêm vào mục chọn qua thuộc tính ListItem Collection Editor. + Rows: Chiều cao của ListBox theo số dòng. + SelectionMode: Cách chọn các mục trong ListBox. Single: Chỉ chọn một mục có trong danh sách. Multiple: Cho phép chọn nhiều mục. 15 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  16. 3. WEB SERVER CONTROL Tập hợp Items Add: Thêm mục mới vào cuối danh sách Items.Add(); Insert: Thêm mục mới vào danh sách tại một vị trí Items.Insert(,); Count: Trả về số mục (Item) có trong danh sách. Items.Count; Remove: Xóa đối tượng Item tại ra khỏi danh sách. Items.Remove(); RemoveAt: Xóa item tại vị trí index khỏi danh sách. Items.RemoveAt(); Clear: Xóa tất cả Item có trong danh sách. Items.Clear(); 16 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  17. 3. WEB SERVER CONTROL Xử lý mục chọn Thuộc tính Selected của đối tượng Items[i] để kiểm tra xem mục thứ i đó có được chọn hay không. SelectedIndex: Cho biết chỉ số của mục được chọn. Trong trường hợp chọn nhiều mục SelectedIndex sẽ trả về chỉ số mục chọn đầu tiên. SelectedItem: Cho biết mục được chọn. Trong trường hợp chọn nhiều mục, SelectedItem sẽ trả về mục chọn đầu tiên. SelectedValue: Cho biết giá trị của mục được chọn. Trong trường hợp chọn nhiều mục, SelectedValue sẽ trả về giá trị mục chọn đầu tiên. 17 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  18. 3. WEB SERVER CONTROL Ví dụ: Tạo trang Web gồm 1 listbox, 2 label , 1 Button khi click nút chọn sẽ hiện tên các địa danh được chọn. 18 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
  19. 3. WEB SERVER CONTROL Xử lý sự kiện: protected void Page_Load(. . . ) { if (!IsPostBack) { lstDiadanh.Items.Add("Vịnh Hạ Long"); lstDiadanh.Items.Add("Phan Thiết - Mũi Né"); lstDiadanh.Items.Add("Nha Trang"); ……. int n = lstDiadanh.Items.Count; lbSoDD.Text = n.ToString(); } } protected void btChon_Click(. . .) { lbDiadanh.Text = ""; for (int i = 0; i
  20. 3. WEB SERVER CONTROL 3.7. Checkbox, RadioButton Các thuộc tính Checked: Trạng thái của mục chọn (chọn hay không) TextAlign: Vị trí của điều khiển so với chuỗi văn bản. AutoPostBack: Có được tự động PostBack về Server khi các mục chọn bị thay đổi, mặc định là False. GroupName (RadioButton): Tên nhóm, thuộc tính này được sử dụng để nhóm các điều khiển RadioButton lại thành 1 nhóm. 20 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
2=>2