›
›

Bài giảng Lập trình web ASP.Net với C# - Chương 3: Các điều khiển Webserver - Phạm Đào Minh Vũ

pdf 57 trang ngocly 3060
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình web ASP.Net với C# - Chương 3: Các điều khiển Webserver - Phạm Đào Minh Vũ", để 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:

  • pdfbai_giang_lap_trinh_web_asp_net_voi_c_chuong_3_cac_dieu_khie.pdf

Nội dung text: Bài giảng Lập trình web ASP.Net với C# - Chương 3: Các điều khiển Webserver - Phạm Đào Minh Vũ

  1. LẬP TRÌNH WEB ASP.NET VỚI C# Giảng Viên: Th.S Phạm Đào Minh Vũ Email: phamdaominhvu@yahoo.com 1
  2. Chương 3 Các Điều Khiển WebServer 3.1. Tổng quan về ASP.Net Server Controls 3.2. HTML Server Control 3.3. Web Server Controls 3.4. Các điều khiển khác 3.5. Đối tượng ViewState 87 Khoa CNTT Trường CĐ CNTT TP.HCM
  3. 3.1.1 ASP.NET Page  Trang ASP.NET là thành phần chính của giao diện, nơi chứa các điều khiển, thể hiện nội dung của trang web đến người dùng Xẩy ra đầu tiên khi được yêu cầu Chứa các xử lý và giá trị khởi động ban đầu Khi trang web chuẩn bị trả về client Khi thoát trang web 88 Chuổi sự kiện của đối tượng Page Khoa CNTT Trường CĐ CNTT TP.HCM
  4. 3.1.2. Các thuộc tính  IsPostBack : Thuộc tính này cho biết trạng thái của trang web là được load lần đầu tiên hay là lần thứ n. Thường được sử dụng trong Page_Load() để kiểm tra trạng thái của trang web  SmartNavigation:  True: Giữ nguyên vị trí người dùng đang duyệt trang  False: Hiển thị lại phần đầu của trang web 89 Khoa CNTT Trường CĐ CNTT TP.HCM
  5. 3.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. 90 HTML Control trên Toolbox Khoa CNTT Trường CĐ CNTT TP.HCM
  6. Để 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 91 Khoa CNTT Trường CĐ CNTT TP.HCM
  7. 3.3. ASP.NET Webserver 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 92 Khoa CNTT Trường CĐ CNTT TP.HCM
  8. 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. 93 Bảng liệt kê các thuộc tính chung của các Web control Khoa CNTT Trường CĐ CNTT TP.HCM
  9. 3.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 "; 94 Khoa CNTT Trường CĐ CNTT TP.HCM
  10. 3.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 đủ. 95 Khoa CNTT Trường CĐ CNTT TP.HCM
  11. 96 Khoa CNTT Trường CĐ CNTT TP.HCM
  12. 3.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, . khi hình ảnh không tồn tại (không load được)  ImageAlign: Vị trí hiển thị giữa hình và nội dung. . NotSet . Left . Middle . TextTop . Right 97 Khoa CNTT Trường CĐ CNTT TP.HCM
  13. Not set Right TextTop Middle Left 98 Khoa CNTT Trường CĐ CNTT TP.HCM
  14. 3.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. 99 Khoa CNTT Trường CĐ CNTT TP.HCM
  15. 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(); } 100 Khoa CNTT Trường CĐ CNTT TP.HCM
  16. 3.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. 101 Khoa CNTT Trường CĐ CNTT TP.HCM
  17. Ví dụ: Tạo trang web gồm 3 điều khiển Hyperlink 102 Khoa CNTT Trường CĐ CNTT TP.HCM
  18. 3.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. 103 Khoa CNTT Trường CĐ CNTT TP.HCM
  19. 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(); 104 Khoa CNTT Trường CĐ CNTT TP.HCM
  20. 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. 105 Khoa CNTT Trường CĐ CNTT TP.HCM
  21. 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. 106 Khoa CNTT Trường CĐ CNTT TP.HCM
  22. 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"); lstDiadanh.Items.Add("Đà Lạt"); lstDiadanh.Items.Add("Phú Quốc"); lstDiadanh.Items.Add("Huế - Hội An"); int n = lstDiadanh.Items.Count; lbSoDD.Text = n.ToString(); } } protected void btChon_Click(. . .) { lbDiadanh.Text = ""; for (int i = 0; i " + lstDiadanh.Items[i].Value; } 107 } Khoa CNTT Trường CĐ CNTT TP.HCM
  23. 3.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. 108 Khoa CNTT Trường CĐ CNTT TP.HCM
  24. Ví dụ: Tạo trang web gồm Nhóm các RadioButton Giới tính, Thu nhập, Nhóm Checkbox Ngoại ngữ 109 Khoa CNTT Trường CĐ CNTT TP.HCM
  25. 3.3.8. CheckBoxList, RadioButtonList . Dùng để tạo ra một nhóm các CheckBox/Radio Button, Là điều khiển danh sách nên có thuộc tính Items chứa tập hợp các mục chọn như ListBox/DropDownList. . Các thao tác trên tập hợp Items, xử lý mục chọn cũng tương tự như ListBox/DropDownList. Tạo mới: Kéo thả RadioButtonList (Hoặc CheckboxList) vào Form Chọn Edit Items 110 Khoa CNTT Trường CĐ CNTT TP.HCM
  26. Các thuộc tính RepeatColumns: Số cột hiển thị. RepeatDirection: Hình thức hiển thị . Vertical: Theo chiều dọc . Horizontal: Theo chiều ngang AutoPostBack: Có được phép tự động PostBack về Server khi các mục chọn của điều khiển bị thay đổi. Mặc định là False. 111 Khoa CNTT Trường CĐ CNTT TP.HCM
  27. Ví dụ: Tạo trang web gồm Nhóm RadioButton Thu nhập Xử lý sự kiện: Private Sub rblThu_nhap_SelectedIndexChanged( ) lblThu_nhap.Text = "Bạn chọn thu nhập: " + rblThu_nhap.SelectedItem.Text; End Sub 112 Khoa CNTT Trường CĐ CNTT TP.HCM
  28. Ví dụ: Tạo trang web hiển thị các thông tin. 113 Khoa CNTT Trường CĐ CNTT TP.HCM
  29. 3.4. Các điều khiển khác 3.4.1. Điều khiển Literal Tương tự như điều khiển Label, Literal được sử dụng để hiển thị chuỗi văn bản trên trang Web. Điểm khác biệt là khi thi hành, Literal không tạo thêm tag Html, còn Label sẽ tạo ra tag span (được sử dụng để lập trình ở phía client). 114 Khoa CNTT Trường CĐ CNTT TP.HCM
  30. Ví dụ: Khi thiết kế. Lệnh xử lý: protected void Page_Load(object sender, EventArgs e) { Label1.Text=" Đây là chuỗi ký tự trong label "; Literal1.Text = " Đây là chuỗi ký tự trong Literial "; } Xem source: Đây là chuỗi ký tự trong label Đây là chuỗi ký tự trong Literial 115 Khoa CNTT Trường CĐ CNTT TP.HCM
  31. 3.4.2. Điều khiển AdRotator Được dùng để tạo ra các ảnh quảng cáo (tại 1 vùng sẽ có nhiều ảnh, xuất hiện theo tuần xuất), nó tự động thay đổi các hình ảnh mỗi khi có yêu cầu (PostBack về server). Sự kiện AdCreated: Xảy ra khi điều khiển tạo ra các quảng cáo 116 Khoa CNTT Trường CĐ CNTT TP.HCM
  32. Thuộc tính AdvertisementFile: Tên tập tin dữ liệu (dưới dạng xml) cho điều khiển. Cú pháp của tập tin Advertisement (*.xml) Đường dẫn tập tin hình ảnh Đường dẫn liên kết Chuỗi văn bản Tooltip Từ khóa dùng để lọc hình ảnh Tần suất hiển thị của ảnh Lưu ý: Các giá trị có phân biệt chữ Hoa chữ thường 117 Khoa CNTT Trường CĐ CNTT TP.HCM
  33. Ví dụ: Tạo mẫu Quangcao sử dụng điều khiển AdRotator Bước 1. Thiết kế giao diện Bước 2. Tạo tập tin dữ liệu: Quangcao.xml Sử dụng chức năng Add New Item từ thực đơn ngữ cảnh Chọn XML File trong hộp thoại Add New Item 118 Khoa CNTT Trường CĐ CNTT TP.HCM
  34. Nhập vào nội dung cho tập tin Quangcao.xml Pictures\Baihatviet.gif Web Nhạc bài hát việt Music 10 119 Khoa CNTT Trường CĐ CNTT TP.HCM
  35. Chuyển màn hình qua trang Data, nhập liệu trực tiếp: Click phải màn hình đang code chọn View Data Grid 120 Khoa CNTT Trường CĐ CNTT TP.HCM
  36. Bước 3. Thiết lập thuộc tính cho điều khiển adQuangcao AdvertisementFile: Quangcao.xml Target: _blank KeywordFilter: Không thiết lập (Hiển thị tất cả ảnh) Bước 4. Thi hành ứng dụng 121 Khoa CNTT Trường CĐ CNTT TP.HCM
  37. 3.4.3. Điều khiển Calendar Dùng để hiển thị và cập nhật dữ liệu kiểu ngày 122 Khoa CNTT Trường CĐ CNTT TP.HCM
  38. Thuộc tính DayHeaderStyle: Tiêu đề của các ngày trong tuần DayStyle: Các ngày trong điều khiển. NextPrevStyle: Tháng trước/sau của tháng đang chọn. SelectedDayStyle: Ngày đang được chọn. TitleStyle: Tiêu đề của tháng được chọn TodayDayStyle: Ngày hiện hành (trên server). WeekendDayStyle: Các ngày cuối tuần (thứ 7, chủ nhật) OtherMonthDayStyle: Các ngày không nằm trong tháng hiện tại. SelectedDate: Giá trị ngày được chọn trên điều khiển Sự kiện SelectionChanged: Sự kiện này xảy ra khi chọn một ngày VisibleMonthChanged: Xự kiện xảy ra khi chọn một tháng 123 Khoa CNTT Trường CĐ CNTT TP.HCM
  39. Ví dụ: Tạo Calendar trên trang web Bước 1: Tạo Calendar vào trang Bước 2: Chọn mẫu định dạng: Click phải /Auto Format 124 Khoa CNTT Trường CĐ CNTT TP.HCM
  40. Xử lý sự kiện: protected void Page_Load(object sender, EventArgs e){ lbNgay.Text = "Hôm nay ngày " + DateTime.Today.ToString ("dd/MM/yyyy"); } protected void Calendar1_SelectionChanged1( . . . .) { lbThongbao.Text ="Bạn đang chọn " + Calendar1.SelectedDate.ToString("dd/MM/yyyy"); } 125 Khoa CNTT Trường CĐ CNTT TP.HCM
  41. 3.4.4. Điều khiển File Upload. Sử dụng Upload file từ chính ứng dụng Web. File sau khi Upload có thể lưu trữ ở 1 nơi nào đó trên webserver. Thuộc tính Ý nghĩa Enable Vô hiệu hoá điều khiển FileUpload. FileBytes Lấy nội dung file đã được upload như một mảng Byte. FileContent Lấy nội dung của file đã được upload theo dòng dữ liệu FileName Lấy tên file được Upload HasFile Trả về giá trị true khi File được Upload 126 Khoa CNTT Trường CĐ CNTT TP.HCM
  42. Các phương thức: Focus: Chuyển con trỏ đến điều khiển FileUpload. SaveAs: Cho phép lưu file được upload lên hệ thống. 127 Khoa CNTT Trường CĐ CNTT TP.HCM
  43. Ví dụ: Tạo điều khiển File Upload Thiết kế và tạo FileUpload vào trang Xử lý sự kiện: protected void Button1_Click(object sender, EventArgs e) { string sTenfile ; //Tách lấy tên tập tin sTenfile = FileUpload1.FileName; //Thực hiện chép tập tin lên thư mục Upload FileUpload1.SaveAs(MapPath("~/Upload/" + sTenfile)); lbThongbao.Text = "Đã upload thành công" ; } 128 Khoa CNTT Trường CĐ CNTT TP.HCM
  44. 3.4.5. Điều khiển Panel và PlaceHolder . Dùng để chứa các điều khiển khác. . Thuộc tính Visible=True : các điều khiển chứa bên trong sẽ được hiển thị và ngược lại. Tuy nhiên, điều khiển Panel cho phép chúng ta kéo những điều khiển vào bên trong nó lúc thiết kế, còn điều khiển PlaceHolder thì không. 129 Khoa CNTT Trường CĐ CNTT TP.HCM
  45. Thuộc tính .DefaultButton: Định nghĩa button mặc định trong panel (sẽ được thực hiện khi nhấn Enter) .Direction: Thiết lập hướng hiển thị nội dung được đưa ra trong panel: NotSet, LeftToRight, RightToLeft. .GroupingText: Trình bày Panel như 1 Fieldset với một chú giải riêng biệt. .HorizontalAlign: Chỉ ra hướng ngang thể hiện nội dung của panel:Center, Justify, Left, NotSet, Right. .ScrollBars: Hiển thị scrollbars khi nội dung trong panel vượt quá kích thước: Auto, Both, Horizontal, None, Vertical. 130 Khoa CNTT Trường CĐ CNTT TP.HCM
  46. Ví dụ: Tạo trang sử dụng Panel Thiết kế: 131 Khoa CNTT Trường CĐ CNTT TP.HCM
  47. Xử lý sự kiện: protected void Page_Load(object sender, EventArgs e) { for (int i = 1; i < 100; i++) { buletnghenghiep.Items.Add("Nghề "+i.ToString()); } } protected void chkhtsothich_CheckedChanged(. . . .) { if (chksothich.Checked == true) panelsothich.Visible = true; else panelsothich.Visible = false; } protected void chkhtnghenghiep_CheckedChanged(. . . ) { if (chknghenghiep.Checked == true) panelnghenghiep.Visible = true; else panelnghenghiep.Visible = false; 132 } Khoa CNTT Trường CĐ CNTT TP.HCM
  48. 3.4.6. Điều khiển hiển thị các trang – View và MultiView Cho phép ẩn hoặc hiện các phần khác nhau của trang Web, tiện ích khi tạo một TabPage để chia 1 trang web có độ dài lớn thành các phần để hiển thị. Điều khiển MultiView chứa đựng 1 hoặc nhiều điều khiển View. 133 Khoa CNTT Trường CĐ CNTT TP.HCM
  49. Thuộc tính . ActiveViewIndex: Lựa chọn điều khiển View được đưa ra hiển thị bằng chỉ số Index . Views: Cho phép lấy về tập hợp các điều khiển View chứa đựng trong điều khiển MultiView. Phương thức . GetActiveView: Cho phép lấy về thông tin của điều khiển View được lựa chọn. . SetActiveView: Cho phép thiết lập điều khiển View được hiển thị. Sự kiện . ActiveViewChanged: Khi điều khiển View được 134 chọn Khoa CNTT Trường CĐ CNTT TP.HCM
  50. Ví dụ: Tạo trang sử dụng MultiView Thiết kế: Tạo 1 Multiview1 gồm 3 View (View1 View2, View3) Tạo Control Menu1 gồm 3 Tab (Tab1, Tab2, Tab3) Tạo Control Menu vào Form 135 Khoa CNTT Trường CĐ CNTT TP.HCM
  51. Chọn Edit Menu Item Lần lượt khái báo các nhãn (Text) là: Tab 1, Tab 2, Tab 3 và các giá trị (Value) tương ứng là: 0, 1, 2. Thuộc tính Orientation: Horizaltal (Menu hướng ngang) 136 Khoa CNTT Trường CĐ CNTT TP.HCM
  52. Bổ sung nội dung vào các view tương ứng 137 Khoa CNTT Trường CĐ CNTT TP.HCM
  53. Xử lý sự kiện: void Menu1_MenuItemClick(object sender, MenuEventArgs e){ int index = int.Parse(e.Item.Value); MultiView1.ActiveViewIndex = index; } void Page_Load(object sender, EventArgs e){ if (!IsPostBack){ MultiView1.ActiveViewIndex = 0; } } 138 Khoa CNTT Trường CĐ CNTT TP.HCM
  54. 3.5. Đối tượng ViewState . Được cung cấp để lưu lại những thông tin của trang web sau khi web server gởi kết quả về cho Client. . Mặc định, trang web sẽ cho phép sử dụng đối tượng ViewState thông qua thuộc tính EnableViewState = True Gán giá trị cho ViewState: ViewState("Tên trạng thái") = ; Nhận giá trị từ đối tượng ViewState: = ViewState("Tên trạng thái"); 139 Khoa CNTT Trường CĐ CNTT TP.HCM
  55. . Về bản chất, các giá trị trong đối tượng ViewState được lưu trong một điều khiển hidden và các giá trị này đã được mã hóa. . Đối tượng ViewState giúp giảm bớt công sức trong việc lưu trữ và truy xuất các thông tin mà không phải sử dụng nhiều điều khiển hidden 140 Khoa CNTT Trường CĐ CNTT TP.HCM
  56. Ví dụ: Xử lý sự kiện: Private Sub Page_Load( ) Handles MyBase.Load If Not IsPostBack Then ViewState("So_lan") = 0 Else ViewState("So_lan") += 1 End If lblTB.Text = "Số lần Postback: " + CStr(ViewState("So_lan")) End Sub Private Sub butDem_Click() Handles butDem.Click lblTB.Text = "Số lần Postback: " + Convert.ToString(ViewState("So_lan")) End Sub 141 Khoa CNTT Trường CĐ CNTT TP.HCM
  57. Xem Source 142 Khoa CNTT Trường CĐ CNTT TP.HCM