THIẾT KẾ & LẬP TRÌNH WEBSITEthayphet.net/application/upload/products/05.Chuong05.pdf(ID) Tên...

1

Chương 5:

CAC ĐIỀU KHIỂN TRONG ASP.NET

© Dương Thành Phết www.thayphet.net - [email protected]

KHOA CAO ĐẲNG THỰC HÀNH

THIẾT KẾ & LẬP TRÌNH WEBSITE (Chuyên ngành: Đồ Họa Đa Truyền Thông)

2 2

NỘI DUNG


1. Tổng quan về các controls

2. HTML Control

3. Web Server Controls

4. Validation Controls

5. Web User controls

6. Master Pages

7. Data Controls

3 3

1. TỔNG QUAN VỀ CAC CONTROLS


4 4

2. HTML CONTROL

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

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.

© Dương Thành Phết

HTML Control trên Toolbox www.thayphet.net - [email protected]

5 5

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


2. HTML CONTROL

6 6

3. WEB SERVER 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ìm

hiểu và sử dụng.

Hiệu quả: Tự động phát sinh ra các tag HTML theo

từng loại Browser


7 7 Bảng liệt kê các thuộc tính chung của các Web control © Dương Thành Phết

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

Height Chiều cao của điều khiển

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.

www.thayphet.net - [email protected]


8 8

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

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



9 9

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:

Text: Nội dung chứa trong Textbox

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

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

khi độ rộng của textbox không đủ.



10 10

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

www.thayphet.net - [email protected] © Dương Thành Phết


11 11

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.

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



12 12

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

}


13 13

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.



14 14

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



15 15

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



16 16

Tập hợp Items

Add: Thêm mục mới vào cuối danh sách

Items.Add(<String>);

Insert: Thêm mục mới vào danh sách tại một vị trí

Items.Insert(<index>,<String>);

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

RemoveAt: Xóa item tại vị trí index khỏi danh sách.

Items.RemoveAt(<index>);

Clear: Xóa tất cả Item có trong danh sách.

Items.Clear();



17 17

Xử lý mục chọn

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.

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.

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.

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.



18 18

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.



19 19



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

…….

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 += "<li>" + lstDiadanh.Items[i].Value;

}

}


20 20

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

thành 1 nhóm.



21 21

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ữ



22 22

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

cá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ũng

tương tự như ListBox/DropDownList.

Tạo mới:

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

Chọn Edit Items



23 23


Các thuộc tính

RepeatColumns: Số cột hiển thị.

RepeatDirection: Hình thức hiển thị

Vertical: Theo chiều dọc

Horizontal: Theo chiều ngang

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.


24 24

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


25 25

Ví dụ: Tạo trang web khi click nút Đăng ký thì hiện thị các

thông tin được chọn.



26 26

3.9. Đ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ạ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).



27 27


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>

28 28

3.10. Đ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ự động

thay đổi các hình ảnh mỗi khi có yêu cầu (PostBack về

server).



29 29


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


30 30


Sự kiện

AdCreated: Xảy ra khi điều khiển tạo ra các quảng cáo


31 31


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

Chọn XML File trong hộp thoại Add New Item


32 32


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

<?xml version="1.0" encoding="utf-8" ?>

<Advertisements>

<Ad>

<ImageUrl>Pictures\Baihatviet.gif</ImageUrl>

<NavigateUrl>http://www.Baihatviet.net</NavigateUrl>

<AlternateText>Web Nhạc bài hát việt</AlternateText>

<Keyword>Music</Keyword>

<Impressions>10</Impressions>

</Ad>

</Advertisements>


33 33


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


34 34


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)

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


35 35

3.11. Điều khiển Calendar

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



36 36

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



37 37

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



38 38

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


39 39


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

}


40 40

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


41 41

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.



42 42

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


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

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

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

}


43 43

3.13. Đ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ên

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



44 44


Thuộc tính

DefaultButton: Định nghĩa button mặc định trong panel

(sẽ được thực hiện khi nhấn Enter)

Direction: Thiết đặt hướng hiển thị nội dung được đưa ra

trong panel:NotSet, LeftToRight, RightToLeft.

GroupingText: Trình bày Panel như 1 Fieldset với một

chú giải riêng biệt.

HorizontalAlign: Chỉ ra hướng ngang thể hiện nội

dung của panel:Center, Justify, Left, NotSet, Right.

ScrollBars: Hiển thị scrollbars khi nội dung trong panel

vượt quá kích thước: Auto, Both, Horizontal, None,

Vertical.


45 45

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


Thiết kế:


46 46


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;

}


47 47

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

khiển View.



48 48


Thuộc tính

ActiveViewIndex: Lựa chọn điều khiển View được

đưa ra hiển thị bằng chỉ số Index

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

GetActiveView: Cho phép lấy về thông tin của

điều khiển View được lựa chọn.

SetActiveView: Cho phép thiết lập điều khiển

View được hiển thị.

Sự kiện

ActiveViewChanged:Khi điều khiển View được

chọn


49 49

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


50 50


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)


51 51


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


52 52



<script runat="server">

void Menu1_MenuItemClick(object sender, MenuEventArgs e){

int index = int.Parse(e.Item.Value);

MultiView1.ActiveViewIndex = index;

}

void Page_Load(object sender, EventArgs e){

if (!IsPostBack){

MultiView1.ActiveViewIndex = 0;

}

}

</script>


53 53

4. CAC ĐIỀU KHIỂN KIỂM TRA DỮ LIỆU-VALIDATION


4.1 Giới thiệu chung

4.2. Điều khiển Required Field Validator

4.3. Điều khiển Compare Validator

4.4. Điều khiển Range Validator

4.5. Điều khiển Regular Expression Validator

4.6. Điều khiển Custom Validator

4.7. Điều khiển Validation Summary

54 54

4.1. GIỚI THIỆU CHUNG


55 55

Mỗi khi PostBack về Server, trang Web luôn kiểm tra tính

hợp lệ dữ liệu (nếu có yêu cầu khi thiết kế). Nếu dữ liệu

không hợp lệ (bỏ trống, vi phạm miền giá trị, mật khẩu

nhập lại không đúng, …), trang web sẽ không thể

PostBack về Server. www.thayphet.net - [email protected] © Dương Thành Phết


56 56


Trang Dangky.htm với ngôn ngữ HTML & Javascript

Khó khăn trong thiết kế và lập trình (trên 100 dòng code)


57 57


Trang Dangkythanhvien.aspx với MS Visual studio chỉ

còn là quan tâm đến các thuộc tính cần khai báo


58 58


4.2. ĐIỀU KHIỂN REQUIRED FIELD VALIDATOR

Công dụng:

Dùng để kiểm tra giá trị trong điều khiển phải

được nhập. Để kiểm tra ràng buộc khác rỗng (Not null)

Thuộc tính:

59 59


4.3. ĐIỀU KHIỂN COMPARE VALIDATOR

Công dụng:

Để so sánh giá trị của điều khiển với giá trị của

điều khiển khác hoặc một giá trị được xác định trước.

Sử dụng điều khiển này để kiểm tra ràng buộc

miền giá trị, kiểu dữ liệu, liên thuộc tính.

60 60


Thuộc tính:

ControlToCompare: Tên điều khiển cần so sánh.

ValueToCompare: Giá trị để so sánh

Operator: Qui định phép so sánh (=, >, >=, <, <=, <>),

kiểm tra kiểu dữ liệu ( DataTypeCheck)

Type: Qui định kiểu dữ liệu để kiểm tra hoặc so

sánh(String, Integer, Double, Date, Currency)

4.3. ĐIỀU KHIỂN COMPARE VALIDATOR

61 61


4.4. ĐIỀU KHIỂN RANGE VALIDATOR

Công dụng:

Để kiểm tra giá trị trong điều khiển có nằm trong

đoạn [min-max] (kiểm tra ràng buộc miền giá trị).

62 62


Thuộc tính:

- MinimumValue: Giá trị nhỏ nhất.

- MaximumValue: Giá trị lớn nhất.

- Type: Xác định kiểu để kiểm tra dữ liệu. Có thể thực

hiện kiểm tra trên các kiểu: String, Integer, Double,

Date, Currency

4.4. ĐIỀU KHIỂN RANGE VALIDATOR

63 63


4.5. ĐIỀU KHIỂN REGULAR EXPRESSION VALIDATOR

Công dụng:

Để kiểm tra giá trị của điều khiển phải theo mẫu

được qui định trước như: địa chỉ email, số điện thoại,

mã vùng, số chứng minh thư, …

64 64


Thuộc tính:

ValidationExpression: Qui định mẫu kiểm tra dữ liệu


65 65


Bảng mô tả các ký hiệu sử dụng trong Validation Expression


66 66


4.6. ĐIỀU KHIỂN CUSTOM VALIDATOR

Công dụng:

Điều khiển này cho phép bạn tự viết hàm xử lý

kiểm tra lỗi.

Sự kiện:

ServerValidate: Đặt các xử lý kiểm tra dữ liệu

trong sự kiện này. Việc kiểm tra này được thực hiện

ở Server.

Ví dụ: Xử lý kiểm tra dữ liệu nhập tại điều khiển

txtSoA có phải là số chẵn hay không.

67 67


4.7. ĐIỀU KHIỂN VALIDATION SUMMARY

Công dụng:

Để hiển thị ra bảng lỗi - tất cả các lỗi hiện có

trên trang Web. Nếu điều khiển nào có dữ liệu không

hợp lệ, chuỗi thông báo lỗi - giá trị thuộc tính

ErrorMessage của Validation Control sẽ được hiển

thị.

Nếu giá trị của thuộc tính ErrorMessage không

được xác định, thông báo lỗi đó sẽ không được xuất

hiện trong bảng lỗi

68 68


Thuộc tính:

- HeaderText: Dòng tiêu đề của thông báo lỗi

- ShowMessageBox: Qui định bảng thông báo lỗi có

được phép hiển thị như cửa sổ MessageBox hay không.

- ShowSummary: Qui định bảng thông báo lỗi có được

phép hiển thị hay không.


69 69


Ví dụ: Tạo trang Dangkykhachang Sử dụng các điều

khiển ValidateControl để kiểm tra dữ liệu nhập trên các

điều khiển có trong hồ sơ đăng ký khách hàng.


70 70



71 71


Thuộc tính Text của các điều khiển kiểm tra dữ liệu đều là: (*)


72 72



Private Sub butDang_ky_Click(…)…

lblThong_bao.Text = "Đăng ký thành công";

End Sub


73 73


Các thông báo lỗi xuất hiện

qua hộp thoại khi dữ liệu nhập

không hợp lệ:


74 74


Nếu tất cả đều hợp lệ


75 75

5. WEB USER CONTROLS

5.1 Giới thiệu

Khi kết hợp các control để tạo thành một control mới gọi

là Web user control (UC)

Sử dụng UC cũng giống như sử dụng thủ tục, hàm

khả năng tái sử dụng UC trên các trang web

Phần mở rộng của UC là: .ascx


76 76

5.2 Tạo và sử dụng User control

Tạo mới User control:

Tạo mới 1 Web user control

Thiết kế giống như thiết kế 1 trang aspx


Chọn: Web User Control

Đặt tên: *.ascx


77 77

Sử dụng User control:

Kéo và thả UC vào trang aspx, lúc đó trang aspx sẽ

xuất hiện tag

<%@ Register . . %>



78 78

6. MASTER PAGES

6.1 Giới thiệu

Master pages cho phép tạo 1 bố cục nhất quán trên

các trang web trong cùng 1 website (tương tự template)

Nội dung thể hiển trên trình duyệt là sự kết hợp giữa

trang .master -master page và trang .aspx (hoặc .ascx) -

content page


Master page là tập tin có phần mở rộng .master

Thao tác thiết kế: Giống như trang aspx, nhưng phải

bổ sung ít nhất một điều khiển ContentPlaceHolder

79 79


Master page Content page

Trang kết quả

6. MASTER PAGES

80 80

6.2 Tạo trang Master

Bước 1: Tạo mới Item chọn icon Master Page và đặt

tên trang: *.master


6. MASTER PAGES

81 81

Bước 2: Thiết kế bố cục chung (có thể sử dụng User

control) và bổ sung ContentplaceHolder vào trang

master


6. MASTER PAGES

82 82

6.3 Sử dụng trang Master

Bước 1: Tạo mới trang web (.aspx) khai báo sử dụng

trang master


6. MASTER PAGES

83 83

Bước 2: Thiết kế bổ sung nội dụng trên trang *.aspx

(có thể kéo các User control vào)


6. MASTER PAGES

84 84

7. ĐIỀU LIÊN KẾT DỮ LIỆU–DATA SOURCE CONTROL


7.1 Điều khiển kết nối cơ sở dữ liệu

7.2 Điều khiển liên kết cơ sở dữ liệu

85 85

7.1. ĐIỀU KHIỂN KẾT NÔI CSDL–DATA SOURCE CONTROL

Là các điều khiển dùng để chứa nguồn dữ liệu được

rút trích từ các hệ QT CSDL như: Access, SQLServer,

XML, Ocracle . . .

Có các điều khiển Data-Source sau: SQLDataSource,

Access Data Source, XML Data Source, . . .


86 86

7.1.1 ĐIỀU KHIỂN SQLDATASOURCE

Dùng để kết nối CSDL trong các hệ quản trị CSDL

SQLServer, Ocracle Server, . . .

Chọn đối tượng CSDL như Table, View, Procedure

hay câu lệnh SQL và khai báo điều kiện lọc (Where) với

nhiều cách như: Giá trị định sẳn, đối tượng Session,

Request.Form, Request.QueryString . . .


Tạo kết nối

Kéo điều khiển SQLDataSource từ Tollbox vào trang

Chọn Conigure Data Source

87 87


Nếu trước đó đã tạo kết nối thì chọn kết nối đã có.

Ngược lại để tạo mới kết nối thì chọn New Connection

Tạo kết nối CSDL mới


88 88


Chọn QTCSDL (Microsoft SQLServer)

Chọn Continue để tiếp tục


89 89


Chọn Hệ QT CSDL

Khai báo các thông số cho kết nối

Chọn Tên Server

Chọn thông tin đăng nhập

Chọn tên CSDL

Kiểm tra kết nối

Đồng ý kết nối


90 90


Đặt tên cho kết nối

Tên kết nối


91 91


Xác định nguồn dữ liệu từ Table, View hay câu lệnh

SQL có thể chỉ định điều kiện lọc dữ liệu, sắp xếp hay

các chỉ định vcho xử lý thêm, xoá, sửa

Xác định nguồn dữ liệu

Từ câu lệnh SQL hay

Từ Table, View

Xác định điều kiện

Chỉ định sắp xếp

Các lệnh thê, xoá, sửa


92 92


Chọn Test Query để kiểm tra kết quả nguồn dữ liệu.

Chọn Finish để hòan thành


93 93


Điều khiển SQL DataSource và tham số Request.QueryString

Để lọc dữ liệu theo điều kiện thì giá trị tham số có thể

được gán trực tiếp thông qua đối tượng

Request.Querystring (Truyền tham số qua liên kết)

Khi click vào liên kết trang có địa chỉ kèm theo tham số dạng:

http://localhost:49222/ . . ./SachNXB.aspx?MaNXB=3


94 94


Thực hiện:

Tạo trang NhaXB.aspx là danh mục nhà xuất bản

Chọn Edit Column từ GiridView Task


95 95



96 96


Với các thuộc tính:

HeaderText: Nhãn tiêu đề cột

Text: Nhãn hiện thị trong tất cả các ô

DatTextField: Giá trị từ 1 field chỉ định trong nguồn DL

DataNavigateUrlFields: Danh mục tên các tham số ghi

cách nhau bởi dấu ,

DataNavigateUrlFormatting: Địa chỉ trang liên kết kèm

tham số dạng: ~/SachNXB.aspx?MaNXB={0}

Giá trị tham số ghi dưới dạng chỉ số các tham số được

khai báo trong DataNavigateUrlFields bắt đầu là 0 và cách

nhau dấu ,


97 97


Tạo trang hiện thị dữ liệu với nguồn dữ liệu có tham

số qua liên kết (Request.QueryString).

Xác định nguồn dữ liệu, sau đó chọn Where để chỉ

định điều kiện


98 98


Columns: Tên cột làm điều kiện

Operator: Toán tử so sánh

Source: Loại tham số (QueryString)

QueryString field: Tên tham số đã truyền

Chọn Add để chấp nhận thêm tham số


99 99




Source: Loại tham số (QueryString)

QueryString field: Tên tham số đã truyền



100 100


Thi hành xem kết quả


101 101


Điều khiển SQL DataSource và tham số Request.Form

Để lọc dữ liệu trong nguồn dữ liệu theo điều kiện với

giá trị tham số là giá trị trên form.

Thực hiện:

Tạo trang Lietkesach.aspx gồm:

1 Textbox thuộc tính ID: MaNXB

1 Button thuộc tính PostbackURL:

~/Lietkesach.aspx (Chính trang thiết kế)

Tạo SqlDataSource với nguồn dữ liệu:


102 102


Tạo SqlDataSource với nguồn dữ liệu như sau:


103 103




Source: Loại tham số (Form)

Form field: Tên tham số đã truyền (Tên Textbox)



104 104


Điều khiển SQL DataSource và tham số là các Controls

Có thể khai báo tham số trong điều khiển

SqlDataSource mà giá trị được lấy từ điều khiển

trình chủ.

Ví dụ thiết kế trang SachtheoCD.aspx thực hiện liệt

kê danh mục sách có chủ đề được chọn từ điều

khiển DropdownList


105 105


Thực hiện

Thiết kế Dropdownlist (ddlChude) từ Table Chude

Đặt thuộc tính

ID: ddlChude

DataSourceID: SqlDataSource1

DataTextField: TenCD (Field hiện thị)

AutoPostBack: True

DataValuefield: MaCD (Field để truyền tham số)


106 106


GridView (GridView1) Với nguồn dữ liệu từ Table Sach

Và tham số điều kiện (Where)


107 107




Source: Loại tham số (Control)

ControlID: Tên tham số đã truyền



108 108


Điều khiển SQL DataSource và Procedure

Ta có thể sử dụng điều khiển kết nối CSDL

SqlDatasource để truy cập gọi Stored Procedure

trong CSDL SQL Server.

Ví dụ: Ta có Procedure Sachtheogia liệt kê các

quyển sách với điều kiện Giá từ 2 tham số là Giatu

và Giaden

Create Proc Sachtheogia

@Giatu int, @Giaden Int

as

Select *

From sach

Where Dongia Between @Giatu and @Giaden


109 109


Khi cấu hình cho điều khiển SQLDataSource

Chọn loại nguồn dữ liệu là từ Procedure


110 110


Chọn tên Procedure


111 111


Xác định giá trị cho các tham số của Procedure


112 112

7.1.2 ĐIỀU KHIỂN ACCESS DATASOURCE

Dùng để kết nối với cơ sở dữ liệu Access MDB).

Thực hiện Tạo AccessDataSource từ thanh Toolbox.


Chọn Configure Data Source . . .: Để thực hiện kết nối

113 113


Xác định nguồn dữ liệu và điều kiện tham số như

SQLData Source

7.1.2 ĐIỀU KHIỂN ACCESS DATASOURCE

114 114

7.1.3 ĐIỀU KHIỂN XMLDATASOURCE

Điều khiển XMLDataSource được sử dụng để kết nối

CSDL định dạng XML.

Thực hiện: Tạo tập tin XML (DSSinhvien).


<?xml version="1.0" encoding="utf-8"?>

<DSSinhvien>

<Sinhvien MaSV="SV01" HotenSV="Trần Văn Nam"

Diachi="123 Trần Hưng Đạo, Q5" Email="[email protected]" />

<Sinhvien MaSV="SV02" HotenSV="Nguyễn Thị Lý"

Diachi="45 Hai Bà Trưng, Q1" Email="[email protected]" />

<Sinhvien MaSV="SV03" HotenSV="Nguyễn Thị Bình"

Diachi="31 Lý Thường Kiệt,TB" Email="[email protected]"/>

</DSSinhvien>

115 115

Tạo XMLDataSource từ Toolbox.


Chọn Configure Data Source . . .: Để thực hiện kết nối


116 116

Chọn tập tin XML.

Chọn OK để hoàn tất



117 117

7.2. ĐIỀU KHIỂN LIÊN KẾT CƠ SƠ DỮ LIỆU

7.2.1 Gridview

7.2.2 DataList

7.2.3 Repeater

7.2.4 Detailview & FormView


118 118

7.2.1 GRIDVIEW


Giới thiệu:

- GridView là một điều khiển khá linh hoạt và hiệu quả

trong việc hiển thị, định dạng và thao tác với dữ liệu.

- Cho phép thực hiện sắp xếp dữ liệu, phân trang với

sự hỗ trợ khá tốt của Visual .Net trong quá trình thiết

kế.

119 119


Tạo GridView vào trang

Kéo Control GridView vào trang

7.2.1 GRIDVIEW

120 120


Định dạng tự động

Chọn những mẫu định dạng có sẳn Gridview

bằng cách Chọn Auto Format từ khung Gridview Task

7.2.1 GRIDVIEW

121 121


Kết nối nguồn dữ liệu

Thực hiện kết nối nguồn dữ liệu với cơ sở dữ liệu

SQLServer, Access, XML. .

Tại mục Choose Data Source: New Data Source

(Hoặc chọn Datasource đã được tạo trước đó)

Ghi chú: Tạo Datasource như được trình bày trước

7.2.1 GRIDVIEW

122 122


Thi hành xem kết quả:

7.2.1 GRIDVIEW

123 123


Thêm cột

Trong cửa sổ Gridview Task chọn : Add New Column

Chọn Loại field : BoundField

Tiêu đề côt : Header Text

Tên field dữ liệu: DataField

Ok hòan thành

7.2.1 GRIDVIEW

124 124


Hiệu chỉnh các cột

Trong cửa sổ Gridview Task chọn : Edit Column

7.2.1 GRIDVIEW

125 125


AvailableFields: Chọn lọai Field liên kết dữ liệu

BoundField: Cột dạng Textbox.

Checkbox Field: Cột dạng Checkbox.

Hyperlink Field: Cột dạng liên kết.

Button Field: Cột dạng nút lệnh

CommandField: Cột dạng nút lệnh được thiết kế sẵn

Select: Nút lệnh chọn dòng dữ liệu

Edit, Cancel, Update: Các nút cập nhật d.liệu

Delete: Nút lệnh xóa dòng dữ liệu

TemplateField: Cột do người dùng tự thiết kế.

7.2.1 GRIDVIEW

126 126


Convert this Field into a Template Column: Chuyển

cột hiện hành thành cột dạng Template Column.

BoundColumn properties: Thông tin chi tiết cho các cột

HeaderText, Footer Text: Tiêu đề trên/dưới của cột

Header Image: Hình hiển thị trên tiêu đề cột.

Sort Expression: Biểu thức sắp xếp của cột.

Visible: Qui định cột có được hiển thị hay không.

DataField: Qui định tên field dữ liệu cần hiển thị.

Data formatting expression: Biểu thức định dạng

{0:<chuỗi định dạng>}.

Vd: {0:000.00}, {0:0.##}

{0:dd/MM/yyyy}, {0:hh/mm/ss tt}

7.2.1 GRIDVIEW

127 127


Thiết lập các thuộc tính định dạng lưới

Chọn GridView Properties

- ShowHeader/ShowFooter: Hiện / Ẩn Phần đầu và

chân của GridView

7.2.1 GRIDVIEW

128 128


- HeaderStyle/FooterStyle: Định dạng dòng Header/Footer

7.2.1 GRIDVIEW

129 129


- RowStyleAlternatingRowStyle: Định dạng dòng dữ liệu

lẽ/chẵn:

7.2.1 GRIDVIEW

130 130


- AlowPaging : Phân trang

Page size:Qui định số dòng/trang

Possition: Qui định vị trí

hiển thị của bộ nút di

chuyển.

Mode: Qui định hình thức

hiển thị của bộ nút di

chuyển.

7.2.1 GRIDVIEW

131 131


- AllowSorting: Sắp xếp

7.2.1 GRIDVIEW

132 132

7.2.2 ĐIỀU KHIỂN DATALIST


Giới thiệu:

Như điều khiển Gridview, điều khiển DataList được

sử dụng để hiển thị dữ liệu. Tuy nhiên, đối với DataList,

chúng ta phải tự thiết kế hình thức hiển thị dữ liệu (giống

như Template Column của GridView)

133 133


Một số thuộc tính cần chú ý

RepeatDirection: Qui định hướng hiển thị dữ liệu

oHorizontal: Hiển thị dữ liệu theo chiều ngang

oVertical: Hiển thị dữ liệu theo chiều đứng

RepeatColumns: Qui định số cột hiển thị


134 134


- Thiết kế hình thức hiển thị cho DataList cũng tương

tự như thiết kế cho cột Template Column của GridView

- Chọn Edit Template từ thực đơn ngữ cảnh để thực

hiện thiết kế hình thức hiển thị cho DataList.


135 135


Ghi chú:

Để công việc thiết kế được dễ dàng, thực hiện

thiết kế ở bên ngoài điều khiển DataList. Sử dụng

Table để định vị trí các điều khiển. Sau khi thiết kế

hoàn tất, kéo kết quả vào vị trí hiển thị trong DataList.


136 136

7.2.3 ĐIỀU KHIỂN REPEATER


Giới thiệu:

Như DataList & DataGrid, điều khiển Repeater

dùng để hiển thị dữ liệu. Tuy nhiên phải tự thiết kế hình

thức hiển thị thông qua các tag HTML.

137 137


HeaderTemplate>

Nội dung hiển thị cho tiêu đề

</HeaderTemplate>

<ItemTemplate>

Nội dung hiển thị cho các mục dữ liệu dòng lẻ.

</ItemTemplate>

<AlternatingItemTemplate>

Nội dung hiển thị cho các mục dữ liệu chẳn.

</AlternatingItemTemplate>

<SeparatorTemplate>

Nội dung hiển thị giữa các dòng dữ liệu

</SeparatorTemplate>

<FooterTemplate>

Nội dung hiển thị cho tiêu đề dưới.

</FooterTemplate>:


138 138


Ví dụ:

Bước 1: Tạo mới điều khiển Repeater: rptChudesach

vào trang Web

Bước 2: Kết nối và tạo nguồn dữ liệu cho điều khiển từ

Table Chude với các cột: MaCD, Tenchude

Bước 3:. Chuyển trang Web qua dạng code HTM bổ

sung các tag sau:


139 139


<asp:Repeater ID="rptChudesach" runat="server" DataSourceID="SqlDataSource1">

<HeaderTemplate>

<table border="1" cellspacing="0">

<tr>

<td align="center">Mã CĐ</td>

<td align="center">Tên CĐ</td>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td> <%# Eval("MaCd")%></td>

<td> <%# Eval("Tenchude")%> </td>

</tr>

</ItemTemplate>

<AlternatingItemTemplate>

<tr bgcolor="GhostWhite">

<td><%# Eval("MaCD")%> </td>

<td><%# Eval("TenChude")%></td>

</tr>

</AlternatingItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

140 140

7.2.4 DETAILVIEW & FORMVIEW


Giới thiệu:

Hai điều khiển này cho phép làm việc với một

trường dữ liệu đơn tại mỗi thời điểm. Thực hiện được

chức năng xem, thay đổi, thêm mới hay xoá, di chuyển

sang trang tiếp theo hay quay lại trang trước.

141 141

Detailview


Hiển thị dữ liệu với DetailView

DetailView được đưa ra hiển thị như 1

bảng(<Table>)trong HTML để hiển thị dữ liệu 1 bản ghi.

Ví dụ: Trang XemthongtinKH.aspx


142 142


Sử dụng Fields với điều khiển DetailView

DetailView hỗ trợ tất cả các Field như GridView :

BoundField,CheckBoxField,CommandField,ButtonField,

HyperLinkField, ImageField, TemplateField


143 143


Xử lý phân trang với điều khiển DetailView

Để tạo phân trang chỉ định thuộc tính

AllowPaging=”true” cho điều khiển DetailView. Với các

thuộc tính định dạng thuộc nhóm: Pagersettings


144 144


Minh họa:

Trong ví dụ liên kết dữ liệu với Table Khachhang

đưa vào 5 BoundField và một CheckBoxField, điền dữ

liệu vào với thuộc tính DataField và thiết đặt tiêu dề

(HeaderText). Tạo phân trang và trình bày tại góc trên

bên phải.


145 145

Formview


Hiển thị dữ liệu với FormView

FormView dùng để hiển thị dữ liệu với các điều

khiển tùy biến cho dữ liệu một bản ghi. Ví dụ: Trang

XemthongtinNXB.aspx


146 146


Trình bày dữ liệu sử dụng Edit Template

Tạo FormView vào trang và liên kết dữ liệu

Tại cửa sổ thiết kế chọn Edit Tempalte từ cửa sổ

FormView Task


147 147


Thiết kế trình bày với các Control điều khiển tương tự

như khi thiết kế DataList với các điều khiển tùy biến


148 148


Xử lý phân trang với điều khiển FormView

Để tạo phân trang chỉ định thuộc tính

AllowPaging=”true” cho điều khiển Form. Với các thuộc

tính định dạng thuộc nhóm: Pagersettings


149 149


Minh họa:

Trong ví dụ liên kết dữ liệu với Table

NhaXuatBan đưa vào 4 Label, điền dữ liệu vào với

thuộc tính Text cho các File tương tứng, thiết đặt tiêu

đề(HeaderText). Tạo phân trang và trình bày tại phía

dưới giữa trang


150

Chương 5:

CAC ĐIỀU KHIỂN TRONG ASP.NET


KHOA CAO ĐẲNG THỰC HÀNH

THE END.

THIẾT KẾ & LẬP TRÌNH WEBSITEthayphet.net/application/upload/products/05.Chuong05.pdf(ID) Tên...

Documents

Transcript of THIẾT KẾ & LẬP TRÌNH WEBSITEthayphet.net/application/upload/products/05.Chuong05.pdf(ID) Tên...