›
›

Bài giảng Web server Control - Nguyễn Hà Giang

pptx 50 trang huongle 4040
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Web server Control - Nguyễn Hà Giang", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pptxbai_giang_web_server_control_nguyen_ha_giang.pptx

Nội dung text: Bài giảng Web server Control - Nguyễn Hà Giang

  1. Web Server Control Nguyen Ha Giang
  2. Nội dung 2  HTML server control  Web server control (ASP.NET Web Server Control)  Automatic post back event Nguyen Ha Giang
  3. Mô hình ASP page tương tác 3 Nguyen Ha Giang
  4. HTML control 4  HTML control có thể chuyển thành server control khi bổ sung runat = "server"  Cho phép xử lý trên server side, code có thể tham chiếu đến HTML server control này thông qua ID. Server control Nguyen Ha Giang
  5. HTML control 5  Một số thuận tiện khi chuyển HTML control sang HTML server control  Code có thể tham chiếu đến control này  Server control có thể duy trì được state trong quá trình round trip đến server  Server control có thể tạo sự kiện, code có thể xử lý  Dễ sử dụng đối với người quen sử dụng ASP trước đây Nguyen Ha Giang
  6. HTML control 6 Điều khiển HTML trên thanh công cụ Truy xuất nội dung của textbox Nguyen Ha Giang
  7. HTML control 7  Minh họa dùng HTML control upload file HTML control: input file HTML control: input button HTML span: hiển thị tình trạng upload Nguyen Ha Giang
  8. HTML control 8 Chọn tập tin Sự kiện Click chạy trên server Nguyen Ha Giang
  9. HTML control 9 protected void btnUpload_Click(object sender, EventArgs e) { string file = File1.PostedFile.FileName; // trích tên file trong chuỗi đường dẫn string filename = System.IO.Path.GetFileName(file); // chep tap tin len thu muc "upload" File1.PostedFile.SaveAs(Server.MapPath("Upload\\") + filename); // hiển thị thông báo cho user biết lblThongBao.InnerHtml = " Upload completed! "; } Nguyen Ha Giang
  10. HTML control 10 Browse chọn file trong máy client Upload file lên server Nguyen Ha Giang
  11. Web control 11  Web control  Cung cấp mô hình đối tượng "năng động" và "mạnh mẽ" hơn ◼ Bao gồm thuộc tính style, và những định dạng  Hỗ trợ nhiều sự kiện và gần giống với Windows control  Một số thành phần UI không có trong HTML control như GridView, Calendar và validation.  Web control thông minh tự động phát sinh ra tag HTML tương ứng với trình duyệt! Nguyen Ha Giang
  12. Web control cơ bản 12 Label Button or TextBox , , or CheckBox RadioButton Hyperlink LinkButton chứa tag ImageButton Image ListBox DropDownList CheckBoxList chứa nhiều tags RadioButtonList chứa nhiều tags BulletedList ordered list (numbered) or unordered list (bulleted). Panel Table Nguyen Ha Giang
  13. Web control cơ bản 13  Luôn bắt đầu bởi tiền tố asp: theo sau bởi tên lớp  Nếu không có tag đóng thì kết thúc với />  Mỗi thuộc tính trong tag phải tương ứng với thuộc tính control  Khi user request trang aspx có chứa code như trên thì kết quả code trả về như sau: Nguyen Ha Giang
  14. Web control cơ bản 14  Web control với thuộc tính định dạng  Các thuộc tính chung có trong các control do chúng kế thừa thừa từ lớp cơ sở WebControl  Khi trả về HTML, những thuộc tính được chuyển thành các định dạng theo CSS Hello World Nguyen Ha Giang
  15. Web control 15 Bảng liệt kê thuộc tính chung của web control Thuộc tính Kiểu Ý nghĩa ID String Quy định id của control, là duy nhất BackColor Color Quy định màu nền BorderColor Color Màu đường viền BorderStyle BorderStyle Kiểu đường viền BorderWidth Unit Độ rộng viền CssClass String Tên của CSS được dùng cho control Enable Boolean Quy định điều khiển có được hiển thị hay không Font FontInfo Font cho điều khiển ForeColor Color Màu chữ hiển thị trên control Height Unit Chiều cao ToolTip String Dòng chữ hiển thị khi di chuyển chuột vào Width Unit Độ rộng điều khiển Nguyen Ha Giang
  16. Web control -Label 16  Dùng để hiển thị và trình bày nội dung trên trang web.  Nội dung hiển thị xác định qua thuộc tính Text  Text có thể nhận và hiển thị nội dung với các tag HTML Nguyen Ha Giang
  17. Hyperlink 17  Điều khiển tạo ra liên kết siêu văn bản  Các thuộc tính  ImageUrl: hình hiển thị trên điều khiển  Text: trong trường hợp có Text và ImageUrl thì ImageUrl được hiển thị.  NavigateUrl: đường dẫn liên kết  Target: xác định cửa sổ hiển thị ◼ _blank: hiển thị trong cửa sổ mới ◼ _self: hiển thị tại chính cửa sổ có liên kết ◼ _parent: hiển thị liên kết ở frame cha Nguyen Ha Giang
  18. Hyperlink 18  Minh họa dùng hyperlink HyperLink1.Text = "Trang Web về ASP.NET"; HyperLink1.ImageUrl = @"Image\asp_net.png"; HyperLink1.NavigateUrl = " "; HyperLink1.Target = "_blank"; Nguyen Ha Giang
  19. Textbox 19  Nhập và hiển thị dữ liệu, có nhiều tương đồng với textbox của Window Form  Các thuộc tính  Text: nội dung chứa trong text box  TextMode: chức năng của textbox ◼ SingleLine: hiển thị và nhập trên 1 dòng ◼ MultiLine: trên nhiều dòng văn bản ◼ Password: hiển thị * thay cho ký tự trong text  Rows: nếu TextMode=MultiLine, Rows quy định số dòng  MaxLength: số ký tự tối đa được nhập cho textbox  Wrap: cho phép xuống dòng khi dòng văn bản vượt quá chiều ngang, mặc định Wrap = true  AutoPostBack: quy định cho phép postback về server khi nội dung văn bản thay đổi hay không? Mặc định là không! Nguyen Ha Giang
  20. Textbox 20 Trên 1 dòng Nhiều dòng bc Nguyen Ha Giang
  21. Image 21  Hiển thị hình ảnh lên web  Thuộc tính  ImageUrl: đường dẫn đến tập tin cần hiển thị  AlternateText: chuỗi hiển thị khi ảnh không tồn tại  ImageAlign: canh lề giữa nội dung và hình ảnh ◼ Left: canh lề trái ◼ Middle: canh giữa văn bản & ảnh ◼ Right ◼ TextTop Sinh viên test các thuộc tính này ◼ Nguyen Ha Giang
  22. Button, ImageButton, LinkButton 22  Mặc định cả ba loại điều là submit button, mỗi khi được nhấn sẽ post back về server  Thuộc tính chung  Text: hiển thị chuỗi văn bản trên control  Ngoài những thuộc tính chung thì ImageButton còn có thuộc tính giống Image  ImageUrl  ImageAlign  AlternateText Nguyen Ha Giang
  23. Listbox & DropdownList 23  Hiển thị danh sách lựa chọn mà người dùng có thể chọn một hoặc nhiều (Listbox)  Các mục chọn có thể thêm vào danh sách thông qua mã lệnh hoặc ở cửa sổ thuộc tính  Các thuộc tính  AutoPostBack: khi mục chọn thay đổi có cho phép post back không  Items: danh sách mục chọn  Rows: quy định số item được hiển thị  SelectionMode: cách thức lựa chọn ◼ Single: chỉ chọn một ◼ Multiple: cho phép nhiều chọn lựa Nguyen Ha Giang
  24. Listbox & DropdownList 24 Ngôn ngữ lập trình Chuyên ngành Nguyen Ha Giang
  25. Listbox & DropdownList 25  Add item vào listbox trong màn hình thiết kế Màn hình thêm item Cách khác chọn thuộc tính Items trong cửa sổ Properties, kích vào “Collection” Nguyen Ha Giang
  26. Listbox & DropdownList 26  Add item vào listbox trong code // thêm item vào listbox ListBox1.Items.Add("Java"); ListBox1.Items.Add("C#"); ListBox1.Items.Add("VC++"); // chọn item thứ 2 (C#) là mặc định ListBox1.SelectedIndex = 1; Hiển thị mặc định item thứ 2 Nguyen Ha Giang
  27. Listbox & DropdownList 27  Các thuộc tính sau giúp xác định chỉ số, giá trị mục đang chọn, trong trường hợp chọn nhiều ta phải duyệt qua Items kiểm tra thuộc tính Selected xem có được chọn hay không  SelectedIndex: chỉ số item được chọn  SelectedItem: cho biết item được chọn  SelectedValue: giá trị mục chọn  Trường hợp có nhiều item được chọn thì các giá trị trên trả về thông tin liên quan đến item đầu tiên được chọn. Nguyen Ha Giang
  28. Listbox & DropdownList 28  Tập hợp Items: chứa danh sách các item  Add: thêm mục tin mới vào cuối danh sách: Items.Add( )  Insert: thêm mục tinh vào vị trí xác định: Items.Insert( )  Count: trả về số mục item có trong danh sách: Items.Count  Contains: kiểm tra xem 1 item có trong danh sách hay không: Items.Contains( )  Remove: Xóa đối tượng item ra khỏi danh sách  RemoveAt: xóa item tại vị trí index ra khỏi danh sách  Clear: xóa tất cả item trong danh sách Nguyen Ha Giang
  29. Minh họa tổng hợp 29  Form đơn giản cho phép user nhập vào họ tên, rồi add vào listbox. TextBox: txtName Button: btnAdd ListBox: lblDanhSach Nguyen Ha Giang
  30. Minh họa tổng hợp 30  Trích phần code tag table Nhập vào họ tên   Nguyen Ha Giang
  31. Minh họa tổng hợp 31  Phần xử lý button “Thêm” trong file .cs protected void btnAdd_Click(object sender, EventArgs e) { // lấy nội dung user nhập trong textbox string Name = txtName.Text; // tạo listitem có thông tin là họ tên mới này ListItem newItem = new ListItem(Name); // kiểm tra nếu item không có trong listbox thì add // Items.Contains() trả về true nếu tồn tại, if (!lblDanhSach.Items.Contains(newItem)) lblDanhSach.Items.Add(newItem); //chưa có thêm vào } Nguyen Ha Giang
  32. Minh họa tổng hợp 32  Chạy trong browser: F5 (debug) hoặc Ctrl + F5 (without debug) Chỉ thêm những item mới Nguyen Ha Giang
  33. Checkbox & RadioButton 33  Thuộc tính  Checked: cho biết trạng thái được chọn  TextAlign: quy định vị trí hiển thị văn bản với điều khiển  AutoPostBack: quy định xem control có post back khi mục chọn thay đổi, mặc định là không  GroupName: (RadioButton), nhóm các điều khiển radiobutton lại thành một nhóm Nguyen Ha Giang
  34. Checkbox & RadioButton 34  Minh họa Thiết kế form Layout code In browser Nguyen Ha Giang
  35. CheckBoxList - RadioButtonList 35  Dùng để tạo ra nhóm các CheckBox/ListBox  Đây là điều khiển danh sách nên nó cũng có thuộc tính items chứa tập hợp các mục chọn  Các thuộc tính  RepeatColumns: số cột hiển thị  RepeatDirection: hình thức hiển thị ◼ Vertical: chiều dọc ◼ Horizontal: chiều ngang  AutoPostBack: quy định điều khiển tự động postback về server, mặc định là ko được Nguyen Ha Giang
  36. Minh họa CBL/RBL 36  Thêm các item vào radiobuttonlist checkboxlist Chọn edit item trong cửa sổ RadioButtonList Tasks Thêm các item vào, mỗi item là 1 radiobutton Nguyen Ha Giang
  37. Minh họa CBL/RBL 37  Với CheckBoxList cũng làm tương tự: Chọn chức năng CheckBoxList ở bên phải của CheckBoxList Chọc chức năng Edit Items Thêm các item, mỗi item khi thêm vào là 1 checkbox Nguyen Ha Giang
  38. Minh họa CBL/RBL 38  Tạo web form cuối cùng có dạng sau  Phần xử lý:  Khi Submit thì thông tin chuyên ngành và các kỹ năng user chọn sẽ được hiển trị ở Label bên dưới button Nguyen Ha Giang
  39. Minh họa CBL/RBL 39  Hàm xử lý sự kiện click của button Submit protected void Submit_Click(object sender, EventArgs e) { string chuyennganh; // lấy item được chọn trong radiobuttonlist chuyennganh = RadioButtonList1.SelectedItem.ToString(); // xuất thông tin chuyên ngành ra label Label1.Text = string.Format("Chuyên ngành {0} Kỹ năng", chuyennganh); // xác định các item được check trong CheckBoxList foreach(ListItem item in CheckBoxList1.Items) // duyệt qua từng item if (item.Selected) // kiểm tra xem item nào được check { // thêm item được chọn vào label Label1.Text += " "+item.ToString(); } } Nguyen Ha Giang
  40. Minh họa CBL/RBL 40 Nguyen Ha Giang
  41. Liên kết DL với control dạng list 41  Tạo đối tượng kiểu SortedList  SortedList dùng để lưu danh sách item, được sắp theo thuộc tính khóa  Để liên kết đối tượng dữ liệu (đối tượng SortedList) thì dùng thuộc tính DataSource  .DataSource =  Thuộc tính DataTextField tham chiếu đến dl hiển thị  Thuộc tính DataValueField tham chiếu đến dữ liệu mà ta nhận từ SelectedValue hay SelectedItem.Value.  Sử dụng phương thức DataBind để hiển thị dữ liệu khi trang được load Nguyen Ha Giang
  42. Liên kết DL với control dạng list 42  Minh họa tạo web form cho phép user chọn cầu thủ bóng đá ưa thích nhất.  Form như sau Hiển thị cầu thủ được chọn RadioButtonList: chứa danh sách cầu thủ, sẽ được liên kết với đối tượng SortedList Nguyen Ha Giang
  43. Liên kết DL với control dạng list 43  Code khởi tạo web form protected void Page_Load(object sender, EventArgs e) { if ( ! IsPostBack ) // chỉ khởi tạo lần đầu tiên { // tạo danh sách các cấu thủ SortedList list = new SortedList(); list.Add(1, "Cristiano Ronaldo"); list.Add(2, "Lionel Messi"); list.Add(3, "Kaka"); list.Add(4, "Ibrahimovic"); list.Add(5, "Franck Ribéry"); list.Add(6, "Wayne Rooney"); list.Add(7, "Didier Drogba"); list.Add(8, "Emmanuel Adebayor"); list.Add(9, "Samuel Eto\’o"); // đưa danh sách vào RadioButtonList rblDSCauThu.DataSource = list; rblDSCauThu.DataTextField = "Value"; // hiển thị giá trị rblDSCauThu.DataValueField = "Key"; rblDSCauThu.DataBind(); // hiển thị danh sách lên control } } Nguyen Ha Giang
  44. Liên kết DL với control dạng list 44  Xử lý: mỗi khi user chọn một cầu thủ thì thông tin sẽ được hiển thị trên label  Xử lý sự kiện SelectedIndexChanged của RadioButtonList  Để sự kiện này gởi về server tức thì: AutoPostBack = true protected void rblDSCauThu_SelectedIndexChanged(object sender, EventArgs e) { string cauthu = rblDSCauThu.SelectedItem.Text; lblBinhChon.Text = string.Format("Bạn bình chọn cầu thủ {0}", cauthu); } Nguyen Ha Giang
  45. Liên kết DL với control dạng list 45  Kết quả khi chạy Web Form Chọn cầu thủ Hiển thị cầu thủ vừa chọn Nguyen Ha Giang
  46. Automatic Postback 46  HTML server control cung cấp 2 sự kiện: ServerClick, ServerChange  Web control cung cấp đa dạng sự kiện  Click (Button, ImageButton)  TextChanged (TextBox)  CheckChanged (CheckBox, RadioButton)  SelectedIndexChanged (DropDownList, ListBox, CheckBoxList, RadioButtonList)  HTML server control kích hoạt những sự kiện khi postback xảy ra.  Web control có đặc tính có thể phát sinh sự kiện change tức thì bằng cách gọi postback. Gọi là Automatic Postback Nguyen Ha Giang
  47. Automatic Postback 47  Để bắt sự kiện change cho Web control, thiết lập thuộc tính AutoPostBack = true  Control sẽ submit page khi nó dò ra hành động đặc biệt của user (chọn một item khác trong listbox).  Đặc tính này dùng JavaScript Nguyen Ha Giang
  48. Automatic Postback 48 Webform2.aspx TextBox này có xử lý sự kiện txt_TextChanged nhưng không tự động Postback HTML render Hello World Nguyen Ha Giang
  49. Automatic Postback 49 Webform2.aspx TextBox tự động postback //<![CDATA[ var theForm = document.forms['form1']; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } Nguyen Ha Giang
  50. Tóm tắt 50  HTML control  Sử dụng đơn giản, bổ sung thuộc tính runat = server, cho phép chạy trên server  Tính năng không mạnh, chỉ cung cấp một số loại control cơ bản  Web control  Thiết kế để chạy trên server  Hỗ trợ đầy đủ tính năng của control, được viết trên .NET  Hỗ trợ nhiều dạng control chuyên biệt: validation, data  Auto Postback  Cho phép control tự động post back về cho server Nguyen Ha Giang