Tài liệu Standard controls_bài 2 ppt

TextBox Tên thuộc tính Mô tả TextMode Kiểu hiển thị của Textbox gồm 3 giá trị: +SingleLine: hiển thị 1 trường nhập liệu trên 1 dòng +MultiLine: hiển thị 1 trường nhập liệu nhiều dòng +

264 Lê Văn Sỹ, P.14, Q.3

BÀI 2: STANDARD CONTROLS

I GIỚI THIỆU

264 Lê Văn Sỹ, P.14, Q.3

Tên thuộc tính Mô tả

BorderColor Màu đường viền

BorderStyle Kiểu đường viền của Label

ToolTip Chú thích(di chuyển chuột vào Label)

2 TextBox

Tên thuộc tính Mô tả

TextMode Kiểu hiển thị của Textbox gồm 3 giá trị:

+SingleLine: hiển thị 1 trường nhập liệu trên 1 dòng +MultiLine: hiển thị 1 trường nhập liệu nhiều dòng + Password: hiển thị 1 trường nhập mà Text sẽ được thay thế bằng các ký tự đặc biệt

Columns Chỉ định số cột được hiển thị trong TextBox

Rows Cho phép chỉ định số dòng hiển thị trong TextBox

TabIndex Cho phép chỉ định thứ tự Tab của TextBox

MaxLength Cho phép quy đinh độ dài của dữ liệu mà một người sử dụng

có thể nhập trên TextBox Focus cho phép thiết lập form khởi tạo ưu tiên tới TextBox

TextChanged Xảy ra trên Server khi nội dung TextBox thay đổi để sự kiên

này xảy ra bạn cần thiết đặt thuộc tính AutoPostback là true

264 Lê Văn Sỹ, P.14, Q.3

3 Button

Tên thuộc tính Mô tả

CommandArgument Cho phép bạn chỉ rõ đối số được truyền tới lệnh thực hiện CommandName Chỉ định tên một lệnh được truyền tới trong Command Event

OnClientClick Cho phép chỉ định đến một hàm phía client khi nhấn vào Button

Command Xảy ra khi điều khiển Button được nhấn CommandName và

CommandArgument được truyền qua sự kiện

• Bài tập

– Tạo giao diện gửi thông tin góp ý

– Khi nhấn nút gửi góp ý

• Nếu chưa nhập thông tin Họ Tên, Địa chỉ, Tiêu đề, Nội dung thì hiển thị thông báo ‘’Bạn phải nhập thông tin’’

• Nếu đã nhập thông tin thì hiện thị thông tin

264 Lê Văn Sỹ, P.14, Q.3

– Gợi ý:

• Dùng JavaScript để hiển thị thông báo

function KiemTraDuLieu() {

if (document.getElementById("HoTen").value=="") {

alert("Bạn phải nhập Họ tên");

return false;

} return true;

} Gọi hàm ở nút nhấn:

OnClientClick="return KiemTraDuLieu();"

264 Lê Văn Sỹ, P.14, Q.3

4 ImageButton

Tên thuộc tính Mô tả

Command Xảy ra khi điều khiển Button được nhấn CommandName và

CommandArgument được truyền qua sự kiện

• Bài tập :

Bài 1:Tạo giao diện cho phần quản trị gồm 2 trang :Admin.aspx và ChangePassword.aspx

264 Lê Văn Sỹ, P.14, Q.3

5 DropDownList

– Giới thiệu:Hiển thị một danh sách các lựa chọn, nguời sử dụng chỉ chọn một lựa chọn 1 lần – Các thuộc tính cơ bản:

Thuộc tính - Sự kiện Mô tả

DataTextField Tên trường hiển thị

DataValueField Tên trường giá trị

SelectedValue Giá trị của Item được chọn

SelectedIndex Chỉ số của Item được chọn

AutoPostBack =True:Chạy sự kiện khi thay đổi chỉ số

=False:Không chạy sự kiện khi thay đổi chỉ số AppendDataBoundItems Lấy hoặc gán giá trị chỉ định liệu có xóa danh

sách trước khi ràng buộc dữ liệu SelectedIndexChanged() Xảy ra khi chỉ số thay đổi

– Phương thức :

Phương thức Mô tả

Items.Add(ListItem list) Thêm phần tử vào danh ListBox

Items.RemoveAt(int index) Xóa phần tử theo chỉ số

– Sự kiện:

OnSelectedIndexChanged: Xảy ra khi thay đổi lựa chọn 1 giá trị

– Vi dụ 1:

Tâp tin: DropDownList.aspx

Quốc gia

<asp:DropDownList ID="DropDownList1" runat="server">

<asp:ListItem Value="1">Việt Nam</asp:ListItem>

264 Lê Văn Sỹ, P.14, Q.3

<asp:ListItem Value="2">Lào</asp:ListItem>

<asp:ListItem Value="3">Campuchia</asp:ListItem>

</asp:DropDownList>

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" />

Tâp tin: DropDownList.aspx.cs

protected void Button1_Click(object sender, EventArgs e){

Response.Write("Quoc gia:" + DropDownList1.SelectedItem.Text);

Response.Write("Gia tri:"+DropDownList1.SelectedValue);

}

6 ListBox

– Giới thiệu: Hiển thị một danh sách trên trang và chúng ta có thể lựa chọn một hoặc nhiều phần tử

– Các thuộc tính cơ bản :

Tham số Mô tả

Data Source Nguồn dữ liệu

DataTextField Tên trường hiển thị

DataValueField Tên trường giá trị

SelectionMode =Single:Chọn môt phần tử

=Multiple:Chọn nhiều phần tử

SelectedValue Giá trị của Item được chọn

SelectedIndex Chỉ số của Item được chọn

AutoPostBack =True:Chạy sự kiện khi thay đổi chỉ số

=False:Không chạy sự kiện khi thay đổi chỉ số AppendDataBoundItems Lấy hoặc gán giá trị chỉ định liệu có xóa danh sách trước

khi ràng buộc dữ liệu

264 Lê Văn Sỹ, P.14, Q.3

– Sự kiện

Sự kiện Mô tả

SelectedIndexChanged Xảy ra khi chỉ số thay đổi

– Các phương thức:

Phương thức Mô tả

Items.Add(ListItem list) Thêm phần tử vào danh ListBox

Items.RemoveAt(int index) Xóa phần tử theo chỉ số

– Vi dụ 1:

Tâp tin: ListBox.aspx

Danh sách quyền:

<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">

<asp:ListItem Value="1">Administrator</asp:ListItem> <asp:ListItem Value="2">Power User</asp:ListItem>

<asp:ListItem Value="3">User</asp:ListItem>

</asp:ListBox>

<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

Tâp tin: ListBox.aspx.cs

protected void Button1_Click(object sender, EventArgs e){

foreach (ListItem item in ListBox1.Items){

if (item.Selected){

Response.Write("Quyen:"+ item.Text);

Response.Write("Gia tri:" + item.Value);

}

}

}

– Bài tập:Xây dựng giao diện sau

 Khi nhấn nút >> thì di chuyển 1 phần tử đã chọn từ ListBox trái sang ListBox phải và khi nhấn nút << di chuyển 1 phần tử đã chọn từ ListBox phải sang trái

264 Lê Văn Sỹ, P.14, Q.3

 Mở rộng chọn di chuyển nhiều phần tử

7 CheckBox

Tên thuộc tính Mô tả

Checked Chỉ định trạng thái chọn hay không chọn

-True:Chọn -False:Không chọn

TextAlign Canh lề nội dung hiển thị

- Left:Bên trái CheckBox

- Right:Bên phải CheckBox

8 RadioButton

Tên thuộc tính Mô tả

Checked Chỉ định trạng thái chọn hay không chọn

-True:Chọn -False:Không chọn

TextAlign Canh lề nội dung hiển thị

- Left:Bên trái CheckBox

- Right:Bên phải CheckBox GroupName Chỉ định nhóm cho RadioButton

264 Lê Văn Sỹ, P.14, Q.3

9 HiddenField

Tên thuộc tính Mô tả

10 File Upload

Tên thuộc tính Mô tả

Enable Gán thuộc tín vô hiệu hóa điều khiển

HasFile Trả về giá trị =true nếu đã chọn File upload.Ngược lại =False

FileBytes Lấy nội dung đã Upload như 1 mảng byte

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

Tên phương thức , Sự kiện Mô tả

SaveAs(string filename) Lưu File Upload vào hệ thống

Kích thước mặc định và 4096 byte

11 Master Page

Giới thiệu:

• Master tạo bố cục cho 1 trang web (banner,footer,left,right).Tập tin master có đuôi mở rộng Master

• Master có thể lồng nhiều cấp

264 Lê Văn Sỹ, P.14, Q.3

264 Lê Văn Sỹ, P.14, Q.3

264 Lê Văn Sỹ, P.14, Q.3

• Master Page :

– asp:ContentPlaceHolder :phần nội dung thay đổi

– Các trang sử dụng Master phải khai báo :MasterPageFile =“Tên_MasterPage’’ ở phần đấu trang(<%@ Page %>)

– Khái báo thuộc tính trong thẻ asp:content là ContentPlaceHolderID=“ID PlaceHoler” trong trang MasterPage

264 Lê Văn Sỹ, P.14, Q.3

Bài tập: Tạo trang master page theo cấu trúc sau:

12 Calendar

Tên thuộc tính-Phương thức Mô tả

SelectionChanged() Sự kiện xảy ra khi thay đổi chọn ngày

264 Lê Văn Sỹ, P.14, Q.3

Ví dụ: Chọn 1 ngày trên Calendar hiện ngày đã chọn lên TextBox

– Ví dụ:

protected void Calendar1_SelectionChanged(object sender, EventArgs e) {

TextBox1.Text = Calendar1.SelectedDate.ToString();

}

Gợi ý : Hiển thị theo định dạng ngày/tháng/năm ToString(‘’dd/MM/yyyy’’)

Bài :Nhấn vào Image hiện Calendar Khi chọn ngày trên điều khiển Calendar sẽ hiện ngày lên TextBox

Gợi ý:

<script type="text/javascript">

264 Lê Văn Sỹ, P.14, Q.3

{

var obj =document.getElementById(‘divCalendar'); obj.style.display = 'block';

}

</script>

<img src="nhatky.png" alt="" onclick="displayCalendar()" />

<div id="divCalendar" style=" display:none" >

<asp:Calendar id=“calendarID" Runat="server></asp:Calendar>

</div>

13 MultiView

– Giới thiệu:

• Điều khiển Multiview sử dụng để ẩn hiện các phần của 1 trang web.Có thể sử dụng điều khiển này để tạo TabPage

• MultiView chứa nhiều điều khiển View

264 Lê Văn Sỹ, P.14, Q.3

Tên thuộc tính-Phương thức Mô tả

ActiveViewIndex Chỉ định điều khiển View hiển thị thông qua chỉ số SetActiveView(View view) Gán điều khiển View hiển thị

View GetActiveView() Lấy thông tin điều khiển view hiển thị

14 Wizard

– Giới thiệu:

• Điều khiển Wizard sử dụng chia giao diện lớn thành từng phần

• Điều khiển Wizard chứa nhiều WizardStep

Tên thuộc tính-Phương thức Mô tả

PreviousButtonClick Sự kiện xảy ra khi nhấn nút Previous

264 Lê Văn Sỹ, P.14, Q.3

15 Adrotator

Tên thuộc tính Mô tả

AdvertisementFile Chỉ định đường dẫn đến tập tin XML chứa danh sách ảnh quảng cáo AlternateTextField Chỉ định đến tên trường để hiển thị

DataMember Chỉ định phần tử cơ sở dữ liệu

DataSource Chỉ định đến dữ liệu

<Advertisements>

<Ad>

<ImageUrl>~/company.png</ImageUrl>

<height>60</height>

<width>190</width>

<NavigateUrl>http://www.abc.com</NavigateUrl>

<AlternateText>abc</AlternateText> <Impressions>80</Impressions>

<Keyword>Topic1</Keyword>

</Ad>

<Ad>

… </Ad>

</Advertisements>

16 Adrotator:Cấu trúc tập tin XML

Tên thuộc tính Mô tả

ImageURL URL của hình ảnh trình bày

Height Chiều cao hình ảnh theo pixels

Width Chiều rộng hình ảnh theo pixels

NavigateURL URL sẽ chuyển đến khi nhấn vào hình ảnh

AlternateText Đoạn văn bản trình bày khi hình ảnh không hiển thị được

Keyword Chỉ định loại quảng cáo để điều khiển lọc danh sách quảng cáo dựa trên loại

Impressions Chỉ định giá trị mức độ hiển thị của quảng cáo