Chươ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

11

http://www.thayphet.net

Written by: Dương Thành Phết

5. ðối tượng ViewState

2. HTML Control

HTML Control trên Toolbox

22

http://www.thayphet.net

Written by: Dương Thành Phết

(cid:1) 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 (cid:1)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.

2. HTML Control

33

http://www.thayphet.net

Written by: Dương Thành Phết

(cid:1)ðể 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

3. ASP.NET Webserver Control

Những lý do nên sử dụng Standard Web Control:

44

http://www.thayphet.net

Written by: Dương Thành Phết

(cid:1)ðơn giản, tương tự như Windows Form Controls. (cid:1)ðồng nhất: Có các thuộc tính giống nhau (cid:2) dễ tìm hiểu và sử dụng. (cid:1)Hiệu quả: Tự ñộng phát sinh ra các tag HTML theo từng loại Browser

3. ASP.NET Webserver 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

Chiều cao của ñiều khiển

Height

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.

55

Bảng liệt kê các thuộc tính chung của các Web control

http://www.thayphet.net

Written by: Dương Thành Phết

3. 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ụ:

66

http://www.thayphet.net

Written by: Dương Thành Phết

lblA.Text = "ðây là chuỗi văn bản thường"; lblB.Text ="Còn ñây là chuỗi ñược in ñậm";

3. 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:

(cid:3)Text: Nội dung chứa trong Textbox (cid:3)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ự.

77

http://www.thayphet.net

Written by: Dương Thành Phết

(cid:3)Rows: Số dòng hiển thị nếu textbox có nhiều dòng. (cid:3)Maxlength: Số ký tự tối ña ñược nhập (cid:3)Wrap: Văn bản có ñược phép tự ñộng xuống dòng khi ñộ rộng của textbox không ñủ.

3. 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:

88

http://www.thayphet.net

Written by: Dương Thành Phết

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

3. 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.

99

http://www.thayphet.net

Written by: Dương Thành Phết

- 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.

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();

}

1010

http://www.thayphet.net

Written by: Dương Thành Phết

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:

trên ñiều khiển.

ImageURL: Tập tin ảnh hiển thị trên ñiều khiển. Text: Nhãn văn bản hiển thị 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

1111

http://www.thayphet.net

Written by: Dương Thành Phế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.

1212

http://www.thayphet.net

Written by: Dương Thành Phết

Ví dụ: Tạo trang web gồm 3 ñiều khiển Hyperlink

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:

1313

http://www.thayphet.net

Written by: Dương Thành Phết

+ 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.

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.

1414

http://www.thayphet.net

Written by: Dương Thành Phết

Items.Clear();

Xử lý mục chọn

1515

http://www.thayphet.net

Written by: Dương Thành Phết

(cid:3)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. (cid:3)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. (cid:3)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. (cid:3)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.

1616

http://www.thayphet.net

Written by: Dương Thành Phết

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.

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;

    }

    }

    1717

    http://www.thayphet.net

    Written by: Dương Thành Phết

    3. ASP.NET Webserver Control

    3.7. Checkbox, RadioButton Các thuộc tính

    (cid:3)Checked: Trạng thái của mục chọn (chọn hay không) (cid:3)TextAlign: Vị trí của ñiều khiển so với chuỗi văn bản.

    1818

    http://www.thayphet.net

    Written by: Dương Thành Phết

    (cid:3)AutoPostBack: Có ñược tự ñộng PostBack về Server khi các mục chọn bị thay ñổi, mặc ñịnh là False. (cid:3)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.

    1919

    http://www.thayphet.net

    Written by: Dương Thành Phết

    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ữ

    3. ASP.NET Webserver Control

    Kéo thả RadioButtonList (Hoặc CheckbocList) vào Form

    (cid:2) Chọn Edit Items

    2020

    http://www.thayphet.net

    Written by: Dương Thành Phết

    3.8. CheckBoxList, RadioButtonList (cid:4) 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. (cid:4) 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:

    Các thuộc tính

    (cid:3)RepeatColumns: Số cột hiển thị. (cid:3)RepeatDirection: Hình thức hiển thị

    Vertical: Theo chiều dọc Horizontal: Theo chiều ngang

    2121

    http://www.thayphet.net

    Written by: Dương Thành Phết

    (cid:3)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.

    Ví dụ: Tạo trang web gồm Nhóm RadioButton Thu nhập

    Private Sub rblThu_nhap_SelectedIndexChanged(…)…

    lblThu_nhap.Text = "Bạn chọn thu nhập: " +

    rblThu_nhap.SelectedItem.Text;

    End Sub

    2222

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Xử lý sự kiện:

    2323

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Ví dụ: Tạo trang web khi click nút ðăng ký thì hiện thị các thông tin ñược chọn.

    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.

    2424

    http://www.thayphet.net

    Written by: Dương Thành Phết

    ð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).

    Ví dụ:

    Khi thiết kế.

    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";

    }

    Lệnh xử lý:

    Xem source: ðây là chuỗi ký tự trong label

    2525

    http://www.thayphet.net

    Written by: Dương Thành Phết

    ðây là chuỗi ký tự trong Literial

    4. Các ñiều khiển khác

    4.2. ðiều khiển AdRotator

    2626

    http://www.thayphet.net

    Written by: Dương Thành Phết

    ðượ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).

    ðườ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

    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)

    Lưu ý: Các giá trị có phân biệt chữ Hoa chữ thường

    2727

    http://www.thayphet.net

    Written by: Dương Thành Phết

    2828

    http://www.thayphet.net

    Written 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

    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

    2929

    http://www.thayphet.net

    Written by: Dương Thành Phết

    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

    Nhập vào nội dung cho tập tin Quangcao.xml

    Pictures\Baihatviet.gif http://www.Baihatviet.net Web Nhạc bài hát việt Music 10

    3030

    http://www.thayphet.net

    Written by: Dương Thành Phết

    3131

    http://www.thayphet.net

    Written 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

    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)

    3232

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Bước 4. Thi hành ứng dụng

    4. Các ñiều khiển khác

    4.3. ðiều khiển Calendar

    3333

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Dùng ñể hiển thị và cập nhật dữ liệu kiểu ngày

    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.

    --------

    Thuộc tính

    3434

    http://www.thayphet.net

    Written by: Dương Thành Phết

    SelectedDate: Giá trị ngày ñược chọn trên ñiều khiển

    b. Sự kiện

    3535

    http://www.thayphet.net

    Written by: Dương Thành Phết

    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

    Ví dụ: Tạo Calendard trên trang web

    Bước 1: Tạo Calendard vào trang

    3636

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Bước 2: Chọn mẫu ñịnh dạng: Click phải /Auto Format

    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");

    }

    3737

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Xử lý sự kiện: protected void Page_Load(object sender, EventArgs e){

    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.

    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

    3838

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Các phương thức:

    3939

    http://www.thayphet.net

    Written by: Dương Thành Phết

    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.

    Ví dụ: Tạo ñiều khiển File Upload

    Thiết kế và tạo FileUpload vào trang

    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" ;

    }

    4040

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Xử lý sự kiện: protected void Button1_Click(object sender, EventArgs e) {

    4. Các ñiều khiển khác

    4.5. ðiều khiển Panel và PlaceHolder (cid:4) Sử dùng ñể chứa các ñiều khiển khác. (cid:4) 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.

    4141

    http://www.thayphet.net

    Written by: Dương Thành Phết

    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.

    Thuộc tính (cid:4)DefaultButton: ðịnh nghĩa button mặc ñịnh trong panel (sẽ ñược thực hiện khi nhấn Enter) (cid:4)Direction: Thiết ñặt hướng hiển thị nội dung ñược ñưa ra trong panel:NotSet, LeftToRight, RightToLeft.

    4242

    http://www.thayphet.net

    Written by: Dương Thành Phết

    (cid:4)GroupingText: Trình bày Panel như 1 Fieldset với một chú giải riêng biệt. (cid:4)HorizontalAlign: Chỉ ra hướng ngang thể hiện nội dung của panel:Center, Justify, Left, NotSet, Right. (cid:4)ScrollBars: Hiển thị scrollbars khi nội dung trong panel vượt quá kích thước: Auto, Both, Horizontal, None, Vertical.

    Ví dụ: Tạo trang sử dụng Panel

    4343

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Thiết kế:

    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;

    4444

    }

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Xử lý sự kiện: protected void Page_Load(object sender, EventArgs e) {

    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

    4545

    http://www.thayphet.net

    Written by: Dương Thành Phết

    khiển View.

    Thuộc tính

    (cid:4) ActiveViewIndex: Lựa chọn ñiều khiển View ñược ñưa ra hiển thị bằng chỉ số Index (cid:4) 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

    lập ñiều khiển

    (cid:4) GetActiveView: Cho phép lấy về thông tin của ñiều khiển View ñược lựa chọn. (cid:4) SetActiveView: Cho phép thiết View ñược hiển thị.

    Sự kiện

    4646

    http://www.thayphet.net

    Written by: Dương Thành Phết

    (cid:4) ActiveViewChanged:Khi ñiều khiển View ñược chọn

    Ví dụ: Tạo trang sử dụng MultiView

    Thiết kế:

    (cid:1)Tạo 1 Multiview1 gồm 3 View (View1 View2, View3) (cid:1)Tạo Control Menu1 gồm 3 Tab (Tab1, Tab2, Tab3)

    4747

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Tạo Control Menu vào Form

    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)

    4848

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Chọn Edit Menu Item

    4949

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Bổ sung nội dung vào các view tương ứng

    5050

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Xử lý sự kiện:

    5. ðối tượng ViewState

    (cid:4) ðượ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. (cid:4) 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:

    5151

    http://www.thayphet.net

    Written by: Dương Thành Phết

    = ViewState("Tên trạng thái");

    trong ñối

    5252

    http://www.thayphet.net

    Written by: Dương Thành Phết

    (cid:4) Về bản chất, các giá trị 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. (cid:4) ðố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

    Ví dụ:

    Xử lý sự kiện:

    protected void btDem_Click(object sender, EventArgs e) { lbThongbao.Text =

    Convert.ToString(int.Parse(lbThongbao.Text)+1);

    5353

    http://www.thayphet.net

    Written by: Dương Thành Phết

    }

    5454

    http://www.thayphet.net

    Written by: Dương Thành Phết

    Xem Source