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

HTML Control 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 tagán thuộc tính runat="Server" cho HTML Control ñó ñượcgọi là HTML Server Cont

Chương 3 Các ðiều Khiển WebServer

1 Tổng quan về ASP.Net Server Control

2 HTML Control

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 tagán thuộc tính runat="Server" cho HTML Control ñó ñượcgọi là HTML Server Control

2 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ảnhhoặ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:

ðơ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ìmhiểu và sử dụng

Hiệu quả: Tự ñộng phát sinh ra các tag HTML theotừng loại Browser

3 ASP.NET Webserver Control

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

ðộ rộng của ñiều khiển.

3 ASP.NET Webserver Control

3.1 Label

ðược sử dụng ñể hiển thị và trình bày nội dung vănbả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 ="<B>Còn ñây là chuỗi ñược in ñậm</B>";

3 ASP.NET Webserver Control

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òngkhi ñộ 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:

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ấnvà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ệnCommand

- 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à AlternateTextnhư ñ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:

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

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:

+ 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êmvà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

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

Ví dụ: Tạo trang Web gồm 1 listbox, 2 label , 1 Button khiclick 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é");

protected void btChon_Click( .) {

lbDiadanh.Text = "";

for (int i = 0; i <= lstDiadanh.Items.Count - 1; i ++) {

if (lstDiadanh.Items[i].Selected) lbDiadanh.Text += "<li>" + lstDiadanh.Items[i].Value;

} }

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ạithành 1 nhóm

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

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ợpcá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ũngtương tự như ListBox/DropDownList

Tạo mới:

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

 Chọn Edit Items

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

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

Ví dụ: Tạo trang web khi click nút ðăng ký thì hiện thị cácthô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

ðiểm khác biệt là khi thi hành, Literal không tạothê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ụ:

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

}

Khi thiết kế

Xem source:

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

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ự ñộngthay ñổi các hình ảnh mỗi khi có yêu cầu (PostBack vềserver)

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)

<Advertisements>

<Ad>

<ImageUrl> ðường dẫn tập tin hình ảnh </ImageUrl>

<NavigateUrl> ðường dẫn liên kết </NavigateUrl>

<AlternateText> Chuỗi văn bản Tooltip </AlternateText>

<Keyword> Từ khóa dùng ñể lọc hình ảnh </Keyword>

<Impressions> Tần suất hiển thị của ảnh </Impressions>

</Ad>

</Advertisements>

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

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

Sử dụng chức năng Add New Item… từ thực ñơn ngữ cảnhChọn XML File trong hộp thoại Add New Item

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

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.xmlTarget: _blank

KeywordFilter: Không thiết lập (Hiển thị tất cả ảnh)

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

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

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

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

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

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

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

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

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ênwebserver

Trả về giá trị true khi File ñược Upload HasFile

Lấy tên file ñược Upload FileName

Lấy nội dung của file ñã ñược upload theo dòng dữ liệu FileContent

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ĩa Thuộc tính

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

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

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

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êntrong 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éonhững ñiều khiển vào bên trong nó lúc thiết kế, còn ñiềukhiển PlaceHolder thì không

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

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;

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ủatrang Web, tiện ích khi tạo một TabPage ñể chia 1 trangweb 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ềukhiển View

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

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

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)

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

</script>

5 ðối tượng ViewState

 ðược cung cấp ñể lưu lại những thông tin của trangweb 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ượngViewState thông qua thuộc tính EnableViewState = True

Gán giá trị cho ViewState:

ViewState("Tên trạng thái") = <giá trị>;

Nhận giá trị từ ñối tượng ViewState:

<biến> = ViewState("Tên trạng thái");

 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 trongviệ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

Xem Source