Tài liệu Bài Giảng Môn Lập Trình Website ASP.Net part 6 pdf

Bài Giảng Môn Lập Trình Website ASP.Net Biên sọan: Dương Thành Phết Trang 38 III. Một số điều khiển khác 1. Điều khiển Literal Tương tự như điều khiển Label, điều khiển Literal cũng được sử dụng để hiển thị chuỗi văn bản trên trang Web. N ếu muốn hiển thị một chuỗi văn bản trên trang Web, chúng ta có thể đánh nội dung tr ực tiếp vào trang Web mà không cần phải sử dụng điều khiển. Chỉ sử dụng các điều khiển như Label, Literal để hiển thị khi cần thay đổi nội dung hiển thị ở phía server. Điểm khác biệt chính giữa Label và Literal là khi hiển thị nội dung lên trang web (lúc thi hành), điều khiển Literal không tạo thêm một tag Html nào cả, còn Label sẽ tạo ra một tag span (được sử dụng để lập trình ở phía client). Ví dụ: Khi thi ết kế. Khi thi hành Lệnh xử lý: protected void Page_Load(object sender, EventArgs e) { Label1.Text= "<b>Đây là chuỗi ký tự trong label</b>"; Literal1.Text = "<i> Đây là chuỗi ký tự trong Literial</i>"; } Chọn chức năng từ thực đơn View | Source trên Browser: <span id="Label1" style="display:inline-block;width:417px;"><b>Đây là chuỗi ký tự trong label</b></span><br /> <i> Đây là chuỗi ký tự trong Literial</i> 2. Điều khiển AdRotator Điều khiển AdRotator được dùng để tạo ra các banner quảng cáo cho trang web, nó tự độ ng thay đổi các hình ảnh (đã được thiết lập trước) mỗi khi có yêu cầu, PostBack về server. a. Thuộc tính  AdvertisementFile: Tên tập tin dữ liệu (dưới dạng xml) cho điều khiển. Dưới đây là cú pháp của tập tin Advertisement (*.xml) <Advertisements> <Ad> <ImageUrl>Đường dẫn đến tập tin hình ảnh</ImageUrl> <NavigateUrl>Đường dẫn đến liên kết</NavigateUrl> <AlternateText>Chu ỗi văn bản được hiển thị như Tooltip</AlternateText> <Keyword>Từ khóa dùng để lọc hình ảnh</Keyword> Bài Giảng Môn Lập Trình Website ASP.Net Biên sọan: Dương Thành Phết Trang 39 <Impressions>Tần suất hiển thị của hình ảnh</Impressions> </Ad> </Advertisements> Lưu ý: Phải nhập đúng các giá trị trong tag như mẫu trên. Các giá trị trong tag có phân biệt chữ Hoa chữ thường. Trong đó  ImageUrl: Đường dẫn đến một tập tin hình ảnh  NavigateUrl: Đường dẫn đến trang web sẽ được liên kết đến khi người dùng nhấn vào hình ảnh đang hiển thị.  AlternateText: Giá trị này sẽ được hiển thị nếu như đường dẫn đến tập tin hình ảnh (qua thu ộc tính NavigateUrl) không tồn tại. Đối với một số trình duyệt, tham số này được hi ển thị như ToolTip của hình quảng cáo.  Keyword: Được dùng để phân loại các quảng cáo. Thông qua giá trị này, ta có thể lọc các qu ảng cáo theo một điều kiện nào đó.  Impressions: Tham số này quyết định tầng suất hiển thị của hình ảnh. Giá trị này càng l ớn, khả năng hiển thị càng nhiều.  KeywordFilter: Được dùng để chọn lọc và hiển thị những hình quảng cáo có giá trị của tham s ố Keyword = giá trị của tham số này. Giá tr ị của tham số này mặc định không được thiết lập  Hiển thị tất cả những hình có trong t ập tin XML. Trong trường hợp nếu không có hình nào có giá trị Keyword bằng giá trị của thuộc tính này, sẽ không có hình nào được hiển thị.  Target: Qui định cửa sổ hiển thị trang liên kết  _blank: Trang liên kết sẽ được mở ở một cửa sổ mới.  _self: Trang liên kết sẽ được mở ở chính cửa sổ chứa điều khiển.  _parent: Trang liên kết sẽ được mở ở cửa sổ cha. b. Sự kiện  AdCreated: Xảy ra khi điều khiển tạo ra các quảng cáo. Ví dụ: Tạo Website Quangcao (Tạo Quảng cáo 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 o Sử dụng chức năng Add New Item… từ thực đơn ngữ cảnh o Chọn XML File trong hộp thoại Add New Item Bài Giảng Môn Lập Trình Website ASP.Net Biên sọan: Dương Thành Phết Trang 40 o Nhập vào cú pháp qui định cho tập tin Quangcao.xml (theo cú pháp của tập tin Advertisement) <?xml version="1.0" encoding="utf-8" ?> <Advertisements> <Ad> <ImageUrl>Pictures\Baihatviet.gif</ImageUrl> <NavigateUrl>http://www.Baihatviet.net</NavigateUrl> <AlternateText>Web Nh ạc bài hát vi ệt</AlternateText> <Keyword>Music</Keyword> <Impressions>10</Impressions> </Ad> <Advertisements> o Chuyển màn hình qua trang Data, nhập liệu trực tiếp trên màn hình này  Click phải màn hình đang code chọn View Data Grid Nhập thêm các liên kết quảng cáo sau: Bài Giảng Môn Lập Trình Website ASP.Net Biên sọan: Dương Thành Phết Trang 41 Bước 3. Thiết lập thuộc tính cho điều khiển adQuangcao o AdvertisementFile: Quangcao.xml o Target: _blank (Khi nhấn vào sẽ hiển thị liên kết ở cửa sổ mới.) o KeywordFilter: Không thiết lập (Hiển thị tất cả các hình ảnh) Bước 4. Thi hành ứng dụng 3. Điều khiển Calendar Một điều chắc chắn rằng điều khiển Calendar đã quá quen thuộc với các bạn lập trình ứng dụng trên windows, nó có giao diện trực quan, vì vậy, người dùng có thể chọn ngày dễ dàng. a. Thuộc tính  DayHeaderStyle: Qui định hình thức hiển thị tiêu đề của các ngày trong tuần  DayStyle: Qui định hình thức hiển thị của các ngày trong điều khiển.  NextPrevStyle: Qui định hình thức hiển thị của tháng trước/sau của tháng đang được ch ọn.  SeleltedDayStyle: Qui định hình thức hiển thị của ngày đang được chọn.  SeleltedDate: Giá trị ngày được chọn trên điều khiển  TitleStyle: Qui định hình thức hiển thị dòng tiêu đề của tháng được chọn  TodayDayStyle: Qui định hình thức hiển thị của ngày hiện hành (trên server).  WeekendDayStyle: Qui định hình thức hiển thị của các ngày cuối tuần (thứ 7, chủ nhật)  OtherMonthDayStyle: Qui định hình thức hiển thị của các ngày không nằm trong tháng hi ện hành. b. Sự kiện  SelectionChanged: Sự kiện này xảy ra khi bạn chọn một ngày khác với giá trị ngày đang đượ c chọn hiện hành  VisibleMonthChanged: Xự kiện này xảy ra khi bạn chọn tháng khác với tháng hiện hành Ví dụ: Tạo trang Calendard Bước 1: Tạo Calendard vào trang Bài Giảng Môn Lập Trình Website ASP.Net Biên sọan: Dương Thành Phết Trang 42 Bước 2: Chọn Auto Format (Chọn mẫu định dạng)  Khi thiết kế 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(object sender, EventArgs e) { lbThongbao.Text ="B ạn đang chọn " + Calendar1.SelectedDate.ToString("dd/MM/yyyy"); } Bài Giảng Môn Lập Trình Website ASP.Net Biên sọan: Dương Thành Phết Trang 43 Khi thi hành 4. Điều khiển File Upload. Điều khiển FileUpload cho phép người sử dụng Upload file từ chính ứng dụng Web của mình. File sau khi Upload có th ể lưu trữ ở 1 nơi nào đó có thể là trên ổ cứng hay trong Database. Điều khiển FileUpload hỗ trợ các thuộc tính sau: Thuộc tính Ý nghĩa Enable Cho phép bạn vô hiệu hoá điều khiển FileUpload. FileBytes Cho phép lấy nội dung file đã được upload như một mảng Byte. FileContent Cho phép 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ị đúng khi File được Upload Điều khiển FileUpload hỗ trợ các phương thức o Focus: Enables you to shift the form focus to the FileUpload control. o SaveAs: Cho phép bạn lưu file được upload lên hệ thống. Thu ộc tính PostedFile của điều khiển FileUpload cho phép lấy thông tin từ File upload được bao bọc trong đối tượng HttpPostedFile. đối tượng này sẽ đưa thêm thông tin về Upload file. L ớp HttpPostedFile gồm các thuộc tính sau: o ContentLength: Lấy về kích thước của File Upload tính theo byte o ContentType: Lấy kiểu MIME của File Upload o FileName: Cho phép lấy tên của file được upload. o InputStream: Enables you to retrieve the uploaded file as a stream. L ớp HttpPostedFile chỉ hỗ trợ phương thức o SaveAs: Cho phép bạn lưu file được upload lên hệ thống. Bài Giảng Môn Lập Trình Website ASP.Net Biên sọan: Dương Thành Phết Trang 44 Ví dụ: Trong ví dụ sau, chúng ta sẽ thực hiện Upload tập tin lên server, cụ thể hơn, tập tin vừa Upload s ẽ được lưu trong thư mục Upload. Màn hình ở chế độ thiết kế 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" ; } Khi thi hành: Nếu thành công 5. Điều khiển Panel và PlaceHolder Hai điều khiển Panel và PlaceHolder được sử dùng để chứa các điều khiển khác. Thuộc tính thường dùng của 2 điều khiển này là Visible. Nếu giá trị của thuộc tính này = True, các điều khiển chứa bên trong sẽ được hiển thị, ngược lại (Visible = False), không có điều khiển nào ch ứa bên trong được hiển thị. 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. Các thuộc tính:  DefaultButton: Cho phép bạn định nghĩa một button mặc định trong panel mà button m ặc định này sẽ được thực hiện khi bạn nhấn phím Enter.  Direction: Cho phép bạn gán hoặc thiết đặt hướng hiển thị nội dung được đưa ra trong panel, có thể là các giá trị:NotSet, LeftToRight, and RightToLeft.  GroupingText: Cho phép bạn trình bày Panel như 1 Fieldset với một chú giải riêng bi ệt.  HorizontalAlign: Cho phép bạn chỉ ra hướng ngang thể hiện nội dung của panel và nó có th ẻ là các giá trị: Center, Justify, Left, NotSet, and Right. Bài Giảng Môn Lập Trình Website ASP.Net Biên sọan: Dương Thành Phết Trang 45  ScrollBars: Cho phép bạn hiển thị scrollbars khi bạn cố định chiều cao hoặc chiều r ộng của panel và nội dung trong panel vượt quá độ rộng hoặc độ cao đó, nó có thể là các giá trị: Auto, Both, Horizontal, None, and Vertical. Ví dụ: Tao trang sử dụng Panel gồm: 1 panelpage chứa 1 panelsothich va 1 panel nghenghiep, trong panel sothich có vài checkbox, trong panel ngh ề nghệp hiện thị 100 nghề (Nghề 1, Nghề 2, . . .) được điền vào khi trang được load. Thêm vào panelpage 2 check box: chkSothich và chkNghenghiep. Khi trang hi ện thị người dùng đánh check hoặc bỏ check vào checkbox nào thì panel tương ứng sẽ hiện hoặc ẩn. Thiết kế: 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; } Thi hành: Bài Giảng Môn Lập Trình Website ASP.Net Biên sọan: Dương Thành Phết Trang 46 6. Điều khiển hiển thị các trang – MultiView Điều khiển MultiView cho phép bạn ẩn hoặc hiện các phần khác nhau của trang Web, điều khiển này tiện ích khi bạn tạo một TabPage. Nó thực sự tiện ích khi bạn muốn 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, bạn sử dụng Multiview để lựa chọn các điều khiển View để trình bày. Điều khiển MultiView hỗ trợ các 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 bạn lấy về tập hợp các điều khiển View chứa đựng trong điều khi ển MultiView. Điều khiển MultiView hỗ trợ hai 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 bạn thiết lập điều khiển View được hiên thị. Và MultiView h ỗ trợ sự kiện sau:  ActiveViewChanged: Xảy ra khi điều khiển View được lựa chọn Ví dụ: Tạo 1 website MultiView: Sử dụng MultiView kết hợp với điều khiển Menu để tạo một TabPage Thiết kế  Trên trang thiết kế tạo: 1 Multiview1 bên trong gồm 3 View (View1 View2, View3)  Tạo Control Menu1 từ nhóm Control Navigation : Gồm 3 Tab (Tab1, Tab2, Tab3) o Tạo Control Menu vào Form Bài Giảng Môn Lập Trình Website ASP.Net Biên sọan: Dương Thành Phết Trang 47 o 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) o Bổ sung nội dung vào các view tương ứng Xử lý sự kiện <script runat="server"> 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){ [...].. .Bài Giảng Môn Lập Trình Website ASP.Net MultiView1.ActiveViewIndex = 0; } } Thi hành: Biên sọan: Dương Thành Phết Trang 48 . panelnghenghiep.Visible = false; } Thi hành: Bài Giảng Môn Lập Trình Website ASP. Net Biên sọan: Dương Thành Phết Trang 46 6. Điều khiển hiển thị các trang – MultiView. <Keyword>Từ khóa dùng để lọc hình ảnh</Keyword> Bài Giảng Môn Lập Trình Website ASP. Net Biên sọan: Dương Thành Phết Trang 39 <Impressions>Tần