Bài giảng Thiết kế và lập trình Web 2 - Làm việc với Control

việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Server Control & HTML Control
Group control Panel, Placeholder Flow Layout, Grid Layout
Ngày tháng Calendar none
Quảng cáo AdRotator none
Đường kẻ none Horizontal Rule
Lấy tên file từ
client none File Field
Lưu dữ liệu trên
trang (sử dụng quản lý trạng thái) Input Hidden
Kiểm tra tính
đúng đắn của
dữ liệu nhập
RequiredFieldValidator, CompareValidator, 
RangeValidator, RegularExpressionValidator, 
CustomValidator,ValidationSummary
none (sử dụng
client script)
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Nội dung
ƒ Server Control
ƒ ASP.NET Server control vs HTML control
ƒ Simple control
– Label, Button (Button, LinkButton, ImageButton), TextBox
– List Control (ListBox, DropDownList, Table,DataGrid, 
DataList, Repeater )
ƒ Validation control
ƒ Một số control khác
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Simple control
Label, Buttons, TextBox - HTML tag
ƒ Label
– Please input 
text
ƒ Buttons (Button, LinkButton, ImageButton)
– <asp:Button id="Button1" runat="server" 
Text="Button">
– <asp:LinkButton id="LinkButton1" 
runat="server">LinkButton
– <asp:ImageButton id="ImageButton1" 
runat="server">
ƒ TextBox
– 
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Simple control
Chỉnh sửa Thuộc tính lúc Thiết kế
Button
Link Button
Image Button
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Simple control
Một số thuộc tính quan trọng
Thuộc tính Sử dụng đề
Text Lấy/Đặt dữ liệu choTextBox.
TextMode SingleLine, MultiLine (scrollable), Hoặc Password. 
Enabled Enable/Disable TextBox
Visible Show/Hide TextBox
ReadOnly Ngăn không cho người dùng thay đổi dữ liệu trong TextBox.
AutoPostBack
Khi được thiết lập là True, mỗi khi người dùng thay đổi dữ liệu
TextChanged trong TextBox sẽ kích hoạt sự kiện post-back về
server
ƒ Label, Buttons
– Thuộc tính Text
ƒ TextBox
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
List Control
ListBox, DropDownList, Table
Control Sử dụng khi
ListBox Hiển thị danh sách dữ liệu read-only đơn giản, sử dụngscroll
DropDownList Hiển thị danh sách dữ liệu read-only đơn giản, sử dụng cửasổ sổ xuống
Table
Hiển thị thông tin dưới dạng dòng và cột. Table control 
cho phép xây dựng các bảng động bằng mã lệnh sử dụng
các thuộc tính tập hợp TableRows và TableCells
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
List Control: HTML tag
ƒ ListBox
– 
ƒ DropDownList
– <asp:DropDownList id="DropDownList1" 
runat="server">
ƒ Table
– <asp:Table id="Table1" runat="server" Width="100px" 
Height="70px">
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
List Controls
Chỉnh sửa Thuộc tính lúc Thiết kế
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
List Control
Thêm các mục dữ liệu vào thời điểm chạy ứng dụng
ƒ ListBox và DropDownList: 
– Sử dụng phương thức Add và danh sách Items của control
– Ví dụ:
protected void btnShow_Click(object sender, EventArgs e)
{
ListBox1.Items.Add(txtSource.Text);
DropDownList1.Items.Add(txtSource.Text);
}
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
List Control
Lấy mục dữ liệu được chọn
ƒ Dùng thuộc tính SelectedItem để lấy mục dữ liệu được chọn
hiện tại trong List
protected void Page_Load(object sender, EventArgs e)
{
// Test if there is a selected item.
if (ListBox1.SelectedItem == null)
// Display the selected item.
Label1.Text = "The selected item is: " + 
ListBox1.SelectedItem.Text;
else
Label1.Text = "No item is selected.“;
}
}
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Nội dung
ƒ Server Control
ƒ ASP.NET Server control vs HTML control
ƒ Simple control
– Label, Button (Button, LinkButton, ImageButton), TextBox
– List Control (ListBox, DropDownList, Table,DataGrid, 
DataList, Repeater )
ƒ Validation control
ƒ Một số control khác
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Validation control 
ƒ Validation control kiểm tra tính đúng đắn của dữ liệu do 
client nhập vào trước khi trang được gửi về cho server
Validation control Sử dụng khi
RequiredFieldValidator Kiểm tra nếu dữ liệu trong control khác rỗng
CompareValidator Kiểm tra nếu mục dữ liệu nhập trong control giốngvới control khác
RangeValidator Kiểm tra nếu mục dữ liệu nhập trong control nằmtrong khoảng 2 giá trị
RegularExpressionValidator Kiểm tra nếu mục dữ liệu nhập trong control thỏa 1 công thức định dạng chỉ định
CustomValidator
Kiểm tra tính đúng đắn của dữ liệu nhập vào control 
sử dụng client-side script hoặc a server-side code, 
hoặc cả 2
ValidationSummary Hiển thị tất cả các lỗi kiểm tra xảy ra trong trang
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Sử dụng Validation Control
ƒ Các bước:
– Kéo thả 1 validate control vào Web form
– Thiết lập các thuộc tính cho validate control:
• ControlToValidate là control bạn muốn kiểm tra
• ErrorMessage : Thông báo lỗi
• Text : Hiển thị của validate control
– Sử dụng ValidationSummary control để hiền thị tất cả
các lỗi xảy ra trong trang
Mặc dù việc kiểm tra xảy ra ở client, nhưng nó chỉ thực hiện khi có 1 sự
kiện post-back xảy ra!
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Ví dụ
•Đặt thuộc tính ErrorMessage cho Validate control
• Sử dụng ValidationSummary• Sử dụng ValidationSummary control với ShowMessage=True 
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Hủy bỏ việc Kiểm tra
ƒ Để cho người dùng tự hủy bỏ việc kiểm tra nếu muốn
ƒ Các bước:
– Tạo một HTML Button control
<INPUT id="butCancel" onclick="Page_ValidationActive=false;“
type="submit" value="Cancel">
• Hủy sự kiện validation: onclick="Page_ValidationActive=false;
• Và gửi trang về cho server
– Kiểm tra lại dữ liệu ở trên server
• Kiểm tra thuộc tính Page.IsValid trong hàm xử lý sự kiện Page_Load
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Page.IsValid
ƒ Thuộc tính Page.IsValid kiểm tra xem các form đã
thỏa các Validation Control hay không.
ƒ Trả về true nếu tất cả đều được test thành công
ƒ Trả về false, trong trường hợp ngược lại.
protected void Page_Load(object sender, EventArgs e)
{
// Validate in case user cancelled validation.
if (Page.IsPostBack == true)
// Check if page is valid
Page.Validate();
else
// User cancelled operation, return home
Response.Redirect("default.aspx");
}
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
CustomValidator
ƒ Sử dụng CustomValidator control 
ƒ Tự viết mã lệnh kiểm tra chạy trên server hoặc client
ƒ Trên Server
– Đặt mã lệnh kiểm tra trong hàm xử lý sự kiện ServerValidate
ƒ Hoặc Trên Client
– Chỉ định đoạn script kiểm tra cho thuộc tính
ClientValidationFunction của CustomValidator
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Ví dụ: Tự Kiểm tra trên Server
protected void MyValidate(object source, ServerValidateEventArgs args)
{
args.IsValid = false;
if (TextBox1.Text == "abc")
args.IsValid = true;
}
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Ví dụ: Tự kiểm tra trên Client
function ClientValidate(e, args)
{
args.IsValid = false;
if (args.Value == "abc")
args.IsValid = true;
}
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Nội dung
ƒ Server Control
ƒ ASP.NET Server control vs HTML control
ƒ Simple control
– Label, Button (Button, LinkButton, ImageButton), TextBox
– List Control (ListBox, DropDownList, Table,DataGrid, 
DataList, Repeater )
ƒ Validation control
ƒ Một số control khác
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Một số control khác
ƒ Lấy và thiết lập giá trị
– RadioButton, RadioButtonList, CheckBox, CheckBoxList
ƒ Gom nhóm
– Panel
ƒ Hiển thị Hình ảnh và Quảng cáo
– Background, Foreground, Image, AdRotator
ƒ Lấy thông tin Ngày tháng
– Calendar
ƒ Lấy Tập tin từ Client
– File Field HTML control
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Một số control khác
RadioButton, CheckBox
ƒ HTML tag
– 
– 
ƒ Sử dụng thuộc tính Checked để lấy giá trị thiết lập
protected void btnShow_Click(object sender, EventArgs e)
{
if (CheckBox1.Checked == True) 
Response.Write("Checkbox1 is CHECKED“);
}
• Tất cả RadioButton phải có cùng một GroupName
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Một số control khác
Panel
ƒ Kéo thả control Panel vào
Web form.
ƒ Kéo các control khác lên
trên Panel để gom nhóm
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Một số control khác
Hình ảnh và Quảng cáo
ƒ Hình nền
– Sử dụng thuộc tính Background của Web form
– Sử dụng thuộc tính BackImageUrl của Panel control
ƒ Hình ảnh
– Sử dụng Image control 
ƒ Button bằng hình ảnh
– Sử dụng ImageButton control
ƒ Quảng cáo
– Sử dụng AdRotator control
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Một số control khác
Calendar
ƒ Sử dụng Calendar control để
lấy thông tin về Ngày tháng
ƒ Để lấy hoặc thiết lập giá trị
ngày tháng trên Calendar 
control, sử dụng hàm xử lý sự
kiện SelectionChanged và
thuộc tính SelectedDate
hoặc SelectedDates
Thiết kế & Lập trình WEB 2 – Làm việc với Control
© 2007 Khoa CNTT – ĐH KHTN
Một số control khác
File Field HTML control 
ƒ Sử dụng File Field HTML 
control để upload file từ client 
lên server
ƒ File Field HTML control = Text 
Field HTML control + Submit 
Button HTML control 
ƒ Nhấn vào Browse button sẽ
hiển thị cửa sổ cho phép chọn
đường dẫn đến các file muốn
upload trên máy client