Lập trình web Asp.net với C# - Chương 3: Các điều khiển webserver

Giảng Viên: Th.S Phạm Đào Minh Vũ Email: [email protected] 1 LẬP TRÌNH WEB ASP.NET VỚI C# 87 Chương 3 Các Điều Khiển WebServer Khoa CNTT Trường CĐ CNTT TP.HCM 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 88 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 Khoa CNTT Trường CĐ CNTT TP.HCM Chuổi sự kiện của đối tượng Page 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 89 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 Khoa CNTT Trường CĐ CNTT TP.HCM 90 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. HTML Control trên Toolbox Khoa CNTT Trường CĐ CNTT TP.HCM 91 Để 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 Khoa CNTT Trường CĐ CNTT TP.HCM 92 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 Khoa CNTT Trường CĐ CNTT TP.HCM 93 Bảng liệt kê các thuộc tính chung của các Web 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. Khoa CNTT Trường CĐ CNTT TP.HCM 94 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"; Khoa CNTT Trường CĐ CNTT TP.HCM 95 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 đủ. Khoa CNTT Trường CĐ CNTT TP.HCM 96 Khoa CNTT Trường CĐ CNTT TP.HCM 97 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 Khoa CNTT Trường CĐ CNTT TP.HCM 98 Khoa CNTT Trường CĐ CNTT TP.HCM Not set Left Middle TextTop Right 99 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. Khoa CNTT Trường CĐ CNTT TP.HCM 100 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: Khoa CNTT Trường CĐ CNTT TP.HCM 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(); } 101 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. Khoa CNTT Trường CĐ CNTT TP.HCM 102 Ví dụ: Tạo trang web gồm 3 điều khiển Hyperlink Khoa CNTT Trường CĐ CNTT TP.HCM 103 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. Khoa CNTT Trường CĐ CNTT TP.HCM 104 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(); Khoa CNTT Trường CĐ CNTT TP.HCM 105 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. Khoa CNTT Trường CĐ CNTT TP.HCM 106 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. Khoa CNTT Trường CĐ CNTT TP.HCM 107 Khoa CNTT Trường CĐ CNTT TP.HCM 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; i ++) { if (lstDiadanh.Items[i].Selected) lbDiadanh.Text += "" + lstDiadanh.Items[i].Value; } } 108 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. Khoa CNTT Trường CĐ CNTT TP.HCM 109 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ữ Khoa CNTT Trường CĐ CNTT TP.HCM 110 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 Khoa CNTT Trường CĐ CNTT TP.HCM 111 Khoa CNTT Trường CĐ CNTT TP.HCM 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. 112 Ví dụ: Tạo trang web gồm Nhóm RadioButton Thu nhập Khoa CNTT Trường CĐ CNTT TP.HCM 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 113 Ví dụ: Tạo trang web hiển thị các thông tin. Khoa CNTT Trường CĐ CNTT TP.HCM 114 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). Khoa CNTT Trường CĐ CNTT TP.HCM 115 Khoa CNTT Trường CĐ CNTT TP.HCM 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 116 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). Khoa CNTT Trường CĐ CNTT TP.HCM Sự kiện AdCreated: Xảy ra khi điều khiển tạo ra các quảng cáo 117 Khoa CNTT Trường CĐ CNTT TP.HCM 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 118 Khoa CNTT Trường CĐ CNTT TP.HCM 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 119 Khoa CNTT Trường CĐ CNTT TP.HCM 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 120 Khoa CNTT Trường CĐ CNTT TP.HCM 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 121 Khoa CNTT Trường CĐ CNTT TP.HCM 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 122 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 Khoa CNTT Trường CĐ CNTT TP.HCM 123 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 Khoa CNTT Trường CĐ CNTT TP.HCM 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 124 Ví dụ: Tạo Calendar trên trang web Khoa CNTT Trường CĐ CNTT TP.HCM Bước 1: Tạo Calendar vào trang Bước 2: Chọn mẫu định dạng: Click phải /Auto Format 125 Khoa CNTT Trường CĐ CNTT TP.HCM 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"); } 126 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. Khoa CNTT Trường CĐ CNTT TP.HCM 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 127 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. Khoa CNTT Trường CĐ CNTT TP.HCM 128 Ví dụ: Tạo điều khiển File Upload Khoa CNTT Trường CĐ CNTT TP.HCM 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" ; } 129 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. Khoa CNTT Trường CĐ CNTT TP.HCM 130 Khoa CNTT Trường CĐ CNTT TP.HCM 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. 131 Ví dụ: Tạo trang sử dụng Panel Khoa CNTT Trường CĐ CNTT TP.HCM Thiết kế: 132 Khoa CNTT Trường CĐ CNTT TP.HCM 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; } 133 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. Khoa CNTT Trường CĐ CNTT TP.HCM 134 Khoa CNTT Trường CĐ CNTT TP.HCM 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 135 Ví dụ: Tạo trang sử dụng MultiView Khoa CNTT Trường CĐ CNTT TP.HCM 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 136 Khoa CNTT Trường CĐ CNTT TP.HCM 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) 137 Khoa CNTT Trường CĐ CNTT TP.HCM Bổ sung nội dung vào các view tương ứng 138 Khoa CNTT Trường CĐ CNTT TP.HCM 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; } } 139 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 Khoa CNTT Trường CĐ CNTT TP.HCM 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"); 140  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 Khoa CNTT Trường CĐ CNTT TP.HCM 141 Ví dụ: Khoa CNTT Trường CĐ CNTT TP.HCM 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 142 Xem Source Khoa CNTT Trường CĐ CNTT TP.HCM