Bài giảng ASP.Net - Chương 3: Các điều khiển Web Server

1Chương 3 Các ðiều Khiển WebServer 1. Tổng quan về ASP.Net Server Control 2. HTML Control 3. WebSever Control 4. Các ñiều khiển khác 5. ðối tượng ViewState Written by: Dương Thành Phết 22. 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. Written by: Dương Thành Phết HTML Control trên Toolbox 32. 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 Written by: Dương Thành Phết 43. 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 Written by: Dương Thành Phết 53. ASP.NET Webserver Control Bảng liệt kê các thuộc tính chung của các Web control Written by: Dương Thành Phết ðộ rộng của ñiều khiển.Width Dòng chữ sẽ hiển thị khi rê chuột vào ñiều khiển.ToolTip Chiều cao của ñiều khiểnHeight Màu chữ hiển thị trên ñiều khiểnForeColor Font hiển thị cho ñiều khiểnFont ðiều khiển có ñược hiển thị hay không. Mặc ñịnh là True.Enabled Hình thức hiển thị của ñiều khiển qua tên CSS.CssClass ðộ rộng của ñường viền.BorderWidth Kiểu ñường viền của ñiều khiển.BorderStyle Màu ñường viền của ñiều khiển.BorderColor Màu nền của ñiều khiển.BackColor Tập hợp các thuộc tính của ñiều khiển HTMLAttributes Ký tự ñể di chuyển nhanh ñến ñiều khiển - phím nóng.AccessKey Tên của ñiều khiển. Tên của ñiều khiển là duy nhất.(ID) Ý nghĩaThuộc tính 63. ASP.NET Webserver 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"; Written by: Dương Thành Phết 73. ASP.NET Webserver 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 ñủ. Written by: Dương Thành Phết 83. ASP.NET Webserver 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 by: Dương Thành Phết 93. ASP.NET Webserver 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. by: Dương Thành Phết 10 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: by: Dương Thành Phết 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(); } 11 3. ASP.NET Webserver 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. by: Dương Thành Phết 12 Ví dụ: Tạo trang web gồm 3 ñiều khiển Hyperlink by: Dương Thành Phết 13 3. ASP.NET Webserver 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. by: Dương Thành Phết 14 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(); by: Dương Thành Phết 15 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. by: Dương Thành Phết 16 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. by: Dương Thành Phết 17 by: Dương Thành Phết 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.Count - 1; i ++) { if (lstDiadanh.Items[i].Selected) lbDiadanh.Text += "" + lstDiadanh.Items[i].Value; } } 18 3. ASP.NET Webserver 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. by: Dương Thành Phết 19 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ữ by: Dương Thành Phết 20 3. ASP.NET Webserver Control 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 CheckbocList) vào Form  Chọn Edit Items by: Dương Thành Phết 21 by: Dương Thành Phết 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. 22 Ví dụ: Tạo trang web gồm Nhóm RadioButton Thu nhập by: Dương Thành Phết 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 23 Ví dụ: Tạo trang web khi click nút ðăng ký thì hiện thị các thông tin ñược chọn. by: Dương Thành Phết 24 4. Các ñiều khiển khác 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). by: Dương Thành Phết 25 by: Dương Thành Phết Ví dụ: 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"; } Khi thiết kế. Xem source: ðây là chuỗi ký tự trong label ðây là chuỗi ký tự trong Literial 26 4. Các ñiều khiển khác 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). by: Dương Thành Phết 27 by: Dương Thành Phết 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 28 by: Dương Thành Phết b. Sự kiện AdCreated: Xảy ra khi ñiều khiển tạo ra các quảng cáo 29 by: Dương Thành Phết 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 30 by: Dương Thành Phết 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 31 by: Dương Thành Phết 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 32 by: Dương Thành Phết 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 33 4. Các ñiều khiển khác 4.3. ðiều khiển Calendar Dùng ñể hiển thị và cập nhật dữ liệu kiểu ngày by: Dương Thành Phết 34 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. SeleltedDayStyle: 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 by: Dương Thành Phết 35 b. 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 by: Dương Thành Phết 36 Ví dụ: Tạo Calendard trên trang web by: Dương Thành Phết Bước 1: Tạo Calendard vào trang Bước 2: Chọn mẫu ñịnh dạng: Click phải /Auto Format 37 by: Dương Thành Phết 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"); } 38 4. Các ñiều khiển khác 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. by: Dương Thành Phết Trả về giá trị true khi File ñược UploadHasFile Lấy tên file ñược UploadFileName Lấy nội dung của file ñã ñược upload theo dòng dữ liệuFileContent Lấy nội dung file ñã ñược upload như một mảng Byte.FileBytes Vô hiệu hoá ñiều khiển FileUpload.Enable Ý nghĩaThuộc tính 39 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. by: Dương Thành Phết 40 Ví dụ: Tạo ñiều khiển File Upload by: Dương Thành Phết 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" ; } 41 4. Các ñiều khiển khác 4.5. ðiều khiển Panel và PlaceHolder  Sử dùng ñể chứa các ñiều khiển khác.  Thuộc tính Visible= True thì 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. by: Dương Thành Phết 42 by: Dương Thành Phết 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 ñặt 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. 43 Ví dụ: Tạo trang sử dụng Panel by: Dương Thành Phết Thiết kế: 44 by: Dương Thành Phết 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; } 45 4. Các ñiều khiển khác 4.5. ð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. by: Dương Thành Phết 46 by: Dương Thành Phết 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 chọn 47 Ví dụ: Tạo trang sử dụng MultiView by: Dương Thành Phết 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 48 by: Dương Thành Phết 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) 49 by: Dương Thành Phết Bổ sung nội dung vào các view tương ứng 50 by: Dương Thành Phết 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; } } 51 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 by: Dương Thành Phết 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"); 52  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 by: Dương Thành Phết 53 Ví dụ: by: Dương Thành Phết Xử lý sự kiện: protected void btDem_Click(object sender, EventArgs e) { lbThongbao.Text = Convert.ToString(int.Parse(lbThongbao.Text)+1); } 54 Xem Source by: Dương Thành Phết