04 chuong03 tủ tài liệu bách khoa

Chương Các ðiều Khiển WebServer Tổng quan ASP.Net Server Control HTML Control WebSever Control Các ñiều khiển khác ðối tượng ViewState Written by: Dương Thành Phết http://www.thayphet.net HTML Control HTML Control ñược tạo từ 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 gọi HTML Server Control HTML Control Toolbox Written by: Dương Thành Phết http://www.thayphet.net HTML Control ðể chuyển HTML Control thành HTML Server Control, ta chọn Run As Server Control từ menu ngữ cảnh gán thuộc tính runat=“Server” cho HTML Control Written by: Dương Thành Phết http://www.thayphet.net ASP.NET Webserver Control Những lý nên sử dụng Standard Web Control: ðơn giản, tương tự Windows Form Controls ðồng nhất: Có thuộc tính giống dễ tìm hiểu sử dụng Hiệu quả: Tự động phát sinh tag HTML theo loại Browser Written by: Dương Thành Phết http://www.thayphet.net ASP.NET Webserver Control Thuộc tính Ý nghĩa (ID) Tên điều khiển Tên ñiều khiển AccessKey Ký tự để di chuyển nhanh đến điều khiển - phím nóng Attributes Tập hợp thuộc tính điều khiển HTML BackColor Màu ñiều khiển BorderColor Màu ñường viền ñiều khiển BorderStyle Kiểu ñường viền ñiều khiển BorderWidth ðộ rộng đường viền CssClass Hình thức hiển thị ñiều khiển qua tên CSS Enabled ðiều khiển có hiển thị hay khơng Mặc định True Font Font hiển thị cho ñiều khiển ForeColor Màu chữ hiển thị ñiều khiển Height Chiều cao ñiều khiển ToolTip Dòng chữ hiển thị rê chuột vào ñiều khiển Width ðộ rộng ñiều khiển Bảng liệt kê thuộc tính chung Web control Written by: Dương Thành Phết http://www.thayphet.net ASP.NET Webserver Control 3.1 Label ðược sử dụng ñể hiển thị trình bày nội dung văn bản, chấp nhận hiển thị nội dung với tag HTML Ví dụ: lblA.Text = "ðây chuỗi văn thường"; lblB.Text ="Còn chuỗi ñược in ñậm"; Written by: Dương Thành Phết http://www.thayphet.net ASP.NET Webserver Control 3.2 TextBox ðược dùng ñể nhập hiển thị liệu văn Các thuộc tính: Text: Nội dung chứa Textbox TextMode: SingleLine: Hiển thị nhập liệu dòng MultiLine: Hiển thị nhập liệu nhiều dòng Password: Hiển thị dấu * thay cho ký tự Rows: Số dòng hiển thị textbox có nhiều dòng Maxlength: Số ký tự tối đa ñược nhập Wrap: Văn có ñược phép tự ñộng xuống dòng độ rộng textbox khơng đủ Written by: Dương Thành Phết http://www.thayphet.net 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 hiển thị thích ImageAlign: Vị trí hiển thị hình nội dung NotSet,Left, Middle,TextTop,Right Written by: Dương Thành Phết http://www.thayphet.net ASP.NET Webserver Control 3.4 Button, ImageButton, LinkButton Mặc ñịnh nút Submit Button, ñược nhấn vào PostBack Server Các thuộc tính: - Text: Chuỗi văn hiển thị ñiều khiển - CommandName: Tên lệnh ñược sử dụng kiện Command - Ngoài thuộc tính trên, điều khiển ImageButton có thuộc tính ImageURL, ImageAlign AlternateText điều khiển Image Written by: Dương Thành Phết http://www.thayphet.net Ví dụ: Tạo trang web với ñiều khiển: Label, Textbox, Button thực chức tính tốn sau: 10 Xử lý 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(); } Written by: Dương Thành Phết http://www.thayphet.net Ví dụ: Tạo ñiều khiển File Upload Thiết kế tạo FileUpload vào trang Xử lý 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 chép tập tin lên thư mục Upload FileUpload1.SaveAs(MapPath("~/Upload/" + sTenfile)); lbThongbao.Text = "ðã upload thành công" ; } 40 Written by: Dương Thành Phết http://www.thayphet.net Các ñiều khiển khác 4.5 ðiều khiển Panel PlaceHolder Sử dùng ñể chứa ñiều khiển khác Thuộc tính Visible= True điều khiển chứa bên ñược hiển thị ngược lại Tuy nhiên, ñiều khiển Panel cho phép kéo ñiều khiển vào bên lúc thiết kế, điều khiển PlaceHolder khơng 41 Written by: Dương Thành Phết http://www.thayphet.net Thuộc tính DefaultButton: ðịnh nghĩa button mặc định panel (sẽ ñược thực nhấn Enter) Direction: Thiết ñặt hướng hiển thị nội dung ñược ñưa panel:NotSet, LeftToRight, RightToLeft GroupingText: Trình bày Panel Fieldset với giải riêng biệt HorizontalAlign: Chỉ hướng ngang thể nội dung panel:Center, Justify, Left, NotSet, Right ScrollBars: Hiển thị scrollbars nội dung panel vượt kích thước: Auto, Both, Horizontal, None, Vertical 42 Written by: Dương Thành Phết http://www.thayphet.net Ví dụ: Tạo trang sử dụng Panel Thiết kế: 43 Written by: Dương Thành Phết http://www.thayphet.net Xử lý kiện: 44 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; } Written by: Dương Thành Phết http://www.thayphet.net Các ñiều khiển khác 4.5 ðiều khiển hiển thị trang – View MultiView Cho phép ẩn phần khác trang Web, tiện ích tạo TabPage để chia trang web có độ dài lớn thành phần để hiển thị ðiều khiển MultiView chứa ñựng nhiều ñiều khiển View 45 Written by: Dương Thành Phết http://www.thayphet.net Thuộc tính ActiveViewIndex: Lựa chọn điều khiển View đưa hiển thị số Index Views: Cho phép lấy tập hợp ñiều khiển View chứa ñựng ñiều khiển MultiView Phương thức GetActiveView: Cho phép lấy thơng tin điều khiển View lựa chọn SetActiveView: Cho phép thiết lập ñiều khiển View ñược hiển thị 46 Sự kiện ActiveViewChanged:Khi ñiều khiển View ñược chọn Written by: Dương Thành Phết http://www.thayphet.net Ví dụ: Tạo trang sử dụng MultiView Thiết kế: Tạo Multiview1 gồm View (View1 View2, View3) Tạo Control Menu1 gồm Tab (Tab1, Tab2, Tab3) Tạo Control Menu vào Form 47 Written by: Dương Thành Phết http://www.thayphet.net Chọn Edit Menu Item Lần lượt khái báo nhãn (Text) là: Tab 1, Tab 2, Tab giá trị (Value) tương ứng là: , 1, Thuộc tính Orientation: Horizaltal (Menu hướng ngang) 48 Written by: Dương Thành Phết http://www.thayphet.net Bổ sung nội dung vào view tương ứng 49 Written by: Dương Thành Phết http://www.thayphet.net Xử lý 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; } } 50 Written by: Dương Thành Phết http://www.thayphet.net ðối tượng ViewState ðược cung cấp ñể lưu lại thông tin trang web sau web server gởi kết cho Client Mặc ñịnh, trang web 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"); 51 Written by: Dương Thành Phết http://www.thayphet.net Về chất, giá trị ñối tượng ViewState ñược lưu ñiều khiển hidden giá trị ñã ñược mã hóa ðối tượng ViewState giúp giảm bớt công sức việc lưu trữ truy xuất thơng tin mà khơng phải sử dụng nhiều điều khiển hidden 52 Written by: Dương Thành Phết http://www.thayphet.net Ví dụ: Xử lý kiện: protected void btDem_Click(object sender, EventArgs e) { lbThongbao.Text = Convert.ToString(int.Parse(lbThongbao.Text)+1); } 53 Written by: Dương Thành Phết http://www.thayphet.net Xem Source 54 Written by: Dương Thành Phết http://www.thayphet.net ... TextBox ðược dùng ñể nhập hiển thị liệu văn Các thuộc tính: Text: Nội dung chứa Textbox TextMode: SingleLine: Hiển thị nhập liệu dòng MultiLine: Hiển thị nhập liệu nhiều dòng Password: Hiển thị... Written by: Dương Thành Phết http://www.thayphet.net Thuộc tính AdvertisementFile: Tên tập tin liệu (dưới dạng xml) cho ñiều khiển Cú pháp tập tin Advertisement (*.xml) ... http://www.thayphet.net Ví dụ: Tạo mẫu Quangcao sử dụng ñiều khiển AdRotator Bước Thiết kế giao diện Bước Tạo tập tin liệu: Quangcao.xml Sử dụng chức Add New Item… từ thực ñơn ngữ cảnh Chọn XML File hộp thoại Add New