Lập trình ASP.NET - Phạm Đình Sắc - Phần 3: ASP.NET Server Control

 dụng - Literal 3. Điều khiển thông dụng - TextBox
‰Cho phép người dùng nhập liệu và gửi lên web server
‰Thuộc tính:
TextMode=
y “Password” : nhập mật khẩu
y “MultiLine”: nhập nhiều dòng, khi đó quy định kích thước 
bởi Columns và Rows.
MaxLength: Giới hạn số ký tự tối đa
ReadOnly: Cho/không cho thay đổi giá trị trong TextBox
Enabled:(=False) Vô hiệu hóa điều khiển, không cho thay đổi 
giá trị
P4. Điều khiển trình chủ ASP.NET
3. Điều khiển thông dụng - TextBox
‰Sự kiện:
-TextChanged: Xảy ra khi nội dung trong điều khiển bị thay 
đổi, sự kiện được bẫy khi con trỏ rời điều khiển
‰Phương thức
- Focus(): Đặt con trỏ vào điều khiển TextBox
-AutoPostBack(): Tự động kích hoạt sự kiện TextChanged khi 
người dùng đưa con trỏ ra khỏi điều khiển.
-AutoCompleteType(): Liệt kê các thông tin đã nhập trước đây 
của điều khiển để chọn nhanh.
protected Sub Page_Load(sender, e)
TextBox1.Focus()
End Sub
3. Điều khiển thông dụng - TextBox
‰VD: 4_TextBox.aspx
TextBox chuẩn 
TextMode="Password”
 <br 
/>TextMode="MultiLine"
<asp:TextBox ID="TextBox3" runat="server" Columns="20" Rows="5" 
TextMode="MultiLine“ />
AutoCompleteType="Email"
25‐Mar‐10
18
protected Sub Page_Load(sender, e)
TextBox1.Focus()
End Sub
protected Sub TextBox1_TextChanged(sender, e)
Label1.Text = "Bạn đã thay đổi nội dung trong TextBox: 
" & TextBox1.Text
End Sub
3. Điều khiển thông dụng - TextBox
4_TextBox.aspx.cs
3. Điều khiển thông dụng - Button
‰Tạo nút bấm để gửi thông tin từ form lên web server
‰Thuộc tính:
™OnClientClick: Gán hàm Javascript để thực thi phía 
Client cho sự kiện Click. (Có dùng để đóng trình 
duyệt)
‰Sự kiện:
™Click(): Sự kiện Click thực thi phía Server
‰Vd: (4.5) Tạo nút bấm thực thi phía Client và phía 
Server
25‐Mar‐10
20
P4. Điều khiển trình chủ ASP.NET
3. Điều khiển thông dụng- Button
function Calculate(){ 
form1.TextBox3.value=form1.TextBox1.value*form1.TextBox2.value; }
Quantity:
Price:
Amount:
<asp:Button ID="Button1" runat="server" Text="Calculate1" 
OnClientClick="Calculate(); return false;" />
protected Sub Button2_Click(sender, e)
TextBox3.Text = 
Cint(TextBox1.Text)*Cint(TextBox2.Text).ToString()
End Sub
21
3. Điều khiển thông dụng - LinkButton
‰Dùng để gửi thông tin của trang lên server. 
LinkButton là nút bấm dạng liên kết.
‰VD:
protected Sub LinkButton1_Click(sender, e)
Label1.Text = "You clicked the link button"
End Sub
LinkButton Example
<asp:LinkButton ID="LinkButton1" runat="server" 
OnClick="LinkButton1_Click">Click me
22
3. Điều khiển thông dụng - ImageButton
‰Là nút bấm dạng hình ảnh.
‰VD: Mã tạo ImageButton
Mã VB
<asp:ImageButton ID=”ImageButton1” Runat=”server”
OnClick=”ImageButton1_Click” ImageUrl=”MyButton.jpg”
/>
protected Sub ImageButton1_Click(object sender,
System.Web.UI.WebControls.ImageClickEventArgs e)
// Code here
End Sub
25‐Mar‐10
23
3. Điều khiển thông dụng - ImageButton
‰VD: Hiệu ứng MouseOver trên ImageButton
25‐Mar‐10
24
P4. Điều khiển trình chủ ASP.NET
3. Điều khiển thông dụng - ImageButton
‰VD: Hiệu ứng MouseOver trên ImageButton
25‐Mar‐10
25
function MouseEvents(me, Path) 
{
me.src = Path; 
}
<asp:ImageButton ID="ImageButton1" runat="server" 
ImageUrl="~/images/button_1.png" />
<asp:Button ID=“btnClose" runat="server" Text=“Đóng“
OnClientClick="window.close();"  />
3. Điều khiển thông dụng - ImageButton
‰VD: Hiệu ứng MouseOver trên ImageButton
25‐Mar‐10
26
Protected Sub ImageButton1_Load(sender, e) _ 
Handles ImageButton1.Load
ImageButton1.Attributes.Add("onmouseover", 
"MouseEvents(this,'images/button_2.png')")
ImageButton1.Attributes.Add("onmouseout", 
"MouseEvents(this,'images/button_1.png')")
End Sub
27
Chỉnh sửa thuộc tính lúc thiết kế cho Button 3. Thực hiện chuyển trang
‰Mặc định khi click Button, LinkButton, ImageButton nó
sẽ thực hiện công việc ngay trên trang và trang của 
chúng ta sẽ Load lại một lần nhưng bạn có thể sử dụng 
thuộc tính PostBackUrl để chuyển sang một trang khác.
<asp:Label ID="lblSearch" runat="server"
Text="Search:" />
<asp:TextBox ID="txtSearch"
runat="server" />
<asp:Button ID="btnSearch" Text="GO!"
runat="server"
PostBackUrl="ButtonSearchResult.aspx" />
28
P4. Điều khiển trình chủ ASP.NET
3. Điều khiển thông dụng - HyperLink
‰Dạng liên kết, dùng định hướng trình duyệt đến một 
trang khác.
‰Thuộc tính:
™Text: chuỗi hiển thị của liên kết
™NavigateUrl: giống thuộc tính href của thẻ 
™ImageUrl: Hiển thị hình ảnh thay cho Text
‰Vd: Mã tạo HyperLink
<asp:HyperLink ID=”HyperLink1” Runat=”server”
Text=”Go to Google”
NavigateUrl=””>
29
3. Điều khiển thông dụng - DropDownList
‰Tạo danh sách, chỉ cho chọn một phần tử
‰Thuộc tính
™Items: Click vào nút (…) để tạo các phần tử
Mã phát sinh như sau:
Tin học
Ngoại Ngữ
 Văn học
Pháp luật
30
3. Điều khiển thông dụng- DropDownList (tt)
™DataSourceID: Chọn nguồn dữ liệu cho điều khiển 
(AccessDataSource, SqlDataSource, ObjectDataSource, 
XmlDataSource, SiteMapDataSource)
™DataTextField: Tên trường dữ liệu chứa văn bản hiển thị
trong danh sách
™DataValueField: Tên trường dữ liệu chứa giá trị sẽ được 
chọn của các phần tử trong danh sách.
™AutoPostBack: Mặc định khi chọn một phần tử trong danh 
sách, điều khiển không submit về server. Để tự động submit 
khi thay đổi lựa chọn phần tử trong danh sách, ta gán giá trị
cho thuộc tính này bằng true
™ SelectedValue: Giá trị của phần tử được chọn (*)
™ SelectedIndex: Chỉ số của phần tử được chọn (*)
™ SelectedItem: Phần tử được chọn (*)
(*): Sử dụng trong mã lập trình
31
3. Điều khiển thông dụng- DropDownList (tt)
‰Sự kiện:
™SelectedIndexChanged: Sự kiện xãy ra khi thay đổi 
mục chọn trong danh sách. (Lưu ý: thuộc tính 
AutoPostBack phải gán bằng True)
‰VD: (4.8)
protected Sub DropDownList1_SelectedIndexChanged(sender,e)
Label1.Text = "Mã Chủ đề đã chọn: " &
DropDownList1.SelectedValue.ToString()
End Sub
32
P4. Điều khiển trình chủ ASP.NET
3. Điều khiển thông dụng - ListBox
‰Tạo danh sách, cho phép chọn nhiều phần tử
‰Thuộc tính:
™Items, DataSourceID, DataTextField, DataValueField, 
SelectedIndex, SelectedValue, SelectedItem, 
AutoPostBack: giống DropDownList
™SelectionMode:
y Single: Chỉ chọn được một phần tử
y Multiple: Cho phép chọn cùng lúc nhiều phần tử
™Rows: Số dòng hiển thị của danh sách
‰Sự kiện: 
™SelectedIndexChanged: Xãy ra khi thay đổi việc chọn lựa 
trên điều khiển (dùng kết hợp AutoPostBack=true)
25‐Mar‐10
33
3. Thêm dữ liệu vào ListBox và DropDownList 
lúc chạy chương trình (Code)
‰ListBox và DropDownList: 
–Sử dụng phương thức Add vào danh sách Items của control
- Vídụ:
protected Sub btnShow_Click(object sender, EventArgs e)
ListBox1.Items.Add(txtSource.Text)
DropDownList1.Items.Add(txtSource.Text)
End Sub
25‐Mar‐10
34
3. Dùng thuộc tính SelectedItem để lấy mục dữ liệu được 
chọn hiện tại trong List
protected Sub Page_Load(sender, e)
’ Test if there is a selected item.
if (ListBox1.SelectedItem =null) then
’ Display the selected item.
Label1.Text = "The selected item is: " & 
ListBox1.SelectedItem.Text
else
Label1.Text = "No item is selected.“
End If
End Sub
25‐Mar‐10
35
3. Điều khiển thông dụng - CheckBox
‰Tạo check box đơn trên form, nhận giá trị true hoặc false
‰Thuộc tính:
™Checked: Xác định check box có được chọn không
™AutoPostBack: Tự động submit về server
‰Sự kiện:
™CheckedChanged: Xãy ra khi thay đổi giá trị Checked của 
check box (dùng kết hợp với AutoPostBack=true)
if (CheckBox1.Checked = true) then
Label1.Text = "Check1 is checked!"
else
Label1.Text = "Check1 is not checked!“
End if
36
P4. Điều khiển trình chủ ASP.NET
3. Điều khiển thông dụng - CheckBoxList
‰Tạo danh sách các check box trên form, cho phép đánh dấu 
chọn nhiều phần tử.
‰Thuộc tính:
™Items, DataSourceID, DataTextField, DataValueField, 
SelectedIndex, SelectedValue, SelectedItem, AutoPostBack: 
giống DropDownList
™RepeateColums: Số cột trình bày các CheckBox
™RepeateDirection: Hướng trình bày CheckBox
y Horizontal: Chiều ngang
y Vertical: Chiều đứng
‰Sự kiện:
™SelectedIndexChanged: Xãy ra khi thay đổi việc đánh dấu 
chọn trên điều khiển (dùng kết hợp AutoPostBack=true)
25‐Mar‐10
37
3. Điều khiển thông dụng- RadioButton
‰Tạo nút chọn hình tròn, thường có tối thiểu 2 nút, chỉ chọn một.
‰Thuộc tính:
™Checked: Xác định RadioButton có được chọn không
™AutoPostBack: Tự động submit về server
™GroupName: Tên nhóm các RadioButton thuộc về
‰Sự kiện:
™CheckedChanged: Xãy ra khi thay đổi giá trị Checked của 
RadioButton (dùng kết hợp với AutoPostBack=true)
‰ VD: (4.12)
protected Sub RadioButton_CheckedChanged(object sender, EventArgs e)
if (RadioButton1.Checked) then
Label1.Text = "Bạn đã chọn :" & RadioButton1.Text
else
Label1.Text = "Bạn đã chọn :" & RadioButton2.Text
end if
End Sub
38
3. Điều khiển thông dụng - RadioButtonList
‰Tạo danh sách các RadioButton, chỉ cho phép đánh dấu 
chọn một phần tử.
‰Thuộc tính:
™Items, DataSourceID, DataTextField, DataValueField, 
SelectedIndex, SelectedValue, SelectedItem, 
AutoPostBack: giống DropDownList
™RepeateColums: Số cột trình bày các RadioButton
™RepeateDirection: Hướng trình bày RadioButton
y Horizontal: Chiều ngang
y Vertical: Chiều đứng
‰Sự kiện:
™SelectedIndexChanged: Xãy ra khi thay đổi việc đánh 
dấu chọn trên điều khiển (dùng kết hợp 
AutoPostBack=true)
25‐Mar‐10
39
3. Điều khiển thông dụng - Image
‰Hiển thị hình ảnh trên trang web
‰Thuộc tính:
™ImageUrl: Đường dẫn của file hình
™ImageAlign: căn chỉnh hình ảnh
 <br 
/>
<asp:Button ID="Button1" Runat="server" Text="Change Image" 
OnClick="Button1_Click" />
protected Sub Button1_Click(sender, e)
Image1.ImageUrl = “~/MyImage2.gif”
End Sub
25‐Mar‐10
40
P4. Điều khiển trình chủ ASP.NET
3. Điều khiển thông dụng - Table
‰Tạo bảng trên trang web
‰Thuộc tính:
™Rows: Tạo dòng trong bảng
™Cells: Tạo ô trong dòng
Bill
Evjen
Devin
Rader