MỤC LỤCfit.mta.edu.vn/files/DanhSach/BGLTWeb_TinChi_V01.pdfBài giảng Lập trình Web Biên...

Bài giảng Lập trình Web

Biên soạn: Chu Thị Hường Bộ môn: Hệ thống thông tin Khoa Công nghệ Thông tin

1

MỤC LỤC

MỤC LỤC ............................................................................................................................. 1

Chương 1: Tìm hiểu môi trường WEB ................................................................................... 3

1.1. Các khái niệm cơ bản trong môi trường web ............................................................... 3

1.2. Cấu trúc trang web ...................................................................................................... 6

1.3. Các thẻ HTML thông dụng .......................................................................................... 7

1.3.1. Thẻ <head></head> .............................................................................................. 7

1.3.2. Thẻ <title></title> ................................................................................................ 7

1.3.3. Thẻ <body></body> ............................................................................................. 8

1.3.4. Các thẻ định dạng: ................................................................................................ 8

1.3.5. Thẻ định dạng bảng: ........................................................................................... 11

1.3.6. Thẻ hình ảnh ....................................................................................................... 12

1.3.7. Thẻ liên kết ......................................................................................................... 13

1.3.8. Các thẻ Input ...................................................................................................... 14

1.3.9. Thẻ Textarea ....................................................................................................... 19

1.3.10. Thẻ Select ......................................................................................................... 19

1.3.11. Thẻ Form .......................................................................................................... 20

1.3.12. Thẻ Frame ........................................................................................................ 21

1. 3.13. Một số thẻ HTML đặc biệt ............................................................................... 23

1.3.13.1. Thẻ <meta> ................................................................................................... 23

1.3.13.2. Thẻ marque .................................................................................................... 25

1.3.13.3. Thẻ <style> .................................................................................................... 26

1.3.13.4. Thẻ <link> ..................................................................................................... 27

1.3.13.5. Thẻ <Script> .................................................................................................. 28

1.4. CSS (Cascading Style Sheets) ................................................................................... 28

1.4.1. Giới thiệu ........................................................................................................... 28

1.4.2. Khai báo ............................................................................................................. 29

1.4.3. Một số thuộc tính hay sử dụng ............................................................................ 30

1.5. JAVASCRIPT (JS) .................................................................................................... 38

1.5.1. Giới thiệu ........................................................................................................... 38

1.5.2. Khai báo biến ..................................................................................................... 39

1.5.3. Các toán tử trong JavaScript ............................................................................... 40

1.5.4. Cấu trúc các lệnh ................................................................................................ 41

1.5.5. Hàm trong JavaScript ......................................................................................... 43

Chương 2. NGÔN NGỮ PHÁT TRIỂN ỨNG DỤNG WEB ................................................ 45

2.1. Giới thiệu một số ngôn ngữ kịch bản phía server: ...................................................... 45

2.2.Tổng quan về ngôn ngữ ASP.NET(Active Server Page. Net): ..................................... 45

2.2.1. Giới thiệu ASP và ASP.NET .............................................................................. 45

2.2.2. Giới thiệu .NET FRAMEWORK ........................................................................ 47

2.2.3. Biên dịch trang ASPX ........................................................................................ 48

2.2.4. Giới thiệu công cụ lập trình ................................................................................ 50

2.3. Nền tảng của ASP.NET ............................................................................................. 54

2.3.1. Mô hình trang web .............................................................................................. 54

2.3.2. Các chỉ dẫn ......................................................................................................... 56

2.3.3. Điều khiển sự kiện trong Web page .................................................................... 58

2.3.4. POSTBACK ....................................................................................................... 60

2.4. Master Page ............................................................................................................... 60

2.5. HTML Controls và ASP.NET Web Server Controls ................................................. 67

2.5.1. Giới thiệu các controls ........................................................................................ 67



2

2.5.2. Web Server Controls .......................................................................................... 68

2.5.3. Nhóm điều khiển điều hướng trang và nâng cao .................................................. 80

2.5.4. HTML Server Controls ....................................................................................... 91

2.5.5. Các điều khiển kiểm tra tính hợp lệ ..................................................................... 92

2.6. Các đối tượng trong ASP.NET ................................................................................ 100

2.6.1. Đối tượng Request và lớp HtttRequest .............................................................. 100

2.6.2. Đối tượng Response và lớp HttpResponse ........................................................ 105

2.6.3. Đối tượng Server và lớp HttpServerUtility ........................................................ 111

2.6.4. Đối tượng Application và lớp HttpApplicationState .......................................... 113

2.6.5. Đối tượng Cookies ............................................................................................ 117

2.4.4. Đối tượng Session ............................................................................................ 119

2.7. Giới thiệu ngôn ngữ lập trình .NET ......................................................................... 124

Chương 3. LÀM VIỆC VỚI CƠ SỞ DỮ LIỆU .................................................................. 126

3.1. Các thao tác trên dữ liệu .......................................................................................... 126

3.1.1. Các lệnh cập nhật dữ liệu .................................................................................. 126

3.1.2. Truy vấn dữ liệu ............................................................................................... 127

3.1.3. Xây dựng hàm và thủ tục trong SQL server ...................................................... 128

3.2. Các điều khiển dữ liệu ASP.NET 2.0 ....................................................................... 131

3.2.1. Data Source Controls và Data-Bound Controls ................................................. 131

3.2.2. Các thao tác dữ liệu với Data Controls .............................................................. 153

3.3. Mô hình ADO.NET ................................................................................................. 176

3.3.1. Giới thiệu đối tượng ADO.NET ........................................................................ 176

3.3.2. Các đối tượng trong ADO.NET ........................................................................ 177

3.4. Các lớp SqlClient trong mô hình ADO.NET ........................................................... 181

3.4.1. Class SqlConnection ......................................................................................... 182

3.4.2. Class SqlCommand .......................................................................................... 187

3.4.3. Class SqlDataAdapter ....................................................................................... 191

3.4.4. Class DataSet ................................................................................................... 197

3.4.5.DataView .......................................................................................................... 197

Chương 4. Thiết kế ứng dựng web ..................................................................................... 204

4.1. Các mô hình ứng dụng ............................................................................................ 204

4.1.1. Giới thiệu mô hình đa lớp. ................................................................................ 204

4.1.2. Thiết kế ứng dụng web ..................................................................................... 205

4.2. Xử lý trang ASP.NET nâng cao ............................................................................... 208

4.2.1. Thiết kế User Control ....................................................................................... 208

4.2.2. Security Basics ................................................................................................. 211

4.3. Thiết kế một số chức năng web ............................................................................... 229



3

Chương 1: Tìm hiểu môi trường WEB

1.1. Các khái niệm cơ bản trong môi trường web

• Kiến trúc của dịch dụ World Wide Web: Dịch vụ World wide web

được xây dựng theo mô hình Client/Server, tức là người ta sẽ thiết lập

một máy phục vụ cho việc lưu trữ các tài liệu Hypertext gọi là Web

Server. Phía người sử dụng sẽ có một máy tính cùng với phần mềm có

khả năng hiểu được các tài liệu Hypertext và giao tiếp được với Web

Server gọi là Web Browser hay web client. Khi một người sử dụng có

một yêu cầu một tài liệu nào đó bằng cách gửi đến Web Server một

URL thì Web Server sẽ phục vụ tài liệu đó và Web Browser sẽ hiển thị

nó lên màn hình với khuôn dạng thích hợp.

• Khái niệm URL (Uniform Resource Locator) là một con trỏ được dùng với

mục địch đơn giản là xác định vị trí tài nguyên của môi trường Internet.

Thông qua các URL mà Web Browser có thể tham chiếu đến một Web

Server hoặc các dịch vụ khác trên Internet và ngược lại. URL có cấu trúc

chuỗi có định dạng như sau:

http: // <host> [: <port>] [ <path> [? <query>]]

+ Sau tiền tố http://, chuỗi URL sẽ chứa tên host hay địa chỉ IP của

máy server (có thể có số cổng đi kèm), tiếp theo là đường dẫn dẫn

đến tập tin server được yêu cầu. Tùy chọn sau cùng là tham số, còn

được gọi là query string (chuỗi tham số/chuỗi truy vấn).

+ Ví dụ: http://www.kls.vn/default.aspx?tabid=234

• Khái niệm về HTTP: Web Browser và Web Server giao tiếp với nhau

thông qua một giao thức được gọi là HTTP. Sự kết nối Http qua 4 giai

đoạn:



4

Hình 1.1. Sự kết nối HTTP

1. Tạo kết nối: Web Browser giao tiếp với Web Server nhờ địa chỉ

Internet và số cổng (ngầm định là 80) được đặc tả trong URL.

2. Thực hiện yêu cầu: Web Browser gửi thông tin tới Web Server

để yêu cầu phục vụ. Việc gửi thông tin ở đây là gửi phương

thức GET dùng cho việc lấy một đối tượng từ Server, hay

POST dùng cho việc gửi dữ liệu tới một đối tượng trên Server.

3. Phản hồi: Web Server gửi một phản hồi về Web Browser nhằm

đáp ứng yêu cầu của Web Browser.

4. Kết thúc kết nối: Khi kết thúc quá trình trao đổi giữa Web

Browser và Web Server thì sự kết nối chấm dứt. Và như vậy

mối liên hệ giữa Client và Server chỉ được tồn tại trong quá

trình troa đổi với nhau, điều này có lợi điểm rất lớn là giảm

được lưu thông trên mạng.

• Web Server: Là một phần mềm được sử dụng ở máy phục vụ và luôn

"lắng nghe" yêu cầu của người sử dụng từ một cổng truyền thông nào đó

(ngầm định là 80). Khi phía máy khách yêu cầu một trang web, web

server sẽ tìm tài nguyên của mình xem có đáp ứng được đòi hỏi đó

không, nếu có sẽ gửi kết quả về phía client. Hiểu một cách đơn giản

Web Server là máy tính lưu trữ các trang web.

Trong môi trường Windows, Web Server thường được sử dụng là IIS

(Internet Information Server). IIS sử dụng cho các Server Script như:

ASP (Active Server Page), ASP.NET, JSP (Java Server Page), PHP,

Servlet, Perl .v.v…

Trong môi trường Linux, Web Server thường sử dụng bao gồm Apache,

JRun, Web logic.v.v…

• Web Client: Máy tính dùng để truy cập các trang Web.

• Web Browser (hay còn gọi là trình duyệt Web): là một phần mềm

được dùng ở phía người sử dụng, nhiệm vụ của nó là khởi tạo các con

trỏ địa chỉ URL để gửi tới Web Server. Ðồng thời Web Browser sẽ diễn

dịch các tài liệucó nội dung dưới dạng HTML và trình bày cho người sử

dụng dưới nhiều hình thức phong phú.



5

Ðể trang Web trình bày dữ liệu theo như ý trên trình duyệt, ta cần phai khai

báo các thẻ HTML và các Client Script phù hợp với chuẩn HTML và Client

Script. Ngoài ra, mỗi trình duyệt có thể hỗ trợ thêm những thẻ khác nhằm cho

phép người dùng phong phú hoá giao diện của trang Web.

Hai trình duyệt phổ biến hiện nay là IE (Internet Explorer của hãng Microsoft)

và NC (Netscape). Cả hai trình duyệt này đều cho phép ta duyệt các loại trang Web

được xây dựng trên ngôn ngữ lập trình bất kỳ có thể hỗ trợ trang Web.

Tuy nhiên, đối với trình duyệt IE thì dễ dàng hơn, bởi trình duyệt này hỗ

trợ hầu hết các thẻ HTML hiện nay và bỏ qua các khai báo mang tính chưa đầy

đủ. Ngược lại, với trình duyệt NC, ta cần phải khai báo và sử dụng đúng các thẻ

NC hỗ trợ.

• Web động và Web tĩnh: Trong thực tế, ứng dụng Web luôn tồn tại hai

loại là trang Web tĩnh và động. Trang Web tĩnh là trang HTML không

kết nối cơ sở dữ liệu. Ngược lại, trang Web động là trang Web có kết

nối cơ sở dữ liệu. Ðiều này có nghĩa là mỗi khi trang Web động được

làm tươi dữ liệu trình bày trên trang Web được đọc từ CSDL.

Hình 1.2. Quy trình triệu gọi các trang web



6

Nói cách khác, cho dù đó là trang Web tĩnh hay động, nếu ta muốn người

dùng sử dụng chúng để trình bày dữ liệu trên trình duyệt Web, ta cần phải khai

báo các thẻ HTML bên trong theo một quy định nhất định.

Ðể xây đựng một ứng dụng Web hoàn chỉnh và có tính thương mại ta cần

phải kết hợp cả Client Script (kịch bản trên trình khác) và Server Script (kịch

bản trên trình chủ) với một loại CSDL nào đó, chẳng hạn như MS Access, SQL

Server, MySQL, Oracle.v.v...

Tóm lại, cho dù ta sử dụng bất kỳ Server Script với Web Server nào, thì Client

Script không phụ thuộc vào chúng. Nghĩa là ta có thể sử dụng một trong hai loại

Client Script ở trên là VBScript và JavaScript đều có thể chấp nhận được.

1.2. Cấu trúc trang web

HTML (HyperText Markup Language - Ngôn ngữ đánh dấu siêu văn bản)

không phải là ngôn ngữ lập trình chỉ là một ngôn ngữ mô tả tài liệu.

Ngôn ngữ đánh dấu HTML sử dụng các ký hiệu quy định sẵn (được gọi là

tag) để trình bày nội dung văn bản.

Trang Web trình bày dữ liệu trên trình duyệt có cấu trúc HTML. Cấu trúc

này được bắt đầu thẻ mở <HTML> và kết thúc bằng thẻ đóng </HTML> . Trang

HTML có tên mở rộng là .htm, .html, .jhtm. phtm.v.v… nhưng tên mở rộng

chuẩn trong HTML là .htm, html.

Bên trong hai thẻ này có thể khai báo và sử dụng hầu hết các thẻ HTML.

Tuy nhiên, có một số thẻ HTML không được hỗ trợ trên trình duyệt NC, một số

thẻ khác phải được khai báo đầy đủ đầy đủ mới biên dịch được trên NC.



7

Ðiều này có nghĩa là nếu người dùng sử dụng trình duyệt IE, ứng dụng

Web của ta sẽ dễ dàng hơn khi thiết kế cũng như khai báo các tiện ích khác

trong quá trình lập trình.

Chú ý:

- HTML quy định không phân biệt chữ hoa và chữ thường. Ví dụ, nếu thẻ

mở có tên là <head> thì các thẻ </Head> hay </HEAD> đều là thẻ đóng của nó.

Không được có khoảng trắng trong định nghĩa tên thẻ.

- Thẻ HTML có hai loại: Loại có thẻ mở kèm thẻ đóng, loại thứ hai là loại

chỉ có thẻ mở không có thẻ đóng.

Loại có thẻ đóng ta cần phải khai báo thẻ đóng sau khi có khai báo thẻ mở,

chẳng hạn như thẻ <html></html>. Thẻ đơn là thể không tồn tại thẻ đóng, ví dụ

như thẻ <br> hay thẻ <hr>.

Ví dụ 1.1: Cấu trúc trang HTML. <html> <head> <title> Welcome to My Web </title> <meta ...> <link ...> <script ...> </script> </head> <body> Here is Chapter 1 </body>

</html>

1.3. Các thẻ HTML thông dụng

1.3.1. Thẻ <head></head>

Tất cả các thông tin chứa trong thẻ này đều không xuất hiện trên trang

Web. Ðiều này có nghĩa là trong thẻ <head> ta có thể khai báo các thẻ như

<title> </title>, <meta>, <link>, <script>, như cấu trúc

trong ví dụ 1.1. ở trên.

1.3.2. Thẻ <title></title>

Thẻ <title> cho phép trình bày chuỗi ký tự trên thanh tựa đề của trang Web

mỗi khi trang Web đó được duyệt trên trình duyệt Web.



8

Thông thường trong thẻ <title> chứa những thông tin tóm tắt liên quan đến

ứng dụng hay trang Web mà ta đang trình bày.

Trong ví dụ 1.1 ở trên dòng tiêu đề " Welcome to My Web " sẽ xuất

hiện trên dòng tiêu đề của trang Web.

1.3.3. Thẻ <body></body>

Tất cả thông tin được khai báo trong thẻ <body> đều có thể xuất hiện trên

trang Web. Chính vì vậy, để người dùng có thể nhìn thấy thông tin trên trang

Web, ta có thể khai báo các thẻ khác và nội dung muốn trình bày trong thẻ

<body>.

Tuy nhiên, ta cũng có thể sử dụng các thuộc tính hay phương thức của

Client Script để che dấu hay hiển thị chúng tuỳ theo mục đích của mình.

1.3.4. Các thẻ định dạng:

a) Thẻ <div></div>

Cho phép định dạng một đoạn văn bản bằng các thuộc tính của chúng.

Ví dụ 1.2. Căn lề đoạn văn bản bằng thẻ <div> <html> <head> <title> Welcome to My Web </title> <meta ...> <link ...></link> <script ...> </script> </head> <body>

<div align="justify"> An explanation of exactly what JavaScript is has to begin with Java. Java is a new kind of Web programming language developed by Sun Microsystems. A Java program, or applet, can be loaded by an HTML page and executed by the Java Interpreter, which is embedded into the browser.

</div> </body> </html>

Ta sử dụng thẻ <div> với align="justify" hay

align="center" để căn lề đoạn văn bản như ví dụ trên.

b) Thẻ <p></p>



9

Có tác dụng tương tự như thẻ <div>, trong trường hợp ta muốn định dạng

một câu văn, ta có thể sử dụng thẻ <p>. Ðiều này có nghĩa là sau khi kết thúc

thẻ đóng </p>, dữ liệu trình bày sẽ tự động xuống dòng.

Ví dụ 1.3: Thẻ định dạng <p>

<html> <head> <title> Welcome to My Web </title> <meta ...> <link ...></link> <script ...> </script> </head> <body>

<p align="justify"> An explanation of exactly what JavaScript is has to begin with Java. Java is a new kind of Web programming language developed by Sun Microsystems. </p> <p align="justify">Typical Internet Connectivity Design With these security concerns now established, let's look at a typical Internet connectivity design and specifically at the way the DNS servers would be configured. </p>

</body> </html>

Chú ý: Khác với thẻ <div> ngay sau thẻ <p> thứ nhất là thẻ <p> thứ hai

không có dấu xuống hàng, đoạn văn thứ hai xuống dòng và cách đoạn văn thứ

nhất một khoảng cách nhất định.

c) Thẻ <font></font>

Thẻ <font> cho phép định dạng một chuỗi ký tự với một kiểu chữ nhất

định, cỡ chữ và màu chữ cũng được định nghĩa trong thẻ <font>.

Trong thẻ <font>, ta cần cung cấp:

- Từ khoá face với tên kiểu chữ như Arial, Tohamo, .v.v…

- Từ khoá color với tên của một loại màu: Trong trường hợp màu

thuộc hệ 16 màu chuẩn, ta có thể sử dụng từ khoá blue, red,

green,Tuy nhiên, trong trường hợp màu khác ngoài 16 màu trên

ta phải cung cấp chuỗi 6 số trong hệ 16, chẳng hạn như

#66CCFF.



10

- Từ khoá size với con số cụ thể để định dạng kích thước của

chuỗi ký tự.

Ví dụ 1.4. Sử dụng thẻ <font> <html> <head> <title> Welcome to My Web </title> <meta ...> <link ...></link> <script ...> </script> </head> <body>

<p align="justify">An explanation of exactly what <font face="arial" color="red" size="3">JavaScript</font> is has to begin with Java.</p>

</body>

Trong ví dụ, ta khai báo thẻ <font> cho chữ " JavaScript " có cỡ chữ

là 3 và màu đỏ.

d) Thẻ <b></b>, <i></i>, <u></u>, <br>

- Thẻ <b> định dạng chuỗi ký tự in đậm (bold).

- Thẻ <i> định dạng chuỗi ký tự in nghiêng (italic).

- Thẻ <u> cho phép gạch chân chuỗi ký tự.

- Thẻ <br> cho phép xuống dòng

Ví dụ 1.5. Ðịnh dạng chuỗi bằng các thẻ <b>, <i> và <u> <html> <head> <title> Welcome to PHP and MySQL Book </title> <meta ...> <link ...></link> <script ...> </script> </head> <body>

<p align="justify">An explanation of exactly what <font face="arial" color="red" size="3"> <b>JavaScript</b></font> is has to begin with Java. Java is a new kind of <u>Web</u> programming language developed by <i>Sun Microsystems</i>. A Java program, or applet, can be loaded by an HTML page and executed



11

by the Java Interpreter, which is embedded into the browser.</p>

</body>

e) Thẻ <Hr> dùng để vẽ một đường thẳng nằm ngang. Sử dụng các thuộc

tính sau:

- size=n: xác định độ dày của đường thẳng

- Width=n xác định chiều dài của đường thẳng

- Align=Left/Right/Center: Canh lề đường thẳng

- NoShade: Không đổ bóng.

Ví dụ: <hr Width="50%" size="5" Align="Right" color="red">

Chú ý: Ngoài ra còn một số thẻ định dạng khác như thẻ phân đoạn <ul>,

<li>,.v.v…

1.3.5. Thẻ định dạng bảng:

Khi ta muốn thiết kế bảng dữ liệu trên trang Web, ta cần phải khai báo thẻ

<table>. Sau khi khai báo thẻ này ta tiếp tục khai báo hàng <tr> và thẻ cột

<td> cùng với các thuộc tính khác.

Ðể khai báo thẻ <table>, ta quan tâm đến đường viền (border), chiều rộng

và chiều cao của nó, màu nền (gbcolor) và khoảng cách giữa các hàng và cột

(cellspacing, celladding)

Tuy nhiên, khi thiết kế <table>, ta thường chỉ quan tâm đến chiều rộng

không quan tâm đến chiều cao bởi vì chiều cao phụ thuộc vào dữ liệu ta có.

Như vậy đối với thẻ <tr> ta quan tâm đến chiều cao. Thẻ <td> chỉ quan tâm

đến chiều rộng.

- Ðể kết hợp hai cột thành một cột ta dùng từ khoá colspan .

- Ðể hợp nhất hai hàng lại vào với nhau, ta sử dụng từ khoá rowspan.

Ví dụ 1.6: Tạo bảng như sau:

MaNV Hoten So DT

Ma vung So

A0001 Nguyen Van A 04 7543611

B0002 Tran Van B 0211 853540 <html>



12

<head> <title> Welcome to my Website </title> <meta ...> <link ...></link> <script ...> </script> </head> <body> <TABLE BORDER="1" CELLSPACING=1 CELLPADDING=7 WIDTH=453> <TR> <TD WIDTH="66" VALIGN="TOP" ROWSPAN=2> MaNV</TD> <TD WIDTH="154" VALIGN="TOP" ROWSPAN=2> <P ALIGN="JUSTIFY">Hoten</TD> <TD WIDTH="133" VALIGN="TOP" COLSPAN=2> So DT</TD> </TR> <TR><TD WIDTH="104" VALIGN="TOP">Ma vung</TD> <TD WIDTH="59" VALIGN="TOP">So</TD> </TR> <TR> <TD WIDTH="66" VALIGN="TOP"> A0001</TD> <TD WIDTH="154" VALIGN="TOP"> <P ALIGN="JUSTIFY">Nguyen Van A</TD> <TD WIDTH="104" VALIGN="TOP"> 04</TD> <TD WIDTH="59" VALIGN="TOP">7543611</TD> </TR> <TR><TD WIDTH="66" VALIGN="TOP"> B0002</TD> <TD WIDTH="154" VALIGN="TOP"> <P ALIGN="JUSTIFY">Tran Van B</TD> <TD WIDTH="104" VALIGN="TOP">0211</TD> <TD WIDTH="59" VALIGN="TOP">853540</TD> </TR> </TABLE> </body>

1.3.6. Thẻ hình ảnh

Ðể chèn hình ảnh vào một trang Web, ta có thể sử dụng thẻ <img>, thẻ này

thuộc loại thẻ không có thẻ đóng. Trong thẻ, ta có thể thêm thuộc tính chiều cao,

rộng, border và địa chỉ của ảnh đó của nó.

Chú ý:

- Hình ảnh có kích thước cố định, khi ta điều chỉnh kích thước đó khác với

kích thước nguyên thuỷ thì hình đó sẽ bị bóp méo hoặc mờ đi. Ðể hình đó có

kích thước giống như thực mà ta thiết kế bằng các công cụ đồ hoạ, thì khi chèn

hình ảnh vào trang Web, ta không cần cung cấp từ khoá Height, và Width.

- Ngoài cách sử dụng thẻ <img> còn một cách chèn hình ảnh vào trang

Web bằng cách sử dụng thẻ input.



13

Ví dụ 1.7. Chèn hình ảnh.

<html> <head> <title> Welcome to My Web </title> <meta ...> <link ...></link> <script ...> </script> </head> <body> <img src="intranetvietnam.gif" border=0 Alt=”Ten anh”>

<p align="justify">An explanation of exactly what <font face="arial" color="red" size="3"><b>JavaScript</b></font> is has to begin with Java. Java is a new kind of <u>Web</u> programming language developed by <i>Sun Microsystems</i>.</p>

</body>

1.3.7. Thẻ liên kết

Ðể liên kết giữa các trang Web với nhau hay liên kết đến địa chỉ Internet,

mail hay intranet (URL) ta có thể sử dụng thẻ liên kết <a>.

- Liên kết một địa chỉ Internet hay Intranet, ta khai báo thẻ <a> với từ

khoá href bằng với địa chỉ URL hay UNC mà ta cần trỏ đến.

Khi khai báo thẻ <a> để cho phép người dùng chọn liên kết đó, ta có thể

sử dụng nhãn hay hình ảnh như khái báo sau:

+ Sử dụng hình ảnh:

<a href="http:"//www.intranetvietnam.com"> <img src="intranetvietnam.gif" border=0> </a>

+ Sử dụng nhãn:

<a href="http://www.sun.com"> Welcome </a>

- Ðể liên kết với địa chỉ e-mail như là mở mail trong Microsoft Outlook,

ta khai báo như sau:

<a href="mailto:[email protected]"> <img src="intranetvietnam.gif" border=0> </a> <a href="mailto:[email protected]">



14

Welcome </a>

- Ðể liên kết đến một trang Web khác trong cùng Web site, ta có thể khai

báo thẻ <a> như sau:

<a href="../vidu1_6.htm "> Welcome </a>

- Ngoài ra thẻ <a> còn cho phép ta khai báo như một bookmark trong

chính trang Web. Khi khai báo thẻ báo thẻ <a> như vậy, người dùng có

thể nhảy tới vị trí chỉ định nào đó trong trang Web.

Ta khai báo thẻ <a> với tên là "top" như sau: <a name="top"></a>.

Khi đó trong một vị trí nào trong trang Web ta có thể khai báo thẻ <a> khác để

cho phép người dùng chọn vào liên kết để chuyển đến vị trí trên như sau:

<a href="top">Back to top</a>

Ví dụ 1.8. Thẻ <a> <html> <head> <title> Welcome to PHP and MySQL Book </title> </head> <body> <a name="#2"></a> .. <a href="#2">Back to top</a> </body>

1.3.8. Các thẻ Input

Thẻ Input cho phép người dùng nhập liệu hay chỉ thị thực thi một hành

động nào đó, thẻ Input bao gồm các loại thẻ như: text, password, submit, button,

reset, checkbox, radio, hidden, image.

a) Thẻ Input dạng text:

Thẻ input dạng text cho phép người dùng nhập liệu, với thẻ này ta có thể giới

hạn chiều dài lớn nhất (maxlenght) và chiều dài trình bày (size) trên trang Web.

Chiều dài lớn nhất để khống chế chiều dài chuỗi nhập trên thẻ input đó,

đồng thời phù hợp với chiều dài của kiểu chuỗi trong dữ liệu của cơ sở dữ liệu

dự trữ.



15

Chẳng hạn, trong trường hợp cột dữ liệu trong Table có chiều dài 20, trên thẻ

text cho phép người dùng nhập liệu với chuỗi dài nhất là 20. Nếu ta không khai

báo chiều dài lớn nhất cho phép, ta cần phải viết chương trình để kiểm soát được

chiều dài phù hợp với chiều dài của cột dữ liệu đã khai báo trong cơ sở dữ liệu.

Ðối với thẻ input dạng cần cung cấp tên để tham chiếu trên Client và trên

Server side.

Trong trường hợp muốn gián giá trị mặc định, ta khai báo thêm thuộc tính

value với giá trị cụ thể như ví dụ sau:

<input type="text" name="txtUsername" size=20 maxlenght=50> <input type="text" name="txtFullname" value="Chu Thi Huong" size=20 maxlenght=50>

b) Thẻ Input dạng passwordt:

Cũng giống như thẻ Input dạng text, thẻ input dạng password cho phép

người dùng nhập liệu dạng mật khẩu, tức là khi người dùng nhập liệu tất cả các

ký tự chuyển thành dấu * hay dấu phụ thuộc vào phiên bản của trình duyệt.

Với thẻ này ta có thể giới hạn chiều dài lớn nhất (maxlenght) và chiều dài trình

bày (size) trên trang Web. Ta có thể khai báo thẻ input dạng password như sau:

<input type="password" name="txtPassword" size=20

maxlenght=10>

c) Thẻ Input dạng checkbox

Khi muốn cung cấp nhiều tuỳ chọn cho người dùng lựa chọn, ta phải sử

dụng thẻ input dạng checkbox.

- Trên trình khách, ta chỉ quan tâm đến trạng thái của thẻ checkbox bằng

thuộc tính checked. Khi sử dụng Client script, nếu chọn thẻ này có giá trị true

ngược lại có giá trị false.

- Khi sử dụng Server Script để tham chiếu đến giá trị này, tức là ta tham chiếu

đến giá trị thẻ: Ðiều này có nghĩa là khi tham chiếu đến thẻ input dạng checkbox ta

cần định nghĩa trước giá trị của nó. Nếu thẻ này được chọn, Server Script sẽ tham

chiếu và nhận được giá trị đó.

Khai báo thẻ input dạng checkbox như sau:



16

<input type="checkbox" value="P" name="chkHow" checked>Newspaper <input type="checkbox" value="T" name="chkTV" checked>Television <input type="checkbox" value="B" name="chkB">Bus

Ta khai báo thêm từ khoá checked, để thẻ này xuất hiện trên trang Web có

giá trị mặc định là đã chọn.

d) Thẻ input dạng Radio:

Thẻ input dạng Radio tương tự như thẻ Input dạng checkbox, nhưng cho

phép người dùng chỉ chọn một trong các tuỳ chọn cho phép. Có nghĩa là nếu ta

cung cấp hai tuỳ chọn ứng với hai thẻ input dạng Radio thì người dùng chỉ được

chọn duy nhất một tuỳ chọn.

Khai báo thẻ Input dạng Radio như sau: <input type="radio" value="M" name="rdGender" checked>Male <input type="radio" value="F" name="rdGender">Female

Ðể cho phép chọn một trong hai tuỳ chọn đó, ta phải khai báo chúng cùng

tên nhưng khác nhau về giá trị. Chính vì vậy, khi tham chiếu đến thẻ này bằng

Client Script, ta phải duyệt theo dạng mảng để biết tuỳ chọn nào được chọn. Còn

nếu tham chiếu bằng Server Script, ta sẽ nhận được một giá trị của tuỳ chọn

được chọn.

Chú ý: Nếu thẻ input dạng checkbox khai báo cùng tên, ta cũng sẽ nhận

được một chuỗi giá trị mà các phần tử được cách nhau bởi dấu phảy ","

e) Thẻ input dạng Submit

Thẻ submit cho phép ta chấp nhận những dữ liệu nhập trong các thẻ input

phía trình chủ Web. Có nghĩa là khi ta muốn chuyển dữ liệu lên phía trình chủ

bằng phương thức Post (sử dụng cho thẻ form) hay Get (trên QueryString).

Ðể truyền các dữ liệu nhập từ các thẻ input trong form, ta có thể cho phép

Server Script nhận giá trị đó bằng cách nhận từ QueryString hay từ Form.

Nếu muốn chuyển các giá trị nhập đó lên trên QueryString, ta khai báo thẻ

Form với phương thức là Get. Ngược lại, nếu muốn Server Script lấy dữ liệu từ

thẻ Form, ta khai báo thẻ form với phương thức Post.

Thẻ Submit thường được khai báo trong thẻ form, dùng để Submit dữ liệu

lên trên phía trình chủ Web. Ngoài ra khi khai báo thẻ Submit ta cũng cần cung



17

cấp tên và value, value của thẻ input dạng Submit xuất hiện như Caption trên

nút. Ðể khai báo thẻ input dạng submit ta khai báo như sau: <input type="submit" value="Save" name="submit">

f) Thẻ input dạng Button

Thẻ button cho phép ta chấp nhận những dữ liệu đã nhập trong các thẻ input lên

phía trình khách (nếu khai báo sử dụng phương thức submit(), nút này sẽ submit thẻ

form lên trình chủ Web). Có nghĩa là khi ta muốn tính toán trên trang Web ta có thể sử

dụng thẻ này.

Thẻ input thường được khai báo trong thẻ form, dùng để tính toán hay sử

dụng một số phương thức của Client Script. Ví dụ như ta thiết kế nút "Back" với

chức năng trở về trang Web trước đó hay tính toán trên trang Web.

Khai báo thẻ input dạng button với chức năng thực thi phương thức Client

Script trở về trang Web trước đó như sau: <input type="button" value="Back" name="back"

onclick="window.history.go(-1);">

g) Thẻ Input dạng Reset

Thẻ Reset cho phép phục hồi những dữ liệu nhập hay chọn trên các thẻ

Input và thẻ select, textarea. Ðiều này có nghĩa là khi ta muốn phục hồi dữ liệu

trang Web về trạng thái ban đầu, người dùng sẽ chọn nút reset như chỉ thị phục

hồi những gì họ đã thực hiện.

Thẻ reset thường được khái báo trong thẻ form, dùng để reset dữ liệu trên

trang Web. Ngoài ra, khi khai báo thẻ reset, ta cũng cần cung cấp tên và value,

value của thẻ input dạng reset xuất hiện như caption trên một nút. Ðể khai báo

báo thẻ input dạng reset, ta chỉ cần khai báo như sau: <input type="reset" value="reset" name="back">

h) Thẻ input dạng hidden

Thẻ input dạng hidden là một dạng thẻ input dạng text nhưng không hiển thị trên

trang Web, không cho phép người dùng nhập liệu, thay vào đó ta cần định nghĩa trước

một giá trị cụ thể cho thẻ này.

Với thẻ hidden ta có thể thực hiện những mục đích tiềm ẩn nào đó. Ví dụ như

trong một trường hợp thiết lập một tuỳ chọn cho phép nhận dạng từ trang Web này gọi

đến trang Web khác hay che dấu thông tin khi cần chuyển tiếp dữ liệu sang trang kế

tiếp.

Khai báo thể hidden, ta khai báo như sau:



18

<input type="hidden" name="txtFrom" value="N" > <input type="hidden" name="txtpage" value="1" >

Ví dụ 1.9. Các thẻ Input <html> <head> <title> Welcome to PHP and MySQL Book </title> </head> <body> <a name="#2"></a> <br><br> UserName: <input type="text" name="txtUsername" size=20 maxlenght=50><Br> Password: <input type="password" name="txtPassword" size=20 maxlenght=10><br> Fullname: <input type="text" name="txtFullname" value="Chu Thi Huong" size=20 maxlenght=50><br> Gender: <input type="radio" value="M" name="rdGender" checked>Male <input type="radio" value="F" name="rdGender">Female <br><Br> How can you know us: <input type="checkbox" value="P" name="chkHow" checked>Newspaper <input type="checkbox" value="T" name="chkTV" checked>Television <input type="checkbox" value="B" name="chkB">Bus <br><Br> <input type="submit" value="Save" name="submit"> <input type="button" value="Back" name="back" onclick="window.history.go(-1);"> <input type="reset" value="reset" name="back"> <br> <a href="#2">Back to top</a> </body>

i) Thẻ Input dạng Image

Ngoài việc chèn hình ảnh vào trang Web bằng thẻ <img>, ta có thể sử dụng

hình ảnh thực hiện chức năng tương tự như nút submit, reset hay button bằng

cách sử dụng thẻ Input dạng Image, khai báo như sau: <input type="image" src="gogo.gif" name="search">

Ví dụ 1.10. Input với Image

<html> <head> <title> Welcome to PHP and MySQL Book



19

</title> </head> <body> <img src="intranetvietnam.gif" border=0></a><br> Keyword: <input type="text" name="txtKey" size=20 maxlenght=50> <input type="image" src="gogo.gif" name="search"> </body>

1.3.9. Thẻ Textarea

Thẻ Textarea cho phép người dùng nhập liệu với nhiều dòng, với thẻ này ta

không thể giới hạn chiều dài lớn nhất trên trang Web.

Ðể giới hạn chiều cao và chiều rông trình bày trên trang Web của thẻ này ta

khai cols='số ký tự', rows='Số hàng'.

Chú ý: Nếu không khai báo được chiều dài lớn nhất cho phép thì ta nên

viết chương trình kiểm soát được chiều dài phù hợp với chiều dài đâc khai báo

trong CSDL.

Khai báo thẻ textarea như sau:

<textarea name=”txtDesc” cols=”20” rows=”3”></textarea>

Trong trường hợp muốn gán giá trị mặc định ta không cần khai báo thêm

thuộc tính value, thay vào đó giá trị cụ thể sẽ khai báo giữa thẻ mở và thẻ đống

của textarea.

<textarea name=”txtRequire” cols=”20”

rows=”3”>Please enter here …</textarea>

1.3.10. Thẻ Select

Thẻ Select cho phép người dùng chọn phần tử trong tập các phần tử được

định nghĩa trước. Thẻ Select có hai dạng tương tự như combo box và listbox.

Nếu thẻ select cho phép chọn một phần tử trong danh sách thì thẻ select đó

giống như combo box, ngược lại nếu cho phép chọn nhiều phần tử trong danh

sách thì nó có dạng listbox.

Ðối với hai loại thẻ này, nếu muốn phần tử nào được chọn mặc định thì ta

them từ khoá selected trong thẻ option.

- Khai báo thẻ select dạng combo box như sau: <select name="city" > <option value="" selected>..Select City ..</option>



20

<option value="HCM">Ho Chi Minh</option> <option value="HAN">Ha Noi</option> <option value="HUE">Hue</option> </select>

- Khai báo thẻ select dạng listbox, ta khai báo bắt đầu từ select với tên là

multiple như sau: <select name="industry" multiple >

<option value="" selected>..Select Industry..</option> <option value="AUT">Auto</option> <option value="MED">Medical</option> <option value="ENG">Engineering</option> </select>

1.3.11. Thẻ Form

Khi muốn submit dữ liệu từ người dùng nhập từ trang Web phía Client lên

phía Server, có hai cách để làm điều này ứng với hai phương thức Post và Get

trong thẻ Form. Như vậy bằng cách khai báo phưng thức Post hay Get trong thẻ

Form, cho phép Server Script lấy giá trị từ các thẻ Input.

Ðể thực hiện quá trình sử dụng phương thức yêu cầu dữ liệu từ phía Client,

ta cần khai báo thẻ Form bao (bound) hết các thẻ nhập liệu cần đưa lên phía

Server.

Chú ý:

• Trong một trang Web có nhiều thẻ Form khác nhau, nhưng các thẻ form

này không được lồng nhau, mỗi thẻ form sẽ được khai báo một hành

động action để chỉ đến một trang Web khác.

• Nếu không chỉ định địa chỉ URL hay UNC cho action, trang Web được

chuyển đến chính là trang Web hiện tại.

• Ngoài ra trong thẻ form cũng phải khai báo tên và các biến cố của form.

Chẳng hạn như ví dụ sau:

Ví dụ 1.11. Thẻ Form <html> <head> <title> Welcome to PHP and MySQL Book </title> </head> <body> <img src="intranetvietnam.gif" border=0 width="93" height="45"><br>



21

<form name="form1" action="doaction.php" method="post" onsubmit="alert('You are about submit');"> <table><tr><td>Keyword: </td> <td><input type="text" name="txtKey" size=20 maxlenght=50></td></tr> <tr><td>City: </td><td><select name="city" > <option value="" selected>..Select City ..</option> <option value="HCM">Ho Chi Minh</option> <option value="HAN">Ha Noi</option> <option value="HUE">Hue</option> </select></td></tr> <tr><td>Industry:</td><td><select name="industry" multiple > <option value="" selected>..Select Industry ..</option> <option value="AUT">Auto</option> <option value="MED">Medical</option> <option value="ENG">Engineering</option> </select></td></tr> <tr><td> </td><td><input type="image" src="gogo.gif" name="search"> </td></tr> </table> </form> </body>

Kết quả của ví dụ này trên trình duyệt như hình 1.2.

Hình 1.2. Duyệt trang vidu1_11.html

1.3.12. Thẻ Frame



22

Mục đích chính của Frame là nhằm chia cửa sổ của trình duyệt ra là hai hay

nhiều vùng nhỏ hơn, để khi đó có thể tải các tài liệu HTML khác nhau vào trong

các vùng giúp người sử dụng có thể theo dõi nhiều trang Web đồng thời. Mỗi

vùng nhỏ được gọi là một Frame, tập hợp các vùng này được gọi là Frameset.

Để tạo các Frame sử dụng thẻ <frameset> </framset>. Thẻ này có hai thuộc

tinh cơ bản là ROWS và COLS dùng để mô tả số hàng và số cột chia thành

frame. Được khai báo như sau <frameset border="False" frameboder="0" rows="80,*"> <frame name="frame1" src="frame1.htm" scolling="no" noresize> <frame name="frame2" src="frame2.htm" scolling="auto" noresize> <noframes>

Thẻ <frame> dùng để xác định các trang web sẽ được hiển thị trong mỗi

frame.

Ví dụ 1.12. Sử dụng thẻ frame <html> <head> <title> Tao Frame </title> </head> <frameset border="False" frameboder="0" rows="80,*"> <frame name="frame1" src="frame1.htm" scolling="no" noresize> <frameset border="False" frameboder="0" cols="80,*">

<frame name="frame2" src="frame2.htm" scolling="auto" noresize> <frame name="frame3" src="vidu1_11.html" scolling="auto" noresize>

</frameset> </frameset> <noframes> <body> </body> </noframes> </html>

- File frame1. htm <html> <head> <title> Frame t1</title> </head> <body> <font color="red">Frame 1</font></p> </body> </html>

File frame2. htm <html> <head> <title> Frame 22</title> </head>



23

<body> <p><font color="red">Frame 2</font></p> </body> </html>

Kết quả chạy ví dụ 1.12. cho trong hình 1.3.

Hình 1.3. Duyệt trang vidu1_12.html

1. 3.13. Một số thẻ HTML đặc biệt

Ngoài các thẻ thông dụng trên, còn một số thẻ đặc biệt như: <Meta>,

<link>, <Script>, <Style>.

1.3.13.1. Thẻ <meta>

Thẻ <meta> được khai báo trong thẻ <head> thường dùng để khai báo loại

font sử dụng, tìm kiếm, xoá cache, chuyển trang.v.v…

a) Thẻ <meta> với font

Ðể sử dụng font Unicode đặc biệt là font Uncode cho tiếng Việt trên trang

Web ta cần khai báo thẻ <meta> như sau trong thẻ <head>:



24

<meta http-equiv="Content-Type" content="text/html;

charset=UTF-8">

Chú ý: Về phía Client, nếu muốn trình bày nội dung bằng tiếng Việt và cho

phép người dùng nhập dữ liệu trên các thẻ Input bằng tiếng Việt Unicode chuẩn

UTS-8 (sử dụng bộ gõ Unicode) ta phải khai báo thẻ <meta> như trên.

Ví dụ 1.12. Thẻ <meta> sử dụng font Unicode

<html> <head> <title> Welcome to PHP and MySQL Book </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <img src="intranetvietnam.gif" border=0><br> <form name="form1" action="doaction.php" method="post" onsubmit="alert('You are about submit');"> <table><tr><td>Keyword: </td> <td><input type="text" name="txtKey" size=20 maxlenght=50></td></tr> </table> </form> </body>

b) Thẻ <meta> dạng tự động chuyển đến URL

Ðể tự động chuyến đến địa chỉ URL (địa chỉ đến một trạn Internet hay

mạng cục bộ) hay UNC (địa chỉ đến một tập tin trên mạng cục bộ) kế tiếp sau

khi trang Web được nạp lên với thời gian nhất định ta có thể khai báo trong thẻ

<meta>. Ta thực hiện khai báo như trong ví dụ sau:

Ví dụ 1.13. Tự động chuyển đến trang SaiGonInfotech.com sau thời gian 8 giây.

<html> <head>

<title>Welcome to PHP and MySQL</title> <META http-equiv=refresh content="8;URL=http://www.saigoninfotech.com">

</head> This page automatic refresh in 8 second ! <br> I will be come <b>www.saigoninfotech.com</b> </html>

c) Thẻ <meta> dùng xoá cache



25

Thông thường sau khi nạp trang Web nào đó lên trình duyệt, nội dung của

trang Web có thể được lưu vào trong bộ nhớ truy cập nhanh (cache). Có nghĩa là

sau khi đã duyệt một vòng các trang Web khác, ta có thể quya lại trang Web đã

truy cập trước đó, trình duyệt Web nạp rất nhanh vì chúng đã được lưu trong bộ

nhớ cache.

Ðối với tình huống này, nếu trang Web đó có thay đổi về cấu trúc chẳng

hạn, đôi khi vì một lý do nào đó mà ta không tìm thấy sự thay đổi. Ðể giải quyết

việc này, trong mạng cục bộ thường sử dụng thêm Proxy Server, người sử dụng

có thể xoá cache cho IP hay máy của ta. Tuy nhiên, khi phát triển ứng dụng

Web, có những trang Web ta cần phải xoá cache mỗi khi người dùng gọi nó, khi

đó ta sử dụng thẻ <meta> như sau:

Ví dụ 1.14. Xoá cache: <html> <head>

<title>Welcome to PHP and MySQL</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="cache-control" content="no-cache">

</head> Xoa Cache </body> </html>

1.3.13.2. Thẻ marque

Thẻ marque cho phép ta khai báo một chuỗi chuyển động theo nhiều hướng

khác nhau trên trang Web. Có 4 chiều di chuyển chuỗi tuỳ thuộc vào tham số

hương là UP, DOWN, BACK, RIGHT. Ta có thẻ khai báo như ví dụ sau:

Ví dụ 1.15. Thẻ marque

<html> <head> <title>Welcome to My Web</title> </HEAD> <BODY> <MARQUEE DIRECTION=RIGHT SCROLLDELAY=2 SCROLLAMOUNT=1> <font face="arial" size="1" color=#ff33ff> <BR>Ashley- Ana -Chanthaly - Kathleen- Lena<br></font> </marquee>



26

<MARQUEE DIRECTION=UP SCROLLDELAY=2 SCROLLAMOUNT=1 STYLE="filter:wave(add=5, phase=1, freq=5, strength=20);"><font face="arial" size="1" color=#ff33ff> <BR>Ashley<BR>Ana<BR>Chanthaly<BR>Kathleen<BR>Lena </font> </marquee>

</BODY></HTML>

1.3.13.3. Thẻ <style>

Thẻ <style> cho phép ta định dạnh tất cả các nội dung trình bày trên trang

Web theo một kiểu nhất định định nghĩa trong thẻ <style>.

Ðể khai báo một thẻ <style> trên trang Web, ta khai báo nó trong thẻ

<head>. Và khi khi khai báo thẻ trong trang Web, ta có thể sử dụng một phần tử

trong trong thẻ <Style> bằng tham số class.

Ví dụ 1.16. Khai báo thẻ <style>

<html> <head> <title> Welcome to PHP and MySQL Book </title> <style> .text_normal{ COLOR: #6666FF; FONT-SIZE: 12px; TEXT-DECORATION: none; } .topic{ COLOR: #FF66cc; TEXT-DECORATION: underline; } .bg{ COLOR: #000000; } </style> </head> <body> <p align="justify" class="text_normal">An explanation of exactly what JavaScript is has to begin with Java.</p> <p align="justify" class="topic"> Typical Internet Connectivity Design</p> <p align="justify" class="bg">



27

With these security concerns now established.</p> </body>

Trong thực tế ta không cần phải khai báo thẻ <style> trên từng trang Web,

thay vào đó ta khai báo một tập tin có tên mở rộng là *.css, sau đó ta khai báo để

chèn tập tin này vào mỗi trang Web và sau đó sử dụng chúng như trên.

Ví dụ 1.18. Trang style.css .text_normal{ COLOR: #6666FF; FONT-SIZE: 12px; TEXT-DECORATION: none; } .topic{ COLOR: #FF66cc; TEXT-DECORATION: underline; } .bg{ COLOR: #000000; }

1.3.13.4. Thẻ <link>

Thẻ <link> dùng để link các trang. Sau khi khai báo các phần tử trong

trang style.css, ta có thể khai báo chúng trong trang Web bằng thẻ <link> để sử

dụng như sau:

Ví dụ 1.19. Thẻ <link>

<html> <head> <title> Welcome to PHP and MySQL Book </title> <link rel="stylesheet" type="text/css" href="../style.css"> </head> <body> <p align="justify" class="text_normal">An explanation of exactly what JavaScript is has to begin with Java.</p> <p align="justify" class="topic"> Typical Internet Connectivity Design</p> <p align="justify" class="bg"> With these security concerns now established</p> </body>

Chú ý: trang style.css phải đặt ở cùng thư mục chứa trang này.



28

1.3.13.5. Thẻ <Script>

Trong trang Web muốn kiểm soát tất cả các hành động của người dùng, ta

cần khai báo và sử dụng một số phương thức và thuộc tính của Client Script hay

các phương thức do ta định nghĩa.

Client Script bao gồm hailoại kịch bản chính như VBScript hay JavaScript.

Ðể khai báo kịch bản trên trang Web ta sử dụng thẻ <script> như sau:

<script language=Javascript> //code here </script> <script language=VBscript> //code here <script>

Ngoài ra, trong trường hợp có nhiều phương thức do ta định nghĩa được sử

dụng chung trong nhiều trang Web, ta cũng có thể khai báo chúng trong một tập

tin có tên mở rông *.js hoặc *.vb. Sau đó, trong trang Web, ta có thể khai báo

chèn tập tin này và sử dụng như cách sử dụng của các khai báo trực tiếp.

1.4. CSS (Cascading Style Sheets)

1.4.1. Giới thiệu

CSS là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng

HTML, XHTML, XML, hay UML,… Trong phạm vi của môn học, bài giảng sẽ

giới thiệu ngắn ngọn về CSS mang tính định hướng giúp sinh viên tự đọc tài liệu

và nghiên cứu.

Một số đặc tính cơ bản của CSS

1. CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các

thuộc tính của các thẻ đó (như là font chữ, màu sắc, đường viền, kích

thước,…). CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một

file CSS có thể cho phép quản lí định dạng và layout trên nhiều trang khác

nhau. Các nhà phát triển Web có thể định nghĩa sẵn thuộc tính của một số

thẻ HTML nào đó và sau đó nó có thể dùng lại trên nhiều trang khác.

2. Có thể khai báo CSS bằng nhiều cách khác nhau. Ta có thể đặt đoạn CSS

phía trong thẻ <head>...</head>, hoặc ghi nó ra file riêng với phần mở

rộng ".css", ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng



29

biệt. Tuy nhiên tùy từng cách đặt khác nhau mà độ ưu tiên của nó cũng

khác nhau. Mức độ ưu tiên của CSS sẽ theo thứ tự sau.

1. Style đặt trong từng thẻ HTML riêng biệt

2. Style đặt trong phần <head>

3. Style đặt trong file mở rộng .css

4. Style mặc định của trình duyệt

Mức độ ưu tiên sẽ giảm dần từ trên xuống dưới.

3. CSS có tính kế thừa: giả sử rằng bạn có một thẻ <div id="vidu"> đã

được khai báo ở đầu file css với các thuộc tính như sau:

#vidu

{ width: 200px;

height:300px;

}

Ở một chỗ nào đó trong file css bạn lại khai báo một lần nữa thẻ <div

id="vidu"> với các thuộc tính.

#vidu {

width: 400px;

background-color: #CC0000;

}

Sau đoạn khai báo này thì thẻ <div id="vidu"> sẽ có thuộc tính:

#vidu {

width: 400px; /* Đè lên khai báo cũ */

height: 300px;

background-color: #CC0000;

}

1.4.2. Khai báo

Cú pháp của CSS được chia làm 3 phần. phần thẻ chọn (selector), phần

thuộc tính (property), phần giá trị (value).

selector {property: value}

+ Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày.

Nó có thể là các tag HTML, class hay id.



30

+ Property: Chính là các thuộc tính quy định cách trình bày.

+ Value: Giá trị của thuộc tính.

Ví dụ 1.20. Định dạng trình bày cho thẻ <p>

p {

text-align: center;

color: black;

font-family: arial

}

1.4.3. Một số thuộc tính hay sử dụng

a. Background: Định dạng màu nền/ảnh nền cho các thành phần trong

trang web:

-Thuộc tính background-color: Định dạng màu nền cho các thành phần

trong trang web.

body { background-color:cyan }

h1 { background-color:red }

- Thuộc tính background-image: Chèn ảnh nền vào các thành phần trên

trang web.

- Thuộc tính background-repeat: Lặp lại ảnh nền trên các thành phần trên

trang web.

+ repeat-x: Chỉ lặp lại ảnh theo phương ngang.

+ repeat-y: Chỉ lặp lại ảnh theo phương dọc.

+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.

+ no-repeat: Không lặp lại ảnh.

body {

background-image:url(logo.png);

background-repeat:no-repeat; }

- Thuộc tính background-attachment: Dùng để xác định tính cố định của

ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị:

+ scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc

định.



31

+ fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị

này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.

- Thuộc tính background-position: Dùng một cặp 2 giá trị để biểu diễn tọa

độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position. Như đơn vị

chính xác như centimeters, pixels, inches,… hay các đơn vị qui đổi như %, hoặc

các vị trí đặt biệt như top, bottom, left, right.

#test{

background-position:bottom left; }

Các thuộc tính trong nhóm background có thể viết rút gọn theo cấu trúc:

background:<background-color>|<background-image>

<background-repeat>|<background-

attachment> | <background-position>

Các thuộc tính không được đề cập sẽ nhận các giá trị mặc định.

Ví dụ 1.21. Thuộc tính background rút gọn

#test{

background:transparent url(logo.png)

no-repeat fixed right bottom;}

b. Font: Định dạng font chữ, gồm các thuộc tính

- Thuộc tính font-family: Chỉ định tên các loại font.

- Thuộc tính font-style: Chỉ định các kiểu in thường (normal), in nghiêng

(italic) hay xiên (oblique) lên các thành phần trang web.

- Thuộc tính font-variant: được dùng để chọn giữa chế độ bình thường và

small-caps của một font chữ.

- Thuộc tính font-weight: cách thức thể hiện của font chữ là ở dạng bình

thường (normal) hay in đậm (bold).

- Thuộc tính font-size: Chỉ định kích thước font.

Cấu trúc rút gọn khi khai báo thuộc tính font:

font: <font-style>|< font-variant>|<font-weight>|

<font-size> |< font-family>

Ví dụ 1.22. Khai báo thuộc tính Font cho thẻ h1



32

h1 { font-style: italic;

font-variant:small-caps;

font-weight: bold;

font-size: 35px;

font-family: arial,verdana,sans-serif; }

Hoặc

h1 {

font:italic bold 35px arial,verdana,sans-serif;

}

c. Các thuộc tính đối với Text

- Thuộc tính Color: Định màu chữ cho một thành phần nào đó trên trang

web.

body { color:#000 }

h1 { color:#0000FF }

- Thuộc tính text-indent: Cung cấp khả năng tạo ra khoảng thụt đầu dòng

cho dòng đầu tiên trong đoạn văn bản.

p { text-indent:30px }

- Thuộc tính text-align: Dùng để canh chỉnh văn bản cho các thành phần

trong trang web: left (canh trái – mặc định), right (canh phải), center (canh giữa)

và justify (canh đều).

- Thuộc tính letter-spacing: Dùng để định khoảng cách giữa các ký tự trong

một đoạn văn bản.

- Thuộc tính text-decoration: Dùng để thêm các hiệu ứng gạch chân

(underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc

biệt là văn bản nhấp nháy (blink).

d. Pseudo-classes cho các liên kết:

Pseudo-classes cho phép xác định các hiệu ứng định dạng cho một đối

tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm

(a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay

khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active).

Ví dụ 1.23. Tạo hiệu ứng đối với đối tượng liên kết.

a {border:1px solid #000; font-size:14px }



33

a:link {color:#00FF00; }

a:hover {background-color:#00BFF3; color:#FF00FF;

font-size:1.2em; text-decoration:blink }

a:visited {background-color:#FFF568;

color:#FF0000; text-decoration:none}

a:active {color:#662D91; font-variant:small-caps}

e. Box model:

Box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian

bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền) và

margin (canh lề) và các tùy chọn (Như hình minh họa).



34

Ví dụ 1.23. Khai báo hình hộp cho thẻ <p>

p {width:200px;

margin:30px 20px;

padding:20px 10px;

border:1px solid

#000;

text-align:justify

}

- Thuộc tính margin: trong CSS cũng được dùng để canh lề cho cả trang web hay một thành phần web.

+ margin-top: canh lề trên

+ margin-bottom: canh lề dưới

+ margin-left: canh lề trái

+ margin-right: canh lề phải hoặc margin:<margin-top> | <margin-right> | <margin-

bottom> | <margin-left>

hoặc: margin:<value1>|< value2> với value 1 là giá trị margin-

top và margin-bottom và value2 là giá trị margin-left và margin-right.

Ví dụ 1.24

a. Canh lề cho trang web.

body {

margin-top:80px;

margin-bottom:40px;

margin-left:50px;

margin-right:30px;

border:1px dotted #FF0000}

Hoặc: body{

margin:80px 30px 40px 50px;

border:1px dotted #FF0000 }

b. Trang web có độ rộng 600px, tự căn vào giữa.

#wrapper {



35

width: 600px;

margin: 0 auto;

border: 2px solid #777777;

border-top: 0;

background: #ffffff url(wrapper-background.gif) 0

100% repeat-x;

}

- Thuộc tính Padding: Quy định khoảng cách giữa phần nội dung và viền của một đối tượng. Nó không ảnh hưởng tới khoảng các giữa các các đối tượng như margin. Cú pháp tương tự như margin.

+ padding-top: trên

+ padding-right: phải

+ padding-bottom: dưới

+ padding-left: trái hoặc

padding:<padding-top> | <padding-right> | <padding-

bottom> | <padding-left>

- Thuộc tính Border: Được dùng trong trang trí, đóng khung cho một đối tượng cần nhấn mạnh, phân cách các đối tượng giúp trang web trông dễ nhìn hơn,…

+ Thuộc tính border-width: Quy định độ rộng cho viền: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels.

+ Thuộc tính border-color: Quy định màu viền cho một đối tượng web

+ Thuộc tính border-style: Quy định kiểu viền thể hiện của một đối tượng web.

hoặc

border:<border-width> |<border-color> |<border-style>

f. Height & Width

- Thuộc tính width: Quy định chiều rộng cho một thành phần web.

- Thuộc tính max-width: Quy định chiều rộng tối đa cho một thành phần web.

- Thuộc tính min-width: Quy định chiều rộng tối thiểu cho một thành phần web.



36

- Thuộc tính height: Quy định chiều cao cho một thành phần web.

- Thuộc tính max-height: Quy định chiều cao tối đa cho một thành phần web.

- Thuộc tính min-height: Quy định chiều cao tối thiểu cho một thành phần web.

Chú ý: Các thuộc tính max/min-width/height được sử dụng trong những trường hợp không chắc giá trị chính xác cho width, height cả một thành phần. Ví dụ, vùng chứa bài post của một forum có bề ngang 500px, ta có thể định max-width:500px cho phần hình ảnh trong phần đó để tránh những ảnh lớn bị lệch ra ngoài.

g. Float & Clear:

- Thuộc tính float: Dùng để cố định một thành phần web về bên trái hay bên phải không gian bao quanh nó. Đây là một thuộc tính rất cần thiết khi dàn trang, hiển thị văn bản thành, hay thực hiện việc định vị trí ảnh và text. Thuộc tính float có 3 giá trị:

+ Left: Cố định phần tử về bên trái.

+ Right: Cố định phần tử về bên phải.

+ None: Bình thường.

Nhìn vào hình minh họa trên chúng ta thấy là ban đầu trong box lớn có hai thành phần là Box B và phần Content. Lúc

đầu Box B nằm bên trên và Content nằm bên dưới, nhưng khi chúng ta đặt thuộc tính float cho Box B thì Box B bị cố định về bên trái và chừa lại khoảng trống bên trái nó. Còn phần Content thì vốn nằm bên dưới sẽ tự động tràn lên để lắp đầy khoảng trống do Box B tạo ra.



37

Ví dụ 1.24a. Thực hiện float ảnh logo sang trái để phần nội dung bên dưới

tràn lên nằm cạnh logo..

#logo { float:left; }

#content{

width:300px;

}

- Thuộc tính Clear: Đi cùng với thuộc tính float, trong CSS còn có một thuộc tính là clear. Thuộc tính clear là một thuộc tính thường được gán vào các phần tử liên quan tới phần tử đã được float để quyết định hướng xử sự của phần tử này. Gồm các giá trị:

+ left (tràn bên trái),

+ right (tràn bên phải),

+ both (không tràn) và

+ none.

Ví dụ 1.25b. Thử nghiệm thuộc tính clear không cho tràn nội dung lên trên.

#logo { float:left; }

#content{

width:300px;

clear: both;

}

g. Position: Cửa sổ trình duyệt có thể coi như một hệ tọa độ và với position



38

ta có thể đặt một đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này. Thuộc tính

position nhận các giá trị: absolute, relative và none.

Ví dụ 1.26a. Định vị một ảnh ở vị trí 70px cách đỉnh và 90px từ bên trái tài

liệu, chúng ta sẽ viết CSS như sau:

img { position:absolute; top:70px; left:90px }.

- Định vị tuyệt đối absolute: Định vị tuyệt đối là sự định vị mà trong đó các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu. Các đối tượng đã định vị tuyệt đối sẽ dùng kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ.

- Định vị tương đối: Sự định vị tương đối cho một thành phần là sự định vị được tính từ vị trí gốc trong tài liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài liệu

Ví dụ 1.26b. Đặt bốn ảnh ở bốn góc tài liệu bằng định vị tuyệt đối.

#logo1 { position:absolute; top:50px; left:70px }

#logo2 { position:absolute; top:0; right:0 }

#logo3 { position:absolute; bottom:0; left:0 }

#logo4 { position:absolute; bottom:70px;

right:50px }

1.5. JAVASCRIPT (JS)

1.5.1. Giới thiệu

Javasript là một ngôn ngữ lập trình được xây dựng sẵn trong các trình duyệt

web, là một trong các cách thức tốt nhất để bổ sung tính tương tác cho website.

Javasript có các đặc điểm:

− JavaScript là ngôn ngữ dưới dạng script có thể được gắn vào các file

HTML. Nó không được biên dịch (compile) mà được trình duyệt diễn

dịch (interpret).

− JavaScript là ngôn ngữ dựa trên đối tượng, có nghĩa là bao gồm nhiều

kiểu đối tượng, ví dụ đối tượng Math với tất cả các chức năng toán học.

Tuy vậy JavaScript không là ngôn ngữ hướng đối tượng như C++ hay

Java do không hỗ trợ các lớp hay tính thừa kế.

− JavaScript có thể đáp ứng các sự kiện như tải hay loại bỏ các form. Khả

năng này cho phép JavaScript trở thành một ngôn ngữ script động.



39

− Javasript có thể làm việc khác nhau trên các trình duyệt khác nhau

Có thể nhúng JavaScript vào một file HTML theo một trong các cách sau

đây:

+ Sử dụng các câu lệnh và các hàm trong cặp thẻ <SCRIPT>

+ Sử dụng các file nguồn JavaScript

+ Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính

HTML

+ Sử dụng thẻ sự kiện (event handlers) trong một thẻ HTML nào đó

Trong đó, sử dụng cặp thẻ <SCRIPT>...</SCRIPT> và nhúng một file

nguồn JavaScript là được sử dụng nhiều hơn cả.

1.5.2. Khai báo biến

Trong JavaScript, biến có thể được lưu trữ với những kiểu dữ liệu khác

nhau (Number, String, Boolean).

- Khai báo biến:

var tenBien;

var tenBien="giaTri"; ->biến khởi tạo giá trị

- Phạm vi của biến: Khi một biến khai báo có thể là Local hoặc là Global

Một biến gọi là biến cục bộ (Local variable) khi chúng được khai báo trong

một hàm để phục vụ cho hàm đó. Một biến gọi là biến toàn cục (Glocal variable)

khi chúng được khai báo bên ngoài các hàm mà vẫn được sử dụng trong hàm.

Ví dụ 1.27. Khai báo và sử dụng biến. <html> <head> <title>Hien Thi De Mo</title> <script language="JavaScript"> var a;//bien Glocal var b=2;//bien Glocal var result=0;//bien Glocal function myFunction1(){ var b=10;// bien local result=a+b; document.write("Ket Qua cua ham myFunction1 la : "+result+"<br>"); } ////// function myFunction2(){ result=a+b; document.write("Ket Qua cua ham myFunction2 la : "+result); }



40

/// function calculate(){ var inputText_a=document.getElementById("so_a"); a=parseInt(inputText_a.value); myFunction1(); myFunction2(); } function init(){ var btSum_a_b=document.getElementById("btSum_a_b"); btSum_a_b.onclick=calculate; } window.onload=init; </script> </head> <body> <h1>Hay Nhap Gia Tri cua a:</h1> <table border=1> <tr> <td><b><u>So a:</u></b> <input type="text" id="so_a" size="20"/></td> </tr> <tr> <td align="center"><b><input type="button" id="btSum_a_b" value="Submit"/></td> </tr> </table> </body> </html>

1.5.3. Các toán tử trong JavaScript

- Phép gán: Toán tử gán (=) nhằm thực hiện việc gán giá trị của toán hạng

bên phải cho toán hạng bên trái. Bên cạnh đó JavaScript còn hỗ trợ một số kiểu

toán tử gán rút gọn.

Kiểu gán thông thường Kiểu gán rút gọn

x = x + y x + = y

x = x – y x - = y

x = x * y x * = y

x = x / y x / = y

x = x % y x % = y

- Phép toán so sánh: ==(bằng), != (khác), >, >=, <, <=

- Phép toán số học: Bên cạnh các toán tử cộng (+), trừ (-), nhân (*), chia (/)

thông thường, JavaScript còn hỗ trợ các toán tử sau đây:

var1% var2 Toán tử phần dư, trả lại phần dư khi chia var1 cho var2

- Toán tử phủ định, có giá trị phủ định toán hạng

var++ Toán tử này tăng var lên 1 (có thể biểu diễn là ++var)

var-- Toán tử này giảm var đi 1 (có thể biểu diễn là --var)



41

- Ghép chuỗi: Toán tử + được coi là kết hợp hai chuỗi,

- Phép toán Logic: JavaScript hỗ trợ các toán tử logic sau đây:

expr1 && expr2 Là toán tử logic AND, trả lại giá trị đúng nếu cả

expr1 và expr2 cùng đúng.

expr1 || expr2 Là toán tử logic OR, trả lại giá trị đúng nếu ít

nhất một trong hai expr1 và expr2 đúng.

! expr Là toán tử logic NOT phủ định giá trị của expr.

- Phép toán Bitwise:

& Toán tử bitwise AND, trả lại giá trị 1 nếu cả hai bit cùng là 1.

| Toán tử bitwise OR, trả lại giá trị 1 nếu một trong hai bit là 1.

^ Toán tử bitwise XOR, trả lại giá trị 1 nếu hai bit có giá trị khác nhau

<< Toán tử dịch trái.

>> Toán tử dịch phải

Một số toán tử dịch chuyển bitwise rút gọn:

Kiểu bitwise thông thường Kiểu bitwise rút gọn

x = x << y x << = y

x = x >> y x - >> y

x = x >>> y x >>> = y

x = x & y x & = y

x = x ^ y x ^ = y

x = x | y x | = y

1.5.4. Cấu trúc các lệnh

- Cấu trúc rẽ nhánh: if ... else: Câu lệnh này cho phép bạn kiểm tra điều

kiện và thực hiện một nhóm lệnh nào đấy dựa trên kết quả của điều kiện vừa

kiểm tra

if ( <điều kiện> )

{

//Các câu lệnh với điều kiện đúng

}

else



42

{

//Các câu lệnh với điều kiện sai

}

- Cấu trúc lựa chọn switch ... case: Câu lệnh này cho phép kiểm tra điều

kiện và thực hiện một nhóm lệnh nào đấy dựa trên kết quả của điều kiện vừa

kiểm tra.

switch ( <biến> )

{

case value1:

statements1;

break;

case value2:

statements2;

break;

...

case value n-1:

statements(n-1);

break;

default:

statements(n);

}

- Vòng lặp for: Lặp khi điều kiện đúng

for (initExpr; <Điều kiện> ; incrExpr)

{

//Các lệnh thực hiện trong vòng lặp

}

- Vòng lặp while: Vòng lặp while lặp khối lệnh chừng nào <điều kiện> còn

được đánh giá là đúng

while (<điều kiện>)

{

//Các câu lệnh thực hiện trong khi lặp

}

- Lệnh Break: Dùng để thoát khỏi vòng lặp gần nhất.

- Lệnh continue: Dùng để bắt đầu một vòng lặp mới.



43

- Vòng lặp for...in: Câu lệnh này thường được sử dụng để lặp tất cả các

thuộc tính (properties) của một đối tượng.

for (<variable> in <object>)

{

//Các câu lệnh

}

- Lệnh new: Để tạo ra một thể hiện mới của một đối tượng.

objectvar = new object_type ( param1

[,param2]... [,paramN])

Ví dụ 1.28.Ví dụ sau tạo đối tượng person có các thuộc tính firstname,

lastname, age, sex. Chú ý rằng từ khoá this được sử dụng để chỉ đối tượng trong

hàm person. Sau đó ba thể hiện của đối tượng person được tạo ra bằng lệnh new <html> <head> <TITLE>New Example </TITLE> <script language ="javascript" type="text/javascript"> function person(first_name, last_name, age, sex){ this.first_name=first_name; this.last_name=last_name; this.age=age; this.sex=sex; } person1= new person("Thuy", "Dau Bich", "23", "Nam"); person2= new person("Chung", "Nguyen Bao", "24", "Nam"); person3= new person("Binh", "Nguyen Nhat", "24", "Nữ"); person4= new person("Hoàn", "Đỗ Văn", "24", "Nam"); document.write("1. "+person1.last_name+" " + person1.first_name + "<BR>" ); document.write("2. "+person2.last_name +" "+ person2.first_name + "<BR>"); document.write("3. "+ person3.last_name +" "+ person3.first_name + "<BR>"); document.write("4. "+ person4.last_name +" "+ person4.first_name+"<BR>"); </script> </head> <body> </body>

</html>

1.5.5. Hàm trong JavaScript

Trong JavaScript ta dễ dàng nhận thấy có 2 loại Hàm

+ Các Hàm JavaScript đã hổ trợ sẳn (Built-in Functions)

+ Ngoài ra người dùng có thể định nghĩa ra các hàm để phục vụ cho

mục đích riêng (User-defined Functions).

- Một số hàm JavaScript (Built-in Functions):

+ isNaN(var): Kiểm tra một biến có phải là số hay không?



44

+ parseInt(var): Chuyển một chuổi sang số nguyên.

+ parseFloat(var): Chuyển một chuổi sang số Float

+ eval(""): Định giá trị cho các statement hoặc expression được lưu trữ.

+ alert(“…”): Dùng để gởi một thông báo cho User

+ prompt("string_a","string_b"): Dùng để tạo ra một dialog box tương

tác với User, có 2 nút là OK ,CANCEL

� string_a: ghi một nhãn lên dialog box

� string_b:giá trị mặc định trong text box

- Hàm do người dùng tự định nghĩa (User-defined Functions)

function TenHam(bien_1,bien_2,...)

{ // Thân hàm

…

return value;

}

Hàm có thể chứa hoặc không chứa tham số. Có 2 cách để các hàm khi cần

ta sẽ sử dụng chúng.

� Viết trực tiếp hàm vào cặp thẻ <script> function </script>.

� Viết riêng ra một file (lưu chúng dưới dạng file.js) để gọi chúng

khi cần.



45

Chương 2. NGÔN NGỮ PHÁT TRIỂN ỨNG DỤNG WEB

2.1. Giới thiệu một số ngôn ngữ kịch bản phía server:

Lập trình web là xu thế phát triển của công nghệ phần mềm đang thu hút

rất nhiều nhà đầu tư cũng như người dùng web. Cùng với sự hỗ trợ của các hệ

quản trị ta có thể kết hợp chúng với một kịch bản trên trình chủ như PHP, JSP,

Perl, ASP.Net,…

PHP là một kịch bản trên phía trình chủ, có các phiên bản trên hệ điều

hành window và Linux. PHP thường kết hợp với hệ quản trị CSDL MySQL phù

hợp với các doanh nghiệp vừa và nhỏ.

JSP là một kịch bản trên trình chủ với nền tảng dựa trên ngôn ngã lập

trình Java. Còn ASP.Net dựa trên nền tảng ngôn ngữ lập trình .NET.

2.2.Tổng quan về ngôn ngữ ASP.NET(Active Server Page. Net):

2.2.1. Giới thiệu ASP và ASP.NET

ASP (Active Server Page) được Microsoft giới thiệu vào năm 1996 và trở

lên thông dụng từ ngày đó. ASP là một kịch bản trên trình chủ (Server Script) và

hai ngôn ngữ lập trình chính được sử dụng cho ASP là VB6.0 và Visual J++6.0

thuộc bộ Visual Studio 6.0.

Đến nay .Net Framework và các ứng dụng của nó đã và đang tạo ra cuộc

cách mạng kỹ thuật trong công nghệ tin học. ASP.NET là một nâng cấp tuyệt

vời của Microsoft nhằm thay thế công nghệ ASP. ASP.Net được thiết kế tương

thích với các phiên bản trước đó, ta chỉ cần thay đổi rất ít khi chuyển ứng dụng

từ ASP sang ASP.Net. Điểm đặc biệt là ta có thể cài đặt ASP.Net cùng với ASP

trên máy chủ Windows 2000 mà không cần thay đổi cấu hình của ứng dụng ASP

cũ, ASP.Net và ASP hoạt động độc lập với nhau.

Trước hết ta tìm hiểu về ASP, ASP là một mô hình tối ưu và dễ sử dụng

với nhiều ứng dụng Web trên nền Windows, kể cả các ứng dụng web có quy mô

lớn. Tuy nhiên, nó còn có một số điểm yếu như:

• Mã ASP viết trộn lẫn với mã HTML làm cho cấu trúc trang

không rõ ràng.



46

• Trang ASP phải thông dịch lại toàn bộ khi người sử dụng triệu

gọi chúng.

• ASP sử dụng đối tượng ADO để kết nối tới CSDL của Microsoft

như Microsoft Access, Microsoft SQL Server, .v.v…tính bảo mật

chưa cao và không thể kết nối đến CSDL định dạng XML.

Xuất phát từ những đặc điểm trên Microsoft đã đưa ra một công nghệ mới

cho các lập trình viên trong môi trường web đó là ASP.NET. ASP.Net là kỹ

thuật lập trình và phát triển ứng dụng web ở phía Server (Server-side) dựa trên

nền tảng của Microsoft .Net Framework với các ưu điểm nổi bật so với ASP là:

• Tăng hiệu quả lập trình thông qua các đặc điểm:

o Dễ dàng lập trình: ASP.Net giúp ta phát triển và triển khai

các ứng dụng về mạng trong một thời gian rất ngắn vì nó

cung cấp cho ta một kiểu mẫu lập trình dễ dàng và gọn gàng

nhất. Ngoài ra, ASP.Net còn làm việc với mọi browser hiện

nay như Internet Explorer, Nestcape, Opera,.v.v… mà không

cần chuyển qua chuyển lại các mã nguồn như trước.

o Lựa chọn ngôn ngữ đơn giản: không giống như ASP kiểu cổ

điển chỉ giới hạn với VBScript và Jscript, ASP.Net cho phép

lựa chọn một trong các ngôn ngữ lập trình mà ta yêu thích:

Visual Basic.Net, J#, C#,…

o Hỗ trợ công cụ tuyệt vời: mặc dù ta có thể sử dụng Notepad

để triển khai các trang ASP.Net nhưng Visual Studio.Net

giúp năng suất triển khai mạng thêm phần hiệu quả ví dụ như

có thể quan sát các kế hoạch dễ dàng hơn khi phác hoạ các

thành phần của nền Windows. Thêm nữa còn hỗ trợ trong

việc phát hiện và loại bỏ các lỗi sai một cách rất thuận lợi

trong khi phát triển các ứng dụng về mạng.

o Nhờ nền tảng vững vàng và tài nguyên phong phú của .Net

Framework với hơn 5000 class (lớp) bao gồm XML, Data



47

access, File upload… nên việc thiết kế các đặc tính trong một

ứng dụng trở nên dễ dàng và nhẹ nhàng hơn.

• Tăng khả năng thực hiện và tính ổn định: ASP.Net chạy nhanh hơn

ASP cổ điển gấp 5 lần, hơn nữa ASP.Net có khả năng lưu trữ một

kết quả chung trong bộ nhớ của trang để gửi giải đáp cho cùng một

yêu cầu từ nhiều khách hàng khác nhau và nhờ đó tiết kiệm thời

gian và tăng hiệu suất làm việc.

• Dễ dàng triển khai: ASP.Net đơn giản hoá việc triển khai ứng dụng

mạng do đó biến việc triển khai ứng dụng trở nên dễ dàng và thuận

lợi hơn trước kia vì bây giờ chỉ cần sao chép và lưu trữ ở Server

chứ không phải chạy chương trình “regsrv32” để đăng ký bất kỳ

thành phần nào cả, khi lưu trữ những yếu tố phụ cần thiết cho việc

lập trình hay bố trí các ứng dụng ta chỉ cần lưu trữ nó vào trong hồ

sơ dưới dạng XML là đủ.

• ASP.Net cho phép ta tự động cập nhật các thành phần đã biên dịch

mà không cần phải khởi động lại các Web Server.

2.2.2. Giới thiệu .NET FRAMEWORK

.NET Framework là cơ sở hạ tầng bằng việc cung cấp cho người dùng cách

thức sử dụng đa ngôn ngữ lập trình để truy cập thông tin, file, hoặc các chương

trình của họ ở mọi lúc mọi nơi trên mọi cấu hình phần cứng và thiết bị.

Tâm điểm của .NET Framework là CLR (Common Language Runtime) và

tập phân cấp các bộ thư viện hợp nhất và ASP.NET. CLR quản lý sự thực thi

của đoạn mã .NET và cung cấp các dịch vụ tạo quá trình phát triển chương trình

ứng dụng dễ dàng hơn. Các trình biên dịch và các công cụ làm cho chức năng

của thư viện thực thi runtime trở nên phong phú và hiệu quả hơn.

Ngoài ra, dịch vụ Web trong .NET Framework cho phép ta phát triển ứng

dụng Internet hay Intranet trong hiện tại lẫn tương lai bằng bất cứ ngôn ngữ lập

trình và truy cập đến hệ thống bất kỳ. CLR cung cấp sự dễ dàng cho các nhà

phát triển Visual Basic .NET khi thiết kế và xây dựng ứng dụng mà những đối

tượng của chúng có thể tương tác với các đối tượng được viết bằng ngôn ngữ

khác.



48

Sự tương tác này có thể bởi vì các trình biên dịch ngôn ngữ và các công cụ

phát triển hướng đến sử dụng CLR với một hệ thống kiểu dữ liệu chung định

nghĩa bởi thư viện runtime như hình2.1.

Ta có thể tham khảo tất cả những thành phần cấu thành trong .NET

Framework như hình 2.1, mức trên cùng là trình biên dịch Visual Basic hoặc các

trình biên dịch của các ngôn ngữ khác trong bộ Visual Studio .NET.

Trong hình 2.1, cũng cho biết ta có thể sử dụng Visual Studio.NET kết hợp

với môi trường phát triển (Intergrated Development Environment - IDE) để lập

trình ASP.NET. Visual Basic, C ++ , C # .v.v...

.NET Framework còn kết hợp mô hình lập trình đơn giản, dễ sử dụng với

các giao thức mở và biến đổi được của Internet.

Hình 2.1. Kiến trúc .NET Framework

2.2.3. Biên dịch trang ASPX

Trang ASP.Net được biên dịch trước. Thay vì phải đọc và thông dịch mỗi

khi trang web được yêu cầu, ASP.Net biên dịch những trang web động thành

những tập tin DLL mà Server có thể thi hành nhanh chóng và hiệu quả. Yếu tố

này là một bước nhảy vọt đáng kể so với kỹ thuật thông dịch của ASP.



49

Các trang ASP.NET có đuôi là *.apsx. Khi người sử dụng lần đầu tiên triệu

gọi trang ASPX, thì IIS triệu gọi trình biên dịch dịch trang ASPX (trang Code-

behind) thành tập tin Class. Tiếp theo, tập tin Class này được biên dịch thành tập

tin DLL. Cuối cùng, trang DLL thực thi và trả về kết quả cho người sử dụng

(xem hình 2.2).

Trong trường hợp người sử dụng triệu gọi lại trang ASPX, thì tập tin DLL

sẽ được gọi và thực thi để trả kết quả về cho người sử dụng. Trang ASPX sẽ chỉ

biên dịch lại tập tin DLL khi chúng tìm thấy cấu trúc của nó thay đổi hoặc chúng

không tìm thấy tập tin DLL tương ứng.



50

Hình 2.2. Quá trình biên dịch trang ASP.NET

2.2.4. Giới thiệu công cụ lập trình

Ta có thể sử dụng trình soạn thảo Notepad, các công cụ cho phép soạn thảo

dạng văn bản, Visual Studio.NET. Tuy nhiên, bằng việc sử dụng Visual Web

Developer trong bộ Visual Studio.NET, ta có thể tạo một Web site để hiển thị

giao diện người sử dụng, tiến trình dữ liệu, và cung cấp rất nhiều các câu lệnh,

các tính năng của một ứng dụng chuẩn với Microsoft Windows đưa ra.

Trước khi tạo một ASP.NET Web site đầu tiên, ta cần xem xét kiểu môi

trường mà ta muốn chạy Web site trên đó. Một sự cải tiến hữu dụng trong Visual

Studio 2005 là ta không cần phát triển Web site trên một máy tính được cấu hình

đầy đủ để hoạt động giống như một Web server. Trong Visual Studio .NET

2002 và 2003, hệ thống phát triển cần có máy chủ hoặc có truy xuất tới Web



51

server đang chạy trên Microsoft Windows 2000, Microsoft Windows XP

Professional, hoặc Microsoft Windows Server 2003 đã cài đặt Internet

Information Services (IIS), Microsoft FrontPage 2000 Server Extensions, và

.NET Framework libraries. Điều này có nghĩa là nếu ta chạy trên Microsoft

Windows XP Home Edition, ta không thực hiện được vì Windows XP Home

Edition không được cung cấp IIS và the FrontPage 2000 Server Extensions.

Trong Visual Studio 2005, ta có thể tạo và chạy Web site trên một trong 3 cách

sau:

• Trên chính máy tính của bạn (the local file system)

• Một HTTP server chứa IIS và các thành phần có liên quan

• An FTP site (a remote file server)

Lựa chọn thứ nhất sẽ rất đơn giản, bởi vì nó không cần phải thêm phần

cứng hay một phần mềm nào. Nếu có Visual Studio 2005 và .NET Framework,

ta có thể tạo Web sites. Thêm vào đó, khi ta phát triển Web site trên local file

system, tất cả các Web site files được lưu trữ trên một vị trí. Khi đã kết thúc quá

trình test ứng dụng ta có thể triển khai các file đó trên Web server ta lựa chọn.

Nếu muốn phát triển Web site trên Web server, sử dụng Control Panel kiểm

tra xem IIS và the FrontPage 2000 Server Extensions đã được cài trên hệ thống

hay chưa. (Click the Add Or Remove Programs category in Control Panel, click

Add/Remove Windows Components, và sau đó tìm các chương trình trên). Tiếp

theo đó bạn xây dựng một thư mục ảo ánh xạ đến website của bạn và thực hiện

triệu gọi các trang web thông qua thư mục ảo đó một cách bình thường.

a) Tạo một Web site:

1. Khởi động Visual studio, File\ New Web site.

Lệnh này dùng để khởi động Visual Web Developer và cho Visual Studio

sẵn sàng để xây dựng một Web site. Ta thấy hộp thoại New Web Site như

hình 2.3.



52

Hình 2.3. Cửa sổ New web site

2. Trong hộp thoại New Web Site, chọn ASP.NET Web Site và ngôn ngữ

Visual Basic .

3. Click File System trong hộp Location, click Browse, và sau đó chỉ định

đường dẫn đến thư mục lưu trữ.

4. Click OK để hoàn thành các thay đổi.

Visual Studio nạp Visual Web Developer và tạo một Web page. Mỗi một

Web page chứa hai phần:

• Một Web Forms page, chứa HTML và các điều khiển để tạo giao

diện người sử dụng.

• file code-behind, chứa các module code, chứa program code trong

Web Forms page.

Tương ứng với nó là hai file được mặc định là: file Default.aspx chứa giao

diện người sử dụng và file Default.aspx.vb chứa phần code cho Web page này.

Ngoài web pages, web sites có thể chứa các modules (.vb files), HTML

pages (.htm files), configuration information (a Web.config file), global Web

application information (a Global.asax file),và các thành phần khác. Ta có thể sử



53

dụng Web Page Designer và Solution Explorer để chuyển đổi giữa các thành

phần này một các nhanh chóng và hữu hiệu.

Trong cửa sổ Web Page Designer, HTML source code cho Web page được

hiển thị trên tab Source. Tab Design dùng để hiển thị Web page như khi trên

Web browser. Khi tab Design được chọn thì một trang trắng xuất hiện đó là kết

quả của phần code khởi tạo. Ta có thể thiết kế thêm các điều khiển và điều chỉnh

các đối tượng trên trang. Ta sử dụng trang *.aspx.vb để viết mã code cho trang.

b) Thêm web page

Để thêm một trang vào web site ta thực hiện các bước sau

1. Click vào menu Website chọn Add New Item (Hoặc trong cửa sổ

Solution Explorer, right click, và chọn Add New Item). Xuất hiện cửa

sổ Add New Item như hình 2.4.

Hình 2.4. Cửa sổ Add New Item

2. Trong cửa sổ này ta thực hiện các lựa chọn

- Mục Templates: Chọn Web form

- Mục Name: Đặt tên cho trang

- Mục Language: Chọn ngôn ngữ lập trình



54

- Chọn: Place code in separate file mặc định là tách trang này ra làm 2 file

như đã mô tả trên. Trong trường hợp không tách ta có thể bỏ lựa chọn này.

Khi bỏ lựa chọn này thì HTML và các điều khiển để tạo giao diện người sử

dụng cùng với code nằm trên cùng một file.

2.3. Nền tảng của ASP.NET

2.3.1. Mô hình trang web

Một trang Web bao gồm hai phần MarkUp Code và Programming code.

Khi duyệt một trang ta thấy phần layout của nó trên trình duyệt. Phần layout

được thiết kế bởi các thẻ markup. Programming code được viết cho sự điều

khiển sự tương tác của người sử dụng và một số sự kiện.

MarkUp code và Programming code có thể ở trên cùng một trang hoặc trên

các trang khác nhau. Dựa vào đó người ta chia Web Page model ra làm hai dạng

mô hình:

� Single File Page:

� Code Behind Page:

Cấu trúc cơ bản của file .aspx cho cả hai mô hình bao gồm các chỉ dẫn

trang, script code và user interface code

a. Single File Page

� Ưu điểm:

o Dễ bảo trì khi MarkUp code và Programming trên cùng một

file.

o Dễ triển khai

o Dễ đổi tên



55

� Nhược điểm:

o Single file page không được tạo trực tiếp từ VS IDE

o Có nhiều hạn chế trong việc hỗ trợ Coding

o Các Event Handler không được tự động tạo khi double click

trên các điều khiển sự kiện.

b. Code Behind Page:

Trong môi trường lập trình ứng dụng Web, thường khó khăn để tách ra

nhiều phần của quá trình xử lý. Khi viết một trang Web, ta cũng phải quan tâm

đến giao diện, nội dung, quá trình xử lý, tốc độ truy cập và làm thế nào cho quá

trình bảo trì đơn giản và dễ cập nhật,...

Một trong bước tiến nổi bật của ASP.NET nội dung và mã tách ra thành hai

phần, phần mã được gọi là Code-Behind. Như vậy, nó yêu cầu nhà lập trình làm

việc trên hai tập tin khác nhau, nhưng sự sắp xếp và phân chia ra thành hai phần

như vậy giúp các nhà lập trình có cái nhìn chi tiết, rõ ràng,.v.v...

Mã Code-Behind được viết dưới dạng một lớp (Class) lưu trong một file

định dạng bởi .NET Framework, ví dụ như xây dựng lớp mycodebehind lưu

trong file mycodebehind.vb.

Khi tạo mới một trang, VS 2005 IDE cung cấp lựa chọn cho phép hai loại

Code trên hai trang khác nhau. Nếu lựa chọn này được chọn thì IDE sẽ tạo ra hai

file MarkUp file và Class file.

MarkUp file có đuôi mở rộng .aspx chứa các markUp code. Class file là

một file Code Behind chứa logic lập trình, có đuôi mở rộng .aspx.cs (hoặc

.aspx.vb,…). MarkUp file chứa tham chiếu đến Code Behind file, nên hai file

này được liên kết với nhau.



56

Khi một web page được tạo thì nó được dẫn xuất từ lớp Page thuộc

namespace "System.Web.UI“, được kế thừa các thuộc tính, các phương thức và

các sự kiện của lớp này.

Page.Title = "Login"

Page.ErrorPage = "ErrorPage.aspx“

....

File Code Behind tự động tạo Partial Class. Từ khóa Partial chỉ định lớp

này không chứa đầy đủ các thành phần mà nó được kế thừa từ lớp Page.

2.3.2. Các chỉ dẫn

Các chỉ dẫn là các câu lệnh mô tả ứng dụng ASP.NET được biên dịch như

thế nào. Các chỉ dẫn được bao trong cặp <% %> và thuộc file .aspx.

Chỉ dẫn Mô tả Ví dụ

@Page Định nghĩa các thuộc tính cho Web page

<%@ Page Language="C#" Title=“My web Page" %>

@Import Import một không gian miền vào trang. Cho phép sử dụng tấ cả các Classes và interfaces của không gian miền này.

<%@ Import Namespace="System.Data" %>

@Assembly Liên kết đến một Assemply cho trang hoặc điều khiển nào đó.

<%@ Assembly Name=“MyAssembly" %>

@Master Định nghĩa các thuộc tính của trang Master.

<%@ Master Language="C#" %>



57

@Reference Tham chiếu đến một trang khác. <%@ Reference Page="~/Home.aspx" %>

Khi tạo một trang, bạn có thể khai báo gán một số thuộc tính của Page. Một

trong số đó là một phần của chỉ dẫn @Page và @Import chỉ dẫn. Mỗi loại chỉ

dẫn này có một tập các thuộc tính mà sử dụng để điều khiển Page được khai báo

trên cùng một dòng.

a. Chỉ dẫn @Page

Chỉ dẫn @Page dùng để gán một thuộc tính (trong bảng 2.5) chỉ định của

trang Web Forms để truyền cho trình biên dịch và nó có hiệu lực trên trang được

tạo ra. Chỉ dẫn @Page cùng với các chỉ dẫn khác có thể khai báo ở vị trí bất kỳ

trên trang. Tuy nhiên, tốt nhất là nên khai báo đầu tiên của trang như sau: <%@ Page Language="VB" AutoEventWireup="false"

CodeFile="vidu2_8.aspx.vb" Inherits="vidu2_8" %>

Bảng 2.5. Các thuộc tính khai báo trong @Page

Biến cố Diễn giải Mô tả

ClassName Tên Class Kế thừa một Classname hợp lệ, ví dụ bạn

có thể khai báo sử dụng Class.

CodePage Số hợp lệ Gán CodePage của phúc đáp nếu nó khác

với Web Server.

EnableSessionState

Session

Boolean,

ReadOnly

Cho phép Page truy cập, ReadOnly cho

phép truy cập nhưng không thể thay đổi.

ErorrPage URL Trỏ đến URL khi không thể kiểm soát

ngoại lệ.

Language VB,C#,.v.v... ngôn ngữ hỗ trợ trong .NET Framework.

b) Chỉ dẫn @Import

Chỉ dẫn này cho phép bạn khai báo thêm các không gian tên miền vào

Page. Khi khai báo chỉ dẫn @Import, tất cả các Class của không gian tên sẽ có

sẵn trong khi lập trình.

Ðể khai báo chỉ dẫn @Import, bạn có thể sử dụng cú pháp sau: <%@ import Namespace="System.Threading" %> <%@ import Namespace="System.IO" %>



58

Mỗi không gian tên bạn sử dụng một khai báo chỉ dẫn @Import. Nếu có

nhiều không gian tên cần thêm vào Page bạn sẽ sử dụng nhiều khai báo

@Import.

Tuy nhiên, bạn chỉ cần khai báo @Import với các không gian tên mà .NET

Framework tuỳ chọn. Ðiều này có nghĩa là những không gian tên sau đây tự

động thêm vào trang.

System

System.Collection.Specialized

System.IO

System.Text.RegularExpression

System.Collections

System.Configuration

System.Text

System.Web

System.Web.Security

System.Web.UI

System.Web.UI.WebControls

System.Web.SessionState

System.Web.UI.HtmlControls

2.3.3. Điều khiển sự kiện trong Web page

Sự kiện (Event) là một hành động được nổ trong khi ứng dụng đang chạy.

Ví dụ như Click lên nút lệnh hay nhấn một phím nào đấy là các sự kiện. Mỗi sự

kiện được điều khiển bởi một khối code được gọi là Event Handler.

ASP.NET là một mô hình lập trình sự kiện bởi vì mọi thứ xuất hiện trên

trang web là sự đáp lại của một số sự kiện. ASP.NET bao gồm các Event

Handler trong code lập trình phía server và cung cấp các kỹ thuật điều khiển các

sự kiện bằng tay hoặc tự động.



59

Mỗi một Web page có một vòng đời, mỗi bước trong vòng đời xuất hiện

một sự kiện. Các sự kiện được xử lý tự động bởi các Event Handler tương ứng.

• Init: Là sự kiện đầu tiên trong vòng đời của trang web. Sự kiện init

thường dùng khởi tạo tất cả các điều khiển trong trang web. Sự kiện này

cũng còn được dùng đối với các biến cần được khai báo và khởi tạo trước

khi xử lý Web page.

Protected Sub Page_Init(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Me.Init

Response.Write("Page initialization event occur")

End Sub

• Load: Là sự kiện nổ ngay sau sự kiện Init. Thường dùng để đọc và

Update các điều khiển.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Me.Load

Response.Write("Page load event occur")

End Sub

• PreRender: Là sự kiện được kích nổ trước khi trang được submit (đệ

trình) cho người sử dụng.

Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender



60

Response.Write("Page prerender event occur")

End Sub

• UnLoad: Là sự kiện nổ sau khi trang được submit cho người dùng.

2.3.4. POSTBACK

Trong tiến trình xử lý PostBack là thông tin được submit từ Browse đến

Server. Khi người dùng Submit thông tin bằng cách click vào một Button hoặc

chọn một item trên lưới thì Browse sẽ chuyển thông tin này đến server.

Khi người dùng tương tác với Web Page bằng cách phát sinh một sự kiện

thì trang đó được gửi quay trở lại Server. Server xử lý code hiện tại trong các

event handlers và sau đó trang này được tạo lại. Như vậy trang này lại trải qua

một vòng đời mới với các sự kiện Init() và Load ()

Thuộc tính IsPostBack dùng để kiểm tra Web Page được Request lần đầu tiên hay là kết

quả của một PostBack. Nếu trang đó được Request lần đầu tiên thì thuộc tính IsPostBack

nhận giá trị false. Nếu trang đó được submit quay trở lại từ Server thì thuộc tính IsPosstBack

nhanạ giá trị True.

Ví dụ minh họa:

Protected Sub txtSubmit_Click(ByVal sender As Object, ByVal

e As System.EventArgs) Handles txtSubmit.Click

txtName.Text = "Hello"

End Sub

Protected Sub Page_Load(ByVal sender As Object, ByVal e

As System.EventArgs) Handles Me.Load

If Not IsPostBack() Then

Response.Write("Welcome ...")

End If

End Sub

2.4. Master Page

Một tiện ích của website là sự nhất quán về trang, và hiếm khi ta tìm thấy

trên Internet mà các layout khá khác nhau. Chúng có các đặc điểm sau:

• Có chung một phần header và hệ thống menu cho toàn bộ site

• Thanh bar cạnh bên trái của trang thường dùng lựa chọn điều

hướng các trang trong site.



61

• Cuối trang là thông tin copyright và menu phụ cho việc contacting

với webmaster

ASP.NET Master Pages giúp chúng ta tạo một template hoặc một layout

thống nhất cho nhiều trang trong một ứng dụng Web. Chúng ta có thể định nghĩa

các tính năng chuẩn của một ứng dụng web trong trang Master. Sau đó, các tính

năng này có thể được lặp lại trên tất cả hoặc một nhóm các trang bằng cách kế

thừa trang Master này.

Trang Master có đuôi mở rộng .master và được nhận dạng bằng dẫn xuất

@Master. Mỗi trang Master bao gồm hai phần:

+ Master Page

+ Content Pages

Hình 3.34. Master Page và Content Page



62

• Master page định nghĩa layout được sử dụng bởi tất cả các trang

dựa trên Master. Nó là gốc cho toàn bộ điều khiển trên layout, chỉ

định độ lớn của header như thế nào trên mọi trang, vị trí mà các

tính năng điều hướng được thay thế và text được hiển thị ở cuối

mỗi trang. Master page chứa một vài nội dung sẵn có của mỗi trang

trên site, vì vậy standard copyright footer text có thể được định

nghĩa ở đây, cùng với vị trí chính của site là logo tại vị trí đỉnh của

site. Chỉ một lần các tính năng chuẩn của Master được định nghĩa,

sau đó ta có thể add các placeholders - tên một phạm vi trên trang

mà định nghĩa vị trí mà nội dung thay đổi từ trang này đến trang

khác. Có 3 phần tử trong một trang Master:

+ Content Placeholders: Là vùng có thể thay đổi được trên trang

Master và ta có thể tùy biến được cho mỗi trang. Một trang

Master có thể có nhiều hơn một Content Placeholders. Điều

khiển ContentPlaceholders cho phép tùy biến nội dung.

+ Non editable regions: Cho phép chúng ta chèn các phần tử

chung cho các trang như Logos công ty, menu, copyright,…



63

+ HTML Elements: Chúng ta có thể dùng HTML table để thiết

kế Layout, thẻ img để hiển thị logo, các chuỗi tĩnh hiển thị

copyright và các điều khiển server,…

• Content page là một trang dựa trên Master, và là vị trí mà ta có thể

add thêm nội dung cho mỗi trang trên site mà thay đổi từ trang này

đến trang khác. Content page chứa text, HTML, và controls trong

thẻ <asp:content> tags. Khi Content page được Request, nội dung

của nó được phối hợp với một bản copy của Master page, với nội

dung riêng được định nghĩa trên vị trí Content page trong chỉ định

của placeholder trên Master page. Sau đó toàn bộ gói sẽ được

chuyển giao đến browser, như hình 3.34.

* Creating Master Page

Master page được tạo trong VWD’s Solution Explorer bằng việc right-click

lên gốc của site, chọn Add Item, và chỉ định kiểu là Master Page.Với mặc định,

tên của một Master page mới là MasterPage.master và được lưu trên vị trí gốc

của site. Master page có 3 phần:

- Phần thứ nhất là các thẻ cơ sở và chỉ định của trang (như là chỉ định

Master, DOCTYPE, xmlns, html, và head tags) mà được yêu cầu bởi

bất cứ diễn tả trang nào. Nội dung này được chèn chỉ một lần trên

Master page,để giảm sự lặp lại. DOCTYPE và xmlns đề cập đến vị

trí của server có thể tìm kiếm định nghĩa các thẻ sử dụng trong trang.

Chú ý rằng các thẻ này sẽ không xuất hiện trong Content pages:

<%@ master language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="PageHead" runat="server">

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<title> My Website </title>

<link rel="stylesheet" type="text/css" href="site.css" runat="server" />

</head>



64

- Phần thứ hai của Master page là vị trí của các scripts sẽ được chạy

trên tất cả các trang (chẳng hạn như sự kiện Page_Load code, sẽ chạy

mỗi khi mỗi trang được loaded lên), ví dụ:

<script runat="server">

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) '...

End Sub

</script> - Phần thứ ba, Master page bào gồm một vài HTML cho layout, và thẻ

start/end <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>. Phần tài liệu của Content page sẽ được thay thế trong thẻ này.

Tóm lại, mỗi Master page phải bao gồm các thành phần sau:

- Các thẻ cơ sở HTML và XML typing tags

- <%@ master ... %> ở trên dòng đầu tiên

- Một <asp:ContentPlaceHolder> tag với một ID

Master page có giá trị như một container chứa toàn bộ các trang khác. Ta sẽ

tạo Content pages trong phần tiếp theo.

* Creating Content Page

Trong ASP.NET 2.0, Visual Web Developer sẽ ghi lại những gì thatực

hiện. Để tạo Content Page, trong cửa sổ Solution Explorer, right-click vào gốc

và chọn Add New Item: Thông thường ta sẽ chọn template là Web Form và

không có chỉ định template đặc biệt cho Content page. Chú ý, dưới hộp thoại là

lựa chọn Select master page (như hình3.35). Khi hộp kiểm được chọn thì thì

xuất hiện hộp thoại chỉ dẫn xem ta chọn Master page sẽ được sử dụng cho

Content page mới.

Hộp thoại thứ 2 (hình 3.36) cho phép chúng ta chọn một Master page trong

danh sách để sử dụng. Ta chọn một Master page và chọn OK.

VWD thiết lập 2 giá trị trong Content page. Chúng không nhìn thấy được

trong Design View, nhưng chuyển tới Source View sẽ thấy chúng, như được

định nghĩa trong đoạn code sau. Đầu tiên, Master page sử dụng sẽ được khởi tạo

trong chỉ dẫn đầu tiên. Thứ hai, VWD sẽ bao hàm điều khiển <asp:content> với

thuộc tính chỉ định ID của placeholder trong Master page. Một Master page có



65

thể có nhiều vị trí cho Content pages chèn vào. Các nhận dạng placeholder cần

được định rõ để điền trang nội dung cụ thể này.

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> ' Nội dung của Content sẽ được định nghĩa ở đây

</asp:Content>

Hình 3.35. Cửa sổ Add New Item



66

Hình 3.36. Cửa sổ Select Master Page

Tổng kết, Content page chứa 3 đặc điểm sau:

- Không có đoạn khai báo thẻ HTML <!DOCTYPE HTML ... > và

XML <html xmlns=...>

- Khai báo chỉ dẫn <%@ page MasterPageFile= ... %> ở dòng đầu

tiên để chỉ ASP.NET 2.0 Master page sử dụng.

- Một thẻ <asp:content> tag

Ví dụ: Trong trang Master và contain có các thẻ <asp:Content ID=“Content1" ContentPlaceHolderID=“main" Runat="Server"> Main </asp:Content> <asp:Content ID=“Content2" ContentPlaceHolderID=“Footer" Runat="Server"> Footer </asp:Content>



67

2.5. HTML Controls và ASP.NET Web Server Controls

2.5.1. Giới thiệu các controls

a) Server Controls và HTML Controls

Server Controls

Server controls có nhiều khả năng hơn HTML controls và chức năng của

nó trong một số cách giống như Windows Forms controls. Nhiều điều khiển

server controls có cùng tên như các điều khiển Windows Forms controls và cùng

cấp nhiều thuộc tính, phương thức và sự kiện giống nhau, thêm vào đó là các

điều khiển như FileUpload, LoginView, và RequiredFieldValidator.

HTML Controls

HTML controls là một tập hợp các điều khiển giao diện người dùng trước

đây mà được hỗ trợ bởi hầu hết các trình duyệt web và phù hợp với chuẩn

HTML phát triển cho việc quản lý các phần tử giao diện người dùng trên các

trang web điển hình. Chúng bao gồm: Button, Text Field, Checkbox và các điều

khiển cơ sở hữu ích cho việc quản lý thông tin trên một trang Web mà có thể

được trình bày hoàn toàn bằng mã code HTML.

b) ASP.NET Web Server Controls

Khi tạo trang ASP.NET Web pages, ta có thể sử dụng các kiểu controls:

- HTML server controls Các phần tử HTML có thêm tính năng

tương tác trên trình (server) vì vậy ta có thể lập trình chúng. HTML



68

server controls trưng bày một đối tượng mà ánh xạ rất gần tới các

phần tử HTML mà chúng hoàn trả.

- Web server controls Controls có nhiều tính năng cài sẵn hơn

HTML server controls. Web server controls không chỉ bao gồm các

điều khiển như buttons and text boxes, mà còn các điều khiển cho

mục địch đặc biệt như calendar, menus và tree view control. Web

server controls có nhiều tính năng trừu tượng hơn HTML server

controls.

- Validation controls Controls kết hợp logic cho phép ta kiểm soát

những gì mà người dùng chèn vào các điều khiển Input như điều

khiển TextBox. Validation controls cho phép ta kiểm tra quy định

của một trường, kiểm tra dựa vào một giá trị đặc biệt, hoặc một mẫu

ký tự, kiểm tra xem một giá trị nào đó có nằm trong một phạm vi hay

không, .v.v…

- User controls Controls mà được tạo như ASP.NET Web pages. Ta

có thể nhúng ASP.NET user controls trên các trang ASP.NET Web

pages khác. Đây là cách đơn giản để tạo toolbars và các phần tử

được sử dụng lại khác.

2.5.2. Web Server Controls

Web server controls bao gồm các điều khiển truyền thống như buttons và

text boxes cũng như các điều khiển phức tạp hơn như tables. Chúng cũng bao

gồm các điều khiển có các chức năng thông thường được sử dụng như hiển thị

dữ liệu trên grid, chọn ngày tháng, hiển thị menu, .v.v…

Web server controls có tất cả các tính năng được mô tả trong phần HTML

server controls trên (ngoại trừ ánh xạ 1-1 đến các phần tử HTML) và chúng có

các đặc tính mới thêm vào như:

- Một mô hình đối tượng đa năng (rich object model) cung cấp các khả

năng lập trình an toàn.

- Tự động dò tìm trình duyệt. Các điều khiển có thể có thể tự động dò

tìm các khả năng của trình duyệt và hoàn trả đánh dấu mã HTML

thích hợp.



69

- Một vài controls, có khả năng định nghĩa layout của mình cho việc

sử dụng các Templates.

- Một vài điều khiển có khả năng chỉ định sự kiện của một điều khiển

là nguyên nhân trực tiếp gửi lên server hoặc thay vì lưa trữ hoặc và

nối khi trang được submit.

- Hỗ trợ các themes, cho phép định nghĩa nhất quán giao diện các điều

khiển trên toàn bộ site.

- Có khả năng chuyển các sự kiện từ một tổ hợp các điều khiển (như

một button trong một table) điều khiển chứa (container control).

- Các điều khiển này sử dụng cú pháp sau:

<asp:button attributes runat="server" id="Button1"/>

Namespace System.Web.UI.WebControls chứa các lớp cho phép tạo các

điều khiển Web Server. Khi các điều khiển được tạo, chúng sử dụng các lớp này

để chạy trên Server.

Các lớp thuộc không gian miền này như Textbox, ListBox, … hoàn trả các

thẻ HTML trên trang web. Một số lớp như SqlDataSource và ObjectDataSource

thao tác với dữ liệu không hoàn trên trang Web. Các lớp GridView, DetailtView

dùng để thao tác với các bản ghi dữ liệu.

Class WebControl thuộc không gian miền System.Web.UI.WebControls.

Nó đóng vai trò lớp cơ sở cho hầu hết các điều khiển Web Server.

Bảng sau là các thuộc tính, phương thức và các sự kiện thông thường được

kế thừa cho các điều khiển dẫn xuất từ lớp này

Tên Mô tả

BackColor

property

Chỉ định hoặc truy xuất màu nền của điều khiển

ForeColor

property

Chỉ định hoặc truy xuất Foreground của điều khiển

Height

property

Chỉ định hoặc truy xuất chiều cao của điều khiển

ID property Chỉ định hoặc truy xuất định danh gán cho điều khiển



70

Visible

property

Chỉ định hoặc truy xuất hoặc truy xuất giá trị boolean cho

phép điều khiển hiển thị hoặc không hiển thị trên trang

Width property Chỉ định hoặc truy xuất chiều rộng của điều khiển

Focus() method Thiết lập focus cho điều khiển

Load event Xuất hiện khi điều khiển được load trong bộ nhớ.

Sau đây là một số lớp thường được sử dụng:

a) Điều khiển Lable cho phép hiển thị nhãn trên Web Form. Điều khiển này

thường được sử dụng để hiển thị các chuỗi tĩnh. Tuy nhiên cũng có thể tạo

output động khi được điều khiển bởi các script.

Sau đây là cú pháp tạo điều khiển lable:

+ MarkUp code:

<asp:Label ID=“lblMyLable" runat="server"

Text="Label"></asp:Label>

+ Programming code: Label <tên điều khiển>= new Label();

lblObject.ID = "lblMy";

lblObject.Text = "MyLable";

Page.Controls.Add(lblObject);

Các thuộc tính hay sử dụng:

Tên Mô tả

Text property Chỉ định hoặc truy xuất chuỗi text trên nhãn

AccessKey property Chỉ định hoặc truy xuất Key short cut cho phép điều

hướng nhanh đến điều khiển.

AssociatedControlID

property

Chỉ định hoặc truy xuất ID của điều khiển có liên kết

đến điều khiển này.

b) Điều khiển TextBox cho phép hiển thị TextBox trên Web Form. Điều khiển

này thường được sử dụng để nhận input từ người sử dụng. Tuy nhiên cũng có

thể dùng để hiển thị output.

Sau đây là cú pháp tạo điều khiển TextBox:

� MarkUp code:



71

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

� Programming code:

TextBox txtObject= new TextBox();

txtObject.ID = "txtMyTextBox";

frmTest.Controls.Add(txtObject);

Sau đây là bảng các thuộc tính, phương thức và các sự kiện hay được sử

dụng:

Tên Mô tả



AutoPostBack

property

Chỉ định hoặc truy xuất giá trị cho phép tự động tạo

PostBack khi người dùng dùng phím Enter hoặc Tab

MaxLenght property Chỉ định hoặc truy xuất độ dài ký tự lớn nhất có thể

trên điều khiển.

Text property Chỉ định hoặc truy xuất chuỗi text trên điều khiển

TextMode Chỉ định kiểu của điều khiển: Singe line, multi line hay

Password.

TextChanged event Xuất hiện khi nội dung của điều khiển thay đổi giữa

hai lần post.

c) Điều khiển Button cho phép thêm nút lệnh vào Web page. Điều khiển Button

chủ yếu được sử dụng để Submit thông tin lên Server.

Sau đây là cú pháp tạo điều khiển Button:

� MarkUp code:

<asp:Button ID=“btnSubmit" runat="server" Text=“Submit" />


Button btnObject=new Button();

btnObject.ID = "txtMyButton";



72

btnObject.Text = "Submit";

frmTest.Controls.Add(btnObject) ;


dụng:

Tên Mô tả



Enable property Chỉ định hoặc truy xuất giá trị Boolean cho phép điều

khiển được Enable hay không?

Text property Chỉ định hoặc truy xuất chuỗi text hiển thị trên điều

khiển

Click event Xuất hiện khi điều khiển được clicked

Command event Xuất hiện khi điều khiển được clicked

d) Điều khiển Image cho phép hiển thị ảnh trên Web page. Sau đây là cú pháp

tạo điều khiển Image:

� MarkUp code:

<asp:Image ID="imgHoa" runat="server" ImageUrl="~/Image/hoa.jpg" />


Image imgObject=new Image() ;

imgObject.ID = "imgHoa";

imgObject.ImageUrl = "~\Image\Hoa.jpg";

imgObject.AlternateText = "Hoa cỏ may";

imgObject.ToolTip = "Một vị thuốc nam";

frmTest.Controls.Add(imgObject);


dụng:

Tên Mô tả



73

AlternateText

property

Chỉ định hoặc truy xuất chuỗi text hiển thị thay thế khi

ảnh không hiển thị.

ImageURL property Chỉ định hoặc truy xuất đường dẫn file ảnh.

e) Điều khiển ImageButton cho phép tạo Button dạng ảnh trên Web page. Sau

đây là cú pháp tạo điều khiển ImageButton:

� MarkUp code:

<asp:ImageButton ID="ImageButton1" runat="server"

ImageUrl="~/Image/hoa.jpg" />


ImageButton imgObject = new ImageButton();

imgObject.ID = "imgNext";

imgObject.ImageUrl = "~\Image\Next.jpg";

frmTest.Controls.Add(imgObject) ;

Tên Mô tả

AlternateText

property

Chỉ định hoặc truy xuất chuỗi text hiển thị thay thế khi

ảnh không hiển thị.

ImageURL property Chỉ định hoặc truy xuất đường dẫn file ảnh.

OnClientClick

property

Chỉ định hoặc truy xuất đến script client-side khi sự

kiện click xuất hiện trên điều khiển.



f) Điều khiển LinkButton cho phép hiển thị trên Web page một nút lệnh dưới

dạng HyperLink.

Điều khiển LinkButton không nên nhầm lẫn với điều khiển HyperLink.

Điều khiển HyperLink chỉ đơn thuần hiển thị các trang Web khi được click còn

LinkButton thực hiện các tác vụ giống như điều khiển Button.

Sau đây là cú pháp tạo điều khiển LinkButton:

� MarkUp code:



74

<asp:LinkButton ID="LinkButton1"

runat="server">ClickHere</asp:LinkButton>


LinnkButton lnkbtnObject=new LinkButton();

lnkbtnObject.ID = "lnkbtnClickHere";

lnkbtnObject.Text = "Click here";

frmTest.Controls.Add(lnkbtnObject) ;

Các thuộc tính và phương thức hay sử dụng của điều khiển:

Tên Mô tả

PostBackURL

property

Chỉ định hoặc truy xuất địa chỉ cỉa trang được posted

khi điều khiển được click.



g) Điều khiển Panel được sử dụng giống như một container chứa các điều khiển

Web Server khác. Panel thường được sử dụng để hiển thị các thông tin tĩnh.

Sau đây là cú pháp tạo điều khiển Panel:

� MarkUp code:

<asp:Panel ID="Panel2" runat="server">

... Các điều khiển khác ...

</asp:Panel>


Panel pnlObject = new Panel()

h) Điều khiển CheckBox: Các điều khiển chọn được sử dụng để chọn một hoặc

nhiều lựa chọn trong một danh sách. Các điều khiển này hoặc được dẫn xuất

từ lớp WebControls thuộc không gian miền System.Web.IU hoặc được dẫn

xuất từ một trong các lớp của lớp WebControls.

Sau đây là cú pháp tạo điều khiển CheckBox:

� MarkUp code:



75

<asp:CheckBox ID="CheckBox1" runat="server" Checked="True"

Text=“Tiếng Anh" />


CheckBox ckbObject =new CheckBox();

ckbObject.ID = "ckbCheclBox";

ckbObject.Checked = False;

ckbObject.Text = “Tiếng Pháp";

frmTest.Controls.Add(ckbObject);


Tên Mô tả

AutoPostBack

property

Chỉ định hoặc truy xuất giá trị boolean xem có tự động

tạo postback khi điều khiển được click.

Checked property Truy xuất trạng thái của điều khiển

Text Property Chỉ định hoặc truy xuất đến giá trị gắn với điều khiển.

i) Điều khiển RadioButton được sử dụng để chọn một trong nhiều lựa chọn

khác nhau. Sau đây là cú pháp tạo điều khiển CheckBox:

� MarkUp code:

<asp:RadioButton ID="rdbNu" runat="server" Text="Nữ"

GroupName="Gioitinh" />

<asp:RadioButton ID="rdbNam" runat="server" Text="Nam"

GroupName="Gioitinh"/>


RadioButton rdbObject =new RadioButton();

rdbObject.ID = "rdbGioi";

frmTest.Controls.Add(rdbObject) ;


Tên Mô tả

AutoPostBack Chỉ định hoặc truy xuất giá trị boolean xem có tự động



76

property tạo postback khi điều khiển được click.

Checked property Truy xuất trạng thái của điều khiển

GroupName

property

Chỉ định hoặc truy xuất tên nhóm mà điều khiển thuộc

vào.

Text Property Chỉ định hoặc truy xuất đến giá trị gắn với điều khiển.

j) Điều khiển CheckBoxList được xét như một nhóm các điều CheckBox có

liên quan với nhau. Và được sử dụng để chọn nhiều lựa chọn trong danh sách

các lựa chọn đã cho, các lựa chọn này không loại trừ nhau.

Sau đây là cú pháp tạo điều khiển CheckBoxList:

� MarkUp code:

<asp:CheckBoxList ID="cblNgoaiNgu" runat="server">

<asp:ListItem>Tiếng Anh</asp:ListItem>

<asp:ListItem>Tiếng Pháp</asp:ListItem>

<asp:ListItem>Tiếng Trung</asp:ListItem>

<asp:ListItem>Tiếng Nhật</asp:ListItem>

</asp:CheckBoxList>


CheckBoxList cblObject =new CheckBoxList();

cblObject.ID = "cblNgNgu";

cblObject.Items.Add("Tiếng Anh");

cblObject.Items.Add("Tiếng Pháp");

cblObject.Items.Add("Tiếng Trung");

frmTest.Controls.Add(cblObject) ;


Tên Mô tả

AutoPostBack

property

Chỉ định hoặc truy xuất giá trị boolean xem có tự

động tạo postback khi điều khiển được click.

Items property Truy xuất đến các phần tử trong điều khiển



77

SelectedIndex

property

Chỉ định hoặc truy xuất đến Index của phần tử có giá

trị index nhỏ nhất trong danh sách các phần tử được

chọn.

SelectedValue

property

Chỉ định hoặc truy xuất đến giá trị của các phần tử

được chọn.

Text Property Chỉ định hoặc truy xuất đến giá trị gắn với điều

khiển.

ClearSelection()

Method

Xóa lựa chọn các phần tử hoặc thiết lập thuộc tính

Selected của tất cả các phần tử là false.

SelectedIndexChanged

event

Xuất hiện khi lựa chọn các phần tử giữa hai lần post

là khác nhau.

k) Các điều khiển RadioButton ít khi được sử dụng một mình mà chúng thường

được nhóm từ hai điều khiển trở lên. Điều khiển RadioButtonList là một cách

khác, nó tương tự như một nhóm các điều khiển RadioButton, được dẫn xuất

từ lớp

Sử dụng điều khiển RadioButtonList ta không cần kiểm tra từng nút riêng

biệt để xác định trạng thái chọn của nó. Rất đơn giản, ta chỉ cần truy xuất đến

chỉ số index của nút được chọn thông qua thuộc tính SelectedIndex.

Sau đây là cú pháp tạo điều khiển RadioButtonList:

� MarkUp code:

<asp:RadioButtonList ID=“rdblstGT" runat="server">

<asp:ListItem Value="1">Nam</asp:ListItem>

<asp:ListItem Value="0">Nữ</asp:ListItem>

</asp:RadioButtonList>


RadioButtonList rdbObject =new RadioButtonList();

rdbObject.ID = "rdbGioi";

rdbObject.Items.Add("Nam");

rdbObject.Items.Add("Nữ");



78

frmTest.Controls.Add(rdbObject) ;


Tên Mô tả

AutoPostBack

property




SelectedIndex

property

Chỉ định hoặc truy xuất đến Index của phần tử được

chọn.

SelectedValue

property

Chỉ định hoặc truy xuất đến giá trị của phần tử được

chọn.

Text Property Chỉ định hoặc truy xuất đến giá trị gắn với điều

khiển.

ClearSelection()

Method

Thiết lập thuộc tính selected của tất cả các phần tử là

false.


event


là khác nhau.

l) Điều khiển ListBox được sử dụng cho phép lựa chọn nhiều phần tử trong một

danh sách cho trước.

Sau đây là cú pháp tạo điều khiển ListBox:

� MarkUp code:

<asp:ListBox ID="lstboxNN" runat="server"

SelectionMode="Multiple">

<asp:ListItem>Anh</asp:ListItem>

<asp:ListItem>Pháp</asp:ListItem>

</asp:ListBox>


ListBox lstboxObject =new ListBox();

lstboxObject.ID = "cblNgNgu";



79

lstboxObject.Items.Add("Tiếng Anh");

lstboxObject.Items.Add("Tiếng Pháp");

frmTest.Controls.Add(lstboxObject) ;


Tên Mô tả

AutoPostBack

property




SelectedIndex

property


chọn có giá trị index nhỏ nhất.

SelectedItem property Truy xuất phần tử được chọn có giá trị index nhỏ

nhất.

SelectionMode

Property

Chỉ định hoặc truy xuất mode lựa chọn của điều

khiển.

ClearSelection()

Method

Xóa lựa chọn các phần tử hoặc thiết lập thuộc tính

Selected của tất cả các phần tử là false.

GetSelectedIndeis()

method

Truy xuất mảng index của các phần tử được chọn.


event


là khác nhau.

m) Điều khiển DropDownList là điều khiển cho phép chọn một phần tử trong

danh sách các phần tử thả xuống.

Sau đây là cú pháp tạo điều khiển DropDownList:

� MarkUp code:

<asp:DropDownList ID=“ddlNgNgu" runat="server">

<asp:ListItem >Tiếng Anh</asp:ListItem>

<asp:ListItem>Tiếng Pháp</asp:ListItem>

</asp:DropDownList>




80

DropDownList ddlObject =new DropDownList();

ddlObject.ID = "cblNgNgu";

ddlObject.Items.Add("Tiếng Anh");

ddlObject.Items.Add("Tiếng Pháp");

ddlObject.Items.Add("Tiếng Trung");

frmTest.Controls.Add(ddlObject) ;


Tên Mô tả

AutoPostBack

property


động tạo postback một option được chọn.


SelectedIndex

property


chọn.

SelectedValue

property

Chỉ định hoặc truy xuất đến giá trị của phần tử được

chọn.

Text Property Chỉ định hoặc truy xuất đến thuộc tính selectedValue

của điều khiển.


event


là khác nhau.

2.5.3. Nhóm điều khiển điều hướng trang và nâng cao

a. Nhóm điều khiển điều hướng trang

Một Website có một hoặc nhiều Web pages. Các Web pages được link với

nhâu thông qua các HyperLink. Tuy nhiên, việc quản trị quá nhiều các

hyperlinks đôi khi là khó khăn. Đặc biệt đối với các hệ thống website lớn, nếu

chỉ có các hyperlink thì các trang sẽ rất lôn xộn với các link. ASP.NET cung cấp

các điều khiển điều hướng trang cho phép định nghĩa tất cả các đường link trên

một vị trí, thông thường sử dụng một file XML. Đó là các điều khiển:

+ Menu

+ TreeView



81

+ SiteMapPath

i. Điều khiển SiteMapData Source: Đối với các hệ thống website lớn, các

mục điều hướng thường được xây dựng trong một file XML mở rộng để

tiện cho việc bảo trì hệ thống. File XML này được link với điều khiển điều

hướng trang thông qua điều khiển SiteMapData Source. Điều khiển

SiteMapDataSource tìm kiếm một file đặc biệt chứa mã XML của điều

khiển điều hướng trang có tên là web.sitemap. Mọi thay đổi cấu trúc của

điều khiển điều hướng trang được thay đổi trên file web.sitemap này.

ii. Điều khiển Menu: Cho phép tạo menu trong hệ thống website. Sau đây là

cú pháp tạo điều khiển Menu:

� MarkUp code:

<asp:Menu ID="Menu2" runat="server">

<Items>

<asp:MenuItem>

</asp:MenuItem>

</Items>

</asp:Menu>


Menu mnu =new Menu();

MenuItem mnuitem =new MenuItem("Home");



82

mnuitem.NavigateUrl = "Default.aspx";

mnu.Items.Add(mnuitem) ;

Lớp Menu thể hiện của điều khiển Menu thuộc không gian miền

System.Web.UI.WebControls. Lớp này được sử dụng để tạo và cấu hính Menu

trong các trang web tại thời điểm runtime.

Các thuộc tính, phương thức và sự kiện hay sử dụng:

+ Item property: Là thuộc tính dùng để truy xuất đối tượng

MenuItemCollection chứa tất cả các Menu Item biểu diễn trên điều

khiển Menu. Thuộc tính này thường được sử dụng để thêm hoặc xóa

các mục trên menu.

+ Orientation property: Là thuộc tính dùng để chỉ định hoặc truy xuất

đến hướng của menu.

+ PathSeparator property: Là thuộc tính dùng để chỉ định hoặc truy xuất

đến ký tự dùng để phân chia trong đường dẫn của một mục menu

item, mặc định là ký tự “/”.

+ StaticDisplayLevels property: Là thuộc tính dùng để chỉ định số mức

tĩnh của Menu.

+ Target property: Là thuộc tính dùng để chỉ định hoặc truy xuất

window hoặc frame đích mà nội dung trang web được hiển trị trên đó.



83

Target Mô tả

_blank Hoàn trả nội dung trên một cửa sổ mới không có frames.

_parent Hoàn trả nội dung trực tiếp trên frameset parent.

_search Hoàn trả nội dung trên search pane.

_self Hoàn trả nội dung trên frame có focus.

_top Hoàn trả nội dung trên full window không có các frames

+ FindItem method: Là phương thức tìm kiếm một menu item theo giá

trị đường dẫn được chỉ định. Đường dẫn menu là một chuỗi được xác

định từ menu item gốc đến menu item hiện tại. Ví dụ sau minh họa sử

dụng phương thức FindMenu.

MenuItem menuitem =new MenuItem();

menuitem =

Me.Menu2.FindItem("Home\Product");

+ MenuItemClick event: Là sự kiện xuất hiện khi một mục trên menu

được click.

iii. Điều khiển TreeView được xem như một menu có thể mở rộng và thu hẹp

giống như thanh trái của cửa sổ Explorer. Điều khiển TreeView dùng để liên

kết các trang trong cấu trúc cây. Cấu trúc cây được hình thành từ nhiều mức

của các nodes, bao gồm các node gốc, node lá và các mức trung gian, được

thể hiện bởi đố tượng TreeNode. Đối tượng TreeNode có các phần tử UI là:



84

Tương tự như điều khiển Menu, điều khiển TreeView có thể buộc vào điều

khiển SiteMapData Source. Sau đây là cú pháp tạo điều khiển TreeView:

� MarkUp code:

<asp:TreeView>

<Nodes>

<asp:TreeNode> </asp:TreeNode>

<asp:TreeNode> </asp:TreeNode>

</Nodes>

</asp:TreeView>


TreeView trv =new TreeView();

Dim trn As New TreeNode("Tin học");

trv.Nodes.Add(trn) ;

Lớp TreeView thuộc không gian miền System.Web.UI. WebControls.

TreeView được cấu thành từ một tập cây phân cấp các tree node, gồm các thuộc

tính, phương thức và sự kiện hay sử dụng sau:



85

+ Nodes property: Là thuộc tính dùng để truy xuất đến tập các Tree

Nodes cấu thành nên điều khiển TreeView. Thuộc tính này thường

dùng để thêm hoặc xóa các Node trên TreeView.

+ ShowCheckBoxes property: Là thuộc tính dùng để chỉ định hoặc truy

xuất đến giá trị quy định kiểu hiển thị của Node tương tự như

CheckBox

+ SelectedValue property: Là thuộc tính dùng trả về giá trị của Node

được chọn.

+ NodeStyle property: Là thuộc tính dùng để chỉ định hoặc truy xuất đến

Style mặc định của các Nodes.

+ ShowLines property: Là thuộc tính dùng để chỉ định hoặc truy xuất

đến giá trị chỉ định vẽ các dòng kẻ giữa các node.

+ FindNode Method: Là phương thức dùng để truy xuất một node trong

điều khiển TreeView theo đường dẫn chỉ định.

+ SelectedNodeChanged Event: Là sự kiện xuất hiện khi một Node

được chọn.

+ TreeNodeCollapsed Event: Là sự kiện xuất hiện khi một Node được

thu gọn.

+ TreeNodeExpanded Event: Là sự kiện xuất hiện khi một Node được

mở rộng.

+ TreeNodeCheckChanged Event: Sự kiện này xuất hiện nếu trạng thái

của check box thay đổi giữa các lần Post back tới Server.

iv. Điều khiển SiteMapPath: Cấu trúc Logic của một ứng dụng Web được lưu

trong file XML sitemap. File này định nghĩa layout và quan hệ giữa các

trang trong ứng dụng web. ASP.NET cung cấp điều khiển SiteMapPath để

làm việc với site map files và tạo một đường dẫn tuyến tính từ trang Home

đến trang hiện tại của người sử dụng. Các thuộc tính, phương thức hay sự

kiện hay sử dụng là:

+ PathSeparator Property

+ CurrentNodeStyle Property



86

+ PathDirection Property

+ RootNodeStyle Property

+ ItemCreated Event

b. Một số điều khiển nâng cao

i. Điều khiển ImageMap và lớp HotSpot: Con trỏ chuột có khả năng clickable

vào một số vùng nào đó của một hình ảnh trên trang web. Khi Click vào

các vùng đó, ta có thể điều hướng sang một trang khác và các vùng trên

được gọi là các điểm nóng (Hot Spots).

Điều khiển ImageMap cho phép tạo các điểm nóng ảnh có khả năng

clickable. Lớp ImageMap thuộc không gian miền

System.Web.IU.WebControls. Sau đây là cú pháp tạo điều khiển

ImageMap:

� MarkUp code:

<asp:ImageMap ID="imgmpWord" runat="server"

ImageUrl="~/Images/World_Map.jpg">

<asp:CircleHotSpot … />

<asp:RectangleHotSpot … />

<asp:PolygonHotSpot />

</asp:ImageMap>


ImageMap imgmp =new ImageMap();

imgmp.ImageUrl = "images/World_Map.jpg";

imgmp.AlternateText = "This a image";

imgmp.HotSpots.Add(phspotUSA) ;

Gồm các thuộc tính và phương thức hay sử dụng sau:

+ HotSpotMode Property : Thuộc tính này dùng để truy xuất và chỉ định

hành vi (behavior) của đối tượng HotSpot.



87

+ HotSpot Property : Là thuộc tính dùng để truy xuất tập các đối tượng

HotSpot, các đối tượng này dùng để định nghĩa các vùng điểm nóng

trên điều khiển ImageMap.

+ ImageURL Property : Thuộc tính này dùng để truy xuất và chỉ định vị

trí file ảnh được hiển thị trên điều khiển.

+ AlternateText Property : Là thuộc tính dùng để truy xuất và chỉ định

chuỗi text hiển thị thay thế khi ảnh không được hiển thị.

+ Click Event : Là sự kiện xuất hiện khi đối tượng HotSpot được

clicked.

Lớp HotSpot được sử dụng để tạo ra các vùng điểm nóng trên ảnh, các

vùng đó có thể là hình tròn, hình chữ nhật và đa giác. Nó thuộc không gian miền

System.Web.IU. WebControls. Các thuộc tính và phương thức hay được sử

dụng của lớp này là:

+ AccessKey Property : Là thuộc tính dùng để chỉ định hoặc truy xuất

Access Key. Access Key này cho phép điều hướng nhanh đến vùng

điểm nóng bằng cách sử dụng phím Alt+AccessKey

phspotUSA.AccessKey = "U"

+ PostBackValue Property : Là thuộc tính dùng để truy xuất và chỉ định

giá trị của đối tượng HotSpot được truyền thành dữ liệu khi đối tượng

đó được clicked.

phspotUSA.PostBackValue = "USA“

+ GetCoordinates Method : Là phương thức dùng để truy xuất chuỗi tọa

độ của vùng điểm nóng.

Lớp CircleHotspot được sử dụng để định nghĩa vùng điểm nóng dạng hình

tròn trên điều khiển ImageMap. Để xây dựng được điểm nóng này ta cần cung

cấp tọa độ tâm (x, y) và bán kính tính theo đơn vị pixel.

+ NavigateUrl Property: Thuộc tính này dùng để truy xuất và chỉ định

địa chỉ URL cho phép người dùng điều hướng trang khi clicked vào

vùng điểm nóng.

phspotUSA.NavigateUrl = "http://www.example.com"



88

+ x, y, Radius Properties: Là các thuộc tính dùng để chỉ định hoặc truy

xuất tọa độ tâm và bán kính (tính theo pixel) vùng điểm nóng.

Lớp PolygonHotspot được sử dụng để định nghĩa vùng điểm nóng đa giác

trên điều khiển ImageMap. Để định nghĩa đa giác ta cung cấp tập tọa độ đỉnh

x,y. Sau đây là các thuộc tính quan trọng của lớp này:

+ Coordinates Property : Là thuộc tính dùng để chỉ định chuỗi tọa độ x,y

của véc tơ các đỉnh của đa giác.

phspotUSA.Coordinates = "293,220,278,197,288,

188,310,210, 300,200“

Trong ví dụ trên chuỗi "293,220,278,197,288,188,310,210, 300,200“

thể hiện tương ứng các tọa độ đỉnh của đa giác là x1, y1, x2, y2, x3,

y3, x4, y4, x5 và y5.

+ Target Property : Là các thuộc tính dùng để chỉ định target của

Window và frame mà trang web linked đến sẽ được hiển thị.

Lớp RectangleHotspot được sử dụng để định nghĩa vùng điểm nóng dạng

hình chữ nhật trên điều khiển ImageMap. Để định nghĩa hình chữ nhật ta cung

cấp tọa độ góc dưới bên trái và góc trên bên phải.

+ Left Property : Là thuộc tính dùng để chỉ định tọa độ x của góc dưới

bên trái.

+ Bottom Property : Là thuộc tính dùng để chỉ định tọa độ y của góc

dưới bên trái.

+ Right Property : Là thuộc tính dùng để chỉ định tọa độ x của góc trên

bên phải.

+ Top Property : Là thuộc tính dùng để chỉ định tọa độ y của góc trên

bên phải.

ii. Điều khiển FileUpload cho phép định vị và Upload các file. Lớp

FileUpload thuộc không gian miền System.Web. IU.WebControls, có các

thuộc tính và phương thức quan trọng sau:

+ HasFile Property : Là thuộc tính dùng truy xuất giá trị xác định xem

có hay không file được chon trong input box.



89

+ FileName Property : Là thuộc tính dùng để truy xuất tên của file được

chọn cho việc Upload.

+ PostedFile Property : Là thuộc tính tham chiếu đến file đang Upload

và thuộc tính ContentLength trả về kích thước của file tính theo đơn vị

byte. (Mặc định kích thước tối đa của file có thể Upload là 4MB)

+ SaveAS() Method : Là phương thức dùng để lưu file được Upload, để

lưu file ta cần chỉ định đường dẫn file trên Web Server.

if (fupAnh.HasFile)

{

fupAnh.SaveAs(Request.PhysicalApplicationPa

th + "Images\" + fupAnh.FileName);

}

iii. Điều khiển View: Nội dung của các trang Web đôi khi rất nhiều để có thể

trình bày đầy đủ trên một trang màn hình, do đó ta thường tách thành các

khúc. Mỗi khúc này được hiển thị tại một thời điểm. Ví dụ khi ta cần điền

vào một phiếu điều tra online, số các câu hỏi được gom thành từng nhóm

và nhóm này được hiển thị sau nhóm kia. Điều khiển View cho phép quản

lý các khúc dữ liệu như vậy. Điều khiển này thường được sử dụng giống

nhe một container chứa các điều khiển khác. Cú pháp để tạo điều khiển

View tại thời điểm runtime:

<asp:View> ….

</asp:View>

iv. Điều khiển MultiView: Điều khiển View giống như một container chứa các

điều khiển khác, còn điều khiển MultiView giống như container chứa các

điều khiển View. Một điều khiển MultiView chứa một hoặc nhiều View.

Cú pháp để tạo điều khiển View tại thời điểm runtime:

<asp:multiview> ….

</asp:multiview>

Các thuộc tính, phương thức và sự kiện hay sử dụng của điều khiển là:

+ ActiveViewIndex Property: Là thuộc tính dùng để truy xuất hoặc chỉ

định giá trị Index của active View control.



90

Sau đây là đoạn code minh họa sử dụng thuộc tính ActiveViewIndex

kích hoạt điều khiển View đầu tiên.

mvwBookList.ActiveViewIndex = 0

+ Views Property: Là thuộc tính dùng để truy xuất tập các điều khiển

View control.

mvwBookList.Views.Add(vwNovel)

mvwBookList.Views.Add(vwStory)

+ SetActiveView Method: Là phương thức thiết lập điều khiển View chỉ

định thành Active View.

mvwBookList.SetActiveView(vwStory)

+ ActiveViewChanged Event: Là sự kiện xuất hiện khi điều khiển

Active View của điều khiển MultiView thay đổi.

v. Sử dụng control AdRotator: Quảng cáo là một trong những cách tạo ra

những lợi nhuận cho nhà sở hữu website. AdRotator cho phép chọn ngẫu

nhiên các ảnh đặt lên trang web quản cáo, để làm được điều này trước tiên

ta phải tạo danh sách các file ảnh cần đưa lên trang web quảng cáo. Danh

sách này được đặt trong một file XML (vào menu Website\Add New Item\

và chọn Template là XML file – ads.XML) theo cấu trúc sau:

Ví dụ 2.2. Sử dụng control AdRotator

a) file ads.XML <?xml version="1.0" encoding="utf-8" ?> <Advertisements > <Ad> <ImageUrl>~/ads/yahooCall.gif</ImageUrl> <NavigateUrl>Vidu2_5.aspx</NavigateUrl> <AlternateText> Click here to visit our sponsor.</AlternateText> <Impressions>1</Impressions> <Keyword> A </Keyword> </Ad> <Ad> <ImageUrl>~/ads/yahooCall.png</ImageUrl> <NavigateUrl>//www.gotdotnet.com</NavigateUrl> <AlternateText> ASP.NET tutorials and more.</AlternateText> <Impressions>5</Impressions> <Keyword> B </Keyword> </Ad>

</Advertisements>

Trong đó các thẻ được sử dụng cho trong bảng sau:



91

Tag Ý nghĩa

<Ad> Bắt đầu thẻ Ad

<ImageUrl> Địa chỉ của Ad để hiển thị (địa chỉ file ảnh)

<NavigateUrl> Địa chỉ điều hướng nếu người sử dụng click vào Ad

<AlternateText>

Text để hiển thị như là ToolTip nếu người sử dụng di chuột

trên Ad. Và nếu địa chỉ ImageUrl không thể hiển thị thì

dòng text này sẽ hiển thị thay thế.

<Keyword> Một tên category sử dụng cho việc lọc các Ads khi hiển thị.

<Impressions> Một số thể hiện khả năng một Ad sẽ được hiển thị. Các

Ads với số càng cao thì khả năng hiển thị càng nhiều.

b) file vidu2_2.aspx

<%@ Page Language="VB" %>

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title> Hello My web</title> </head> <body> <form id="form1" runat="server"> <div> <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/ads.xml" /> </div> </form> </body>

</html>

2.5.4. HTML Server Controls

HTML server controls là các phần tử HTML chứa các thuộc tính tương tác

giúp chúng có khả năng lập trình trên server code. Theo mặc định, các phần tử

HTML trong trang ASP.NET Web không sẵn có trên server. Thay vì đó, chúng

được xem xét như một văn bản và được chuyển qua trình duyệt. Tuy nhiên, bằng

việc chuyển đổi các phần tử HTML sang HTML server controls, ta có thể biểu

diễn chúng như các phần tử mà có thể lập trình trên server.

Đối tượng mẫu cho các HTML server controls ánh xạ gần với các phần tử

HHML tương ứng. Ví dụ, các thuộc tính (attributes) của HTML được trưng bày

trên HTML server controls là các đặc tính (properties).



92

Bất cứ một phần tử HTML trên một trang có thể chuyển thành một HTML

server control bằng việc thêm thuộc tính runat="server".Trong suốt quá trình

chuyển đổi, ASP.NET page framework tạo các thể hiện của tất cả các phần tử

có thuộc tính runat="server". Ví dụ:

<input id="Text1" type="text" runat="server"/></div>

HTML server controls cung cấp các tính năng sau:

- Một mô hình đối tượng mà ta có thể lập trình trên server sử dụng các

kỹ thuật hướng đối tượng. Mỗi server control trưng bày các thuộc

tính mà ta có thể thao tác trên server code.

- Một tập các sự kiện mà ta có thể viết các điều khiển sự kiện như cách

trên client, trừ các sự kiện điều khiển trên server code.

- Có khả năng điều khiển các sự kiện trong client script.

- Tự động duy trì các trạng thái của điều khiển. Khi một trang thi hành

quay trở lại server, các giá trị mà người sử dụng nhập vào sẽ tự động

được duy trì và gửi quay lại trình duyệt.

- Tương tác với các điều khiển ASP.NET validation, do vậy ta có thể

kiểm tra được thông tin phù hợp được chèn vào trong điều khiển.

- Dữ liệu kết nối tới một hoặc nhiều thuộc tính của điều khiển.

2.5.5. Các điều khiển kiểm tra tính hợp lệ



93

a. Giới thiệu:

Xác nhận tính hợp lệ (Validation) là tiến trình xác định sự đúng đắn của

thực thể được cung cấp. Trong các ứng dụng Web, các dữ liệu input cần được

kiểm tra tính hợp lệ để đảm bảo các tiến trình chạy một cách trôi chảy.

Dữ liệu trước khi được chấp nhận từ phía người dùng cần được kiểm tra

tính hợp lệ. Tính hợp lệ của dữ liệu cần được kiểm tra ở các khía cạnh như kiểu,

giá trị, định dạng.

b. Class BaseValidator

Các điều khiển Validation được bao gồm trong namespace

System.Web.UI.WebControls. Lớp BaseValidtor cung cấp như là một

lớp cơ sở cho tất cả các điều khiển Validation. Sau đây là bảng cung cấp các

thuộc tính và phương thức của lớp này:

Tên Mô tả

ControlToValidate

Property

Chỉ định hoặc truy xuất đến ID của điều khiển Web

Server cần kiểm tra tính hợp lệ.

Display Property Chỉ định hoặc truy xuất đến cách thức hiển thị chuỗi

thông báo lỗi trên điều kiển Validation. Có thể nhận các

giá trị: None, Static, Dynamic

ErrorMessage

Property

Chỉ định hoặc truy xuất chuỗi thông báo lỗi trên điều

khiển Validtion khi tính hợp lệ không thỏa mãn.

c. Các điều khiển

i. RequiredFieldValidator là điều khiển đảm bảo người dùng nhập dữ liệu

trên các điều khiển Input. Nếu người dùng không nhập dữ liệu trên điều

khiển Input mà liên kết với điều khiển RequiredFieldValidator thì tiến

trình của trang sẽ bị dừng lại cho đến khi dữ liệu được nhập vào. Sau

đây là cú pháp :

� MarkUp code:



94

<asp:RequiredFieldValidator ID="vldLastName"

runat="server" ControlToValidate="txtLastName"

SetFocusOnError="True"> *

</asp:RequiredFieldValidator>


RequiredFieldValidator valLastN =new

RequiredFieldValidator();

valLastN.ControlToValidate = "txtLastName";

valLastN.Text = "Nhập họ đệm:";

valLastN.InitialValue = "";


+ InitialValue Property: Chỉ định hoặc truy xuất giá trị khởi tạo cho

điều khiển được kiểm tra tính hợp lệ, mặc định là “”.

+ SetFocusOnError Property: Chỉ định hoặc truy xuất điều khiển nhận

focus khi điều khiển input không hợp lệ.

+ Text Property: Chỉ định hoặc truy xuất hiển thị khi điều khiển input

không hợp lệ.

ii. CompareValidator là điều khiển dùng để so sách giá trị của một điều

khiển Input với một điều khiển Input khác hoặc với một giá trị hằng. Ta

có thể sử dụng thuộc tính Type quy định kiểu dữ liệu của các giá trị

nhập vào để so sánh như: String (mặc định), Integer, Double, Date và

Currency. Sau đây là cú pháp:

+ MarkUp code:

<asp:CompareValidator ID=“valConf"

runat="server" ControlToCompare="txtPass"

ControlToValidate="txtConf"

SetFocusOnError="True" ErrorMessage="*"

Display="Dynamic"> * </asp:CompareValidator>

+ Programming code:

CompareValidator vldComp =new CompareValidator();




95

+ Operator Property: Chỉ định hoặc truy xuất toán tử dùng để so sánh.

+ ValueToCompare Property: Chỉ định hoặc truy xuất giá trị hằng dùng

để kiểm tra tính hợp lệ.

+ Text Property: Chỉ định hoặc truy xuất hiển thị khi điều khiển input

không hợp lệ.

iii. RangeValidator là điều khiển được ASP.NET cung cấp để kiểm tra giá

trị người dùng nhập vào có nằm trong phạm vi được chỉ định hay

không? Điều khiển này kiểm tra tính hợp lệ của các giá trị dạng

numeric, character và date. Sau đây là cú pháp:

� MarkUp code:

<asp:RangeValidator ID="valrTuoi"

runat="server" ControlToValidate="txtTuoi"

ErrorMessage="Tuổi từ 18 - 55“

MaximumValue="55" MinimumValue="18"> *

</asp:RangeValidator>



96


RangeValidator valTuoi =new RangeValidator();


+ ErrorMessage Property: Truy xuất và chỉ định chuỗi thông báo lỗi

hiển thị trên điều khiển Validation Summary khi tính hợp lệ bị vi

phạm. Thuộc tính này cũng dùng để thông báo lỗi trên điều khiển

RangeValidator khi tính hợp lệ bị vi phạm nếu thuộc tính Text của

điều khiển không được chỉ định.

+ IsValid Property: Truy xuất hoặc chỉ định giá trị (true, false) chỉ định xem dữ liệu Input có thỏa điều kiện hợp lệ hay không.

+ MaximumValue Property: Chỉ định giá trị lớn nhất của phạm vi hợp lệ

+ MinimumValue Property: Chỉ định giá trị nhỏ nhất của phạm vi hợp lệ

+ Text Property: Chỉ định hoặc truy xuất chuỗi hiển thị trên điều khiển

RangeValidator khi tính hợp lệ bị vi phạm.

+ Type Property: Chỉ định kiểu dữ liệu đề kiểm tra tính hợp lệ.

iv. RegularExpressionValidator là điều khiển dùng để kiểm tra tính hợp

lệ của giá trị trên điều khiển Input theo một khuôn mẫu của biểu thức.

Ví dụ, expression có thể là pattern của phone number, mail

Address,… Sau đây là cú pháp :

+ MarkUp code:

<asp:RegularExpressionValidator ID="valDate“

runat="server“ ControlToValidate="txtDate“

ErrorMessage="mm/dd/yy“ ValidationExpression

=“^((0[1-9]|[12][0-9]|3[01])/(0[1-9] | 1[012])

/ (?:19|20) \d \d)$">*

</asp:RegularExpressionValidator>

+ Programming code:

RegularExpressionValidator valDate = new

RegularExpressionValidator()

Các thuộc tính hay sử dụng:



97

+ ControlToValidate Property: Chỉ định hoặc truy xuất đến ID của điều

khiển Input cần kiểm tra tính hợp lệ.

+ Display Property: Chỉ định hoặc truy xuất hành vi của chuỗi thông báo

lỗi trên điều khiển Validation. Có thể nhận các giá trị None, Static,

Dynamic.

+ ErrorMessage Property: Truy xuất và chỉ định chuỗi thông báo lỗi





+ IsValid Property: Truy xuất hoặc chỉ định giá trị (true, false) chỉ định

xem dữ liệu Input có thỏa điều kiện hợp lệ hay không.

+ ValidationExpression Property: Chỉ định pattern của dữ liệu nhập vào.

Ví du: vldPhone. ValidationExpression=“[0-9]{3}-[0-9]{3}-[0-9]{4}”

v. CustomValidator là điều khiển dùng để kiểm tra tính hợp lệ của giá trị

nhập trên điều khiển Input có hợp lệ theo một logic đã chỉ định hay

không. Ta có thể dùng điều khiển này để kiểm tra số chẵn, lẻ, nguyên

tố, …

+ ClientValidationFunction property: Là thuộc tính dùng để chỉ định tên

hàm ở client – side được sử dụng để kiểm tra tính hợp lệ.

valSo.ClientValidationFunction="ClientValidat“

Ví dụ hàm kiểm tra số chia hết cho 5.

98

<script language="javascript">

<!--

function ClientValidate(source, args)

{ if ((args.Value % 5) == 0)

args.IsValid=true;

else

args.IsValid=false;}

</script>

Chú ý: Để tạo client-side validation function cho đơn giản: Ta có thể

tạo server-side validation function được mô tả rất đơn giản (sử dụng

sự kiện ServerValidate). Sau đó, add client-side validation script

function tới trang .aspx.

+ ControlToValidate property: Chỉ định hoặc truy xuất ID của điều

khiển Input cần kiểm tra tính hợp lệ.

+ ErrorMessage property: Truy xuất và chỉ định chuỗi thông báo lỗi





+ ValidateEmptyText: Chỉ định hoặc truy xuất giá trị Boolean để chỉ ra

chuỗi Text rổng có là hợp lệ hay không. Nếu thuộc tính này nhận giá

trị True có nghĩa là chuỗi rồng là hợp lệ, ngược lại nhận giá trị False.

+ ServerValidate Event : Là sự kiện xuất hiện khi CustomValidator xác

nhận tính hợp lệ của thuộc tính ControlToValidate.

vi. ValidationSummary là điều khiển dùng để xem lại các thông báo lỗi

xuất hiện trên các điều khiển Validation khác. Điều khiển

ValidationSummary tổng hợp và hiển thị tất cả các thông báo lỗi trên

một trang.

Các thuộc tính hay sử dụng của lớp này gồm:

+ DisplayMode property: Chỉ định hoặc truy xuất đến cách thức hiển thị

Validation Summary.



99

+ HeaderText property: Chỉ định hoặc truy xuất chuỗi tiêu đề của

Validation Summary.

+ ShowMessageBox property: Chỉ định hoặc truy xuất đến giá trị

Boolean chỉ dẫn các thông báo của Validation Summary có được hiển

thị trên MessageBox hay không (Mặc định là false - không)

+ ShowSummary property: Chỉ định hoặc truy xuất đến giá trị Boolean

chỉ dẫn các thông báo của Validation Summary có được hiển thị hay

không?

d. Thuộc tính Page.IsValid

Thuộc tính Page.IsValid thuộc lớp Page dùng để truy xuất đến giá trị chỉ

định sự kiểm tra tính hợp lệ của trang có thành công hay không. Thuộc tính

này nhận giá trị True khi tất cả các điều khiển Validation trên trang đều xác

nhận thành công tính hợp lệ.

Dựa trên giá trị trả về của thuộc tính Page.IsValid ta có thể quyết

định có tiếp tục hay không tiến trình Post Back tới Server. Nếu nó trả

về giá trị True, ta có thể tiếp tục Post Back. Tuy nhiên, nếu nó trả về

giá trị false, có nghĩa là tồn tại điều khiển Validation kiểm tra tính



100

hợp lệ không thành công, do đó tiến trình gửi Post back tới server bi

dừng. Với cung cấp này, thêm vào khả năng bảo mật cho Website.

2.6. Các đối tượng trong ASP.NET

2.6.1. Đối tượng Request và lớp HtttRequest

Một Request (yêu cầu) là sự tương tác giữa browse và server trong đó

browse “hỏi” server cho web page. Browse gửi URL để nhận dạng trang được

yêu cầu. Cùng với nó, URL chứa thông tin source của yêu cầu và đường dẫn của

trang yêu cầu. Các thông tin này được lưu trữ trong tập thuộc tính của đối tượng

Request.

Ðối tượng Request dùng để nhận thông tin yêu cầu được gửi từ Client Side

đến Server Side. Nó được cài đặt trong lớp HttpRequest thuộc tên miền

System.Web. Khi sử dụng đối tượng Request ta có thể sử dụng các thành phần

(collection) và thuộc tính của nó cho trong bảng 2.1.

Bảng 2.1. Các thuộc tính và phương thức của Request

Thuộc tính/Phương thức Mô tả

FilePath Trả về đường dẫn ảo của yêu cầu, thuộc tính này

tương đương vơi SCRIPT_NAME trong ASP.

Files Trả về HttpFileCollection của tập nhiều tập tin

được tải lên Server (sử dụng cho dạng multi-

part/forms).

Form Trả về một tập dữ liệu của nội dung từ

Form(NameValueCollection). Tham khảo

Request Collection trong phần kế tiếp.

Params Thuộc tính này sử dụng để lấy giá trị của phương



101

thức trong Form, QueryString, ServerVariable

hay Cookie

Path Ðường dẫn ảo của yêu cầu, tương đương với

PATH_INFO trong ASP.

PathInfo Ðường dẫn ảo của yêu cầu, tương đương với

PATH_INFO trong ASP.

PhysicalApplicationPath Ðường dẫn vật lý của thư mục gốc, tương đương

với APPL_PHYSICAL_PATH

PhysicalPath Ðường dẫn vật lý của yêu cầu, tương đương với

PATH_TRANSLATED trong ASP.

QueryString Trả về một tập dữ liệu của nội dung từ

QueryString (NameValueCollection). Cách truy

cập tập dữ liệu này khác với truy cập tập dữ liệu

từ Form của ASP.

TotalBytes Dung lượng của Stream trong luồng dữ liệu.

Url Ðối tượng Url chứa đựng chi tiết của yêu cầu.

Ðối tượng Url (từ không gian tên System) bao

gồm các thông tin chi tiết như Port, DNS,...

UserHostAddress Ðịa chỉ IP của người sử dụng, tương đương với

REMOTE_ADDR trong ASP.

UserHostName Tên DNS của người sử dụng, tương đương với

REMOTE_NAME trong ASP.

MapPath Chuyển đổi đường dẫn ảo thành đường dẫn vật

lý.

SaveAS Lưu yêu cầu HTTP vào đĩa.

+ ApplicationPath: Là thuộc tính trả về đường dẫn ảo của ứng dụng trên

Server.

public string ApplicationPath { get; }

Response.Write("Application Path is:" +

Request.ApplicationPath)



102

+ Browse: Là thuộc tính trả về các thuộc tính của client’s Browse.

public System.Web.HttpBrowserCapabilities Browser { get; set; }

HttpBrowserCapabilities = Request.Browser;

Response.Write("Name:" + browseInfo.Browser +

"</br> Version:" + browseInfo.Version) ;

+ PhysicalApplicationPath: Trả về đường dẫn vật lý của ứng dụng.

+ ContentLength: Là thuộc tính trả về độ dài nội dung client request

(tính bằng bytes)

public int ContentLength { get; }

+ FilePath: Là thuộc tính trả về đường dẫn ảo của trang trên server.

public string FilePath { get; }

+ RequestType: Thuộc tính QueryString dùng để nhận loại phương thức

truyền HTTP data là POST hay GET được sử dụng bởi client.

public string RequestType { get; set; }

Response.Write("Request type is:" +

Request.RequestType)

+ QueryString: QueryString được định nghĩa là một chuỗi nằm sau dấu

? trong chuỗi URL (Uniform Resource Locator) trên phần Address

của trình duyệt khi triệu gọi đến một trang Web.

Ví dụ: Ta gọi triệu địa chỉ sau:

http://192.168.10.12/Chapter-03/ex5.asp?al=A&page=cust

Trong đó, QueryString bao gồm các cặp tham số và giá trị sau:

al=A&page=cust

Các tham số được khai báo cách nhau bằng ký tự & và giá trị của mỗi tham

số được khai báo sau dấu = của mỗi tham số.

- Nếu tham số không có dấu bằng theo sau, giá trị của tham số đó sẽ

được trả về khi sử dụng Request.QueryString là null.

- Trong trường hợp có dấu bằng nhưng không tồn tại giá trị thì kết quả

trả về khi sử dụng Request.String là rỗng.



103

Ví dụ:

foreach(string varName in Request.QueryString)

{

Response.Write("</br>" + varName +

"=" + Request.QueryString[varName]);

}

Ðối tượng Request cho phép truy cập đến nội dung của Form hay

QueryString, trong đó bao gồm các phần tử cùng tên như trong các trình bày

chúng ta sử dụng thẻ checkbox, radio,.v.v... cùng tên và khác giá trị như ví dụ

2.3 và ví dụ 2.4.

Ví dụ 2.3. Sử dụng đối tượng Request.Form (Vidu2_3.aspx).

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Well come to ASP.NET</title> </head> <body> <form action="vidu2_4.aspx?chon=ABC" method="post" > <div> Industry: <br /> <select name="listindu" multiple="multiple" > <option selected="selected" value="1">Chon</option> <option value="AUT"> Auto</option> <option value="ENG"> Engineering</option> <option value="FOO"> Foods</option> <option value="GAR"> Garment</option> </select> <input id="Submit1" type="submit" value="submit" /></div> </form> </body> </html>

Ví dụ 2.4. Sử dụng đối tượng Request.Form (Vidu2_4.aspx).

<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { string st; st = ""; foreach (string st0 in Request.Form.GetValues("listindu")) { st = st + Server.HtmlEncode(st0); } lblListIndu.Text = st; lblQuerystring.Text = Request.QueryString["chon"]; } </script> <html xmlns="http://www.w3.org/1999/xhtml" >



104

<head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> Giá trị đã chọn: <asp:Label ID="lblListIndu" runat="server" Width="312px"></asp:Label> Query string: <asp:Label ID="lblQuerystring" runat="server" Text="Label"></asp:Label><br /> </div> </form> </body> </html>

Triệu gọi trang Vidu2_3.aspx ta được kết quả trên trình duyệt như hình 2.5.

Hình 2.5. Triệu gọi trang vidu2_3.aspx

Sau khi người sử dụng chọn một hay nhiều Industry, nếu nhấn nút Submit,

lập tức trang kế tiếp sẽ được triệu gọi, bằng cách sử dụng đối tượng Request

cùng với các phương thức và thuộc tính của nó, chúng ta sẽ lấy các giá trị mà

người sử dụng chọn như hình 2.6.



105


+ SaveAs(): Là phương thức lưu toàn bộ yêu cầu lên đĩa. Cú pháp:

public void SaveAs(string filename, bool includeHeaders)

Ví dụ:

Request.SaveAs("C:\\HttpRequest.txt", True)

+ MapImageCoordinates(): Là phương thức ánh xạ tọa độ (x,y) trường

ảnh.

public int[ ] MapImageCoordinates(string imageFieldName)

Ví dụ: int[] coodinaters = Request.MapImageCoordinates("imgLogo");

Response.Write(coodinaters[0].ToString()+":"+

coodinaters[1].ToString());

+ MapPath(): Là phương thức ánh xạ đường dẫn ảo sang đường dẫn vật

lý.

public string MapPath(string virtualPath)

Ví dụ: Response.Write("MapPath:" + Request.MapPath("Test_QueryString.aspx"));

2.6.2. Đối tượng Response và lớp HttpResponse

Ðối tượng Respose dùng để gửi thông tin ngược trở lại Client Side từ

Server Side. Nó được cài đặt trong lớp HttpResponse thuộc tên miền



106

System.Web. Các thuộc tính của lớp này dùng để chỉ định và lấy các trạng thái

HTTP, kiểm tra client có kết nối đến server hay không, thông tin về cookies,…

Bảng 2.2. Các thuộc tính và phương thức của Response


Expires Thuộc tính này chỉ định thời gian trước khi trang

đó được lưu trong bộ nhớ Catch của trình duyệt.

Người sử dụng có thể trở lại các trang trước đó

khi khoảng thời gian này chưa hết.

Redirect Chuyển hướng đến địa chỉ file trong cùng ứng

dụng hay URL khác trong lúc thi hành.

Write Ghi thông tin từ các kiểu dữ liệu như Char,

Object, String, Array ra trang Web.

WriteFile Ghi một luồng dữ liệu ra tập tin chỉ định.

ContentType Chỉ định nội dung phúc đáp.

Flush() Phương thức này gửi Buffer của Response đến client.

Các thuộc tính:

+ BufferOutput: Thuộc tính BufferOutput là thuộc tính dùng để chỉ định

Output của HTTP Request được chứa trong Buffer và sau đó được gửi

toàn bộ khi trang kết thúc tiến trình xử lý.

public bool BufferOutput{get; set}

Thuộc tính nhận giá trị true (mặc định) nếu Output tới client chứa trong

Buffer, ngược lại nhận giá trị false.

Ví dụ: if(Response.BufferOutput == true)

+ Charset : Thuộc tính cho phép nhận và thiết lập tập character set của

Response.

public string Charset { get; set; }

Ví dụ: Response.Write("CharSet:" + Response.Charset)



107

+ ContentEncoding: Thuộc tính cho phép nhận và thiết lập HTTP

character set của Response

public System.Text.Encoding ContentEncoding {get;

set; }

Ví dụ: Response.Write("Content Encoding:" +

Response.ContentEncoding.EncodingName)

+ ContentType : Thuộc tính cho phép nhận và thiết lập kiểu

Multipurpose Internet Mail Extension (MIME) của Response (mặc

định là “text/html”).

public string ContentType { get; set; }

Ví dụ: Response.Write("Content type:" +

Response.ContentType)

+ Cookies: Thuộc tính cho phép nhận tập hợp các cookies được truyền

tới client trong Response

public System.Web.HttpCookieCollection Cookies {

get; }

Ví dụ sau minh họa tạo một cookie mới tên là ‘name’, thiết lập giá trị cho cookie

và ghi cookie vào tập cookies hiện tại.

HttpCookie MyCookie = new HttpCookie(“name");

MyCookie.Value =“Chu Hường”;

MyCookie.Expires = now.AddMinutes(1);

Response.Cookies.Add(MyCookie);

+ IsClientConnected: Thuộc tính kiểm tran xem client có đang kết nối

với server hay không?

public bool IsClientConnected { get; }

Ví dụ:

if Response.IsClientConnected == True

{Response.Write("Client đang kết nối đến

Server");}



108

Một số phương thức hay được sử dụng:

+ Clear: Xóa tất cả nội dung của buffer streame hiện tại.

public void Clear()

+ ClearContent: Xóa tất cả nội dung của buffer streame.

public void ClearContent()

+ Close: Là phương thức dùng để đóng kết nối tới client

public void Close()

+ End: Là phương thức gửi tất cả buffered output tới client và thực thi

Response hiện tại.

public void End()

+ Redirect: Là phương thức gửi tới client một URL mới

public void Redirect(string url)

+ Write: Là phương thức viết thông tin tới HTTP Response

public void Write(string s)

Ví dụ 2.6. Sử dụng các thuộc tính của đối tượng Response (Vidu2_6.aspx).

<script runat="server"> Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Dim MyCookie As New HttpCookie("LastVisit") Dim now As DateTime = DateTime.Now

' Ghi giá trị xuống Cookies Response.Cookies.Clear() MyCookie.Value = now.ToString() MyCookie.Expires = now.AddHours(1) Response.Cookies.Add(MyCookie) Response.Write("Number cookie:" & Request.Cookies.Count & "<BR>")

' Đọc cookie For Each strKey As String In Request.Cookies Response.Write(strKey & " = " & _ Request.Cookies(strKey).Value & "<BR>") Next End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> </div>



109

</form> </body>

</html>

Kết quả trên trình duyệt cho trong hình 2.9.


Ví dụ 2.7. Sử dụng các thuộc tính của đối tượng Response (Vidu2_7.aspx).

Trong ví dụ sẽ vẽ 3 hình chữ nhật thành khi trang được triệu gọi. Kết quả của

trang cho trong hình 2.10. <%@ Page Language="VB" %> <%@ import Namespace="System.Drawing" %> <%@ import Namespace="System.Drawing.Imaging" %> <%@ import Namespace="System.Drawing.Drawing2D" %> <script runat="server"> Private Sub Page_Load(sender As Object, e As EventArgs) ' Set the page's content type to JPEG files ' and clear all response headers. Response.ContentType = "image/jpeg" Response.Clear() ' Buffer response so that page is sent ' after processing is complete. Response.BufferOutput = True ' Create a font style. Dim rectangleFont As New Font( _ "Arial", 10, FontStyle.Bold) ' Create integer variables. Dim height As Integer = 100 Dim width As Integer = 200 ' Create a random number generator and create ' variable values based on it. Dim r As New Random() Dim x As Integer = r.Next(75) Dim a As Integer = r.Next(155) Dim x1 As Integer = r.Next(100)



110

' Create a bitmap and use it to create a ' Graphics object. Dim bmp As New Bitmap( _ width, height, PixelFormat.Format24bppRgb) Dim g As Graphics = Graphics.FromImage(bmp) g.SmoothingMode = SmoothingMode.AntiAlias g.Clear(Color.LightGray) ' Use the Graphics object to draw three rectangles. g.DrawRectangle(Pens.White, 1, 1, width - 3, height - 3) g.DrawRectangle(Pens.Aquamarine, 2, 2, width - 3, height - 3) g.DrawRectangle(Pens.Black, 0, 0, width, height) ' Use the Graphics object to write a string ' on the rectangles. g.DrawString("ASP.NET Samples", rectangleFont, SystemBrushes.WindowText, New PointF(10, 40)) ' Apply color to two of the rectangles. g.FillRectangle( _ New SolidBrush( _ Color.FromArgb(a, 255, 128, 255)), _ x, 20, 100, 50) g.FillRectangle( _ New LinearGradientBrush( _ New Point(x, 10), _ New Point(x1 + 75, 50 + 30), _ Color.FromArgb(128, 0, 0, 128), _ Color.FromArgb(255, 255, 255, 240)), _ x1, 50, 75, 30) ' Save the bitmap to the response stream and ' convert it to JPEG format. bmp.Save(Response.OutputStream, ImageFormat.Jpeg) ' Release memory used by the Graphics object ' and the bitmap. g.Dispose() bmp.Dispose() ' Send the output to the client. Response.Flush() End Sub 'Page_Load </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Wellcome to ASP.NET</title> </head> <body> <form id="Form1" runat="server"> </form> </body>

</html>



111


2.6.3. Đối tượng Server và lớp HttpServerUtility

Đối tượng Server thể hiện các phương thức tiện ích đa dạng để truyển đổi

điều khiển giữa các trang, giải mã HTML text, nhận thông tin lỗi, … Đối tượng

Server thuộc lớp HttpServerUtility thuộc không gian miền System.Web

Lớp HttpServerUtility cung cấp các phương thức cho các tác vụ như tiến

trình xử lý các yêu cầu, mã hóa và giải mã các chuỗi URL, truy cập các thông

tin lỗi,…

Lớp HttpServerUtility cung cấp hai thuộc tính:

+ MachineName: Trả về tên Server mà ứng dụng đang chạy.

public string MachineName { get; }

+ ScriptTimeout: Lấy hoặc thiết lập thời gian (tính bằng giây) mà một

Request timeout.

public int ScriptTimeout { get; set; }

Một số phương thức của lớp HttpServerUtility thường được sử dụng đó là:

+ Execute: Là phương thức xử lý trang Web được chỉ định trên ngữ

cảnh (context) của current Request.

public void Execute(string path)

path: Là URL path cần được thực thi.

Ví dụ: Server. Execute(“www.example.com.login.aspx”);



112

+ HtmlEncode: Là phương thức mã hóa chuỗi ký tự để hiển thị trên

trình duyệt. Có hai dạng hàm:

� public string HtmlEncode(string s); Dùng để mã

chuỗi s và trả về chuỗi đã mã hóa.

Ví dụ:

str = "Xin chào </br>“;

strE = Server.HtmlEncode(str);

Response.Write("Bản gốc:" + str);

Response.Write("Bản mã:" + strE);

� public void HtmlEncode(string s,

System.IO.TextWriter output); Dùng để mã chuỗi s và

trả về chuỗi đã mã hóa cho output.

Ví dụ:

System.IO.StreamWriter out=new;

System.IO.StreamWriter("E:\Test.txt");

Server.HtmlEncode("Xin chao <Message>", out);

Server.HtmlDecode("Xin chao <Message>", out);

out.Flush();

+ MapPath: Là một hàm trả về đường dẫn vật lý.

public string MapPath(string path)

Ví dụ: Response.Write(Server.MapPath("\Testing")) ;

+ UrlEncode: Là phương thức mã hóa chuỗi URL:

public string UrlEncode(string s)

public void UrlEncode(string s,

System.IO.TextWriter output)

+ UrlDecode: Là phương thức giải mã chuỗi URL:

public string UrlDecode(string s)

public void UrlDecode(string s,

System.IO.TextWriter output)

Ví dụ: Chuỗi MyURL được mã hóa trước khi gửi đi Browse.



113

String MyURL;

MyURL = "http://www.example.com" ;

Response.Write("<a href = " +

Server.UrlEncode(MyURL) + "> Example </a>");

Response.Write("<a href = " + MyURL + "> Example

</a>");

Response.Write("<a href = " +

Server.UrlDecode(Server.UrlEncode(MyURL)) + ">

Example </a>");

2.6.4. Đối tượng Application và lớp HttpApplicationState

Đối tượng Application được sử dụng để tham chiếu đến thể hiện của lớp

HttpApplicationState. Một Application State (trạng thái ứng dụng) lưu trữ toàn

bộ thông tin sử dụng qua lại nhiều phiên giao dịch (Session) và các yêu cầu

(request). Đối tượng Application nắm hầu hết các thông tin được sử dụng cho

nhiều trang của ứng dụng.

Lớp HtttpApplicationState thuộc không gian miền System.Web. Lần đầu

tiên Client yêu cầu tài nguyên URL từ thư mục ảo của ứng dụng ASP.NET thì

một thể hiện của lớp HttpApplicationState được tạo.

Các thuộc tính mới thêm vào của đối tượng Application được cho trong

bảng 2.3.

Bảng 2.3. Các thuộc tính và phương thức của Application


AllKeys Trả về một mảng dạng chuỗi chứa đựng tên của

các phần tử trạng thái ứng dụng.

Count Trả về số phần tử trong ứng dụng.

Add Thêm phần tử vào ứng dụng.

Remove Xóa phần tử chỉ định.

Clear Xoá tất cả các phần tử trong ứng dụng.

Get Trả về một phần tử chỉ định.

GetKey Trả về khoá của phần tử chỉ định.



114

Set Cập nhật giá trị của phần tử trong ứng dụng.

Mặc dù, ASP.NET hỗ trợ hầu hết các chức năng của ASP bằng Contents và

StaticObjects Collections, nhưng chúng cũng có một số khác nhau mà chúng ta

cần tìm hiểu. Chẳng hạn, hai phát biểu như sau là tương đương.

Application.Contents.Remove("Counter")

Application.Remove("Counter")

Thuộc tính của lớp “HttpApplicationState”:

+ AllKeys property: Truy xuất các Access Keys từ tập các trạng thái ứng

dụng.

string[] strKeys = new string[Application.Count];

strKeys = Application.AllKeys;

+ Contents property: Truy xuất tham chiếu đến đối tượng

HttpApplicationState.

protected void Page_Load(object sender, EventArgs e)

{ Application.Contents.RemoveAll();

Response.Write("Remove all items from current

application");

}

+ Count property: Đếm và truy xuất số các đối tượng.

int intObj=Application.Count;

+ Item property: Truy xuất đến từng đối tượng HttpApplicationState.

Sau đây là một số phương thức quan trọng của lớp HttpApplicationState:

+ Add Method: Là phương thức thêm một đối tượng mới vào tập trạng thái

ứng dụng.

public void Add(string name, Object value);

Đoạn code sau minh họa cách sử dụng phương thức Add

Application.Add(“UserName”, “Huongct”);



115

+ Clear Method: Là phương thức xóa tất cả đối tượng trong tập trạng thái

ứng dụng. Cú pháp (C#) của phương thức Clear là:

public void Clear();

Đoạn code sau minh họa cách sử dụng phương thức:

Application.Clear();

+ Remove Method: Là phương thức xóa một đối tượng chỉ định trong tập

trạng thái ứng dụng. Cú pháp (C#) của phương thức là:

public void Remove(string name);


Application.Remove(“UserName”);

+ RemoveAll Method: Là phương thức xóa tất cả đối tượng trong tập trạng

thái ứng dụng. Cú pháp (C#) của phương thức là:

public void RemoveAll();


Application.RemoveAll();

+ RemoveAt Method: Là phương thức xóa một đối tượng chỉ định trong tập

trạng thái ứng dụng. Cú pháp (C#) của phương thức là:

public void RemoveAt(int index);


Application.RemoveAt(0);

Phương thức “Lock”:

Khi nhiều người dùng cùng truy cập vào

một ứng dụng ASP.NET, ứng dụng không thể

cho phép họ đồng thời truy cập thay đổi cùng

một dữ liệu. Để làm được điều này, ta cần khóa

các biến dữ liệu. Phương thức Lock(), thuộc lớp

HttpApplicationState, ngăn cản người dùng

khác thay đổi các biến lưu trữ trong đối tượng

Application. Cú pháp của phương thức Lock():

public void Lock()



116

Phương thức “UnLock”:

Phương thức UnLock(), thuộc lớp

HttpApplicationState, được sử dụng để mở khóa

cho các biến lưu trữ trong đối tượng Application.

Các biến khi đã được mở khóa thì các người dùng

khác có thể thay đổi chúng.

Phương thức Lock() được mở tương ứng bởi

phương thức UnLock(). Trong trường hợp không

gọi phương thức UnLock(), .NET Framework tự

động xóa Lock() khi Request được hoàn thành,

hoặc Request đến thời gian TimeOut, hoặc khi

xuất hiện ngoại lệ (Request fail).

Cú pháp của phương thức UnLock():

public void UnLock()

Ví dụ:

Application.Lock();

Application["VisitorsCount"] =

(int)Application["VisitorsCount"]+1;

Application.UnLock();

Ví dụ 2.8. Sử dụng các thuộc tính của đối tượng Application

(Vidu2_8.aspx). Kết quả trong hình 2.11. <%@ Page Language="VB" %> <script runat="server"> Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) If Application("Counter") = "" Then Application("Counter") = 1 Else Application("Counter") = Application("Counter") + 1 End If Response.Write(Application("Counter")) Response.Write("<br>") Application.Contents.Remove("Counter") If Application("Counter") = "" Then Application("Counter") = 10 Else Application("Counter") = Application("Counter") + 1 End If Response.Write(Application("Counter")) Application.Remove("Counter") End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" >



117

<head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>


2.6.5. Đối tượng Cookies

a. Tạo và đọc Session Cookies

Một Session được định nghĩa là một khoảng thời gian bắt đầu và kết thúc

tương tác của người dùng với ứng dụng. Các thông tin của Session như Login,

Logout và các trang được viếng thăm được lưu trữ trên file temporary, được gọi

là Session Cookies.

Một Cookie là một file temporary (tạm) hoặc file permanent (thường

xuyên) được sử dụng bởi ứng dụng Web để lưu trữ thông tin người sử dụng. Các

Session Cookies có một khoảng thời gian giới hạn, quá thời hạn đó người dùng

phải Login lại.

Một Session Cookie có thể xem như là một cookie tạm thời. Session

Cookies được lư trữ tạm trên bộ nhớ. Khi trình duyệt bị đóng, các session

cookies này không được giữ lại. Do đó, lần tiếp theo, người dùng này viếng

thăm cùng một site thì anh ta được đối sử giống như một người khách mới.



118

Thay vì tập hợp các thông tin từ máy tính của người sử dụng, session

cookies thường được sử dụng cho các ứng dụng Web mà trong đó các người

dùng cần được nhận dạng để họ có thể di chuyển từ trang này sang trang khác.

Ví dụ sau minh họa cách tạo và đọc Session Cookie: protected void btnAdd_Click(object sender, EventArgs e)

{

Response.Cookies["Login"]["User"] = txtUser.Text;

}

protected void btnView_Click(object sender, EventArgs e)

{

if (Request.Cookies["Login"] == null)

{

Response.Write("Không Cookies");

}

else

{

Response.Write("Thông tin Cookies:" +

Request.Cookies["Login"]["User"]);

}

}

b. “Persistent” Cookies

Xét các trang Login của các dịnh

vụ e-mail phổ biến như Hotmail và

Yahoo mail. Khi bạn Login vào mail

thì bạn được nhắc có lưu thông tin

login trên máy tính không, nếu bạn

chọn Yes thì các thông tin này được

lưu trữ trên Cookie. Lần Login tiếp

theo thì các thông tin này sẽ được tự

động xuất hiện tương ứng đúng vị trí.

Các Cookies lưu trữ thông tin

mà được ghi nhớ thông qua nhiều

phiên giao dịch được gọi là Persistent Cookies (Cookie bền).

Persistent Cookies được xem như là các cookies thường xuyên hay các

cookies lưu trữ. Các Persistent Cookies có thời gian sống (Expiry date) và được



119

lưu trữ trên đĩa cứng của người sử dụng cho đến khi hết thời gian sống hoặc cho

đến khi được xóa thủ công.

Ví dụ sau minh họa cách tạo Persitent Cookie: HttpCookie userInfoCookie = new HttpCookie("UserInfo");

userInfoCookie.Values["UserName"]="Huongct";

userInfoCookie.Values["LastVisit"] =

DateTime.Now.ToString();

userInfoCookie.Expires = DateTime.Now.AddDays(15);

Response.Cookies.Add(userInfoCookie);

// Đọc Cookies

if (Request.Cookies["UserInfo"] == null)

{

Response.Write("Không Persitent Cookies ");

}

else

{

Response.Write("Persitent Cookies :" +

Request.Cookies["UserInfo"]["UserName"]);

}

2.4.4. Đối tượng Session

Khi có nhu cầu truyền giá trị từ trang này sang trang khác trong một phiên

làm việc, ta sử dụng đối tượng Session. Bằng các sử dụng phương thức và thuộc

tính của đối tượng này. Ta có thể khởi tạo, gán giá trị, truy cập và huỷ đối tượng

này trong một phiên làm việc nhằm quản lý người sử dụng khi họ truy cập vào

Web Site. Web Server sẽ tự động tạo ra đối tượng Session khi chúng chưa tạo

ra, đối tượng này sẽ có chu trình sống cho đến khi một trong các điều kiện sau

xảy ra:

- Người sử dụng đóng trình duyệt, tức là đóng cửa sổ cuối cùng của

cùng một trình duyệt.

- Khi thời gian sống (expiry) của chúng hết hạn.

- Chúng ta khai báo huỷ bỏ đối tượng Session bằng các phương thức

của chúng.

Ðối tượng Session được cài đặt trong lớp HttpSessionState thuộc không

gian tên System.Web.SessionState. Hai thuộc tính Contents và StaticObjects



120

tương tự như trong đối tượng Application nhưng chỉ tính trong một phiên giao

dịch. Các thuộc tính và phương thức hay dùng của nó được cho trong bảng 2.4.

Bảng 2.4. Các thuộc tính và phương thức của Session


Count Trả về số phần tử trong Session (phiên làm việc).

Clear Xoá tất cả các phần tử trong Session.

SessionID Trả về một giá trị là 1 chuỗi mà trình chủ cấp

cho Session

Remove Ðối với ASP.NET, bạn có thể xoá Session bằng

cách chỉ định tên. Trong trường hợp bạn muốn

xoá một phần tử trong Session theo chỉ mục, bạn

phải sử dụng phương thức RemoveAt(i).

RemoveAll() Xóa tất cả.

RemoveAt Khi bạn muốn xoá một phần tử trong Session

theo chỉ mục, bạn phải sử dụng phương thức

RemoveAt(i).

a. Session Variables

Session Variables được được sử dụng để lưu trữ thông tin về phiên làm

việc của một người sử dụng. Các thông tin này có thể sử dụng cho tất cả các

trang trong ứng dụng. Thông thường, thông tin được lưu trữ trong các biến

Session là UserName, Password,… Các Session Variables được xóa ngay khi

phiên làm việc của người dùng với Site kết thúc.

Session Variables được lưu trữ trong lớp SessionStateItemCollection thuộc

không gian miền System.Web.SessionState. Các biến này được trưng bày thông

qua thuộc tính System.Web.HttpContext.Session.

Ví dụ sau minh họa cách thiết lập Session Variable như thế nào: Session["UserID"] = "10011001";

if (Session["UserID"] == null)

{

Response.Write("Page has expired ");



121

}

else

{

Response.Write("Session User

ID:" +

Session["UserID"]);

}

b. Session State Events

ASP.NET cung cấp 2 sự kiện cho phép quản trị

Session đó là:

� Session_OnStart Event

� Session_OnEnd Event

+ Session_OnStart Event: Là sự kiện được điều

khiển bởi thủ tục Session_OnStart trên file

Global.asax. Sự kiện này nổ tại thời điểm bắt đầu

một Session. Một Session bắt đầu nếu request

tham chiếu đến một session có thuộc tính SessionID mà đã hết hiệu lực.

Sau đây là đoạn code minh họa:

void Session_Start(object sender, EventArgs e)

{

// Code that runs when a new session is

started

Application.Lock();

Application["VisitorsCount"] =

(int)Application["VisitorsCount"]+1;

Application.UnLock();

}

+ Session_OnEnd Event: Là sự kiện được điều khiển bởi thủ tục

Session_OnEnd trên file Global.asax. Sự kiện này nổ tại thời điểm

Session timeout.

Đoạn code sau minh họa sử dụng sự kiện:

void Session_End(object sender, EventArgs e)

{



122

// Code that runs when a session ends.

Response.Write(“Kết thúc phiên giao

dịch");

}

c. Session Identifiers

Sessions được nhận dạng bởi Session Identifiers, với giá trị duy nhất.

Session Identifiers được đọc thông qua thuộc tính SessionID. Khi trạng thái của

Session được Enable, mỗi request một trang trong ứng dụng đều được kiểm tra

giá trị SessionID. Nếu giá trị SessionID không được cung cấp thì một Session

mới được khởi tạo. Sau đó SessionID được gửi cho Session tới Browse cùng với

Response.

Theo mặc định, giá trị của SessionID được lưu trữ trên một Cookie. Đoạn

code sau minh họa sử dụng thuộc tính SessionID protected void Page_Load(object sender,EventArgs e)

{

Response.Write(“SessionID:“+Session.SessionID);

}

d. File “Global.asax”

Global.asax file được xem như là file ứng dụng ASP.NET. File này chứa

code cho việc trả lời ứng dụng hoặc các modul sự kiện trong một vị trí trung

tâm. File Global.asax là file lựa chọn, nó được tạo chỉ khi nếu cần điều điều các

sự kiện của ứng dụng hoặc Session.

Mỗi một ứng dụng ASP.NET chỉ có một và chỉ một file Global.asax. File

này không được Request và sử dụng bởi người sử dụng.

Trong file tự động khởi tạo 4 sự kiện liên quan đến việc khởi tạo và kết

thúc ứng dụng hoặc phiên làm việc.



123

Ví dụ 2.9. Sử dụng các thuộc tính của đối tượng Session (Vidu2_9.aspx).

Kết quả trong hình 2.12. <%@ Page Language="VB" %> <script runat="server">

Private Sub Page_Load(sender As Object, e As System.EventArgs) Session.Timeout = 50 Session.Contents("Counter") = _ Session.Contents("Counter") + 10

Response.Write("Khoi tao Session trong ASPX <br>") Response.Write("Counter: " & _ Session.Contents("Counter")) Session.Contents.Remove("Countner") Session.Remove("Countner") Session.RemoveAll() End sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> </div>



124

</form> </body> </html>


2.7. Giới thiệu ngôn ngữ lập trình .NET

.NET Framework cung cấp nhiều ngôn ngữ lập trình khác nhau, mỗi một

ngôn ngữ có cách khai báo biến và cấu trúc điều khiển khác nhau.

Trong một Project web sinh viên có thể sử dụng các ngôn ngữ lập trình

khác nhau trên mỗi trang. Sinh viên tự lựa chọn sử dụng một trong các ngôn ngữ

lập trình trong .NET để thực hiện lập trình ứng dụng Web của mình như C#,

VB,… Bảng 2.6 thể hiện sự tương ứng các kiểu dữ liệu trên các ngôn ngữ lập

trình khác nhau.

Bảng 2.6. Các kiểu dữ liệu

CLR (Common Language

Runtime) Type Visual Basic Type C# Type

Boolean Boolean bool

Byte Byte byte

Char Char char

DateTime Date DateTime

Decimal Decimal decimal

Double Double double



125

Int32 Integer int

Int64 Long long

Object Object Object

SByte SByte sbyte

Int16 Short short

Single Single float

String String string

UInt32 UInteger uint

UInt64 ULong ulong

UInt16 UShort ushort



126

Chương 3. LÀM VIỆC VỚI CƠ SỞ DỮ LIỆU

3.1. Các thao tác trên dữ liệu

Để xây dựng các trang web động ta cần thực hiện kết nối với dữ liệu. Trong

mục này củng cố giúp sinh viên ôn tập lại các lệnh SQL cơ bản và thực hiện kết

nối đến dữ liệu cài đặt trên hệ quản trị SQL Server.

3.1.1. Các lệnh cập nhật dữ liệu

a. Lệnh Insert

- Ý nghĩa: Dùng để chèn một hàng hoặc một số hàng cho bảng.

- Cú pháp:

+ INSERT INTO <Tên bảng> (Danh sách các cột) VALUES (Danh

sách các giá trị) hoặc

+ INSERT INTO <Tên bảng> (Danh sách các cột) (Các câu hỏi

con);

Ví dụ 2.4. Chèn dữ liệu vào bảng S.

INSERT INTO S (S#, SNAME, STATUS)

VALUES (s1, Smith, 20, Paris);

INSERT INTO S

SELECT * FROM W WHERE CITY="Paris";

b. Lệnh Update

- Ý nghĩa: Dùng để sửa đổi dữ liệu.

- Cú pháp:

UPDATE <Tên bảng>

SET <Tên_cột_1=Biểu_thức_1, Tên_cột_2=Biểu_thức_2,… >

[WHERE <điều kiện>]

Ví dụ 2.5. Sử dụng lệnh Update

UPDATE SINHVIEN SET TenSV="Nguyễn Thị Hạnh"

Where MaSV="20042390"

UPDATE HangHoa SET Dongia=Dongia*1.1



127

Where TenHH IS LIKE 'Bia %' and Dongia<3500

c. Lệnh Delete

- Ý nghĩa: Xoá một số hàng trong bảng.

- Cú pháp:

DELETE FROM <Tên bảng> WHERE <Điều kiện>

Ví dụ 2.6. Xoá tất cả các hàng trong bảng KETQUA có trường Diem<5

DELETE FROM KETQUA WHERE Diem<5;

3.1.2. Truy vấn dữ liệu

Khối câu lệnh phổ dụng: SELECT - FROM – WHERE. Ta có thể sử dụng

theo cú pháp chung như sau:

SELECT [*| DISTINCT] <Danh sách các cột [AS <Bí danh>]>

FROM <Danh sách Tên bảng/Tên View>

[WHERE <Biểu thức điều kiện>]

[GROUP BY <Danh sách cột>]

[HAVING <Điều kiện>]

[ORDER BY <Tên cột/ Số thứ tự cột/Biểu thức> [ASC/DESC]]

Trong đó:

+ Dấu * đại điện cho toàn bộ các cột của bảng.

+ DISTINCT: Dùng để lấy đại diện

+ AS: Đặt bí danh cho các trường (thường dùng đối với các biểu thức

tính toán).

+ Mệnh đề WHERE dùng để lọc các bản ghi.

+ Mệnh đề GROUP BY được sử dụng để tạo hiệu quả sắp xếp và tính

toán theo từng phân nhóm.

+ Mệnh đề HAVING dùng để đặt điều kiện lọc cho các phân nhóm

con.

+ Mệnh đề ORDER BY được sử dụng để tạo hiệu quả sắp xếp dữ liệu.

Ví dụ 1. Giả sử ta có bảng SANPHAM(MaSP, TenSP, Mota, AnhSP,

MaNhom)



128

Select MaSP, TenSP, Mota, AnhSP From SANPHAM Where

MaNhom=@MaNhom

Ví dụ 2. Cho bảng mặt hàng đã được cung cấp SP(S#, P#, QTY). Tìm mã

những nhà cung cấp cung cấp ít nhất 2 mặt hàng:

Select S# From SP

Group By S#

Having Count(Distinct P#)>=2;

Trong quá trình thực hiện truy vấn dữ liệu ta sử dụng một số toán tử và các

hàm thư viện sau:

- Xử lý xâu: dùng toán tử [NOT] LIKE <Mẫu so sánh>

+ Dùng dấu gạch dưới để thay cho một ký tự.

+ Dùng dấu % để thay cho một dãy các ký tự tuỳ ý.

- Sử dụng Between và IN để xác định phạm vi.

- Sử dụng các lượng từ: EXISTS, ANY, ALL,…

- Sử dụng các hàm thống kê dữ liệu.

+ Count(): Dùng để đếm các bảng ghi,

+ Max(): Trả về giá trị lớn nhất của một tập hợp các giá trị,

+ Min(): Trả về giá trị lớn nhất của một tập hợp các giá trị,

+ Sum(): Trả về tổng giá trị của một tập hợp các giá trị,

+ Avg():Trả về giá trị trung bình của một tập hợp các giá trị,

3.1.3. Xây dựng hàm và thủ tục trong SQL server

a. Xây dựng thủ tục

Một thủ tục (Store Procedure) là một tập các phát biểu T-SQL mà SQL

Server biên dịch thành một kế hoạch thực thi đơn. Lần đầu tiên khi SQL Server

thực thi store procedure thì nó biên dịch store procedure thành kế hoạch và lưu

trong bộ nhớ đệm. Mỗi khi gọi thực hiện store procedure này thì nó sử dụng lại

kế hoạch này mà không phải biên dịch lại lần nữa.

CREATE {PROC|PROCEDURE}[schema_name.] procedure_name [ ; number ] [{@parameter [type_schema_name.] data_type }



129

[VARYING][= default ][[ OUT|OUTPUT ] [,...n ]

[ WITH <procedure_option> [ ,...n ] AS { [ BEGIN ] statements [ END ] } [;] <procedure_option> ::=

[ ENCRYPTION ] [ RECOMPILE ]

Trong đó:

+ procedure_name: là tên của store procedure sẽ được tạo.

+ parameter: Là các tham số truyền vào store procedure, ta phải

định nghĩa chúng trong phần khai báo của store procedure. Khai

báo báo gồm tên của tham số (trước tên tham số sử dụng tiền tố @),

kiểu dữ liệu của tham số và một số chỉ định đặc biệt phụ thuộc vào

mục đích sử dụng của tham số đó.

+ ; number: Là số nguyên tùy chọn được sử dụng trong nhóm

các thủ tục có cùng tên.

+ data type: Kiểu của tham số trong phần khai báo.

+ [VARYING]: Đây là tùy chọn được chỉ định khi cursor trả về

như một tham số.

+ [= default] : Gán giá trị mặc định cho tham số. Nếu không

gán giá trị mặc định thì tham số nhận giá trị NULL.

+ OUTPUT: Đây là từ khóa chỉ định tham số đó là tham số xuất.

Tham số xuất không dùng được với kiểu dữ liệu Text và image.

+ [,...n]: Chỉ định rằng có thể khai báo nhiều tham số.

+ RECOMPILE:Chỉ định Database Engine không xây dựng kế

hoạch cho thủ tục này và thủ tục sẽ được biên dịch tại thời điểm

thực thi thủ tục.

+ ENCRYPTION:Chỉ định SQL Server sẽ mã hóa bản text lệnh

CREATE PROCEDURE. Users không thể truy cập vào các bảng hệ

thống hoặc file dữ liệu để truy xuất bản text đã mã hóa.



130

b. Xây dựng hàm.

Một hàm do người dùng định nghĩa được tạo bằng cách sử dụng câu lệnh

CREATE FUNCTION theo cú pháp sau:

CREATE FUNCTION [owner_name.]function_name

(

[ {@parameter_name scalar_data_type [= default]}

[,...n] ]

)

RETURNS scalar_data_type |

TABLE(column_definition | table_constraint

[,...n])

[WITH ENCRYPTION | SCHEMABINDING [,...n] ]

[AS]

[BEGIN function_body END] | RETURN [(]

select_statement [)]

Trong đó:

+ [owner_name.]: Chỉ định tên đối tượng sẽ sở hữu. Ta không

phải bắt buộc chỉ định tên người sẽ tạo đối tượng sở hữu nó.

+ function_name: tên của hàm ta sẽ tạo.

+ parameter_name: Là các tham số Input cho hàm. Các tham

số này xây dựng cũng tương tự như trong stored procedure.

+ scalar_data_type: Là kiểu dữ liệu vô hướng của tham số.

Một hàm có thể nhận bất kỳ kiểu dữ liệu nào như là tham số trừ

các kiểu timestamp, cursor, text, ntext, image.

+ default: Chỉ định giá trị mặc định cho tham số, tương tự như

trong stored procedure.

+ [,...n]: Chỉ định một hàm có thể tạo nhiều tham số. Một

hàm trong SQL Server có thể chứa tới 1024 tham số.

+ RETURNS: từ khóa này chỉ định kiểu dữ liệu hàm sẽ trả về. Kiểu

dữ liệu của hàm có thể là một kiểu dữ liệu vô hướng hoặc một

bảng.



131

+ scalar_data_type: Ta sẽ chỉ định kiểu dữ liệu nếu như hàm

trả về một giá trị vô hướng. Ở đây ta phải chỉ định kiểu độ dài dữ

liệu.

+ TABLE: Đây là kiểu dữ liệu cho phép hàm có thể trả về nhiều

dòng dữ liệu.

+ column_definition: Định nghĩa các cột cho kiểu dữ liệu

TABLE. Các cột này được định nghĩa tương tự như định nghĩa

các cột trong bảng.

+ table_constraint: Định nghĩa các ràng buộc trong kiểu

dữ liệu TABLE này.

+ [,...n]: Chỉ định có thể có nhiều cột và nhiều ràng buộc

trong bảng.

+ WITH ENCRYPTION: Từ khóa chỉ định code của hàm sẽ được

mã hóa trong bảng syscomments.

+ SCHEMABINDING: Từ khóa này chỉ định hàm được tạo để

buộc vào tất cả các đối tượng mà nó tham chiếu.

+ [,...n]: Chỉ dịnh có thể có nhiều từ khóa khác ngoài hai từ

khóa trên.

+ AS: Từ khóa cho biết code của hàm bắt đầu.

+ BEGIN: Đi cùng với END để tạo thành bao khối bao các câu

lệnh trong thân hàm.

+ function_body: thân của hàm.

+ END: Đi cùng với BEGIN để tạo thành bao khối bao các câu

lệnh trong thân hàm.

+ RETURN: Từ khóa này sẽ gửi giá trị tới thủ tục gọi hàm.

+ select_statement: đi kèm với RETURN để gửi giá trị

tới thủ tục gọi hàm.

3.2. Các điều khiển dữ liệu ASP.NET 2.0

3.2.1. Data Source Controls và Data-Bound Controls



132

a) Giới thiệu các điều khiển dữ liệu ASP.NET 2.0

* Giới thiệu Data Source Controls

ASP.NET 2.0 cung cấp một vài kiểu điều khiển Data Source Controls làm

việc tương thích với các kiểu Data Sources khác nhau, chúng bao gồm:

+ Điều khiển SqlDataSource control cho phép connections đến hầu

hết các CSDL quan hệ. Chú ý:

• Từ SQL trong tên điều khiển ám chỉ các Database hiểu

được ngôn ngữ SQL, bao gồm các CSDL xây dựng dữ

liệu theo mô hình quan hệ.

• Từ SQL không chỉ ám chỉ hệ quản trị CSDL SQL Server,

mà SqlDataSource control sử dụng cho một vài providers

được chỉ định cho các kiểu Database khác nhau. Provider

mặc định là cho CSDL SQL Server, ngoài ra còn cho

Oracle, OLEDB,.v.v…

+ Điều khiển AccessDataSource control là trường hợp đặc biệt của

của điều khiển SqlDataSource control chứa provider được tối ưu

cho CSDL Microsoft Access.

+ Điều khiển XMLDataSource control cho phép connection tới XML

sources.

+ Điều khiển SiteMapDataSource control là mẫu được thiết kế riêng

cho điều khiển XMLDataSource control.

+ Điều khiển ObjectDataSource control connects tới các đối tượng

business.

* Giới thiệu Data-Bound Controls

Data-bound controls là các điều khiển buộc dữ liệu, cung cấp kết nối giữa

các điều khiển data source controls với người sử dụng. Chúng có thể được phân

loại theo cách hiển thị như sau:

+ Tabular Controls: Là các điều khiển hiển thị một danh sách dữ liệu

của các bản ghi. Các điều khiển này hiển thị nhiều bản nghi trên

một dòng và một hoặc nhiều trường từ mỗi bản ghi là các cột, gồm

các điều khiển GridView, DataList, Repeater.v.v…



133

+ Single Record Display Controls: Như các điều khiển DetailsView,

và FormView hiển thị từng bản ghi ở tại mỗi thời điểm.

+ Selection List Controls: Là điều khiển cho phép người sử dụng lựa

chọn. Có 2 điều khiển hiển thị một trường dữ liệu đó là ListBox

controls và DropDownList controls.

+ Tree Controls: Là các điều khiển dữ liệu lưu trữ trên các nút.

Điểm khác nhau giữa các điều khiển buộc dữ liệu được cho trong bảng 3.5.

Điều khiển Cấu trúc

dữ liệu

chính

Các khả

năng Mô tả và ý nghĩa sử dụng chính

GridView

Table

Read and edit

Chia thành các cột cho mỗi trường,

mỗi giá trị của trường được hiển thị

trên một cell. Hiển thị nhiều bản ghi

trên lưới.

Edit các bản ghi đang tồn tại.

DataList Table or Tree

Read and edit

Tất cả các trường trên một cell. Một

cell chứa một record. Hiển thị nhiều

records trên một lưới.

Tạo bản ghi mới cho GridView

Repeater Table or

Tree

Read only Tất cả các trường trên một cell. Một

cell chứa một record. Hiển thị nhiều

records trên một lưới.

Tạo bản ghi mới cho GridView

DetailsView Table or

Tree

Read,

edit,

create

Hiển thị single records. Được cung

cấp cấu trúc mặc định.

Edit các bản ghi đang tồn tại

records

Tạo mới các records.

FormView Table or Read, edit,

Hiển thị single records. Không cấu



134

Tree create trúc mặc định.

Edit các bản ghi đang tồn tại

records

Tạo mới các records.

DropDownList

and ListBox

Table or

Tree

Read only List một vài trường. Gợi ý người sử

dụng lựa chọn.

Hiển thị dữ liệu cho người sử dụng

chọn.

SiteMapPath Tree Read only List tên trang từ home và trang hiện tại. Được sử dụng để định vị vị trí hiện

tại trong site.

Menu Tree Read only Hiển thị từng nút cho các lựa chọn. Được sử dụng để hiển thị Menu.

TreeView Tree Read only Hiển thị từng nút cho các lựa chọn theo cấu trúc cây. Được sử dụng để hiển thị nhiều nút

con tại một vị trí.

b) Sử dụng các điều khiển dữ liệu (Data controls)

i. Điều khiển SqlDataSource control: Ta sử dụng điều khiển

SqlDataSource control theo các bước cơ bản sau:

o Trong cửa sổ thiết kế trang Design View, kéo điều khiển

SqlDataSource control vào vùng thiết kế (hình 3.9).

o Mở smart task panel và click Configure Data Source. Xuất

hiện cửa sổ Choose your Data connection hình 3.10. Chọn

New Connection.

o Trong cửa sổ Cửa sổ Add connection (hình 3.11) ta nhập các

thông tin kết nối và click OK để quay về cửa sổ 3.10 và chọn

Next để tiếp tục.



135

o Trong cửa sổ Save connection string to the Application

Configuration file (hình 12). Cho phép có lựa chọn save chuỗi

kết nối này trong file web config hay không?

o Trong cửa sổ Configure the Select Statement (hình 3.13) ta

chọn các trường cho câu lệnh Select. Chú ý, trong cửa sổ này

có các nút Where để thiết lập cho mệnh đề Where cho câu

lệnh Select (hình 3.14); nút Order By để sắp xếp dữ liệu.

o Chọn Next, xuất hiện cửa sổ Test Query (hình 3.15) để Test

truy vấn vừa tạo. Chọn Finsh để kết thúc.

Các bước trên tương ứng với khai báo thẻ như sau: <asp:SqlDataSource ID=”SqlDataSource1” runat=”server”

ConnectionString=”<%$ ConnectionStrings:MyConn %>”

SelectCommand=”SELECT [ProductID], [ProductType],

[ProductName], [ProductDescription], [ProductSize],

[ProductImageURL], [UnitPrice] FROM [Products]”>

</asp:SqlDataSource>

Chuỗi kết nối được khai báo trong tệp web config như sau: <connectionStrings>

<add name=”MyConn” connectionString=”Data Source=.;Initial

Catalog=QLBanHang;User ID=sa;Password=12102006”

providerName=”System.Data.SqlClient” />

</connectionStrings>

Chú ý:

- Khi không Save chuỗi kết nối trong tệp web config thì chuỗi kết nối

đó sẽ được khai báo tường minh trong source như sau.

- Trong lập trình người ta thường kết hợp hai cách thiết kế: Dùng chỉ

dẫn của Design View sau đó chuyển sang Source để hiệu chỉnh lại.

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="Data Source=.;Initial

Catalog=QLBanHang;User ID=sa;Password=12102006"

ProviderName="System.Data.SqlClient"

SelectCommand="SELECT [ProductID], [ProductType],

[ProductName], [ProductDescription], [ProductSize],

[ProductImageURL], [UnitPrice] FROM [Products]">




136

Hình 3.9. Cửa sổ thiết kế Web Page Designer

Hình 3.10. Cửa sổ Choose your Data connection



137

Hình 3.11. Cửa sổ Add connection

Hình 3.12. Cửa sổ Save connection string



138

Hình 3.13. Cửa sổ Configure the Select Statement

Hình 3.14. Cửa sổ thiết lập cho mệnh đề Where.



139

Hình 3.15. Cửa sổ Test Query.

ii. Điều khiển ListBox controls và DropDownList controls: Ta minh họa

buộc các điều khiển trên vào dữ liệu thông qua ví dụ 3.3.

Ví dụ 3.3. Minh họa buộc điều khiển ListBox vào một mảng dữ liệu và

điều khiển DropDownList vào điều khiển Data Source (vidu3_4.aspx) <%@ Page Language="VB" %> <script runat="server"> Protected ListOfMonths() As Integer = {1,2,3,4,5,6,7,8,9,10,11,12} Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Me.MyListBox.DataBind() End Sub Protected Sub MyDropDownList_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Me.MyLabel.Text = "ProductID: " & Me.MyDropDownList.Text End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title> Select Controls</title> </head> <body> <form id="form1" runat="server"> <div>



140

Buộc điều khiển List Box vào một mảng:<br/> <br/> <asp:ListBox ID="MyListBox" runat="server" DataSource="<%#

ListOfMonths%>" Height="160px" Width="80px"> </asp:ListBox><br /> <br /> Buộc điều khiển DropDownList vào Data Source Control<br /> <asp:DropDownList ID="MyDropDownList" runat="server"

DataSourceID="SqlDataSource1" DataTextField="ProductName" AutoPostBack="true" DataValueField="ProductID" OnTextChanged="MyDropDownList_TextChanged">

</asp:DropDownList><br /> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>"

SelectCommand="SELECT [ProductID], [ProductName] FROM [Products]"></asp:SqlDataSource>

<br /> <asp:Label ID="MyLabel" runat="server"></asp:Label> </div> </form> </body> </html>

Ta có thể sử dụng cửa sổ thuộc tính để khai báo cho các điều khiển, chẳng

hạn điều khiển DropDownList như hình 3.15.

Hình 3.16. Cửa sổ Properties



141

Chạy duyệt trang ví dụ trên cho ta kết quả như hình 3.17.

Hình 3.16. Kết quả duyệt ví dụ 3.3.

iii. Điều khiển Grid View: Điều khiển Grid View là điều khiển phát triển

từ điều khiển Data Grid (ASP.NET 1.0). Giống như Data Grid, Grid

view được sử dụng để hiển thị dữ liệu như một bảng dữ liệu. Sử dụng

Grid view để hiển thị, edit, delete, sort, và phân trang.

Grid View và DataGrid có thể buộc vào một điều khiển

DataSourceControl, nhưng Data Grid chỉ cho chọn dữ liệu. Việc Sort,

paging, updates, và delete phải được code bằng tay. Thì GridView

control supports thuộc tính DataSourceID làm cho điều khiển có thể tích

hợp được các khả năng sorting, paging, updating, và deleting của điều

khiển data source.

Ví dụ 3.4. Sử dụng Grid View để hiển thị dữ liệu, sorting và paging

(vidu3_5.aspx) <%@ Page Language="VB" %> <script runat="server"> </script>



142

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]">

</asp:SqlDataSource> <asp:GridView ID="MyGridView" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" PageSize="2" DataSourceID="SqlDataSource1" DataKeyNames="ProductID"> <Columns> <asp:BoundField DataField="ProductID"

HeaderText="ProductID" SortExpression="ProductID"/>

<asp:BoundField DataField="ProductType" HeaderText="ProductType"/> <asp:BoundField DataField="ProductName" HeaderText="ProductName" /> <asp:BoundField DataField="ProductDescription" HeaderText="ProductDescription" /> <asp:BoundField DataField="ProductSize" HeaderText="ProductSize" /> <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" /> <asp:TemplateField HeaderText="Image"> <ItemTemplate> <asp:Image ID="Image1" runat="server"

ImageUrl='<%# Eval("ProductImageURL")%>'/> </ItemTemplate> </asp:TemplateField> </Columns> <PagerSettings FirstPageText="First" LastPageText="Last"

PageButtonCount="4" Position="TopAndBottom" FirstPageImageUrl="~/Images/btnFirst.gif" LastPageImageUrl="~/Images/btnLast.gif" NextPageImageUrl="~/Images/btn_next.gif" NextPageText="Next" PreviousPageImageUrl="~/Images/btn_previous.gif" PreviousPageText="Previous" />

</asp:GridView> </form> </body> </html>

Ta thực hiện thiết kế trong tab Design của cửa sổ Web Page Designer:

o Kéo điều khiển GridView vào cửa sổ thiết kế. Sau đó mở

Smart Task và chọn: DataSource, Paging để phân trang và

Sorting dùng để sắp xếp dữ liệu (Hình 3.17).



143

o Chọn Add New Column để thêm một cột thể hiện hình ảnh các

sản phẩm. Xuất hiện hình 3.18. Chọn kiểu trường là

TemplateFile và Header Text là Image. Sau đó click OK.

o Chọn Edit Template và chọn Template vừa tạo để hiệu chỉnh

xuất hiện cửa sổ hình 3.19. Trong cửa sổ này ta thêm thẻ

<Image> và uộc điều khiển này vào trường ProductImageURL

như hình 3.19.

o Thực hiện phân trang hiển thị. Trong cửa sổ Properties mở

rộng thuộc tính PagerSetting và Page size để định dạng phân

trang (hình 3.20):

• Mode: Kiểu duyệt trang (NextPreviousFirstLast,

Numeric, NextPrevious, NumericFirstLast).

• NextPageImagerURL: Địa chỉ ảnh của nút Next.

• NextPageText: Chuỗi Text của nút Next

• Tương tự cho các nút còn lại,…

• Pagesize: Số bản ghi trên một trang

Kết quả duyệt ví dụ 3.4 trong hình 3.21.

Hình 3.17. Cửa sổ Web Page Designer



144

Hình 3.18. Cửa sổ Add File

Hình 3.19. Cửa sổ Edit Template



145

Hình 3.20. Cửa sổ Properties

Hình 3.21. Duyệt ví dụ 3.4.



146

iv. Điều khiển DataList và Repeater Controls: Là các điều khiển mà toàn

bộ thông tin của bản ghi sẽ được hiển thị trên một cell. Điểm khác nhau

giữa hai điều khiển này là DataList có định dạng và template mặc định

còn Repeater không có mà phải tự thiết kế. Cách tạo DataList tương tự

như Grid View.

Ví dụ 3.5. Sử dụng điều khiển DataList (vidu3_6.aspx) <%@ Page Language="VB" %> <script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]">

</asp:SqlDataSource> <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="2"> <ItemTemplate> <asp:Image ID="Image1" runat="server"

ImageUrl='<%# Eval("ProductImageURL") %>' /><br /> Mã sản phẩm: <asp:Label ID="ProductIDLabel" runat="server"

Text='<%# Eval("ProductID") %>'></asp:Label><br /> Tên sản phẩm: <asp:Label ID="ProductNameLabel" runat="server"

Text='<%# Eval("ProductName") %>'></asp:Label><br /> Kiểu sản phầm: <asp:Label ID="ProductTypeLabel" runat="server"

Text='<%# Eval("ProductType")%>'></asp:Label><br /> Mô tả: <asp:Label ID="ProductDescriptionLabel" runat="server"

Text='<%# Eval("ProductDescription") %>'></asp:Label> Kích thước sản phẩm: <asp:Label ID="ProductSizeLabel" runat="server"

Text='<%# Eval("ProductSize")%>'></asp:Label><br /> Giá sản phẩm (USD): <asp:Label ID="UnitPriceLabel" runat="server"

Text='<%# Eval("UnitPrice") %>'></asp:Label><br /> </ItemTemplate> </asp:DataList> </form> </body> </html>

Kết quả triệu gọi ví dụ 3.5. cho trong hình 3.22.



147


Ví dụ 3.6. Sử dụng điều khiển Repeater (vidu3_7.aspx) <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]"> </asp:SqlDataSource> </div> <asp:Repeater ID="Repeater1" runat="server"

DataSourceID="SqlDataSource1"> <ItemTemplate> <asp:Image ID="Image1" runat="server"

ImageUrl='<%# Eval("ProductImageURL") %>' /><br /> Mã sản phẩm: <asp:Label ID="ProductIDLabel" runat="server"

Text='<%# Eval("ProductID") %>'></asp:Label><br /> Tên sản phẩm: <asp:Label ID="ProductNameLabel" runat="server"

Text='<%# Eval("ProductName") %>'></asp:Label><br /> Kiểu sản phầm: <asp:Label ID="ProductTypeLabel" runat="server"

Text='<%# Eval("ProductType")%>'></asp:Label><br /> Mô tả: <asp:Label ID="ProductDescriptionLabel" runat="server"



148

Text='<%# Eval("ProductDescription") %>'></asp:Label> Kích thước sản phẩm: <asp:Label ID="ProductSizeLabel" runat="server"

Text='<%# Eval("ProductSize")%>'></asp:Label><br /> Giá sản phẩm (USD): <asp:Label ID="UnitPriceLabel" runat="server"

Text='<%# Eval("UnitPrice") %>'></asp:Label><br /> </ItemTemplate> </asp:Repeater> </form> </body> </html>

Kết quả triệu gọi ví dụ 3.6. cho trong hình 3.23.


v. Điều khiển DetailsView và FormView Controls: Đây là hai điều khiển

buộc dữ liệu, tại một thời điểm chỉ hiển thị một bản ghi. Khi buộc dữ

liệu, điều khiển DetailsView tự động tạo các template FormView chỉ tạo

ra thẻ trắng và người thiết kế phải tự thiết kế các template.

Ví dụ 3.7. Sử dụng điều khiển DetailView (vidu3_8.aspx)

<%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">

<title>Untitled Page</title> </head> <body> <form id="form1" runat="server">



149

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductName], [ProductType], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]">


<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1" Height="50px" Width="440px" AllowPaging="True" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal">

<Fields> <asp:TemplateField HeaderText="Ảnh"> <ItemTemplate> <asp:Image ID="Image1" runat="server"

ImageUrl='<%# Eval("ProductImageURL") %>' /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="ProductID" HeaderText="Mã sản phẩm" SortExpression="ProductID" /> <asp:BoundField DataField="ProductName"

HeaderText="Tên sản phẩm" SortExpression="ProductName" />

<asp:BoundField DataField="ProductType" HeaderText="Kiểu sản phẩm" SortExpression="ProductType" />

<asp:BoundField DataField="ProductDescription" HeaderText="Mô tả sản phẩm:" SortExpression="ProductDescription" />

<asp:BoundField DataField="ProductSize" HeaderText="Kích thước sản phẩm" SortExpression="ProductSize" />

<asp:BoundField DataField="UnitPrice" HeaderText="Đơn giá (USD):" SortExpression="UnitPrice" />

</Fields> <PagerSettings PageButtonCount="4" /> <FooterTemplate> <span style="color: #ff0000"></span> </FooterTemplate> <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" /> <EditRowStyle BackColor="#738A9C" Font-Bold="True"

ForeColor="#F7F7F7" /> <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" /> <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" /> <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" /> <AlternatingRowStyle BackColor="#F7F7F7" /> </asp:DetailsView> </form> </body> </html>

Kết que triệu gọi ví dụ 3.7 như hình 3.24.



150


Ví dụ 3.8. Minh họa việc sử dụng kết hợp điều khiển GridView và điều

khiển DetailView. Điều khiển GridView hiển thị danh sách các sản phầm còn

điều khiển DetailView hiển thị thông tin chi tiết sản phẩm mà người dùng chọn

trên điều khiển GridView. <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [UnitPrice] FROM [Products]">




151

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowPaging="True" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyNames="ProductID" PageSize="5" GridLines="Horizontal">

<Columns> <asp:CommandField ShowSelectButton="True" ButtonType="Image"

SelectImageUrl="~/Images/dn.gif" /> <asp:BoundField DataField="ProductID" HeaderText="Mã sản phẩm"

SortExpression="ProductID" /> <asp:BoundField DataField="ProductType"

HeaderText="Kiểu sản phẩm"SortExpression="ProductType"/> <asp:BoundField DataField="ProductName"

HeaderText="Tên sản phẩm" SortExpression="ProductName"/> <asp:BoundField DataField="UnitPrice"

HeaderText="Giá(USD)" SortExpression="UnitPrice" /> </Columns> <PagerSettings PageButtonCount="4" /> <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" /> <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />

<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />

<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />

<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" /> <AlternatingRowStyle BackColor="#F7F7F7"/> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>"

SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products] WHERE ([ProductID] = @ProductID)">

<SelectParameters> <asp:ControlParameter ControlID="GridView1" DefaultValue="2" Name="ProductID" PropertyName="SelectedValue" Type="Int32" /> </SelectParameters> </asp:SqlDataSource> Thông tin chi tiết<br /> <asp:DetailsView ID="DetailsView1" runat="server"

AutoGenerateRows="False" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataSourceID="SqlDataSource2"

GridLines="Horizontal" Height="50px" Width="440px"> <PagerSettings PageButtonCount="4" /> <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" /> <EditRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" /> <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" /> <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C"

HorizontalAlign="Right" />

<Fields> <asp:TemplateField HeaderText="Ảnh"> <ItemTemplate> <asp:Image ID="Image1" runat="server"

ImageUrl='<%# Eval("ProductImageURL") %>' /> </ItemTemplate> </asp:TemplateField>



152

<asp:BoundField DataField="ProductName" HeaderText="Tên sản phẩm" SortExpression="ProductName" />

<asp:BoundField DataField="ProductID" HeaderText="Mã sản phẩm" SortExpression="ProductID" /> <asp:BoundField DataField="ProductType"HeaderText="Kiểu sản phẩm"

SortExpression="ProductType" /> <asp:BoundField DataField="ProductDescription" HeaderText="Mô tả:"/> <asp:BoundField DataField="ProductSize" HeaderText="Kích thước"

SortExpression="ProductSize" /> <asp:BoundField DataField="UnitPrice" HeaderText="Đơn giá:" /> </Fields> <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" /> <AlternatingRowStyle BackColor="#F7F7F7" /> </asp:DetailsView> </form> </body> </html>

Chú ý: Xây dựng mệnh đề Where cho điều khiển SqlDataSource2 để kết

nối dữ liệu giữa hai điều khiển như hình 3.25.

Kết quả duyệt ví dụ 3.8. cho trong hình 3.26.

Hình 3.25. Xây dựng mệnh đề Where.



153


3.2.2. Các thao tác dữ liệu với Data Controls

a) Giới thiệu các thao tác ghi dữ liệu

Không phải tất cả các điều khiển dữ liệu đều support cho việc ghi dữ liệu.

Đối với các điều khiển data source controls, tất cả đều support cho việc ghi dữ

liệu trừ điều khiển SiteMapDataSource.

Nhưng giữa các điều khiển buộc dữ liệu (data-binding controls) còn có khá

nhiều các hạn chế. Các điều khiển chọn danh sách dữ liệu (DropDownList và

ListBox) không support cho việc ghi dữ liệu. Các điều khiển buộc dữ liệu trong



154

phiên bản mới ASP.NET 2.0 support cung cấp các phương thức tốt nhất cho

việc ghi dữ liệu là: GridView, DetailsView, và FormView.

Tuy nhiên, GridView chỉ có thể update các bản ghi đã tồn tại, không tạo

mới bản ghi đã tồn tại, không tạo mới các bản ghi. DataList và Repeater có thể

sử dụng cho việc ghi dữ liệu, nhưng chúng là các điều khiển trong các phiên bản

cũ nên trong một số trường chúng ta phải sử dụng các công nghệ cũ trong

ASP.NET 1.1.

b) Updating các bản ghi

Trước khi đi vào các thao tác ghi dữ liệu ta xét thuộc tính DataKeyNames

của điều khiển buộc dữ liệu liên quan đến các thao tác đó.

Thuộc tính DataKeyNames:

Tại cùng một thời điểm ta có thể có cùng một vài kiểu ghi dữ liệu cho một

trường, do đó Visual Web Developer thêm thuộc tính DataKeyNames cho điều

khiển buộc dữ liệu với mục đích giữ cả hai giá trị cũ và mới của một trường nào

đó làm cho việc ghi dữ liệu được thực hiện một cách chính xác.

Để hiểu vai trò của thuộc tính DataKeyNames, ta hình dung trong hệ thống

web site có một bảng ghi thông tin các ý kiến phản hổi từ khách hàng gọi là

Comments. Trong bảng ta có một trường đầu tiên là trường kiểu số

CommentsID nhận giá trị duy nhất cho mỗi dòng. Khách hàng sẽ gửi các ý kiến

kiến phản hồi của mình và được lưu trong bảng. Đến một lúc nào đó các thông

tin được sắp xếp lộn xộn và nhà quản trị phải thay đổi các ID cho các ý kiến đó,

ví dụ từ 20 chuyển sang 19. Để làm điều này, người quản trị sẽ chọn bản ghi

muốn thay đổi (chẳng hạn dùng điều khiển Grid view) và ASP.NET 2.0 sẽ lưu

giá trị ID đó vào một tham số. Người quản trị sẽ gửi câu lệnh như sau đến

database:

UPDATE Comments SET Comment =19 WHERE Comment =@CommentID

Lưu ý là trong câu lệnh trên tên trường đã thay đổi (CommentsID) để câu

lệnh nhận dạng bản ghi cần thay đổi giá trị. Đúng ra phải là WHERE

CommentsID=@CommentsID nhưng sẽ bị xảy ra xung đột bởi vì

@CommentsID nhận hai giá trị: Một giá trị cũ được lưu trên GridView (giá trị

20) và một giá trị mới do người quản trị nhập vào (19).



155

DataKeyNames giải quyết vấn đề này bằng cách tạo một từ điển giữ hai giá

trị này cho các trường trong danh sách của chúng: Một giá trị cũ và một giá trị

mới. Khi câu lệnh được gửi đến Database, ASP.NET sử dụng khả năng thông

minh của mình để cung cấp giá trị mới từ DataKeyNames cho mệnh đề SET của

câu lệnh và sử dụng giá trị cũ từ DataKeyNames cho mệnh của câu lệnh.

Thật là lãng phí và chậm khi load up từ điển DataKeyNames với mọi

trường, đặc biệt là bởi vì hầu hết các trường không gây ra sự xung đột như trên.

Visual Web Developer tự động adds các trường mà cấu trúc của nó duy nhất

trong database.

Ta sử dụng thuộc tính DataKeyNames để thiết lập một danh sách các

trường (cách nhau bởi dấu phẩy) thể hiện khóa chính của data source. Khi thuộc

tính DataKeyNames được thiết lập thì các điều khiển buộc dữ liệu (DetailsView,

FormView, GridView) tự động tạo đối tượng DataKey thể hiện trường hoặc các

trường khóa của bản ghi hiện tại và lưu trữ trong thuộc tính DataKey của nó.

Khi thuộc tính AutoGenerateColumns của các đối tượng buộc dữ liệu thiết lập là

True thì các trường chỉ định trong DataKeyNames tự động thiết lập là Read

Only.

Chú ý: Ta phải thiết lập cho thuộc tính DataKeyNames cho các thao tác tự

động Update, Delete và Insert cho điều khiển DetailsView và FormView;

Update và Delete cho điều khiển GridView.

Thực hiện Update dữ liệu:

Để thực hiện Update các bản ghi ta thực hiện thông qua hai bước cơ bản:

1. Khai báo thuộc tính UpdateCommand và thuộc tính

UpdateCommandType của điều khiển DataSource được khai báo

như sau:

o Trường hợp ta trực tiếp sử dụng câu lệnh SQL Update

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ...

UpdateCommand =”UPDATE [MyTable] SET [Field1] = @Field1,... [Field2] = @Field2 WHERE [Field1] = @Field1”> ...




156

o Hoặc sử dụng thủ tục StoredProcedure:

<asp:SqlDataSource ID="SqlDataSource1" runat="server" … UpdateCommandType="StoredProcedure" UpdateCommand="Update_storedProcedureName"> …


Trong trường hợp này ta cần phải khai báo thuộc tính

UpdateCommandType="StoredProcedure" mặc định thuộc tính này

nhận giá trị UpdateCommandType="Text"

2. Khai báo các tham số <UpdateParameters> cho câu lệnh Update

trên. Các điều khiển data source của ASP.NET chấp nhận các tham

số vào (input parameters) để mà có thể chuyển các giá trị cho chúng

tại thời điểm thực hiện. Ta sử dụng tham số parameters để cung cấp

điều kiện tìm kiếm cho việc truy xuất dữ liệu, cung cấp giá trị cho

các thao tác dữ liệu như inserted, updated, hoặc deleted trong kho

lưu trữ dữ liệu; và để cung cấp các giá trị cho việc sorting, paging,

và filtering.

Ta có thể sử dụng tham số để tùy chỉnh các giá trị gửi đến data

source bởi các điều khiển buộc dữ liệu, chẳng hạn như GridView,

DetailView, hoặc FormView, mà được supports tự động các thao tác

update, insert, và delete.

Các giá trị Parameter có thể thu được từ nhiều nguồn khác nhau.

Các đối tượng tham số cho phép ta có thể lấy các giá trị các thao tác

dữ liệu từ các thuộc tính của các điều khiển Web server, cookies,

session state, QueryString fields, user profile properties,.v.v…

Ta thực hiện khai báo như sau:

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]" UpdateCommandType="StoredProcedure" UpdateCommand="Update_Products">

<UpdateParameters> <asp:Parameter Direction="ReturnValue" Name="RETURN_VALUE"

Type="Int32" />



157

<asp:Parameter Name="ProductID" Type="Int32" /> <asp:Parameter Name="ProductType" Type="String" /> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="ProductDescription" Type="String" /> <asp:Parameter Name="ProductSize" Type="String" /> <asp:Parameter Name="ProductImageURL" Type="String" /> <asp:Parameter Name="UnitPrice" Type="Double" /> </UpdateParameters>


Ví dụ 3.9. Thực hiện thao tác cập nhật dữ liệu với các điều khiển

sqlDataSource và GridView (trang vidu3_10.aspx).

<%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>"

ProviderName="<%$ ConnectionStrings:MyConn.ProviderName %>" UpdateCommand="UPDATE Products SET ProductType = @ProductType, ProductName = @ProductName, ProductDescription = @ProductDescription, ProductSize = @ProductSize, ProductImageURL = @ProductImageURL, UnitPrice = @UnitPrice WHERE (ProductID = @ProductID)" SelectCommand="SELECT * FROM [Products]">


<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="ProductID">

<Columns> <asp:CommandField ShowEditButton="true"

EditText="<IMG SRC='Images/icon_edit.gif' border=0/>" UpdateText="Update" CancelText="Cancel" />

</Columns> </asp:GridView> </form> </body> </html>

Ví dụ 3.10. Thực hiện thao tác cập nhật dữ liệu với các điều khiển

sqlDataSource và GridView sử dụng storeprocedure (trang vidu3_11.aspx). <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType],



158

[ProductName],[ProductDescription], [ProductSize], [ProductImageURL],[UnitPrice] FROM [Products]" UpdateCommandType="StoredProcedure" UpdateCommand="Update_Products"> <UpdateParameters> <asp:Parameter Name="ProductID" Type="Int32" /> <asp:Parameter Name="ProductType" Type="String" /> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="ProductDescription" Type="String"/> <asp:Parameter Name="ProductSize" Type="String" /> <asp:Parameter Name="ProductImageURL" Type="String" /> <asp:Parameter Name="UnitPrice" Type="Double" /> </UpdateParameters> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"> <Columns> <asp:CommandField ShowEditButton="true" EditText="<IMG SRC='Images/icon_edit.gif' border=0/>" UpdateText="Update" CancelText="Cancel" /> <asp:BoundField DataField="ProductID" HeaderText="ProductID"SortExpression="ProductID"/> <asp:BoundField DataField="ProductType" HeaderText="ProductType" /> <asp:BoundField DataField="ProductName" HeaderText="ProductName" /> <asp:BoundField DataField="ProductDescription" HeaderText="ProductDescription" /> <asp:BoundField DataField="ProductSize" HeaderText="ProductSize" /> <asp:BoundField DataField="ProductImageURL" HeaderText="ProductImageURL" /> <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" /> </Columns> </asp:GridView> </form> </body> </html>

Kết quả duyệt ví dụ 3.10 và ví dụ 3.11. được cho trong hình 2.27.

Chú ý: Khi thiết kế trong Visual Web Developer ta nên kết hợp giữa hai cửa

sổ Design và Source. Trong cửa sổ Design ta chọn cửa sổ thuộc tính của

SqlDataSource như hình 3.28. và thực hiện thiết lập giá trị cho các thuộc tính:

o Thuộc tính UpdateCommandType: Text hoặc StoreProcedure

o Thuộc tính UpdateCommand: Ta click vào nút … để tạo truy

vấn trên cửa sổ Command and Paramater Editer hình 2.29.



159


Hình 3.28.Cửa sổ thuộc tính của sqlDataSource.



160

Hình 3.29.Cửa sổ Command and Paramater Editer.

Ví dụ 3.11. Minh họa việc sử dụng SqlDataSource để hiển thị dữ liệu trên

điều khiển DropDownList và thực hiện Update dữ liệu khi nút Submit được click.

Các tham số trong câu lệnh Update được cung cấp từ hai điều khiển (trang

vidu3_12.aspx). <%@Page Language="VB" %> <SCRIPT runat="server"> Sub On_Click(ByVal source As Object, ByVal e As EventArgs) Try Me.SqlDataSource1.Update() Catch except As Exception ' Handle the Exception. End Try Label2.Text="The record was updated successfully!" End Sub 'On_Click </SCRIPT> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Updating</title> </head> <body> <form id="FORM1" runat="server"> <asp:SqlDataSource id="SqlDataSource1" runat="server"

ConnectionString="server=HP520-9B01514BF;database=NorthWind; user id=sa;password=12102006"



161

SelectCommand="SELECT EmployeeID, LastName, Address FROM Employees" UpdateCommand="UPDATE Employees SET Address=@Address WHERE EmployeeID=@EmployeeID"> <UpdateParameters>

<asp:ControlParameter Name="Address" ControlId="TextBox1" PropertyName="Text"/>

<asp:ControlParameter Name="EmployeeID" ControlId="DropDownList1" PropertyName="SelectedValue"/>

</UpdateParameters> </asp:SqlDataSource>

<asp:DropDownList

id="DropDownList1" runat="server" DataTextField="LastName" DataValueField="EmployeeID" DataSourceID="SqlDataSource1">

</asp:DropDownList><br /><br />

<asp:Label id="Label1" runat="server" Text="Enter a new address for the selected user." /><br />

<asp:TextBox id="TextBox1" runat="server" /> <asp:Button id="Submit" runat="server" Text="Submit" OnClick="On_Click" />

<asp:Label id="Label2" runat="server" Text="" /> </form> </body> </html>

Sử dụng thuộc tính OldValuesParameterFormatString của điều khiển

Data Source: Thuộc tính này là một chuỗi String định dạng áp dụng cho tên của

các tham số nhận giá trị cũ oldValuesParameters để chuyển sang cho các phương

thức Update và Delete.

Chuỗi định dạng OldValuesParameterFormatString chỉ được áp dụng cho

primary keys, như là các trường định danh được định nghĩa trong thuộc tính

DataKeyNames liên quan đến các điều khiển buộc dữ liệu, hoặc là trong các tình

huống Update và Delete mà thuộc tính ConflictDetection được thiết lập là

CompareAllValues và tập các giá trị cũ được chuyển qua các phương thức tương

ứng. Trong trường hợp này, chuỗi định dạng được áp dụng cho tên các tham số

chứa tập các giá trị cũ. Mặc định chuỗi này nhận giá trị là "{0}" (ví dụ, nếu ta

thiết lập thuộc tính OldValuesParameterFormatString= "old_{0}" thì các

tham số chứa giá trị nguyên thủy sẽ nhận tiền tố là old_; như vậy nếu ta có một

trường LastModifiedDate thì tham số tên là @LastModifiedDate sẽ

được tạo để chuyển giá trị hiện tại và tham số @old_LastModifiedDate

được tạo để chuyển giá trị nguyên thủy.



162

Ví dụ 3.12. Minh họa sử dụng thuộc tính OldValuesParameterFormatString

dùng để cập nhật dữ liệu cho bảng Customers trong CSDL NorthWind (trang

vidu3_13.aspx). <%@ Page language="VB" %> <script runat="server"> Sub CustomersGridView_RowUpdating(ByVal sender As Object, ByVal e As GridViewUpdateEventArgs) Me.CustomersSqlDataSource.OldValuesParameterFormatString = "oldCustomserID" End Sub </script> <html xmlns ="http://www.w3.org/1999/xhtml"> <head> <title>Updating</title> </head> <body> <form id="Form1" runat="server"> <h3>GridView RowUpdating Example</h3> <asp:gridview id="CustomersGridView" runat="server" datasourceid="CustomersSqlDataSource" autogeneratecolumns="false" autogenerateeditbutton="true" allowpaging="true" DataKeyNames="CustomerID" onrowupdating="CustomersGridView_RowUpdating"> <Columns> <asp:BoundField DataField="CustomerID" HeaderText="CustomerID"/> <asp:BoundField DataField="CompanyName" HeaderText="CompanyName"/> <asp:BoundField DataField="Address" HeaderText="CompanyName" /> </Columns> </asp:gridview> <asp:sqldatasource id="CustomersSqlDataSource" selectcommand="Select [CustomerID], [CompanyName], [Address] From [Customers]" updatecommand="Update Customers SET CustomerID = @CustomerID,CompanyName=@CompanyName, Address=@Address Where (CustomerID = @oldCustomserID)" connectionstring="server=HP520-9B01514BF;database=NorthWind; user id=sa;password=12102006" runat="server"> <UpdateParameters> <asp:Parameter Name="CustomerID" Type="String" /> <asp:Parameter Name="CompanyName" Type="String"/> <asp:Parameter Name="Address" Type="string"/> <asp:Parameter Name="oldCustomerID" Type="string" /> </UpdateParameters> </asp:sqldatasource> <asp:Label ID="Label1" runat="server"Text="Label"> </asp:Label> </form> </body> </html>

Trong chuỗi UpdateCommand trên ta thấy mệnh đề SET

CustomerID=@CustomerID thuộc tính CustomerID nhận giá trị mới, còn

trong mệnh đề WHERE CustomerID = @oldCustomserID thuộc tính

CustomerID nhận giá trị cũ để định vị bản ghi cần thay đổi trong CSDL.



163

Ví dụ 3.13. Minh họa sử dụng thuộc tính OldValuesParameterFormatString

dùng để cập nhật dữ liệu cho bảng Customers trong CSDL NorthWind (trang

vidu3_14.aspx). Trong ví dụ này để thử nghiệm các trường CustomerID,

CompanyName nhận giá trị mới còn trường Address nhận giá trị cũ. <%@ Page language="VB" %> <script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Me.CustomersSqlDataSource.OldValuesParameterFormatString = "old_{0}" End Sub </script> <html xmlns ="http://www.w3.org/1999/xhtml"> <head> <title>gfgfg</title> </head> <body> <form id="Form1" runat="server"> <h3>GridView RowUpdating Example</h3> <asp:gridview id="CustomersGridView" datasourceid="CustomersSqlDataSource" autogeneratecolumns="false" autogenerateeditbutton="true" allowpaging="true" DataKeyNames="CustomerID" runat="server"> <Columns> <asp:BoundField DataField="CustomerID" HeaderText="CustomerID"/> <asp:BoundField DataField="CompanyName"HeaderText="CompanyName" /> <asp:BoundField DataField="Address" HeaderText="Address" /> </Columns> </asp:gridview> <asp:sqldatasource id="CustomersSqlDataSource" selectcommand="Select [CustomerID],[CompanyName],[Address]From [Customers]" updatecommand="Update Customers SET CustomerID = @CustomerID,CompanyName=@CompanyName, Address=@old_Address Where (CustomerID = @old_CustomerID)" connectionstring="server=HP520-9B01514BF;database=NorthWind; user id=sa;password=12102006" runat="server" ConflictDetection="CompareAllValues"> <UpdateParameters> <asp:Parameter Name="CustomerID" Type="String" /> <asp:Parameter Name="CompanyName" Type="String"/> <asp:Parameter Name="Address" Type="String"/> <asp:Parameter Name="old_Address" Type="String"/> <asp:Parameter Name="old_CustomerID" Type="String" /> </UpdateParameters> </asp:sqldatasource> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </form> </body> </html>



164

c) Xóa các bản ghi

Các kỹ thuật thực hiện xóa các bản ghi tương tự như Update các ghi.

Tương tự đối với điều khiển data source ta thực hiện khai báo:

1. Khai báo hai thuộc tính DeleteCommand và DeleteCommandType

DeleteCommand="DELETE FROM Products WHERE

(ProductID = @ProductID)"

2. Khai báo các tham số <DeleteParameters>

<DeleteParameters> <asp:Parameter Name="ProductID" /> </DeleteParameters> Ví dụ 3.14. Thực hiện xóa dữ liệu từ điều khiển Grid View (vidu3_15.aspx) <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> </div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" ProviderName="<%$ ConnectionStrings:MyConn.ProviderName %>" UpdateCommand="UPDATE Products SET ProductType = @ProductType, ProductName = @ProductName, ProductDescription = @ProductDescription, ProductSize = @ProductSize,ProductImageURL = @ProductImageURL, UnitPrice = @UnitPrice WHERE (ProductID = @ProductID)" SelectCommand="SELECT * FROM [Products]" DeleteCommand="DELETE FROM Products WHERE (ProductID = @ProductID)"> <DeleteParameters> <asp:Parameter Name="ProductID" /> </DeleteParameters> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="ProductID"> <Columns> <asp:CommandField ShowEditButton="True" EditText="<IMG SRC='Images/icon_edit.gif' border=0/>"/> <asp:CommandField ShowDeleteButton="True" DeleteText="<img src='Images/icon_delete.gif' border=0/>"/> <asp:TemplateField HeaderText="Image"> <ItemTemplate> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("ProductImageURL") %>' /> </ItemTemplate> </asp:TemplateField> </Columns>



165

</asp:GridView> </form> </body> </html>

d) Chèn các bản ghi

Để chèn bản ghi ta sử dụng kỹ thuật tương tự như trên, thông qua khai báo:

1. Khai báo hai thuộc tính InsertCommand và InsertCommandType InsertCommand="INSERT INTO Products(ProductID, ProductType, ProductName, ProductDescription, ProductSize, ProductImageURL, UnitPrice) VALUES (@ProductID, @ProductType, @ProductName, @ProductDescription, @ProductSize, @ProductImageURL, @UnitPrice)">

2. Khai báo các tham số <InsertParameters> <InsertParameters> <asp:Parameter Name="ProductID" Type="Int16"/> <asp:Parameter Name="ProductType" Type="String"/> <asp:Parameter Name="ProductName" Type="String"/> <asp:Parameter Name="ProductDescription" Type="String"/> <asp:Parameter Name="ProductSize" Type="String"/> <asp:Parameter Name="ProductImageURL" Type="String" /> <asp:Parameter Name="UnitPrice" Type="Decimal" /> </InsertParameters>

Ví dụ 3.15. Trong ví dụ dùng GridView để hiển thị và thực hiện các thao

tác Update, Delete; sử dụng DetailView để hiển thị chi tiết từng bản ghi được

chọn trong GridView đồng thời cho phép cập nhật dữ liệu(vidu3_16.aspx) <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" ProviderName="<%$ ConnectionStrings:MyConn.ProviderName %>" UpdateCommand="UPDATE Products SET ProductType = @ProductType, ProductName = @ProductName, ProductDescription = @ProductDescription, ProductSize = @ProductSize, ProductImageURL =@ProductImageURL, UnitPrice = @UnitPrice WHERE (ProductID = @ProductID)" SelectCommand="SELECT * FROM [Products]" DeleteCommand="DELETE FROM Products WHERE(ProductID= @ProductID)"> <DeleteParameters> <asp:Parameter Name="ProductID" /> </DeleteParameters> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="ProductID">



166

<Columns> <asp:CommandField ShowEditButton="True" EditText="<IMG SRC='Images/icon_edit.gif' border=0/>" /> <asp:CommandField ShowDeleteButton="True" DeleteText=" <img src='Images/icon_delete.gif' border=0 />"/> <asp:TemplateField HeaderText="Image"> <ItemTemplate> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("ProductImageURL") %>' /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html>

Kết quả cho trong hình 2.30.


Ví dụ 3.16. Trong ví dụ sẽ xây dựng hai trang

- Trang vidu3_17.aspx sẽ thực hiện hiển thị thông tin của bảng

Products đồng thời cho phép Update và Delete dữ liệu. Người quản

trị click vào nút “Thêm mới sản phẩm” để chuyển sang trang

vidu3_18.aspx để cập nhật dữ liệu (hình 3.31).

- Trang vidu3_18.aspx cho phép thực hiện cập nhật dữ liệu (hình 3.32)

+ Trang vidu3_17.aspx <%@ Page Language="VB" %> <script runat="server"> </script>



167

<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> </div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" ProviderName="<%$ ConnectionStrings:MyConn.ProviderName %>" UpdateCommand="UPDATE Products SET ProductType = @ProductType, ProductName = @ProductName, ProductDescription = @ProductDescription, ProductSize = @ProductSize, ProductImageURL = @ProductImageURL, UnitPrice = @UnitPrice WHERE (ProductID = @ProductID)" SelectCommand="SELECT * FROM [Products]" DeleteCommand="DELETE FROM Products WHERE (ProductID = @ProductID)" InsertCommand="INSERT INTO Products(ProductID, ProductType, ProductName, ProductDescription, ProductSize, ProductImageURL, UnitPrice) VALUES (@ProductID, @ProductType, @ProductName, @ProductDescription, @ProductSize, @ProductImageURL, @UnitPrice)"> <DeleteParameters> <asp:Parameter Name="ProductID" /> </DeleteParameters> <InsertParameters> <asp:ControlParameter ControlID="txtProductID" Name="ProductID" PropertyName="Text" /> <asp:ControlParameter ControlID="txtProductType" Name="ProductType" PropertyName="Text" /> <asp:ControlParameter ControlID="txtProductName" Name="ProductName" PropertyName="Text" /> <asp:ControlParameter ControlID="lblProductDescription" Name="ProductDescription" PropertyName="Text" /> <asp:ControlParameter ControlID="txtProductSize" Name="ProductSize" PropertyName="Text" /> <asp:ControlParameter ControlID="lblProductImageURL" Name="ProductImageURL" PropertyName="Text" /> <asp:ControlParameter ControlID="txtUnitPrice" Name="UnitPrice" PropertyName="Text" /> </InsertParameters> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="ProductID" AllowPaging="True" CellPadding="4" ForeColor="#333333" GridLines="None" PageSize="3"> <Columns> <asp:ImageField DataImageUrlField="ProductImageURL" HeaderText="Ảnh"> </asp:ImageField> <asp:CommandField ShowEditButton="True" EditText="<IMG SRC='Images/icon_edit.gif' border=0/>" /> <asp:CommandField ShowDeleteButton="True" DeleteText="<img src='Images/icon_delete.gif' border=0 >"/> <asp:BoundField DataField="ProductID" HeaderText="Mã sản phẩm" SortExpression="ProductID" /> <asp:BoundField DataField="ProductType" HeaderText="Kiểu sản phẩm" SortExpression="ProductType" /> <asp:BoundField DataField="ProductName" HeaderText="Tên sản phẩm" SortExpression="ProductName" />



168

<asp:BoundField DataField="UnitPrice" HeaderText="Giá (USD)" SortExpression="UnitPrice" /> <asp:BoundField DataField="ProductDescription" HeaderText="Mô tả sản phẩm" /> </Columns> <PagerSettings PageButtonCount="3" /> <FooterStyle BackColor="#507CD1"Font-Bold="True"ForeColor="White"/> <RowStyle BackColor="#EFF3FB" /> <EditRowStyle BackColor="#2461BF" /> <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333"/> <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <HeaderStyleBackColor="#507CD1"Font-Bold="True" ForeColor="White"/> <AlternatingRowStyle BackColor="White" /> </asp:GridView> <asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/vidu3_18.aspx" >Thêm mới sản phẩm </asp:LinkButton><br /> </form> </body> </html>

Hình 3.31. Duyệt ví dụ 3.16(vidu3_17.aspx).

+ Trang vidu3_18.aspx <%@ Page Language="VB" %> <script runat="server"> Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click Dim Path As String Path = Request.PhysicalApplicationPath If FileUpload1.HasFile Then Try FileUpload1.SaveAs(Path & "\Images\" & FileUpload1.FileName)



169

Me.lblProductImageURL.Text = "~\Images\" & FileUpload1.FileName Me.imgProductImageURL.ImageUrl = Me.lblProductImageURL.Text Catch ex As Exception Me.lblProductImageURL.Text = "Failed because: <br/>" & ex.Message End Try End If Me.imgInsert.Enabled = True End Sub Protected Sub imgInsert_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Me.SqlDataSource1.Insert() Me.imgNew.Enabled = True Me.imgInsert.Enabled = False Me.lblTB.Text = "Một bản ghi đã được cập nhật! Tiếp tục click New, kết thúc click Cancel <br>" End Sub Protected Sub imgCancel_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Response.Redirect("vidu3_17.aspx") End Sub Protected Sub imgNew_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Me.txtProductID.Text = "" Me.txtProductType.Text = "" Me.txtProductName.Text = "" Me.txtProductDescription.Text = "" Me.txtProductSize.Text = "" Me.txtUnitPrice.Text = "" Me.lblProductImageURL.Text = "" Me.lblTB.Text = "" Me.btnUpload.Enabled = True Me.imgCancel.Enabled = True Me.imgInsert.Enabled = False Me.imgNew.Enabled = False End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" ProviderName="<%$ ConnectionStrings:MyConn.ProviderName %>" SelectCommand="SELECT * FROM [Products]" InsertCommand="INSERT INTO Products(ProductID, ProductType, ProductName, ProductDescription, ProductSize, ProductImageURL, UnitPrice) VALUES (@ProductID, @ProductType, @ProductName, @ProductDescription, @ProductSize, @ProductImageURL, @UnitPrice)"> <InsertParameters> <asp:ControlParameter ControlID="txtProductID" Name="ProductID" PropertyName="Text" /> <asp:ControlParameter ControlID="txtProductType" Name="ProductType" PropertyName="Text" /> <asp:ControlParameter ControlID="txtProductName" Name="ProductName" PropertyName="Text" /> <asp:ControlParameter ControlID="txtProductDescription" Name="ProductDescription" PropertyName="Text" />



170

<asp:ControlParameter ControlID="txtProductSize" Name="ProductSize" PropertyName="Text" /> <asp:ControlParameter ControlID="lblProductImageURL" Name="ProductImageURL" PropertyName="Text" /> <asp:ControlParameter ControlID="txtUnitPrice" Name="UnitPrice" PropertyName="Text" /> </InsertParameters> </asp:SqlDataSource> <asp:Label ID="lblTB" runat="server" ForeColor="#FF00FF"></asp:Label> <asp:ImageButton ID="imgNew" runat="server" ImageUrl="~/Images/AddNew.GIF" OnClick="imgNew_Click" /> <asp:ImageButton ID="imgCancel" runat="server" ImageUrl="~/Images/Cancel.GIF" OnClick="imgCancel_Click" /><br /> CẬP NHẬT DỮ LIỆU <asp:Label ID="lblProductID" runat="server" Text="Mã sản phẩm: " ForeColor="#0000FF"></asp:Label> <asp:TextBox ID="txtProductID" runat="server" MaxLength="4"></asp:TextBox> <asp:Label ID="lblProductType" runat="server" ForeColor="Blue" Text="Loại sản phẩm: "></asp:Label> <asp:TextBox ID="txtProductType" runat="server" Width="160px" MaxLength="20"></asp:TextBox> <br /> <br /> <asp:Label ID="lblProductName" runat="server" ForeColor="Blue" Text="Tên sản phẩm: "></asp:Label> <asp:TextBox ID="txtProductName" runat="server" MaxLength="50"></asp:TextBox> <asp:Label ID="lblUnitPrice" runat="server" ForeColor="Blue" Text="Đơn giá (USD):"></asp:Label> <asp:TextBox ID="txtUnitPrice" runat="server"></asp:TextBox><br/><br/> <asp:Label ID="lblProductSize" runat="server" ForeColor="Blue" Text="Kích thước sản phẩm: "></asp:Label> <asp:TextBoxID="txtProductSize" runat="server" Width="384px"> </asp:TextBox><br /> <br /> <asp:FileUpload ID="FileUpload1" runat="server" Width="520px" /><br /> <table style="width: 520px"> <tr> <td style="width: 183px"> <asp:Label ID="lblProductImag" runat="server" ForeColor="Blue" Text="Upload File ảnh: "> </asp:Label> <asp:Button ID="btnUpload" runat="server" Text="Upload" Width="72px" OnClick="btnUpload_Click" /> </td> <td style="width: 92px"> <asp:Image ID="imgProductImageURL" runat="server" ImageUrl="~/Images/DTDD.gif" /><br /> <asp:Label ID="lblProductImageURL" runat="server"> </asp:Label> </td> </tr> </table> <asp:Label ID="lblProductDescription" runat="server" ForeColor="Blue" Text="Mô tả sản phẩm:"></asp:Label><br /> <asp:TextBox ID="txtProductDescription" runat="server" Height="112px" TextMode="MultiLine" Width="520px"></asp:TextBox><br /> <table style="width: 512px"> <tr> <td style="width: 185px; height: 24px" valign="middle"> </td> <td style="width: 126px; height: 24px" valign="middle"> <asp:ImageButton ID="imgInsert" runat="server" ImageUrl="~/Images/Insert.GIF" OnClick="imgInsert_Click" /></td> <td style="height: 24px" valign="middle"> </td>



171

</tr> </table> </form> </body> </html>

Hình 3.32. Duyệt ví dụ 3.16(vidu3_18.aspx).

Chú ý:

- Để Upload một file lên Server ta dùng điều khiển FileUpload (Như trang

Vidu3_18.aspx).

- Để tạo Download một file và mở chúng ta sử dụng thẻ Hyperlink <a>,

địa chỉ URL phải bao gồm server path và file name bao gồm cả tên mở rộng. <a href="Images/BG_LTWeb.doc">Download Baigiang Web </a>

<a href="Images/backblue.gif"> Mở file ảnh </a></div>

e) Lọc dữ liệu sử dụng Data Source controls

Data source controls cung cấp một số dịch vụ dữ liệu để dễ dàng có thể có

thêm các khả năng tiên tiến cho các ứng dụng. Nó bao gồm việc lọc dữ liệu dựa

trên điều kiện tìm kiếm mà ta chỉ định.

Việc lọc dữ liệu thuận lợi nhất là khi làm việc với cached data, bởi vì ta có

thể cung cấp các khả năng tìm kiếm không cần phải chạy lại các truy vấn hoặc

gọi lại các phương thức đọc dữ liệu.



172

Để lọc dữ liệu, data source control phải được cấu hình như sau:

+ Đối với các điều khiển SqlDataSource và AccessDataSource, thuộc

tính DataSourceMode phải được thiết lập tới DataSet.

+ Đối với điều khiển ObjectDataSource, đối tượng source object phải

trả về DataSet hoặc DataTable.

* Thiết lập biểu thức lọc (Filter Expression): Ta chỉ định lọc áp dụng cho

dữ liệu được trả về bởi các điều khiển ObjectDataSource, SqlDataSource, hoặc

AccessDataSource bằng việc thiết lập thuộc tính FilterExpression của data

source. Biểu thức lọc sẽ được áp dụng khi phương thức select của data source

control được gọi. Cú pháp của biểu thức lọc phụ thuộc vào cú pháp thuộc tính

Expression của lớp DataColumn.

FilterExpression="Country LIKE '{0}' AND LastName LIKE '{1}'"

Chú ý: Cả hai ký tự % và * đều được sử dụng làm ký tự thay thế trong toán

tử so sánh LIKE. Ký tự thay thế được cho phép ở vị trí bắt đầu và kết thúc của

mẫu. Ví dụ:

"ItemName LIKE '*product*'"

"ItemName LIKE '*product'"

"ItemName LIKE 'product*'"

Ký tự thay thế không được phép nằm giữa chuỗi mẫu.Ví dụ , 'te*xt'

không được phép.

*Cung cấp tham số lọc (Filter Parameters): Ta có thể cung cấp tham số

biểu thức lọc cho các điều khiển ObjectDataSource, SqlDataSource, hoặc

AccessDataSource. Các tham số này cho phép ta cung cấp các giá trị lọc tại thời

điểm chạy không cần viết code để thiết lập thuộc tính FilterExpression.

Ta có thể chỉ định các tham số biểu thức lọc sử dụng collection

FilterParameters của điều khiển data source. Các tham số này có thể truy xuất

dữ liệu từ các điều khiển, đối tượng QueryString, session state, user

profile,.v.v…

<FilterParameters> <asp:ControlParameter ControlID="CountryListBox" PropertyName="SelectedValue" /> <asp:ControlParameter ControlID="LastNameTextBox" PropertyName="Text" /> </FilterParameters>



173

Trong biểu thức lọc (Filter Expression), ta tạo các placeholders tương ứng

tới các items trong collection FilterParameters của điều khiển data source. Các

Placeholders được số hóa, với 0 thể hiện tham số đầu tiên trong collection. Ta

chỉ định một placeholder trong biểu thức lọc bằng cách thay thế số của tham số

lọc trong các ký tự '{' và '}' như ví dụ sau:

Country = '{0}' AND LastName LIKE '{1}'

Ví dụ 3.17. Thực hiện lọc dữ liệu dữ liệu trong CSDL Northwind thông qua

các phương thức lọc dữ liệu của điều khiển dữ liệu SqlDataSource

(vidu3_19.aspx). <%@ Page language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Filter</title> </head> <body> <form id="Form1" runat="server"> <h3>Northwind Employees</h3> <table cellspacing="10"> <tr> <td valign="top"> <table border='0'> <tr> <td valign="top">Country</td> <td> <asp:DropDownList runat="server" id="CountryListBox" AppendDataBoundItems="True" DataSourceID="CountrySqlDataSource" DataTextField="Country" DataValueField="Country" > <asp:ListItem Selected="True" Value=""> (Show All)</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td>Last Name</td> <td> <asp:TextBox runat="server" id="LastNameTextBox" Text="*" /></td> </tr> <tr> <td></td> <td> <asp:Button runat="server" id="FilterButton" Text="Filter Results" /></td> </tr> </table> </td> <td valign="top"> <asp:GridView ID="EmployeesGridView" DataSourceID="EmployeeDetailsSqlDataSource" AutoGenerateColumns="False" AllowSort="True" DataKeyNames="EmployeeID"



174

RunAt="server"> <HeaderStyle backcolor="Navy" forecolor="White"/> <RowStyle backcolor="White"/> <AlternatingRowStyle backcolor="LightGray"/> <EditRowStyle backcolor="LightCyan"/> <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" ReadOnly="True"/> <asp:BoundField DataField="FirstName" HeaderText="First Name"/> <asp:BoundField DataField="LastName" HeaderText="Last Name"/> <asp:BoundField DataField="Country" HeaderText="Country"/> </Columns> </asp:GridView> </td> </tr> </table> <asp:SqlDataSource ID="CountrySqlDataSource" SelectCommand="SELECT DISTINCT Country FROM Employees" EnableCaching="True" CacheDuration="60" ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>" RunAt="server" /> <asp:SqlDataSource ID="EmployeeDetailsSqlDataSource" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Country] FROM [Employees]" EnableCaching="True" CacheDuration="60" ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>" FilterExpression="Country LIKE '{0}' AND LastName LIKE '{1}'" RunAt="server"> <FilterParameters> <asp:ControlParameter ControlID="CountryListBox" PropertyName="SelectedValue" /> <asp:ControlParameter ControlID="LastNameTextBox" PropertyName="Text" /> </FilterParameters> </asp:SqlDataSource> </form> </body> </html>

Kết quả triệu gọi trang như hình



175

Hình 3.33. Duyệt ví dụ 3.17 (vidu3_19.aspx).

Chú ý: Ta có thể sử dụng phương thức thức lọc bằng cách đọc lại dữ liệu

trong phương thức Select của điều khiển DataSource (như ví dụ 3.18)

Ví dụ 3.18. Thực hiện lọc dữ liệu dữ liệu trong CSDL Northwind tương tự

như ví dụ 3.17 nhưng thông qua các phương thức Select dữ liệu của điều khiển

dữ liệu SqlDataSource (vidu3_20.aspx). <%@ Page language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Filter</title> </head> <body> <form id="Form1" runat="server"> <h3>Northwind Employees</h3> <table cellspacing="10"> <tr> <td valign="top"> <table border='0'> <tr> <td valign="top">Country</td> <td><asp:DropDownList runat="server" id="CountryListBox" AppendDataBoundItems="True" DataSourceID="CountrySqlDataSource" DataTextField="Country" DataValueField="Country" > <asp:ListItem Selected="True" Value="" > (Show All)</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td>Last Name</td> <td><asp:TextBox runat="server" id="LastNameTextBox" Text="%" /></td>



176

</tr> <tr> <td></td> <td><asp:Button runat="server" id="FilterButton" Text="Filter Results" /></td> </tr> </table> </td> <td valign="top"> <asp:GridView ID="EmployeesGridView" DataSourceID="EmployeeDetailsSqlDataSource" AutoGenerateColumns="True" RunAt="server"> <HeaderStyle backcolor="Navy" forecolor="White"/> <RowStyle backcolor="White"/> <AlternatingRowStyle backcolor="LightGray"/> <EditRowStyle backcolor="LightCyan"/> </asp:GridView> </td> </tr> </table> <asp:SqlDataSource ID="CountrySqlDataSource" SelectCommand="SELECT DISTINCT Country FROM Employees" EnableCaching="True" CacheDuration="60" ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>" RunAt="server" /> <asp:SqlDataSource ID="EmployeeDetailsSqlDataSource" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Country] FROM [Employees] WHERE (([Country] LIKE '%' + @Country +'%') AND ([LastName] LIKE '%' + @LastName +'%'))" RunAt="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"> <SelectParameters> <asp:ControlParameter ControlID="CountryListBox" DefaultValue="%" Name="Country" PropertyName="SelectedValue" Type="String" /> <asp:ControlParameter ControlID="LastNameTextBox" DefaultValue="%" Name="LastName" PropertyName="Text" Type="String" /> </SelectParameters> </asp:SqlDataSource> </form> </body> </html>

3.3. Mô hình ADO.NET

3.3.1. Giới thiệu đối tượng ADO.NET

ADO là phương thức truy xuất dữ liệu cũ của Microsoft, và nó đã trở thành

chuẩn cho các môi trường Office, Web, và Visual Basic trước .NET. Sau đây là

các sản phẩm phát triển của ADO:

+ Microsoft Office 200x



177

+ Visual Studio 6.0 (bao gồm tất cả các ngôn ngữ trong đó)

+ SQL Server 7.0, 2000

Data Access Objects (DAO), là chuẩn trước ADO, được sử dụng trong

Office và Visual Basic, nhưng nó không được thiết kế để sử dụng trong các môi

trường Web như Visual InterDev và các dữ liệu servers khác. Do đó ADO cho

đến bây giờ đang là chuẩn để phát triển các ứng dụng. Công nghệ này sử dụng

để truy cập cơ sở dữ liệu Client/Server (trình chủ và trình khách), cho phép truy

cập dữ liệu với mô hình đa lớp (n-tier). Tiếp đó, các thành phần ADO.NET,

được thiết kế nhằm tăng tốc độ truy cập và thao tác dữ liệu trong môi trường đa

lớp (n-tier).

ADO.NET được thiết kế để cung cấp kiến trúc rời rạc (disconnected

architecture). Có nghĩa là các ứng dụng connect tới database truy nạp dữ liệu và

lưu trữ trong memory. Sau đó disconnect với database và sử dụng bộ nhớ sao

chép (memory copy) của dữ liệu đó. Nếu như database cần phải được update với

các thay đổi trên memory copy, một kết nối mới (connection) được hình thành

và database được update. Bộ nhớ chính lưu trữ dữ liệu là DataSet, nơi mà chứa

các bộ nhớ lưu trữ dữ liệu khác, như là: Các đối tượng DataTable; ta có thể lọc

và sắp xếp dữ liệu trên DataSet bằng việc sử dụng các đối tượng DataView.

Việc sử dụng kiến trúc disconnected architecture cung cấp rất nhiều lợi ích,

trong đó, quan trọng nhất là cho phép ứng dụng trở lên scale up. Nghĩa là

database của ta sẽ thực thi tốt như hỗ trợ hàng trăm users tuy nó chỉ hỗ trợ vài

chục users. Điều đó có thể bởi vì ứng dụng connects tới database chỉ đủ để truy

nạp hoặc update dữ liệu, bằng cách đó giải phóng các connections database sẵn

có cho các thể hiện khác của ứng dụng hoặc các ứng dụng khác sử dụng cùng

database.

3.3.2. Các đối tượng trong ADO.NET

Đối tượng chính được sử dụng trong ADO.NET là đối tượng DataSet. Ta

có thể thấy đối tượng DataSet và các thuộc tính, các phương thức, và các đối

tượng của nó trong hình 3.1 dưới đây.



178

Xét bảng 3.1 để tìm hiểu các mô tả ngắn ngọn về các đối tượng hay dùng.

Bảng 3.1. ADO.NET Data Objects hay được dùng để thao tác dữ liệu

Object Mục đích

DataSet

Đối tượng này được sử dụng cùng với các điều khiển dữ liệu

khác, lưu trữ các kết quả được trả về bởi các đối tượng commands

và data adapters. Không như recordset của ADO và DAO, Data

set thực sự mang lại một view phân cấp của dữ liệu. Bằng việc sử

Hình 3.1. Mô hình ADO.NET



179

dụng các thuộc tính và các collections trong đối tượng

DataSet, ta có thể nhận được toàn bộ các quan hệ (relations),

các tables riêng biệt, rows, và columns.

DataTable Một trong đối tượng của data set, là đối tượng DataTable

cho phép ta có thể thao tác dữ liệu trong một table riêng biệt. Data

table tương tự như đối tượng recordset trong ADO.

DataView

Bằng việc sử dụng đối tượng này, ta có thể lọc và sắp xếp dữ

liệu, duy trì các views khác nhau của dữ liệu. Mỗi data table có

một default view, nó là nơi khởi động data view mà có thể được

sửa dổi và lưu trữ trong data view khác.

DataRow

Đối tượng này cho phép ta thao tác các rows của dữ liệu trong

data tables. Nó có thể được xét như một cache của dữ liệu mà ta có

thể thực hiện các thao tác adding, deleting, và modifying records.

Ta có thể quay trở lại recordset, nơi mà ta sẽ chạy các câu lệnh

SQL để update dữ liệu về server.

DataColumn

Như tên đề nghị, ta có thể nhận các thông tin tại các cột bằng

việc sử dụng đối tượng DataColumn. Ta có thể lấy thông tin

lược đồ như là dữ liệu bằng việc sử dụng đối tượng này. Ví dụ: nếu

ta muốn tạo một list box của tên các trường, ta có thể lặp thông

qua tập DataColumn của các dòng dữ liệu và truy lục tất cả các tên

trường.

PrimaryKey Đối tượng này cho phép ta chỉ định primary key cho table dữ

liệu. Cách khác, khi ta sử dụng phương thức Find của data table.

.NET cũng cung cấp các classes, được gọi data providers, và sử dụng tên

miền (Namespaces) để làm việc với các đối tượng ADO.NET và cung cấp các

truy xuất với dữ liệu. Lõi của các lớp ADO.NET tồn tại trong namespace

System.Data. Namespace này chứa chứa một vài namespaces con. Phần quan

trọng nhất của chúng là các tên miền System.Data.SqlClient và

System.Data.OleDb. Chúng cung cấp các classes sử dụng cho việc truy cập SQL

Server databases và OLE (Object Linking and Embedding) DB- compliant



180

databases (phục hồi dữ liệu). Các lớp của OleDb và SqlClient cho trong hình

3.2. và Bảng 3.2. mô tả vắn tắt các đối tượng thường được sử dụng để thao tác

với dữ liệu.

Bảng 3.2. .NET Data Provider Classes thường được sử dụng để thao tác dữ liệu

Object Mục đích

Command Tương tự như đối tượng ADO Command, cho phép ta thực

hiện các stored procedures trong code. Khác với phiên bản ADO,

ta có thể tạo đối tượng DataReader bằng việc sử dụng phương

thức ExecuteReader.

Connection Đây là đối tượng mở kết nối tới server và database mà ta

muốn làm việc. Khác với đối tượng ADO Connection, cách

thức kết nối phụ thuộc vào đối tượng mà ta muốn làm việc, như là

đối tượng DataReader hay DataSet.

DataAdapter Đối tượng DataAdapter cho phép ta tạo các câu lệnh SQL

và điền dữ liệu vào datasets. Nó cũng cho phép tạo các action

Hình 3.2. OleDb và SqlClient classes ADO.NET



181

queries cần thiết, như là Insert, Update, và Delete.

DataReader Đối tượng này tạo một read-only, forward-only stream của

dữ liệu mà cho phép chúng đặt trên các điều khiển, như ListBox

và ComboBox.

Parameter Đây là đối tượng cho phép chỉ định các tham số mà các đối

tượng DataAdapter có thể chỉ định và sử dụng

Ngoài ra, hai tên miền con khác cũng tồn tại trong tên miền System.Data,

đó là: System.Data.OracleClient và System.Data.Odbc. Trong đó, namespace

System.Data.OracleClient được sử dụng dành cho các CSDL Oracle. Các lớp

SqlClient cung cấp các kết quả tốt nhất khi làm việc với các SQL Server

databases; OracleClient cung cấp thực thi tối ưu khi truy cập vào Oracle

databases. Namespace System.Data.Odbc cung cấp truy cập tới ODBC (Open

Database Connectivity) data sources cũ mà không được support bởi công nghệ

OleDb.

Như vậy, các tên miền System.Data.SqlClient, System.Data.OleDb,

System.Data.OracleClient, và System.Data.Odbc được biết như là data

providers trong ADO.NET.

Trong ADO.NET, các data providers khác nhau làm việc theo một cách

thức tương tự nhau. Vì vậy ta không cần thiết phải học tất cả các interface mới,

bởi vì tất cả các data providers làm việc theo một cách thức tương tự nhau.

Trong phần này trọng tâm tìm hiểu lớp System.Data.SqlClient để làm việc với

Database xây dựng trên SQL Server. Với ADO.NET, ta sử dụng data provider

này là phù hợp nhất cho data source của ta. Các kỹ xảo ta sử dụng ở đây có thể

được dễ dàng chuyển giao cho các lớp với nhau, chẳng hạn như giữa SQL

Server.NET data provider và OLE DB.NET data provider chỉ khác nhau bởi hai

từ SQL server và OLEDB.

3.4. Các lớp SqlClient trong mô hình ADO.NET

Danh sách sau chứa các classes ADO.NET mà chúng sẽ được sử dụng

trong quá trình xây dựng ứng dụng sử dụng SQL Server Databases:

� SqlConnection



182

� SqlDataAdapter

� SqlCommand

� SqlParameter

� SqlDataReader

Chú ý: Chúng là các SqlClient cụ thể, trừ namespace OleDb có rất nhiều

close tương đương. Mỗi khi ta muốn sử dụng lớp classes này, ta phải add một

tham chiếu tới tên miền System.Data. Để đơn giản, ta có thể sử dụng từ khóa

Imports, và lúc đó ta không cần phải điền đầy đủ các thành phần tên miền của

SqlClient trong code, như đoạn code sau:

<%@ Import Namespace="System.Data.SqlClient" %>

Nếu ta muốn sử dụng lõi của classes ADO.NET, như là DataSet và DataView

không cần gõ đầy đủ tên miền, ta cần phải Import the tên miền System.Data, như

đoạn code tiếp theo:

<%@ Import Namespace="System.Data" %>

Ta nên quen thuộc với việc import các tên miền khác nhau trong project

của ta. Tuy nhiên, để tìm hiểu được một cách toàn diện ta sẽ phủ chúng khi thực

hành các ví dụ. Bây giờ, ta xem xét các classes chính tồn tại trong namespace

System.Data.SqlClient.

3.4.1. Class SqlConnection

Class SqlConnection có thể coi là “trái tim” của các classes mà ta sẽ thảo

luận trong phần này, bởi vì nó cung cấp một connection tới SQL Server

database.

Khi xây dựng một đối tượng SqlConnection, ta có thể chọn để chỉ định một

chuỗi kết nối (connection strings) như một tham số. Chuỗi connection chứa tất

cả các thông tin cần thiết để mở một connection tới your database. Nếu ta không

chỉ định chuỗi kết nối trong khi xây dựng, ta có thể thiết lập nó bằng việc sử

dụng thuộc tính SqlConnection.ConnectionString.

Ta xem xét các chuỗi connection strings làm việc như thế nào?

* Các tham số của chuỗi kết nối (Connection String Parameters)



183

Phương thức để chuỗi connection string được xây dựng sẽ phụ thuộc vào

data provider gì ta đang sử dụng. Khi truy xuất SQL Server, ta thường cung

cấp Server và Database, được chỉ dẫn theo bảng 3.3. sau:

Bảng 3.3. Tham số của chuỗi kết nối.

Tham số Mô tả

Server

Tên của SQL Server mà ta muốn truy xuất. Nó thường

là tên của máy tính đang chạy SQL Server. Ta có thể sử

dụng (local) hoặc localhost nếu SQL Server trên cùng một

máy đang chạy ứng dụng. Nếu bạn sử dụng các thể hiện tên

của SQL Server, thì tham số nên chứa tên của máy tính theo

sau là đấu gạch chéo ngược và tiếp đó là thể hiện tên của

SQL Server.

Database Là tên của database mà ta muốn connect tới.

Ta cũng cần một vài thông tin về authentication và thực hiện theo hai cách:

bằng cách cung cấp username và password trong chuỗi kết nối (connection

strings) hoặc bằng cách kết nối tới SQL Server sử dụng NT account mà ứng

dụng đang chạy trong đó.

Nếu ta muốn connect tới server bằng việc chỉ định username và password,

ta cần tính đến các parameters đó trong chuỗi kết nối connection, được cho trong

bảng 3.4. sau:

Bảng 3.4. Tham số của chuỗi kết nối.

Tham số Mô tả

User ID

Username sử dụng để connect tới database. account với

user ID này phải tồn tại trong SQL Server và được phép truy

cập đến database chỉ định.

Password Là password của user đã chỉ định.

Tuy nhiên, SQL Server có thể được thiết lập sử dụng Windows NT account

của user người đang chạy chương trình để mở connection. Trong trường hợp

này, ta không cần chỉ định username và password. Ta chỉ cần phải chỉ định nó

khi ta đang sử dụng integrated security (security kết hợp - Phương thức này



184

được gọi là security kết hợp bởi vì SQL Server đang được kết hợp với Windows

NT’s security system và cung cấp connection an toàn nhất bởi vì các tham số

User ID và Password parameters phải được chỉ định trong code). Ta sử dụng

tham số Integrated Security này, và thiết lập là True khi ta muốn connect SQL

Server đang sử dụng user’s NT account hiện tại. Tất nhiên, với các làm việc này,

user của ứng dụng phải được cho phép sử dụng SQL Server database. Giả dụ

như là đang sử dụng SQL Server Enterprise Manager.

Để hiểu chức năng của các tham số này trong chuỗi kết nối ta khởi tạo một

đối tượng connection, xét đoạn code sau. Nó sử dụng lớp SqlConnection để khởi

tạo một đối connection mà được sử dụng chỉ định user ID và password trong

chuỗi kết nối:

‘VB Dim strconn As String="server=THUHUONG;database=QLDiemSV;

user id=sa;password=pass2008"

Dim objConnection As New SqlConnection(strconn)

// C#

string strconn="server=THUHUONG;database=QLDiemSV; user id=sa;password=pass2008";

SqlConnection objConnection = new

SqlConnection(strconn);

Chuỗi kết nối này sẽ connects tới SQL Server database. Tham số Server chỉ

định là database nằm trên máy THUHUONG. Tham số Database chỉ định

database mà ta muốn truy cập, trong trường hợp này là database QLDiemSV.

Cuối cùng, các tham số User ID và Password chỉ định User ID và password của

user định nghĩa trên database. Ta thấy rằng, mỗi một tham số được gán một giá

trị qua dấu =, và mỗi cặp parameter - value được phân cách nhau nhau bởi dấu

chấm phảy. Hoặc

‘VB

Dim objConnection As SqlConnection = New _

SqlConnection(“Server=localhost;Database=pubs;” & _

“User ID=sa;Password=vbdotnet;”)

/// C#


SqlConnection((“Server=localhost;Database=pubs;” & _

“User ID=sa;Password=vbdotnet;”);



185

Chuỗi kết nối này sẽ connects tới SQL Server database. Tham số Server chỉ

định là database nằm trên máy local. Tham số Database chỉ định database mà ta

muốn truy cập là database pubs. Cuối cùng, các tham số User ID và Password

chỉ định User ID và password của user định nghĩa trên database.

Ta nên khai báo chuỗi kết nối trong tệp web.config như sau:

- Sử dụng <appSettings> <appSettings> <add key="conn" value="server=HP520-9B01514BF;database=QLBanHang; user id=sa;password=Pass2008" />

</appSettings>

Sau đó sử dụng hàm ConfigurationManager.AppSettings("Conn") để

lấy chuỗi kết nối đó:

‘ VB

Dim strConn As String

'Lấy chuỗi kết nối CSDL

strConn = ConfigurationManager.AppSettings("Conn")

Dim myConn As New SqlConnection(strConn)

//C#

string strconn= ConfigurationManager.AppSettings["Conn"].ToString();


SqlConnection(strconn);

- Sử dụng <appSettings> <connectionStrings> <add name="MyConn" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=QLBanHang;User ID=sa;Password=12102006"

</connectionStrings>

Sau đó sử dụng hàm ConfigurationManager. ConnectionStrings

("MyConn").ToString để lấy chuỗi kết nối đó:

‘VB



strConn=ConfigurationManager.ConnectionStrings("MyConn").To

String

Dim myConn As New SqlConnection(strConn)



186

‘C# string strConn;

strConn =

ConfigurationManager.ConnectionStrings["TestABCConnectionString"].ToSt

ring();

* Mở và đóng Connection

Sau khi khởi tạo đối tượng connection với một chuỗi connection như đã

trình bày ở phần trước, ta có thể gọi các phương thức của đối tượng

SqlConnection như là Open và Close, thậm chí open và close một

connection tới database được chỉ định trong chuỗi kết nối connection. Ví dụ,

cho đoạn code sau:

' Open the database connection objConnection.Open() ' ... Use the connection ' Close the connection...

objConnection.Close()

Chú ý rằng, SqlConnection chỉ thuần tuý sử dụng cho cơ sở dữ liệu SQL

Server 7.0 hay các phiên bản SQL sau này, trong lúc đó OleDbConnection sử

dụng cho hầu hết các cơ sở dữ liệu SQL Server phiên bản 6.5 về trước,

Microsoft Accesss và tập tin văn bản, bảng tính,.v.v...

Như đã trình bày ở trên, cả hai lớp kết nối SqlConnection và

OleDbConnection đều có mục đích như nhau. Tuy nhiên, đối với

OleDbConnection phụ thuộc vào nguồn dữ liệu kết nối, bởi lẽ đối tượng này cho

phép kết nối nhiều loại dữ liệu. Như vậy, để kết nối CSDL Access ta dùng lớp

OleDbConnection, OleDbCommand và OleDbDataReader. Chuỗi kết nối

CSDL Access như sau:

<appSettings> <add key="accessconn" value="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="/>

</appSettings>

Và kết nối với CSDL như sau:

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)



strConn = ConfigurationManager.AppSettings("accesscon")

strConn+= Request.ServerVariables("APPL_PHYSICAL_PATH")



187

strConn += "mydb.mdb" myConn = New OleDbConnection(strConn) myConn.Open()

End Sub

3.4.2. Class SqlCommand

Lớp SqlCommand đại diện cho các câu lệnh SQL để thực hiện truy vấn dữ

liệu lưu trữ. Các câu lệnh là truy vấn select, insert, update, hoặc delete,.v.v… Có

thể là các chuỗi SQL hoặc gọi một stored procedure. Và truy vấn được thực

hiện có thể chứa các tham số hoặc không chứa các tham số.

Kiến trúc của lớp SqlCommand có một vài biến số, nhưng phương thức

đơn giản nhất để khởi tạo một đối tượng SqlCommand với không tham số

(parameters). Tiếp theo, sau khi đối tượng đã được khởi tạo, ta có thể thiết lập

các thuộc tính ta cần để thực hiện các thao tác sắp tới. Đoạn code sau cho phép

khởi tạo một đối tượng SqlCommand:

‘VB

Dim objCommand As SqlCommand = New SqlCommand()

‘C#

SqlCommand objCommand =new SqlCommand()

Khi sử dụng các data adapters (bộ điều hợp dữ liệu) và datasets, không cần

gọi nhiều các đối tượng của chúng. Chúng có thể chủ yếu được sử dụng cho việc

thực thi một câu lệnh select, delete, insert, hoặc update, mà đó là những gì ta đề

cập trong chương này. Ta cũng có thể sử dụng các đối tượng command với data

reader. Một data reader là một lựa chọn khác với DataSet mà nó sử dụng một

vài tài nguyên hệ thống nhưng kém mềm dẻo.

* Thuộc tính Connection

Một vài thuộc tính phải được thiết lập trên đối tượng SqlCommand trước

khi ta có thể thực hiện một câu truy vấn. Thuộc tính đầu tiên trong các thuộc

tính này đó là thuộc tính Connection. Thuộc tính này thiết lập tới đối tượng

SqlConnection như trong đoạn code sau:

objCommand.Connection = objConnection



188

Chú ý: Để câu lệnh được thực hiện thành công, thì connection phải được

mở ở thời điểm thực hiện.

* Thuộc tính CommandText

Thuộc tính tiếp theo phải được thiết lập đó là thuộc tính CommandText.

Thuộc tính này chỉ định chuỗi SQL hoặc stored procedure sẽ được thực hiện.

Hầu hết các databases quy định đặt các các giá trị của chuỗi trong cặp dấu “ các

giá trị của chuỗi “, ví dụ:

Dim objConnection As New SqlConnection _

("server=THUHUONG;database=QLDiemSV;" &_

"user id=sa;password=pass2008")

Dim objCommand As SqlCommand = New SqlCommand() ' Open the connection, execute the command objConnection.Open() ' Set the SqlCommand object properties... objCommand.Connection = objConnection objCommand.CommandText = "INSERT INTO HOSOSV " & _ "(MaSV, HoDem, TenSV, NgaySinh, MaLop) " & _ "VALUES(‘SV001’,’Nguyen Thi’,’Hoa’,’12/8/1988’,’TH05’)"

Câu lệnh INSERT chỉ đơn giản nghĩa là “chèn một hàng mớí vào bảng

HOSOSV. Trong đó cột MaSV nhận giá trị ‘SV001’, HoDem nhận giá trị

’Nguyen Thi’, TenSV nhận giá trị ’Hoa’, NgaySinh nhận giá trị

’12/8/1988’ và cột MaLop nhận giá trị ’ TH05’.”

Với cách cơ bản này các câu lệnh INSERT làm việc trong SQL. Ta có theo

sau INSERT INTO là tên của bảng. Tiếp là một danh sách tên các cột trong cặp

dấu ngoặc đơn. Tiếp theo nữa là từ khóa VALUES là danh sách các giá trị được

chèn vào cột theo đúng thứ tự.

Trong ví dụ trên, với các giả thiết là ta biết các giá trị để chèn trong khi

thực hiện chương trình, thường là không có thực trên hầu hết các ứng dụng.

Cũng may, ta cũng có thể tạo các câu lệnh với các tham số và thiết lập giá trị

cho các tham số đó một cách độc lập. Ta sẽ tìm hiểu cách sử dụng các tham số

đó như thế nào trong phần Parameters Collection.

* Parameters Collection

Placeholders, ký hiệu @, là tiền tố các biến trong các câu lệnh SQL; Chúng

được điền vào trước các tham số. Như vậy, nếu ta muốn cập nhật bảng HOSOSV



189

được mô tả trong ví dụ trước nhưng không biết các giá trị tại thời điểm thiết kế,

ta chỉ cần viết:




Dim objCommand As SqlCommand = New SqlCommand() ' Open the connection, execute the command objConnection.Open() ' Set the SqlCommand object properties... objCommand.Connection = objConnection objCommand.CommandText = "INSERT INTO HOSOSV " & _ "(MaSV, HoDem, TenSV, NgaySinh, MaLop) " & _ "VALUES(@MaSV,@Hodem,@TenSV,@NgaySinh,@MaLop)"

Ở đây, thay vì cung cấp các giá trị cụ thể, ta cung cấp các placeholders.

Placeholders, như đã đề cập, luôn xuất hiện với ký hiệu @. Chúng không cần

được đặt trước tên các trường trong các bảng của database mà chúng thể hiện,

nhưng thường đơn giản hơn nếu ta sử dụng tên tham số trùng với tên trường dữ

liệu, vì nó thường tốt hơn cho chính các văn bản code của ta.

Tiếp theo, ta cần tạo các tham số mà sẽ được sử dụng để truyền giá trị cho

các placeholders khi câu lệnh SQL được thực hiện. Ta cần phải create và add

các tham số vào Parameters collection của đối tượng SqlCommand. Thuật ngữ

parameters chỉ các tham số cần thiết cho câu lệnh SQL hoặc stored procedure,

không chỉ các tham số được quy định chuyển để chuyển sang các phương thức

của Visual Basic 2005.

Ta có thể truy cập vào tập Parameters collection của đối tượng

SqlCommand bằng việc chỉ định thuộc tính Parameters. Sau khi truy cập vào

tập Parameters collection, ta có thể sử dụng các thuộc tính và các phương thức

của nó để tạo một hoặc nhiều hơn các tham số trong collection. Cách tốt nhất để

add một tham số tới câu lệnh được mô tả trong ví dụ sau:




Dim objCommand As SqlCommand = New SqlCommand() ' Open the connection, execute the command objConnection.Open() ' Set the SqlCommand object properties... objCommand.Connection = objConnection objCommand.CommandText = "INSERT INTO HOSOSV " & _



190

"(MaSV, HoDem, TenSV, NgaySinh, MaLop) " & _ "VALUES(@MaSV,@Hodem,@TenSV,@NgaySinh,@MaLop)" ' Add parameters for the placeholders in the SQL in the objCommand.Parameters.AddWithValue("@MaSV", txtMaSV.Text) objCommand.Parameters.AddWithValue("@Hodem", txtHodem.Text) objCommand.Parameters.AddWithValue("@TenSV", txtTenSV.Text) objCommand.Parameters.AddWithValue("@NgaySinh",_

txtNgaySinh.Text).DbType = DbType.Date

objCommand.Parameters.AddWithValue("@MaLop", cboMaLop.Text)

- Phương thức AddWithValue thừa nhận tên của tham số và giá trị ta muốn

truyền cho tham số. Trong trường hợp này, ta sử dụng thuộc tính Text của đối

tượng Text box trên cùng một Form.

- Phương thức Add được sử dụng để khai báo tham số và truyền giá trị cho

tham số sử dụng thuộc tính Value của tham số đó. objCommand.Parameters.Add("@Address", Data.SqlDbType.NVarChar, 255) objCommand.Parameters("@Address").Value = txtAddress.Text

* Phương thức ExecuteNonQuery

Cuối cùng, ta có thể thực hiện các câu lệnh. Để làm điều này, connection

cần phải được mở. Ta có thể gọi phương thức ExecuteNonQuery của đối tượng

SqlCommand. Phương thức này thực hiện câu lệnh SQL và là nguyên nhân dữ

liệu được chèn vào database. Để hoàn thành đoạn code, ta phải mở connection,

thực hiện query, và đóng connection trở lại:




Dim objCommand As SqlCommand = New SqlCommand() ' Set the SqlCommand object properties... objCommand.Connection = objConnection objCommand.CommandText = "INSERT INTO HOSOSV " & _ "(MaSV, HoDem, TenSV, NgaySinh, MaLop) " & _ "VALUES(@MaSV,@Hodem,@TenSV,@NgaySinh,@MaLop)" ' Add parameters for the placeholders in the SQL in the objCommand.Parameters.AddWithValue("@MaSV", txtMaSV.Text) objCommand.Parameters.AddWithValue("@Hodem", txtHodem.Text) objCommand.Parameters.AddWithValue("@TenSV", txtTenSV.Text) objCommand.Parameters.AddWithValue("@NgaySinh",_

txtNgaySinh.Text).DbType = DbType.Date

objCommand.Parameters.AddWithValue("@MaLop", cboMaLop.Text)



191

' Open the connection, execute the command objConnection.Open() ' Execute the SqlCommand object to insert the new data... Try

objCommand.ExecuteNonQuery() Catch SqlExceptionErr As SqlException

MessageBox.Show(SqlExceptionErr.Message) End Try ' Close the connection... objConnection.Close()

* Phương thức ExecuteReader

Trái với phương thức ExecuteNonQuery, phương thức ExecuteReader của

đối tượng SqlCommand sẽ thực hiện truy vấn trả về kết quả trên đối tượng

DataReader. Và dữ liệu trên DataReader thường được đổ sang

các điều khiển ListBox, ComboBox trên form ứng dụng.

' Declare local variables and objects... Dim objCommand As SqlCommand = New SqlCommand() Dim objDataReader As SqlDataReader ' Open the connection, execute the command objConnection.Open() ' Set the SqlCommand object properties... objCommand.Connection = objConnection objCommand.CommandText = "Select MaLop, TenLop From Lop" ' Execute the SqlCommand object to insert the new data... objDataReader = objCommand.ExecuteReader cboMaLop.Items.Clear() Do While (objDataReader.Read()) cboMaLop.Items.Add(objDataReader.Item(0)) Loop ' Close the connection... objConnection.Close()

* Phương thức ExecuteScalar

Là phương thức trả về một giá trị vô hướng. cmd.CommandText = " Select OrderID From Orders " & _ "Where(MemberName=@MemberName) and (OrderDate=@OrderDate) and (CustomerName=@CustomerName)and (Address=@Address) and (County=@County) and (PostCode=@PostCode) and (Country=@Country) and (SubTotal=@SubTotal) and (Discount=@Discount) and ( Total=@Total)" Dim OrderID As Integer OrderID = Convert.ToInt32(cmd.ExecuteScalar())

3.4.3. Class SqlDataAdapter



192

Lớp SqlDataAdapter tương tự như lớp OleDbDataAdapter. Điểm khác

nhau chính là OleDbDataAdapter có thể truy cập vào bất cứ data source được

supports OLE DB, trong khi SqlDataAdapter chỉ supports cho SQL Server

databases. Ta có thể sử dụng trong cùng một cách như nhau; ta có thể cấu hình

SqlDataAdapter sử dụng wizards, giống như là cấu hình cho OleDbDataAdapter

(được cung để ta đang truy xuất vào SQL Server data source), ta sẽ trình bày

trong ví dụ minh họa cụ thể ở phần sau. Trong phần này, ta tìm hiểu cách cấu

hình và sử dụng SqlDataAdapter trong code, những nguyên tắc này cũng có thể

áp dụng cho OleDbDataAdapter.

Data adapters hoạt động như một cầu nối giữa data source và các đối

tượng lưu dữ liệu trong bộ nhớ, như là DataSet. Để truy xuất data source, chúng

sử dụng các đối tượng command, ta đã xem xét ở trên. Các đối tượng command

này liên quan đến các connections, vì vậy data adapter này dựa vào các đối

tượng command và connection để truy xuất và điều khiển data source.

Thuộc tính SelectCommand của lớp SqlDataAdapter được sử dụng nắm giữ

một SqlCommand để gọi dữ liệu từ data source. Sau đó data adapter đẩy kết

quả của truy vấn vào DataSet hoặc DataTable.

SqlDataAdapter cũng có các thuộc tính UpdateCommand,

DeleteCommand, and InsertCommand. Chúng cũng là các đối tượng

SqlCommand, được sử dụng để ghi các thay đổi với DataSet hoặc DataTable

quay trở lại data source. Vấn đề này có thể thấy phức tạp, nhưng các tools thực

tế rất dễ sử dụng. Ta đã học các câu lệnh SQL trong chương trước để viết

SelectCommand, và các tools được gọi command builders mà ta có thể tạo một

cách tự động các câu lệnh khác dựa trên chúng.

Xét thuộc tính SelectCommand và xét xem ta có thể tạo các câu lệnh cho

việc updating, deleting, và inserting records như thế nào.

* Thuộc tính SelectCommand

Thuộc tính SelectCommand của lớp SqlDataAdapter được dùng để đẩy dữ

liệu vào từ SQL Server database DataSet, như hình vẽ Hình 3.3.



193

Khi ta muốn đọc dữ liệu từ kho dữ liệu, đầu tiên ta phải thiết lập thuộc tính

SelectCommand của lớp SqlDataAdapter. Thuộc tính này là đối tượng

SqlCommand và nó được dùng để chỉ định dữ liệu được select và select dữ liệu

như thế nào. Vì vậy, thuộc tính SelectCommand cũng có các thuộc tính của nó,

và ta cần thiết lập chúng như là thiết lập các thuộc tính trên các câu lệnh thông

thường. Ta đã xem xét các thuộc tính sau của đối tượng SqlCommand:

� Connection: Thiết lập đối tượng SqlConnection để truy xuất vào

data store.

� CommandText: Thiết lập các câu lệnh SQL hoặc tên stored

procedure được sử dụng để selectdữ liệu.

Trong các ví dụ trước của các đối tượng SqlCommand, ta đã sử dụng trực

tiếp các câu lệnh SQL. Nếu ta muốn sử dụng các stored procedures, ta cần phải

sử dụng thêm thuộc tính CommandType, thuộc tính này thiết lập một giá trị xác

định xem thuộc tính CommandText được biên dịch như thế nào.

Trong chương này, ta tập trung vào các câu lệnh SQL, nhưng các stored

procedures thường cũng rất hữu dụng, đặc biệt là nếu chúng đã tồn tại trên

database. Nếu ta muốn sử dụng chúng, thì thiết lập thuộc tính CommandText với

tên của stored procedure (chú ý là phải được đóng trong cặp dấu ngoặc kép “tên

Hình 3.3. Thuộc tính Select Command



194

của stored procedure hoặc chuỗi SQL “ bởi trình trình biên dịch biên dịch chúng

như là một string), và thiết lập thuộc tính CommandType thành

CommandType.StoredProcedure.

� Thiết lập SelectCommand với một chuỗi SQL

Xét xem làm thế nào, ta có thể thiết lập các thuộc tính trên trong code.

Đoạn code sau cho ta thấy các cách thiết lập điển hình khi thực hiện chuỗi SQL

string:

‘ Declare a SqlDataAdapter object... Dim objDataAdapter As New SqlDataAdapter() ‘ Assign a new SqlCommand to the SelectCommand property objDataAdapter.SelectCommand = New SqlCommand() ‘ Set the SelectCommand properties... objDataAdapter.SelectCommand.Connection = objConnection objDataAdapter.SelectCommand.CommandText = _ “SELECT MaSV, HoDem, TenSV, FROM HOSOSV ORDER BY TenSV, Hodem”

Đầu tiên trong đoạn code trên khai báo đối tượng SqlDataAdapter. Đối

tượng này có thuộc tính SelectCommand được thiết lập bằng SqlCommand; Ta

chỉ cần thiết lập các thuộc tính của command. Ta thiết lập các thuộc tính bằng

việc thiết lập thuộc tính Connection, để đối tượng connection được hợp lệ thì nó

phải được tạo trước đoạn code trên. Tiếp theo, ta thiết lập các thuộc tính của

thuộc tính CommandText bằng các câu lệnh SQL SELECT.

� Thiết lập SelectCommand với một Stored Procedure

Trong đoạn code tiếp theo, ta tìm hiểu cách thiết lập các thuộc tính trên khi

sử dụng để thực hiện một stored procedure. Một stored procedure là một nhóm

các câu lệnh SQL và đã được lưu trữ trong database dưới một tên duy nhất và

được thực hiện như một unit. stored procedure trong ví dụ này

(usp_select_DSSV) sử dụng cùng câu lệnh SQL ta đã sử dụng trong phần trước:

‘ Declare a SqlDataAdapter object... Dim objDataAdapter As New SqlDataAdapter() ‘ Assign a new SqlCommand to the SelectCommand property objDataAdapter.SelectCommand = New SqlCommand() ‘ Set the SelectCommand properties... objDataAdapter.SelectCommand.Connection = objConnection objDataAdapter.SelectCommand.CommandText = “usp_select_DSSV” objDataAdapter.SelectCommand.CommandType = CommandType.StoredProcedure



195

Thuộc tính CommandText bây giờ được chỉ định bằng tên của stored

procedure mà ta muốn thực hiện thay vì chuỗi SQL đã được chỉ định trong ví dụ

trước. Cũng phải chú ý đến thuộc tính CommandType. Trong ví dụ trước ta

không cần phải chuyển đổi thuộc tính này, bởi vì nó được mặc định là

CommandType.Text, mà ta cần thiết lập để thực hiện các câu lệnh SQL. Trong

ví dụ này, ta phải thiết lập giá trị CommandType.StoredProcedure, để chỉ dẫn

rằngthuộc tính CommandText chứa tên của stored procedure để thực hiện.

Sử dụng Command Builders để tạo các Commands khác

SelectCommand là tất cả những gì ta cần thiết để chuyển dữ liệu từ

database vào DataSet. Sau khi ta cho phép các users thay đổi đối với DataSet, ta

muốn ghi những thay đổi đó trở lại database. Ta có thể làm điều này bằng việc

điều chỉnh các đối tượng câu lệnh SQL cho các công việc inserting, deleting,

and updating. Một lựa chọn khác, ta có thể sử dụng các stored procedures. Cả

hai giải pháp phụ thuộc vào sự am hiểu về SQL. Rất may là, có một cách đơn

giản hơn, ta có thể sử dụng command builders để tạo các câu lệnh này. Nó chỉ

có một dòng trong các dòng sau:

‘ Declare a SqlDataAdapter object... Dim objDataAdapter As New SqlDataAdapter() ‘ Assign a new SqlCommand to the SelectCommand property objDataAdapter.SelectCommand = New SqlCommand() ‘ Set the SelectCommand properties... objDataAdapter.SelectCommand.Connection = objConnection objDataAdapter.SelectCommand.CommandText = “usp_select_DSSV” objDataAdapter.SelectCommand.CommandType = CommandType.StoredProcedure

‘ automatically create update/delete/insert commands Dim objCommandBuilder As SqlCommandBuilder = New _ SqlCommandBuilder(objDataAdapter)

Như vậy, ta có thể sử dụng SqlDataAdapter để ghi những thay đổi dữ liệu

trở lại database. Ta tìm hiểu kỹ hơn về vấn đề này trong phần ví dụ minh họa.

Để hiểu, ta xét các phương thức mà lấy dữ liệu từ database đẩy vào

DataSet:Phương thức Fill .

* Phương thức Fill

Ta dùng phương thức Fill để dữ liệu đẩy dữ liệu mà đối tượng

SqlDataAdapter sử dụng SelectCommand của nó lấy từ kho lưu trữ dữ liệu vào

đối tượng DataSet. Tuy nhiên, trước khi làm điều đó, ta phải khởi tạo đối tượng



196

DataSet. Để sử dụng đối tượng DataSet trong project của ta, ta phải add một

tham chiếu tới System.Xml.

‘ Declare a SqlDataAdapter object... Dim objDataAdapter As New SqlDataAdapter()

‘ Assign a new SqlCommand to the SelectCommand property objDataAdapter.SelectCommand = New SqlCommand()

‘ Set the SelectCommand properties... objDataAdapter.SelectCommand.Connection = objConnection objDataAdapter.SelectCommand.CommandText = “usp_select_DSSV” objDataAdapter.SelectCommand.CommandType = CommandType.StoredProcedure Dim objDataSet as DataSet = New DataSet()

Ta có hai đối tượng DataSet và SqlDataAdapter, có thể điền dữ liệu vào

DataSet. Phương thức Fill có nhiều phiên bản, nhưng ta sẽ chỉ xét thảo luận một

phiên bản hay được sử dụng nhiều nhất. Cú pháp của phương thức Fill được cho

như sau:

SqlDataAdapter.Fill(DataSet, string)

Đối số DataSet chỉ định một đối tượng DataSet hợp lệ mà dữ liệu được lưu

trữ ở trong đó. Đối số string gán với tên mà ta muốn bảng có trong DataSet. Chú

ý rằng, một DataSet có thể chứa nhiều bảng. Ta có thể sử dụng bất cứ tên nào ta

muốn, nhưng thường tốt nhất là sử dụng tên của các bảng nơi mà dữ liệu trong

database đến. Nó giúp cho văn bản code của ta và làm cho code dễ bảo trì.

Đoạn code sau gọi phương thức Fill. Chuỗi “authors” được chỉ định là đối

số string. Nó là tên ta muốn sử dụng khi đang thao tác trong các phiên bản nhớ

của bảng này; nó cũng là tên của bảng trong data source.

‘ Declare a SqlDataAdapter object... Dim objDataAdapter As New SqlDataAdapter()

‘Create an instance of a new select command object objDataAdapter.SelectCommand = New SqlCommand()

‘ Set the SelectCommand properties... objDataAdapter.SelectCommand.Connection = objConnection objDataAdapter.SelectCommand.CommandText = “usp_select_DSSV” objDataAdapter.SelectCommand.CommandType = CommandType.StoredProcedure Dim objDataSet as DataSet = New DataSet()

‘ Fill the DataSet object with data... objDataAdapter.Fill(objDataSet, “DSSV”)



197

Phương thức Fill sử dụng thuộc tính SelectCommand.Connection để

connect tới database. Nếu connection đã được mở, data adapter sẽ sử dụng nó để

thực hiện SelectCommand. Và nếu như connection đã đóng thì data adapter sẽ

mở nó, thực hiện SelectCommand, và sau đó đóng trở trở lại. Bây giờ ta đã có

dữ liệu trong bộ nhớ, và có thể bắt đầu thao tác nó không phụ thuộc vào data

source.

Chú ý: Lớp DataSet không có Sql tại vị trí bắt dầu tên lớp của nó. Bởi vì

DataSet không trong namespace System.Data.SqlClient, nó nằm trong lớp cha

namespace System.Data. Các lớp trong tên miền này có liên quan căn bản với

thao các dữ liệu trong bộ nhớ.

Một lần nữa, ta đã có dữ liệu được load vào DataSet, không có tính chất

quan trọng nữa là data source đến từ gì (trừ khi ta muốn ghi trở lại). Ta hãy xét

hai trong các lớp trong namespace: DataSet và DataView.

3.4.4. Class DataSet

Lớp DataSet được dùng để lưu trữ dữ liệu được lấy từ một kho dữ liệu và

lưu trữ dữ liệu trong bộ nhớ trên client. Đối tượng DataSet chứa một tập các

tables, relationships, và các ràng buộc constraints thích hợp với dữ liệu đọc từ

kho dữ liệu. Nó hoạt động như một bộ máy database gọn nhẹ, cho phép ta lưu

trữ tables, edit data, và chạy các queries dựa vào việc sử dụng đối tượng

DataView.

Dữ liệu trong DataSet không được connect từ kho dữ liệu, và ta có thể làm

việc với dữ liệu độc lập với kho dữ liệu. Ta có thể thao tác dữ liệu trong đối

tượng DataSet bằng việc adding, updating, và deleting the records. Ta có thể áp

các thay đổi này quay trở lại kho dữ liệu gốc sau đó sử dụng data adapter.

Dữ liệu trong đối tượng DataSet được duy trì trong Extensible Markup

Language (XML), nghĩa là ta có thể save DataSet như là một file hoặc đơn giản

chuyển nó trên network. XML được bảo vệ từ ta, những người phát triển, và

chúng không bao giờ nên edit trực tiếp XML. Tất cả các thao tác editing XML

được thực hiện thông qua các thuộc tính và các phương thức của lớp DataSet.

Nhiều nhà phát triển thích sử dụng XML và lựa chọn để thao tác XML biểu diễn

trực tiếp DataSet, nhưng điều này không cần thiết.

3.4.5.DataView



198

Lớp DataView được sử dụng tiêu biểu cho việc sorting, filtering, searching,

editing, và navigating dữ liệu từ DataSet. Một DataView là bindable, nghĩa là nó

có thể bị buộc vào các điều khiển giống như cách DataSet bị buộc vào các điều

khiển. Hơn nữa, ta sẽ tìm hiểu nhiều hơn về cách buộc dữ liệu trong code trong

phần tiếp theo của chương.

Một DataSet có thể chứa một số các đối tượng DataTable; khi ta sử dụng

phương thức Fill của lớp SqlDataAdapter để add dữ liệu vào DataSet, như vậy ta

đã thực sự đang tạo một đối tượng DataTable bên trong DataSet này. DataView

cung cấp view thông dụng của DataTable; ta có thể sắp xếp và lọc dữ liệu, như

ta thực hiện trên truy vấn SQL.

Ta có thể tạo một DataView từ dữ liệu được chứa trong DataTable mà đang

chỉ chứa dữ liệu mà ta muốn hiển thị. Ví dụ, nếu dữ liệu trong DataTable chứa

tất cả các Sinh viên được sắp xếp bởi Tên và Họ đệm, ta có thể tạo một

DataView chứa tất cả Sinh viên được sắp xếp bở Tên và sau đó là Họ đêm.

Hoặc, nếu muốn, ta có thể tạo một DataView chỉ chứa một vài sinh viên chứa

tên nào đó.

Mặc dù ta có thể view dữ liệu trong DataView trong nhiều cách khác nhau

từ DataTable cơ bản, nó vẫn là cùng dữ liệu. Các thay đổi với DataView ảnh

hưởng tới DataTable cơ bản một cách tự động và các thay đổi với DataTable cơ

bản tự động ảnh hưởng bất kỳ đối tượng DataView mà đang hiển thị DataTable

đó.

Kiến trúc cho lớp DataView khởi tạo một thể hiện mới của lớp DataView

và lấy DataTable là một đối số. Đoạn code sau khai báo một đối tượng

DataView và khởi tạo nó đang sử dụng bảng HosoSV từ DataSet có tên là

objDataSet. Chú ý rằng code đó truy cập vào tập hợp Tables của đối tượng

DataSet, bằng việc chỉ định thuộctính Tables và tên bảng:

‘ Set the DataView object to the DataSet object... Dim objDataView = New DataView(objDataSet.Tables(“HosoSV”))

* Thuộc tính Sort

Khi DataView đã được khởi tạo và hiển thị dữ liệu, ta có thể thay đổi view

của dữ liệu đó. Ví dụ, giả sử ta muốn sắp xếp dữ liệu khác với thứ tự trong

DataSet. Để sắp xếp dữ liệu trong DataView, ta thiết lập thuộc tính Sort và chỉ



199

định cột hoặc các cột mà ta muốn sắp xếp. Đoạn code sau sẽ sắp xếp dữ liệu

trong DataView theo Tên và sau đó theo Họ đệm của danh sách Sinh viên: objDataView.Sort = “TenSV, Hodem”

Chú ý: Thuộc tính Sort giống như cú pháp của mệnh đề ORDER BY trong

câu lệnh SQL. Như trong SQL mệnh đề ORDER BY, thao tác sắp xếp trên

DataView thường sắp xếp theo thứ tự mặc định là tăng dần. Nếu ta muốn thay

đổi theo thứ tự sắp xếp giảm, ta cần phải có chỉ định từ khóa DESC: objDataView.Sort = “TenSV, Hodem DESC”

* Thuộc tính RowFilter

Khi đã khởi tạo DataView, ta có thể lọc các dòng dữ liệu mà chúng sẽ

chứa. Nó tương tự như chỉ định trong mệnh đề WHERE của câu lệnh SQL

SELECT; chỉ những hàng thỏa mãn điều kiện sẽ được giữ lại trên view. Dữ liệu

cơ bản không bị ảnh hưởng. Thuộc tính RowFilter chỉ định một điều kiện lọc mà

có thể áp dụng được trên DataView. Cú pháp này cũng tương tự như mệnh đề

SQL WHERE. Nó chứa ít nhất tên một cột, theo sau là một toán tử và giá trị.

Nếu giá trị là string thì nó phải được bao trong cặp dấu ‘nháy đơn’, ví dụ:

‘ Set the DataView object to the DataSet object... objDataView = New DataView(objDataSet.Tables(“HosoSV”)) objDataView.RowFilter = “TenSV = ‘Hoa’”

Nếu bạn muốn lấy lại các ròng trừ các dòng có Tên là =’Hoa’

‘ Set the DataView object to the DataSet object...

objDataView = New DataView(objDataSet.Tables(“authors”))

objDataView.RowFilter = “TenSV <> ‘Hoa’”

Ta cũng có thể chỉ định điều kiện lọc phức tạp hơn như trong SQL. Ví dụ,

sử dụng toán tử AND:

objDataView.RowFilter = “TenSV <> ‘Hoa’ AND Hodem LIKE ‘N*’”

* Phương thức Find

Nếu ta muốn tìm kiếm cho một hàng dữ liệu trong DataView, ta gọi

phương thức Find. Phương thức Find tìm kiếm dữ liệu trong cột khóa sắp xếp

của DataView. Do đó, trước khi gọi phương thức Find, ta trước hết hãy sắp xếp

DataView trên cột chứa dữ liệu mà ta muốn tìm kiếm. Cột trong DataView đã

được sắp xếp trở thành cột khóa sắp xếp trong đối tượng DataView object.



200

Ví dụ, giả sử ta muốn tìm kiếm Sinh viên có TenSV là ‘Anh’. Ta cần sắp

xếp dữ liệu trong DataView theo TenSV và thiết lập cột này thành cột khóa sắp

xếp trong DataView, và sau đó gọi phương thức Find, như đoạn code sau:

Dim intPosition as Integer

objDataView.Sort = “TenSV”

intPosition = objDataView.Find(“Ann”)

Phương thức Find tìm kiếm và trả về vị trí của bản ghi trong DataView.

Trong trường hợp ngược lại, DataView trả về giá trị null nếu không tìm thấy.

Nếu phương thức Find tìm thấy một bản khớp thì nó sẽ dừng tìm kiếm và trả về

vị trí của bản ghi đầu tiên tìm thấy. Nếu ta muốn có nhiều hơn một bản ghi trong

data store, ta phải lọc dữ liệu trong DataView, dữ liệu của ta sẽ được hiển thị.

Phương thức Find không phân biệt dạng chữ, nghĩa là khi tìm Sinh viên có

tên là ‘Hoa’, ta có thể nhập là ‘hoa’.

Phương thức Find tìm chính xác từng cụm từ, nghĩa là ta phải nhập toàn bộ

cụm từ đó. Ví dụ, giả sử ta muốn tìm kiếm Sinh viên có Họ đệm là ‘Đinh

Thanh’ thì ta phải nhập đầy đủ cụm đó.

objDataView.Sort = “Hodem”

intPosition = objDataView.Find(“Đinh Thanh”)

Ta thấy DataView có thể được sắp xếp trên nhiều hơn một cột tại cùng một

thời điểm. Nếu ta muốn sắp xếp nhiều hơn một cột, ta cần cung cấp một mảng

các giá trị để phương thức Find thay cho chỉ một giá trị đơn. Ví dụ, ta muốn tìm

kiếm ‘Đinh Thanh Hoa’ xuất hiện trong DataView:

Dim intPosition As Integer Dim arrValues(1) As Object objDataView.Sort = “Hodem, TenSV” ‘ Find the author named “Simon Watts”. arrValues(0)= “Đinh Thanh” arrValues(1) = “Hoa” intPosition = objDataView.Find(arrValues)

Ví dụ 3.1. Minh họa các đối tượng trong mô hình ADO.NET (vidu3_1.aspx)

<%@ Page Language="VB" %> <%@ Import Namespace="System.Data"%> <%@ Import Namespace="System.Data.SqlClient" %> <script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)



201

' Khai báo các đối tượng Dim myDataSet As New DataSet() Dim myDataview As DataView Dim strConn As String Dim strSQL As String ' Lấy chuỗi kết nối dữ liệu strConn = ConfigurationManager.AppSettings("Conn") Dim myConn As New SqlConnection(strConn) ' Khai báo chuỗi câu lệnh Select strSQL = "SELECT * From Accounts" ' Khai báo đối tượng SqlDataAdapter Dim myDataAdapter As New SqlDataAdapter() myDataAdapter.SelectCommand = New SqlCommand() myDataAdapter.SelectCommand.Connection = myConn myDataAdapter.SelectCommand.CommandText = strSQL myDataAdapter.SelectCommand.CommandType = CommandType.Text ' Mở kết nối myConn.Open() myDataAdapter.Fill(myDataSet, "tblAccounts") myConn.Close() ' Điền dữ liệu từ DataSet vào ASP:DataGrid Control dgrResult.DataSource = myDataSet dgrResult.DataBind() Me.MyGridView.DataSource =myDataSet.Tables("tblAccounts") Me.MyGridView.DataBind() myDataview = New DataView(myDataSet.Tables("tblAccounts"))

myDataview.Sort = "UserName" Me.grvMyDataview.DataSource = myDataview Me.grvMyDataview.DataBind() End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:DataGrid ID="dgrResult" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None"> <Columns>



202

<asp:BoundColumn DataField="UserName" HeaderText=" Tên NSD" ReadOnly="True"> </asp:BoundColumn>

<asp:BoundColumn DataField="Password" HeaderText=" Mật khẩu" ReadOnly="True">

</asp:BoundColumn> <asp:BoundColumn DataField="Address" HeaderText=" Địa chỉ ">

</asp:BoundColumn> </Columns> <FooterStyle BackColor="#507CD1" Font-Bold="True"

ForeColor="White" /> <EditItemStyle BackColor="#2461BF" /> <SelectedItemStyle BackColor="#D1DDF1"

Font-Bold="True" ForeColor="#333333" /> <PagerStyle BackColor="#2461BF" ForeColor="White"

HorizontalAlign="Center" /> <AlternatingItemStyle BackColor="White" /> <ItemStyle BackColor="#EFF3FB" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> </asp:DataGrid><br /> <span style="color: #0000ff">

Thể hiện GidView dùng Dataset.Table </span> <span style="color: #ff00ff"></span><br />

<asp:GridView ID="MyGridView" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">

<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

<RowStyle BackColor="#EFF3FB" /> <EditRowStyle BackColor="#2461BF" /> <SelectedRowStyle BackColor="#D1DDF1"

Font-Bold="True" ForeColor="#333333" /> <PagerStyle BackColor="#2461BF" ForeColor="White"

HorizontalAlign="Center" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView> <span style="color: #0000ff">

Thể hiện Đối tượng DataView<br /> </span> <asp:GridView ID="grvMyDataview" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" > <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#EFF3FB" /> <EditRowStyle BackColor="#2461BF" /> <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> <PagerStyle BackColor="#2461BF" ForeColor="White"

HorizontalAlign="Center" />



203

<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView> </div> </form> </body> </html>

Kết quả thực hiện trên trình duyệt cho trong hình 3.4.

Hình 3.4. Kết quả thực hiện trang vidu3_1.aspx



204

Chương 4. Thiết kế ứng dựng web

4.1. Các mô hình ứng dụng

4.1.1. Giới thiệu mô hình đa lớp.

a. Mô hình ứng dụng 2 lớp:

- Đây là một dạng mô hình đơn giản, khá phổ biến của một ứng dụng phân

tán. Trong mô hình này, việc xử lý dữ liệu được thực hiện trên Database

Server, việc nhận và hiển thị dữ liệu được thực hiện ở Client.

- Ưu điểm:

o Dữ liệu tập trung Î đảm bảo dữ liệu được nhất quán.

o Dữ liệu được chia sẻ cho nhiều người dùng.

- Khuyết điểm

o Các xử lý tra cứu và cập nhật dữ liệu được thực hiện ở Database

Server, việc nhận kết quả và hiển thị phải được thực hiện ở Client Î

Khó khăn trong vấn đề bảo trì và nâng cấp.

o Khối lượng dữ liệu truyền trên mạng lớn Î chiếm dụng đường

truyền, thêm gánh nặng cho Database Server.



205

Mô hình ứng dụng 3 lớp:

- Mô hình 2 lớp phần nào đáp ứng được các yêu cầu khắc khe của một ứng

dụng phân tán, tuy nhiên, khi khối lượng dữ liệu lớn, ứng dụng đòi hỏi

nhiều xử lý phức tạp, số người dùng tăng, mô hình 2 lớp không thể đáp

ứng được.

- Mô hình 3 lớp sử dụng thêm Application Server giữ nhiệm vụ tương tác

giữa Client và Database server, giảm bớt các xử lý trên Database server,

tập trung các xử lý nhận và hiển thị dữ liệu tại Application server.

- Ưu điểm

o Hỗ trợ nhiều người dùng

o Giảm bớt xử lý cho Client nên không yêu cầu máy tính ở Client có

cấu hình mạnh.

o Xử lý nhận và hiển thị dữ liệu tập trung tại Application Server nên

dễ quản lý, bảo trì và nâng cấp.

o Xử lý truy cập dữ liệu tập trung tại Database Server.

- Khuyết điểm

o Phải sử dụng thêm một Application Server Î Tăng chi phí.

4.1.2. Thiết kế ứng dụng web

a) Tổ chức website chặt chẽ và dễ sử dụng.

Website cần có cấu trúc càng rõ ràng dễ hiểu càng tốt. Điều quan trọng ở

đây là phải làm sao để khách hàng thấy được ngay các thông tin mà họ hi vọng



206

có thể thu được từ website của bạn. Nếu website có quá nhiều thông tin, ta có

thể làm cho trang chủ đơn giản bằng cách thiết kế bảng nội dung, bảng này cũng

nên hết sức đơn giản và dễ sử dụng. Đồng thời sử dụng những từ và đoạn ngắn

gọn dễ hiểu để thu hút người đọc.

b) Sử dụng từ ngữ dễ hiểu.

Một ai đó sẽ không thể theo dõi được quảng cáo bán hàng của ta cũng như

mua những mặt hàng mà ta đang cung cấp nếu như họ không thể hiểu được

những gì ta đang nói. Sử dụng những lời lẽ hoa mỹ để tán dương những sản

phẩm ta cung cấp thì rất dễ nhưng sẽ không thể biết được có bao nhiêu người tới

website và dự định của họ như thế nào?

Có thể chúng ta cung cấp những sản phẩm dịch vụ chất lượng thật tốt

nhưng sẽ không ai mua nếu như họ không biết chúng ta đang chào bán những gì,

hay không thể hiểu được lợi ích mà sản phẩm dịch vụ của bạn mang đến cho

khách hàng. Hãy nhớ rằng khi một người đến thăm website, có thể anh ta chưa

biết chúng ta là ai?. chúng ta đang chào bán sản phẩm gì?. Ta phải giúp khách

hàng hiểu rõ những vấn đề này trong thời gian ngắn nhất. Hãy dùng các câu

ngắn gọn, cô đọng và giữ kiểu thiết kế cố định đối với tất cả các trang con.

c) Dễ dàng khám phá các đường link.

Bạn hãy tạo các đường link bằng chữ hay biểu tượng ở tất cả các trang con

để mọi người có thể xem lại hoặc xem tiếp mà không phải sử dụng đến nút

"Back" hay "Forward" của trình duyệt.

d) Thời gian tải về nhanh.

Nhân tố thời gian là vô cùng quan trọng vì mọi người thường không kiên

nhẫn khi vào mạng. Nếu trang của bạn phải mất thời gian quá lâu để tải về thì

khách hàng có thể nhấn chuột và bỏ đi. Đừng để mất khách hàng chỉ vì trang

web của bạn tải về quá chậm.

Sử dụng đồ hoạ để trang trí là rất tốt nhưng đừng lạm dụng. Nếu cần nhiều

hình ảnh và đồ hoạ lớn thì nên có một biểu tượng nhỏ sẽ liên kết với hình ảnh

đồng thời nhắc nhở người xem cần phải đợi. Sử dụng video và audio trong trang

như một công cụ để bán hàng là ý tưởng khá hay, tuy nhiên bạn không nên sử

dụng bởi hiện tại trừ các tỉnh thành lớn có đường truyền tốc độ cao ADSL hay



207

cáp quang, vẫn còn đa số người vẫn đang sử dụng đường truyền Dial-Up với

modem 28.8, 33.6 và 56.6.

e) Nội dung không có hình ảnh.

Nhiều người sử dụng ảnh "GIFS" và JavaScripts để tạo các logo và ký tự

chạy ngang màn hình hay những gì tương tự. Điều này không chỉ làm tăng thời

gian tải về mà còn làm người xem xao lãng nội dung bán hàng của bạn. Những

người trên Internet là những con người của thông tin vì vậy bạn hãy chắc chắn

rằng mình đang dành thời gian cho những thông tin có chất lượng chứ không

phải là những hình ảnh vô bổ.

Nếu bạn có một nội dung vô giá trong trang web, hãy làm cho nó dễ đọc.

Hãy chia thành những đoạn quan trọng, gạch chân hoặc bôi đậm những câu quan

trọng trong từng đoạn và bạn đừng ngại trang trí với một số màu.

Tô màu văn bản thay thế file đồ hoạ nếu có thể. Nói cách khác thay vì sử

dụng một file đồ họa để gây sự chú ý, bạn có thể sử dụng văn bản có màu sắc

khác nhau.

Có thể bạn muốn cung cấpthông tin miễn phí duới dạng bài báo hay bài

phóng sự, và sau đó cố gắng bán hàng. Nếu bạn muốn cung cấp cho người sử

dụng những thông tin bổ ích (với mục đích thu hút khách hàng), hãy thêm những

nội dung có chất lượng chứ không phải là những hình ảnh bên ngoài. Trong

truờng hợp đó một chữ đáng giá hàng nghìn hình ảnh.

Thậm chí bạn muốn trang của mình sinh động hơn một chút (có những biểu

tượng biến hình, các dòng chữ bôi đậm...) nhằm thu hút mọi người tiếp tục quan

tâm tới sản phẩm và dịch vụ của bạn. Công việc của bạn chính là kiểm tra những

kết quả mà khách hàng xem đem lại.

Tất cả sẽ phụ thuộc vào những sản phẩm và dịch vụ bạn đang bán cũng như

đối tượng khách hàng bạn cần tiếp thị hay thị truờng mục tiêu của bạn. Nếu bạn

đang tiếp thị cho lớp trẻ thì sự sinh động của website sẽ làm tăng doanh số bán

hàng. Nhưng nếu đối tượng khách hàng của bạn chủ yếu là những nhà kinh

doanh có trình độ thì yếu tố sinh động đó có thể làm bạn giống như một hoạ sĩ

nửa mùa. Đối với đối tượng các khách hàng này bạn cần thu hút họ bằng những

sự kiện, con số, sự trung thực và những lợi ích rõ ràng.

f) Dễ theo dõi "quá trình bán hàng".



208

Bạn phải tạo điều kiện để khách hàng hiểu rõ những lợi ích của sản phẩm

và dịch vụ của bạn đem lại cũng như cung cấp cho khách hàng phương thức đặt

hàng thuận tiện nhất. Liệu bạn đã xây dựng được uy tín đối với khách hàng

trước khi bạn yêu cầu họ đặt hàng chưa? Bạn đã tạo cho khách hàng sự yêu thích

và hứng thú trước khi bạn mời họ đặt hàng chưa?. Bạn đã cung cấp cho khách

hàng một số cách đặt hàng thuận tiện cả trên mạng và ngoài mạng chưa?. Và

liệu bạn đã huớng dẫn khách xem tất cả từng buớc một chưa?.

g) Tương thích với đa số trình duyệt web.

Nếu bạn sử dụng bảng biểu hãy xem xét cẩn thận việc nó sẽ hiển thị như

thế nào ở các trình duyệt khác nhau (ví dụ Internet Explorer, Netscape) và ở tất

cả các cấp độ phân giải (ví dụ 800 x 600, 1024 x 768, 1280 x 1024, 1400 x

1050).

4.2. Xử lý trang ASP.NET nâng cao

4.2.1. Thiết kế User Control

- Thiết kế User Control: Trong quá trình thiết kế ta có thể cần các chức

năng trong một điều khiển nhưng không được hỗ trợ bởi các điều khiển

ASP.NET Web server, trong trường hợp này ta cần tạo điều khiển của riêng

mình, được gọi là User Controls.

User Controls: Là các containers, trong đó chứa các web server controls. Ta

có thể xử lý điều khiển này như một đơn vị điều khiển và có thể định nghĩa các

thuộc tính và các phương thức cho điều khiển đó.

Cấu trúc của User controls: ASP.NET Web user control tương tự như việc

tạo ASP.NET Web page (.aspx file), chúng cùng có hai phần user interface page

và code. Ta tạo user control như cách tạo trang ASP.NET và sau đó thực hiện

thiết kế các điều khiển con và các chức năng cần thiết. Điểm khác nhau giữa

User controls và Web page là:

+ Tên file mở rộng của user control là .ascx.

+ Thay vì chỉ dẫn @ Page, user control chứa chỉ dẫn @ Control để định

nghĩa cấu hình và các thuộc tính khác.



209

+ User controls không thể chạy như một stand-alone files. Để sử dụng ta

add chúng vào các trang SP.NET như việc sử dụng đối với bất cứ điều

khiển nào.

+ User control không chứa các thẻ html, body, hoặc form

- Sử dụng User Control: Để include một user control vào một Web Forms

page ta tiến hành khai báo chỉ dẫn @ Register với các thuộc tính sau:

+ Thuộc tính TagPrefix, liên quan đến prefix của user control. Prefix

này sẽ được bao gồm trong thẻ mở của phần tử user control.

+ Thuộc tính TagName, chỉ tên của user control. Tên này sẽ được bao

gồm trong thẻ mở của phần tử user control.

+ Thuộc tính Src, dùng để định nghĩa đường dẫn động đến file user

control mà chúng ta đang including.

Ví dụ 3.21. Tạo và sử dụng User controls (vidu3_25.aspx).

- Tạo file Mycontrol.ascx: Vào Website\Add New Item chọn tempates Web

User Control (hình 3.39) và xây dựng nội dung file:

Hình 3.39. Xây dựng file Mycontrol.ascx



210

<%@ Control Language="VB" ClassName="Spinner" %> <script runat="server"> Private m_minValue As Integer = 0 Private m_maxValue As Integer = 100 Private m_currentNumber As Integer = 0 Public Property MinValue() As Integer Get Return m_minValue End Get Set(ByVal value As Integer) If value >= Me.MaxValue Then Throw New Exception _ ("MinValue must be less than MaxValue.") Else m_minValue = value End If End Set End Property Public Property MaxValue() As Integer Get Return m_maxValue End Get Set(ByVal value As Integer) If value <= Me.MinValue Then Throw New Exception _ ("MaxValue must be greater than MinValue.") Else m_maxValue = value End If End Set End Property Public ReadOnly Property CurrentNumber() As Integer Get Return m_currentNumber End Get End Property Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) If IsPostBack Then m_currentNumber = CInt(ViewState("currentNumber")) Else m_currentNumber = Me.MinValue End If DisplayNumber() End Sub Protected Sub DisplayNumber() textNumber.Text = Me.CurrentNumber.ToString() ViewState("currentNumber") = Me.CurrentNumber.ToString() End Sub Protected Sub buttonUp_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) If m_currentNumber = Me.MaxValue Then m_currentNumber = Me.MinValue Else m_currentNumber += 1 End If DisplayNumber() End Sub



211

Protected Sub buttonDown_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) If m_currentNumber = Me.MinValue Then m_currentNumber = Me.MaxValue Else m_currentNumber -= 1 End If DisplayNumber() End Sub </script>

<asp:TextBox ID="textNumber" runat="server" ReadOnly="True" Width="32px" Enabled="False" /> <asp:Button Font-Bold="True" ID="buttonUp" runat="server"

Text="^" OnClick="buttonUp_Click" /> <asp:Button Font-Bold="True" ID="buttonDown" runat="server"

Text="v" OnClick="buttonDown_Click" />

- Sử dụng Web User Control: Trong cửa sổ thiết kế của Vidu3_25.aspx, ta

có thể kéo file Mycontrol.ascx vào cửa sổ thiết kế.

<%@ Page Language="VB" %> <%@ Register Src="MyControl.ascx" TagName="MyControl" TagPrefix="uc1" %> <script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Me.MyControl1.MinValue = 1 Me.MyControl1.MaxValue = 10 End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <uc1:MyControl ID="MyControl1" runat="server" /> </div> </form> </body> </html>

4.2.2. Security Basics

* Các khái niệm cơ bản về Security: Đó là các khái niệm như identity

(Nhận dạng), authentication (Xác thực), và authorization (Quyền hạn)

+ Identity: Thể hiện tôi là ai? (Who Am I?). Để nhận dạng một người nào

đó ta thường sử dụng tính chất đặc trưng duy nhất để mô tả chính mình.

Ví dụ như tôi là phụ nữ, có mái tóc vàng, thích nghe ca nhạc, lập trình

máy tính, … Thông tin Identity được lưu trữ trên một web site sẽ tương

thích với một vài khía cạnh nào đó của con người. Ví dụ web site

shopping có thể lưa trữ name, telephone number, e-mail address, và



212

home address, chúng là tất cả các thông tin chính xác giúp cho việc

thanh toán được tốt.

+ Authentication (This is Who I am): Khi cố gắng log in vào một web site,

ta phải chuyển thông tin xác thực đi; ví dụ như tổ hợp e-mail address và

password. Sau đó, web site phải xác định bạn là ai ? vì vậy tổ hợp e-

mail address và password chúng ta nhập vào phải được so khớp với tổ

hợp lưu trữ trên file được lưu trữ trên server. Tiến trình của

authentication chứng minh bạn đúng là người mà bạn đang nói đến. Có

hai kiểu chiến lược xác thực Web authentication đó là: windows và

forms authentication:

o Windows Authentication: Kiểu đơn giản nhất của authentication là

windows authentication. Với kiểu authentication lý tưởng nhất đối

với các sites intranet. Trên thực tế nó được cài đặt bởi IIS và được

lưu trữ trên các bộ máy authentication. IIS phụ thuộc vào user hoặc

là log in vào server’s domain hoặc là log in domain account hợp lệ.

Nếu người dùng được xác thực là một valid domain account, thì sẽ

được truy cập thẳng vào website. Khi user không logged into vào

server’s domain, thì valid login được yêu cầu. Phương thức

authentication này được thiết lập qua IIS Management Console.

o Forms Authentication: Đối với public Web site, forms

authentication là giải pháp đơn giản để cài đặt. Các users mà thăm

site phải chứng tỏ được các quyền trên site. Khi một unauthorized

user requests Web page, thì user đó thường được điều hướng đến

trang login hoặc cho phép tạo một User Acount mới.

+ Authorization (This is What I Can do): Authorization là bước tiếp theo

của authentication. Khi người dùng chuyển username và password đến

một web site, web server không chỉ kiểm tra password so khớp với

username, mà còn xem xét các quyền (permissions) mà người dùng đó

được trao bởi webmaster.

* ASP.NET Security: ASP.NET 2.0 có một số tools mạnh sẵn có cho việc

cài đặt các framework login-authentication-authorization.

- Web Site Administration Tool (WAT): ASP .NET 2.0 được điều khiển bởi

files web.config. Trước đây, các nhà phát triển thường phải code tay các file



213

XML configuration để thiết lập cho các chức năng như debugging, security,

hoặc tracing. Bây giờ đã có giao diện để thiết lập các files configuration này cho

các ứng dụng Web: đó là Web Site Administration Tool (WAT).

- Login Controls: Nhóm Microsoft ASP đã đóng gói hầu hết các chức năng

phổ biến đối với việc xác thực (authentication) trong nhóm các điều khiển login

controls làm cho công việc của các nhà lập trình trở lên đơn giản hơn. Ta có thể

lấy các hành vi (behavior) mặc định của các điều khiển này hoặc tùy chỉnh mọi

khía cạnh của chức năng và thiết kế. Sau đây là bảng thể hiện danh sách các

điều khiển sẵn có:

Tên điều khiển Mô tả

Login Chứa tất cả các phần tử cần thiết cung cấp các vùng cho

phép login vào một website.

LoginView Cho phép xây dựng các templates để hiển thị các thông

tin chính xác về user dựa trên authentication và roles.

LoginStatus Hiển thị một link để login hoặc logout dựa trên các trạng

thái của người sử dụng.

LoginName Hiển thị tên người sử dụng hiện tại.

ChangePassword Cho phép các users thay đổi Password của mình.

CreateUserWizard Tạo các vùng cho các user mới để tạo một new acount

trên website.

PasswordRecovery Gửi các thông tin bị quên của người sử dụng hoặc

Password mới qua đường email.

Chú ý: Khi sử dụng SQL Developer cần đăng ký CSDL bằng cách vào

C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727 và chạy file

aspnet_regsql.exe.

Ví dụ 3.22. Minh họa về Security và sử dụng các điều khiển Login. Để tiến hành

minh họa cho viếc cấu hình Forms Authentication ta tiến hành xây dựng một hệ

thống website mới. Qua các bước sau:

214

1. Xây dựng một website mới có tên là MyClub với lựa chọn file

system là location.

2. Trong cửa sổ Solution Explorer ta thực hiện thêm các thư mục và

các template sau:

+ Tại thư mục gốc thêm file master: Main.master với nội dung

<%@ Master Language="VB" CodeFile="Main.master.vb" Inherits="Main" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <table cellpadding="5" cellspacing="0" width="600" border="1" > <tr> <td width="150" valign="top">  <asp:Menu ID="Menu1" Runat="server"> <Items> <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"></asp:MenuItem> <asp:MenuItem Text="Members">

<asp:MenuItem NavigateUrl="Members/ViewAuthors.aspx" Text="View Authors">

</asp:MenuItem> <asp:MenuItem NavigateUrl="Members/ViewTitles.aspx" Text="View Titles"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="Admin">

<asp:MenuItem NavigateUrl="Admin/ViewUser.aspx" Text="View Users"></asp:MenuItem>

</asp:MenuItem> </Items> </asp:Menu> <br /><br /><br /> <asp:LoginView ID="LoginView1" Runat="server"> <AnonymousTemplate> <asp:Menu ID="Menu2" Runat="server"> <Items> <asp:MenuItem NavigateUrl="~/CreateNewUser.aspx"

Text="Create Account"> </asp:MenuItem> </Items> </asp:Menu> </AnonymousTemplate>

<LoggedInTemplate> <asp:Menu ID="Menu3" Runat="server">

<Items> <asp:MenuItem NavigateUrl="~/ChangePassword.aspx" Text="Change Password">

</asp:MenuItem> </Items>

</asp:Menu> </LoggedInTemplate> </asp:LoginView>

</td> <td valign="top">

215

<table cellpadding="0" cellspacing="0" width="100%" border="0"> <tr> <td width="85%"> <asp:Label ID="Label1" Runat="server" Text="My First Company Site" Font-Bold="true" Font-Size="24px"></asp:Label> </td> <td width="15%">  <asp:LoginStatus ID="LoginStatus1" Runat="server" /> </td></tr><tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2"> User: <asp:LoginView ID="LoginView2" Runat="server"> <AnonymousTemplate>Guest, Please log in</AnonymousTemplate> <LoggedInTemplate> <asp:LoginName ID="LoginName1" Runat="server" /> </LoggedInTemplate> </asp:LoginView> </td></tr> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2" valign="top" height="100%"> <asp:contentplaceholder id="cphMain" runat="server"> </asp:contentplaceholder> </td></tr> </table> </td> </tr> </table> </div> </form> </body> </html>

+ Tại thư mục gốc thêm các web form:

o Login.aspx

<%@ Page Language="VB" MasterPageFile="~/Main.master" Title="Login" %> <asp:content ContentPlaceHolderID="cphMain" runat="server"> <asp:Login ID="Login1" runat="server"> </asp:Login> </asp:content>

o ChangePassword.aspx

<%@ Page Language="VB" MasterPageFile="~/Main.master" Title="Change Password" %> <asp:Content ContentPlaceHolderID="cphMain" runat="server"> <asp:ChangePassword ID="ChangePassword1" Runat="server"> </asp:ChangePassword>

</asp:Content>

o CreateNewUser.aspx



216

<%@ Page Language="VB" MasterPageFile="~/Main.master" Title="Create New User" %> <asp:Content ContentPlaceHolderID="cphMain" runat="server"> <asp:CreateUserWizard ID="CreateUserWizard1" Runat="server"> </asp:CreateUserWizard> </asp:Content>

+ Thêm thư mục Admin gồm các trang:

o Default.aspx

<%@ Page Language="VB" MasterPageFile="~/Main.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Admin_Default" title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="cphMain" Runat="Server"> </asp:Content>

o ViewUsers.aspx

<%@ Page Language="VB" MasterPageFile="~/Main.master" Title="View Users" %> <asp:Content ContentPlaceHolderID="cphMain" Runat="server"> <asp:Label ID="Label1" Runat="server" Text="Add Code to View User Info Later-In Admin"></asp:Label>

</asp:Content>

+ Thêm thư mục Member gồm các trang:

o Default.aspx

<%@ Page Language="VB" MasterPageFile="~/Main.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Members_Default" title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="cphMain" Runat="Server"> </asp:Content>

o ViewAuthors.aspx

<%@ Page Language="VB" MasterPageFile="~/Main.master" Title="View Authors" %> <asp:Content ID="Content1" ContentPlaceHolderID="cphMain" Runat="server"> <asp:Label ID="Label1" Runat="server" Text="Add Code to View Author Info Later - In Member"></asp:Label>

</asp:Content>

o ViewTitles.aspx

<%@ Page Language="VB" MasterPageFile="~/Main.master" Title="View Titles" %> <asp:Content ID="Content1" ContentPlaceHolderID="cphMain" runat="server"> <asp:Label ID="Label1" Runat="server" Text="Add Code to View Title Info Later - In Member"></asp:Label> </asp:Content>

Kết quả cho hình dưới đây:



217

Hình 3.40. Website MyClub

3. Thực hiện cấu hình: Website\ ASP.NET Configuration xuất hiện

cửa sổ ASP.NET Application Administration.

Hình 3.41. ASP.NET Application Administration



218

4. Chọn tab Security hình 3.42.

Hình 3.42. ASP.NET Application Administration

5. Ta sử dụng Wizard để cấu hình: Chọn ‘Use the security Setup

wizard to configure security step by step’ xuất hiện cửa sổ hình

4.23. Thông qua các bước sau:



219

+ Bước 1: Cửa sổ Welcome to the Security Setup Wizard (Hình

3.43). Chọn Next

Hình 3.43. Welcome to the Security Setup Wizard



220

+ Bước 2: Cửa sổ Select Access Method (Hình 3.44). Chọn

From the internet và chọn Next.

Hình 3.44. Select Access Method



221

+ Bước 3: Ở bước thứ 3 đưa thông tin cho việc lưu trữ dữ liệu

trong Cửa sổ Advanced provider settings (Hình 3.45). Ta sẽ

thấy data provider mặc định cho site, data provider mặc định

là SQL Server. Để thay đổi ta sẽ thực hiện kết thúc wizard

quay trở lại tab Provider để cấu hình. Ở đây ta chọn Next.

Hình 3.45. Cửa sổ Advanced provider settings



222

+ Bước 4: Ta có thể thực hiện enable roles-based security (Hình

3.46) tại bước 4. Với roles-based security ta có thể thực hiện

quản trị truy cập site đối với những người sử dụng thuộc role

một cách nhanh chóng. Chọn check box Enable roles for this

Web site và chọn Next để xuất hiện Cửa sổ định nghĩa Role

Create New Role screen (Hình 3.47). Trong cửa sổ này ta

thực hiện thêm một nhóm quản trị Admin và click Add Role

và chọn Next.

Hình 3.46. Cửa sổ Defined Roles



223

Hình 3.47. Cửa sổ Create New Role



224

+ Bước 5: Ở bước này ta thực hiện tạo các User mới. Để tạo

người sử dụng mới ta nhập các thông tin và sau đó Click nút

Create User (Hình 3.48). Ta không cần phải tạo tất cả các

User ở bước này bời vì ta sẽ có giao diện rất dễ sử dụng cho

việc tạo các User.

Hình 3.48. Cửa sổ Create User



225

+ Bước 6: Ở bước này ta thực hiện Add New Access Rules. Ở

đây ta thực hiện thiết lập người sử dụng sẽ được truy cập vào

từng vùng của website. Trong ví dụ này ta thiết lập ba quy tắc.

Các quy tắc được áp dụng cho từng thư mục của Web. Chú ý

là thư mục đó phải được chọn.

i. Mặc định Rule cho phép tất cả các Users được truy

cập vào website (Hình 3.49).

ii. Xây dựng các rule trên thư mục Admin. Chọn thư

mục Admin và xây dựng các rules như hình (3.50).

iii. Xây dựng các rule trên thư mục Members. Chọn thư

mục Member và xây dựng các rules như hình (3.51).

Hình 3.49. Cửa sổ Add New Access Rule



226




227




228

+ Bước 7: Cửa sổ Completing the Security Setup Wizard.

Hình 3.52. Cửa sổ Completing the Security Setup Wizard

6. Thực hiện thử nghiệm.



229

4.3. Thiết kế một số chức năng web

Giỏ hàng, đặt hàng và thanh toán qua mạng:

Khi người sử dụng xem các thông tin chi tiết của sản phẩm, ta phải thiết lập

một quy trình cho phép khách hàng chọn một sản phẩm để thêm vào giỏ hàng

(shopping cart). Tiếp theo, ta yêu cầu khách hàng cung cấp các thông tin để giao

hàng. Các thông tin này bao gồm: Họ và tên, địa chỉ giao hàng, điện thoại,

email, phương thức thanh toán,.v.v...

Trong cơ sở dữ liệu ứng dụng, chúng ta có hai loại khách hàng chính, đó là

khách hàng vãng lai và khách hàng thường xuyên. Với khách hàng thường

xuyên ta có thể có các chế ưu đãi về giá cả. Sau khi người sử dụng cung cấp các

thông tin chi tiết theo yêu cầu để đăng nhập vào hệ thống, người dùng tiếp tục

chọn một số phương thức thanh toán (để thu tiền mua hàng từ khách hàng).

Trong phần này sẽ hướng dẫn xây dựng các trang ví dụ theo quy trình sử

dụng trên.

- Trang MyShop.aspx: Là trang đầu tiên mà người sử dụng duyệt các

sản phẩm trên Website.

Hình 3.53. Trang MyShop



230

* Nội dung trang: <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> <script runat="server"> </script> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]"> </asp:SqlDataSource> <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="3" RepeatDirection="Horizontal"> <ItemTemplate> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("ProductImageURL") %>' PostBackUrl='<%# Eval("ProductID", "ShopItems.aspx?ProductID={0}")%>'/><br /> <asp:Label ID="ProductImageURLLabel" runat="server" Text='<%# Eval("ProductImageURL") %>'></asp:Label><br /> ProductType: <asp:Label ID="ProductTypeLabel" runat="server" Text='<%# Eval("ProductType") %>'></asp:Label><br /> ProductName: <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label><br /> ProductSize: <asp:Label ID="ProductSizeLabel" runat="server" Text='<%# Eval("ProductSize") %>'></asp:Label><br /> UnitPrice: <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label><br /> <br /> </ItemTemplate> </asp:DataList> <asp:HyperLink ID="ShoppingCartLink" runat="server" NavigateUrl="~/ShoppingCart.aspx">View Shopping Card</asp:HyperLink> </asp:Content>

- Trang ShopItems.aspx: Là trang thể hiện thông tin chi tiết về một sản

phẩm đầu khi người sử dụng duyệt trên trang MyShop.aspx và muốn

xem thông tin chi tiết về sản phẩm mình đã chọn.

Khi người sử dụng click vào ảnh một sản phẩm nào đó nào đó trên

trang Myshop.aspx thì website điều hướng chuyển sang trang

ShopItems.aspx cùng với ProductID thông qua QueryString



231

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("ProductImageURL") %>' PostBackUrl='<%# Eval("ProductID", "ShopItems.aspx?ProductID={0}")%>'/><br />

Hình 3.55. Trang ShopItems.aspx

* Nội dung trang: <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> <script runat="server"> Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Dim Price As String = Double.Parse(CType(DataList1.Controls(0).FindControl("UnitPriceLabel"), Label).Text) Dim ProductName As String = CType(DataList1.Controls(0).FindControl("ProductNameLabel"), Label).Text Dim PictureURL As String = CType(DataList1.Controls(0).FindControl("ProductImageURLLabel"), Label).Text Dim ProductID As Integer = CInt(Request.QueryString("ProductID")) If Profile.Cart Is Nothing Then Profile.Cart = New MyShop.Commerce.MyShoppingCart() End If Profile.Cart.Insert(ProductID, Price, 1, ProductName, PictureURL) Server.Transfer("MyShop.aspx") End Sub </script> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products] WHERE ([ProductID] = @ProductID)"> <SelectParameters>



232

<asp:QueryStringParameter Name="ProductID" QueryStringField="ProductID" Type="Int32" /> </SelectParameters> </asp:SqlDataSource> <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1"> <ItemTemplate> <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ProductImageURL") %>' /><br /> <asp:Label ID="ProductImageURLLabel" runat="server" Text='<%# Eval("ProductImageURL") %>' Visible="false"></asp:Label><br /> <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label><br /> <asp:Label ID="ProductTypeLabel" runat="server" Text='<%# Eval("ProductType") %>'></asp:Label><br /> <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label><br /> <asp:Label ID="ProductDescriptionLabel" runat="server" Text='<%# Eval("ProductDescription") %>'></asp:Label><br /> <asp:Label ID="ProductSizeLabel" runat="server" Text='<%# Eval("ProductSize") %>'></asp:Label><br /> <asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label><br /> <br /> </ItemTemplate> </asp:DataList> <asp:ImageButton ID="btnAddToCart" runat="server" OnClick="ImageButton1_Click" ImageUrl="~/Images/cart.gif" /><br /> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/MyShop.aspx">Return To Shop</asp:HyperLink><br /> </asp:Content>

- Đối tượng Shopping: Có hai đối tượng là CartItem và ShoppingCart

(Giỏ hàng).

+ Xây dựng các lớp thể hiện hai đối tượng này (trang Shopping.vb): Imports Microsoft.VisualBasic Imports System.Data Imports System.Data.SqlClient Imports System.Collections.Generic Namespace MyShop.Commerce ''' <summary> ''' Shopping cart item ''' </summary> ''' <remarks>Stores a single item in the shopping cart</remarks> <Serializable()> _ Public Class CartItem #Region "Private Member Variables" ' private member variables: the private storage for the properties Private _productID As Integer Private _productName As String Private _productImageUrl As String Private _quantity As Integer Private _price As Double Private _lineTotal As Double #End Region #Region "Constructors"



233

''' <summary> ''' Create a new cart item ''' </summary> ''' <remarks></remarks> Public Sub New() ' no initialization End Sub Public Sub New(ByVal ProductID As Integer, ByVal ProductName As String, ByVal ProductImageUrl As String, ByVal Quantity As Integer, ByVal Price As Double) _productID = ProductID _productName = ProductName _productImageUrl = ProductImageUrl _quantity = Quantity _price = Price _lineTotal = Quantity * Price End Sub #End Region #Region "Properties" ''' <summary> ''' Product ID ''' </summary> ''' <value></value> ''' <remarks></remarks> Public Property ProductID() As Integer Get Return _productID End Get Set(ByVal value As Integer) _productID = value End Set End Property Public Property ProductName() As String Get Return _productName End Get Set(ByVal value As String) _productName = value End Set End Property Public Property ProductImageUrl() As String Get Return _productImageUrl End Get Set(ByVal value As String) _productImageUrl = value End Set End Property Public Property Quantity() As Integer Get Return _quantity End Get Set(ByVal value As Integer) _quantity = value End Set



234

End Property Public Property Price() As Double Get Return _price End Get Set(ByVal value As Double) _price = value End Set End Property Public ReadOnly Property LineTotal() As Double Get Return _quantity * _price End Get End Property #End Region End Class ''' <summary> ''' The shopping cart ''' </summary> ''' <remarks></remarks> <Serializable()> _ Public Class MyShoppingCart ' percentage discount given to members Private Const MemberDiscountPercentage As Single = 0.1 #Region "Private Member Variables" Private _dateCreated As DateTime Private _lastUpdate As DateTime Private _items As List(Of CartItem) #End Region #Region "Constructors" ''' <summary> ''' Createa new instance of the cart ''' </summary> ''' <remarks></remarks> Public Sub New() _items = New List(Of CartItem) _dateCreated = DateTime.Now End Sub #End Region #Region "Properties" ''' <summary> ''' The items contained within the cart ''' </summary> ''' <value></value> ''' <remarks>Contains a <see cref="System.Collections.Generic.List(Of CartItem)">List</see> of <paramref name="CartItem">CartItem</paramref> objects</remarks> Public Property Items() As List(Of CartItem) Get Return _items End Get Set(ByVal value As List(Of CartItem)) _items = value End Set End Property



235

''' <summary> ''' Returns the amount of the member discount ''' </summary> ''' <value></value> ''' <remarks>0 if the user is not a member. Read only</remarks> Public ReadOnly Property MemberDiscount() As Double Get If HttpContext.Current.User.IsInRole("FriendlyCustomers") Then Return SubTotal * MemberDiscountPercentage Else Return 0 End If End Get End Property ''' <summary> ''' Returns the subtotal of the order ''' </summary> ''' <value></value> ''' <remarks>Read only</remarks> Public ReadOnly Property SubTotal() As Double Get Dim t As Double If _items Is Nothing Then Return 0 End If For Each Item As CartItem In _items t += Item.LineTotal Next Return t End Get End Property ''' <summary> ''' Returns the total order value, including member discount ''' </summary> ''' <value></value> ''' <remarks></remarks> Public ReadOnly Property Total() As Double Get Return SubTotal - MemberDiscount End Get End Property #End Region Public Sub Insert(ByVal ProductID As Integer, ByVal Price As Double, ByVal Quantity As Integer, ByVal ProductName As String, ByVal ProductImageUrl As String) Dim ItemIndex As Integer = ItemIndexOfID(ProductID) If ItemIndex = -1 Then Dim NewItem As New CartItem() NewItem.ProductID = ProductID NewItem.Quantity = Quantity NewItem.Price = Price NewItem.ProductName = ProductName NewItem.ProductImageUrl = ProductImageUrl



236

_items.Add(NewItem) Else _items(ItemIndex).Quantity += 1 End If _lastUpdate = DateTime.Now() End Sub Public Sub Update(ByVal RowID As Integer, ByVal ProductID As Integer, ByVal Quantity As Integer, ByVal Price As Double) Dim Item As CartItem = _items(RowID) Item.ProductID = ProductID Item.Quantity = Quantity Item.Price = Price _lastUpdate = DateTime.Now() End Sub Private Function ItemIndexOfID(ByVal ProductID As Integer) As Integer Dim index As Integer For Each item As CartItem In _items If item.ProductID = ProductID Then Return index End If index += 1 Next Return -1 End Function Public Sub DeleteItem(ByVal rowID As Integer) _items.RemoveAt(rowID) _lastUpdate = DateTime.Now() End Sub End Class End Namespace

+ Profile: Trong phần xây dựng này sẽ sử dụng các thuộc tính profile

để xây dựng Shopping Cart. Các thuộc tính profile cho phép theo dõi

và lưu trữ thường xuyên thông tin user chỉ định. ASP.NET tự động so

khớp người sử dụng hiện tại, có thể user là anonymous (nặc danh)

hoặc user loggon với thông tin được lưu trữ. Với việc sử dụng cơ chế

profile, cho phép người sử dụng có thể lưu trữ thông tin về giỏ hàng

của mình trong lần duyệt tiếp theo. Ta khai báo Profile trong tệp

Web.config như sau:



237

<anonymousIdentification enabled="true" /> <profile enabled="true"> <properties> <add name="MemberName"/> <add name="Name"/> <add name="Address"/> <add name="City"/> <add name="County"/> <add name="PostCode"/> <add name="Country"/> <add name="Mailings" type="System.Boolean"/> <add name="Email"/>

<add name="Cart" serializeAs="Binary" type="MyShop.Commerce.MyShoppingCart" allowAnonymous="true"/>

</properties> </profile>

Thực hiện MigrateAnonymous thông tin của người sử dụng trong tệp

Global.asax để xác định người sử dụng hiện tại. Public Sub Profile_OnMigrateAnonymous(ByVal Sender As Object, ByVal e As ProfileMigrateEventArgs) ' get the profile for the anonymous user Dim anonProfile As ProfileCommon = Profile.GetProfile(e.AnonymousID) ' if they have a shopping cart, then migrate that to the authenticated user If anonProfile.Cart IsNot Nothing Then If Profile.Cart Is Nothing Then Profile.Cart = New MyShop.Commerce.MyShoppingCart() profile.Cart.Items.AddRange(anonProfile.Cart.Items) End If anonProfile.Cart = Nothing End If ProfileManager.DeleteProfile(e.AnonymousID) AnonymousIdentificationModule.ClearAnonymousIdentifier()

End Sub

- Điều khiển Shopping Cart (MyShoppingCart.ascx): <%@ Control Language="VB" ClassName="MyShoppingCart" %> <%@ Import Namespace="MyShop.Commerce" %> <script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) If Profile.Cart Is Nothing Then Return End If If Not Page.IsPostBack Then BindGrid() End If If Profile.Cart.Items.Count = 0 Then



238

TotalLabel.Visible = False End If TotalLabel.Text = String.Format("Total:{0,19:C}", Profile.Cart.Total) End Sub Protected Sub CartGrid_RowCancelingEdit(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCancelEditEventArgs) CartGrid.EditIndex = -1 BindGrid() End Sub Protected Sub CartGrid_RowUpdating(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewUpdateEventArgs) Dim QuantityTextBox As TextBox = CType(CartGrid.Rows(e.RowIndex).Cells(2).Controls(0), TextBox) Dim Quantity As Integer = Convert.ToInt32(QuantityTextBox.Text) If Quantity = 0 Then Profile.Cart.Items.RemoveAt(e.RowIndex) Else Profile.Cart.Items(e.RowIndex).Quantity = Quantity End If CartGrid.EditIndex = -1 BindGrid() End Sub Protected Sub CartGrid_RowEditing(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs) CartGrid.EditIndex = e.NewEditIndex BindGrid() End Sub Private Sub BindGrid() ' bind to the items in the cart CartGrid.DataSource = Profile.Cart.Items DataBind() End Sub Protected Sub CartGrid_RowDeleting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewDeleteEventArgs) Profile.Cart.Items.RemoveAt(e.RowIndex) BindGrid() End Sub </script> <asp:GridView ID="CartGrid" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID" OnRowEditing="CartGrid_RowEditing" OnRowUpdating="CartGrid_RowUpdating" OnRowDeleting="CartGrid_RowDeleting" OnRowCancelingEdit="CartGrid_RowCancelingEdit"> <Columns> <asp:TemplateField> <ItemTemplate> <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ProductImageURL") %>' /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="ProductName" HeaderText="Product" ReadOnly="True" /> <asp:BoundField DataField="Quantity" HeaderText="Quantity" ReadOnly="False" />



239

<asp:BoundField DataField="Price" HeaderText="Price" ReadOnly="True" /> <asp:BoundField DataField="LineTotal" HeaderText="Total" ReadOnly="True" /> <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" /> </Columns> <EmptyDataTemplate> There is nothing in your shopping cart. You can buy items from the <a href="Myshop.aspx">Shop</a>. </EmptyDataTemplate> </asp:GridView> <asp:Label ID="TotalLabel" runat="server"></asp:Label>

Quay trở lại trang ShoppingItems.aspx, tại nút btnAddToCart thì thông

tin về sản phẩm đó sẽ được lưu trong profile. <asp:ImageButton ID="btnAddToCart" runat="server" OnClick="ImageButton1_Click" ImageUrl="~/Images/cart.gif" /><br /> Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Dim Price As String = Double.Parse(CType(DataList1.Controls(0).FindControl("UnitPriceLabel"), Label).Text) Dim ProductName As String = CType(DataList1.Controls(0).FindControl("ProductNameLabel"), Label).Text Dim PictureURL As String = CType(DataList1.Controls(0).FindControl("ProductImageURLLabel"), Label).Text Dim ProductID As Integer = CInt(Request.QueryString("ProductID")) If Profile.Cart Is Nothing Then Profile.Cart = New MyShop.Commerce.MyShoppingCart() End If Profile.Cart.Insert(ProductID, Price, 1, ProductName, PictureURL) Server.Transfer("MyShop.aspx") End Sub

- Trang ShoppingCart.aspx: Hiển thị thông tin đã có trong giỏ hàng.



240

Hình 3.56. Trang ShoppingCart.aspx

* Nội dung trang: <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> <%@ Register Src="MyShoppingCart.ascx" TagName="MyShoppingCart" TagPrefix="uc1" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <uc1:MyShoppingCart ID="MyShoppingCart1" runat="server" /> <br /> <asp:HyperLink ID="CheckOut" runat="server" NavigateUrl="~/CheckOut.aspx">CheckOut</asp:HyperLink> </asp:Content>

- CheckOut: Ta sẽ thực hiện CheckOut thông qua 5 bước.

+ Login

+ Delivery address (Địa chỉ phát hàng)

+ Payment (Hình thức thanh toán)

+ Xác nhận đơn hàng

+ Kết thúc

* Trang Checkout.aspx <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" codefile="Checkout.aspx.vb" Inherits="Checkout" title="Checkout" %> <%@ Register TagPrefix="wu" TagName="ShoppingCart" Src="MyShoppingCart.ascx" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="server"> <asp:Label id="NoCartlabel" runat="server" visible="false"> There are no items in your cart. Visit the shop to buy items. </asp:Label> <div style="float:right"> <asp:LoginView ID="LoginView1" Runat="server"> <AnonymousTemplate> <asp:passwordrecovery id="PasswordRecovery1" runat="server"/>

</AnonymousTemplate> </asp:LoginView> </div> <asp:wizard id="Wizard1" runat="server" activestepindex="0" OnFinishButtonClick="Wizard1_FinishButtonClick" OnNextButtonClick="Wizard1_NextButtonClick"> <WizardSteps> <asp:WizardStep runat="server" Title="Login" AllowReturn="False"> <asp:login id="Login1" runat="server" CreateUserText="Not a member? Create an account" CreateUserUrl="~/createaccount.aspx"></asp:login> </asp:WizardStep> <asp:WizardStep runat="server" Title="Delivery Address">



241

<asp:checkbox id="chkUseProfileAddress" runat="server" autopostback="True" text="Use membership address" OnCheckedChanged="chkUseProfileAddress_CheckedChanged"> </asp:checkbox><br />

<table border="0"> <tr><td>Name</td><td><asp:textbox id="txtName" runat="server" /></td></tr> <tr><td>Address</td><td><asp:textbox id="txtAddress" runat="server" /></td></tr> <tr><td>City</td><td><asp:textbox id="txtCity" runat="server" /></td></tr> <tr><td>County</td><td><asp:textbox id="txtCounty" runat="server" /></td></tr> <tr><td>Postcode</td><td><asp:textbox id="txtPostCode" runat="server" /></td></tr> <tr><td>Country</td><td><asp:textbox id="txtCountry" runat="server" /></td></tr> </table> </asp:WizardStep> <asp:WizardStep runat="server" Title="Payment"> Card Type: <asp:DropDownList id="lstCardType" runat="server"> <asp:ListItem>MasterCard</asp:ListItem> <asp:ListItem>Visa</asp:ListItem> </asp:DropDownList> <br /> Card Number: <asp:Textbox id="txtNumber" runat="server" Text="0123456789" ReadOnly="True"/> <br /> Expires: <asp:textbox id="txtExpiresMonth" runat="server" columns="2" /> / <asp:textbox id="txtExpiresYear" runat="server" columns="4" /> </asp:WizardStep> <asp:WizardStep runat="server" Title="Finish"> <wu:ShoppingCart runat="server" ID="ShoppingCart1"></wu:ShoppingCart> <br /> Please confirm you wish to have deducted from your credit card. </asp:WizardStep> <asp:WizardStep runat="server" StepType="Complete" Title="Order Complete"> Thank you for your order. </asp:WizardStep> </WizardSteps> <SideBarStyle VerticalAlign="Top"></SideBarStyle> </asp:wizard> <asp:Label ID="CreateOrderErrorLabel" runat="server" visible="false"> We are sorry but there was an error creating you order.<br /><br /> </asp:Label> </asp:Content>



242

* Trang Checkout.aspx.vb Imports System Imports System.Data.SqlClient Imports MyShop.Commerce Partial Class Checkout Inherits System.Web.UI.Page Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Trace.Write("In Page_Load") If Not Page.IsPostBack Then If Profile.Cart Is Nothing Then NoCartlabel.Visible = True Wizard1.Visible = False End If Trace.Write("In Page_Load", User.Identity.IsAuthenticated.ToString()) If User.Identity.IsAuthenticated Then Wizard1.ActiveStepIndex = 1 Else Wizard1.ActiveStepIndex = 0 End If End If End Sub Sub chkUseProfileAddress_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) ' fill the delivery address from the profile, but only if it's empty ' we don't want to overwrite the values If chkUseProfileAddress.Checked AndAlso txtName.Text.Trim() = "" Then txtName.Text = Profile.Name txtAddress.Text = Profile.Address txtCity.Text = Profile.City txtCounty.Text = Profile.County txtPostCode.Text = Profile.PostCode txtCountry.Text = Profile.Country End If End Sub Sub Wizard1_FinishButtonClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) ' Insert the order and order lines into the database Dim conn As SqlConnection = Nothing Dim trans As SqlTransaction = Nothing Dim cmd As SqlCommand Try conn = New SqlConnection(ConfigurationManager.ConnectionStrings("MyConn").ConnectionString) conn.Open()



243

trans = conn.BeginTransaction cmd = New SqlCommand() cmd.Connection = conn cmd.Transaction = trans ' set the order details cmd.CommandText = "INSERT INTO Orders(MemberName, OrderDate, CustomerName, Address, County, PostCode, Country, SubTotal, Discount, Total) " & _ "VALUES (@MemberName, @OrderDate, @CustomerName, @Address, @County, @PostCode, @Country, @SubTotal, @Discount, @Total)" cmd.Parameters.Add("@MemberName", Data.SqlDbType.VarChar, 50) cmd.Parameters.Add("@OrderDate", Data.SqlDbType.DateTime) cmd.Parameters.Add("@CustomerName", Data.SqlDbType.NVarChar, 50) cmd.Parameters.Add("@Address", Data.SqlDbType.NVarChar, 255) cmd.Parameters.Add("@County", Data.SqlDbType.NVarChar, 50) cmd.Parameters.Add("@PostCode", Data.SqlDbType.VarChar, 15) cmd.Parameters.Add("@Country", Data.SqlDbType.VarChar, 50) cmd.Parameters.Add("@SubTotal", Data.SqlDbType.Money) cmd.Parameters.Add("@Discount", Data.SqlDbType.Money) cmd.Parameters.Add("@Total", Data.SqlDbType.Money) cmd.Parameters("@MemberName").Value = User.Identity.Name cmd.Parameters("@OrderDate").Value = DateTime.Now() cmd.Parameters("@CustomerName").Value = CType(Wizard1.FindControl("txtName"), TextBox).Text cmd.Parameters("@Address").Value = CType(Wizard1.FindControl("txtAddress"), TextBox).Text cmd.Parameters("@County").Value = CType(Wizard1.FindControl("txtCounty"), TextBox).Text cmd.Parameters("@PostCode").Value = CType(Wizard1.FindControl("txtPostCode"), TextBox).Text cmd.Parameters("@Country").Value = CType(Wizard1.FindControl("txtCountry"), TextBox).Text cmd.Parameters("@SubTotal").Value = Profile.Cart.SubTotal cmd.Parameters("@Discount").Value = Profile.Cart.MemberDiscount cmd.Parameters("@Total").Value = Profile.Cart.Total cmd.ExecuteNonQuery() cmd.CommandText = " Select OrderID From Orders " & _ "Where(MemberName=@MemberName) and (OrderDate=@OrderDate) and (CustomerName=@CustomerName)and (Address=@Address) and (County=@County) and (PostCode=@PostCode) and (Country=@Country) and (SubTotal=@SubTotal) and (Discount=@Discount) and ( Total=@Total)" Dim OrderID As Integer OrderID = Convert.ToInt32(cmd.ExecuteScalar()) ' change the query and parameters for the order lines cmd.CommandText = "INSERT INTO Order_Details(OrderID, ProductID, Quantity, Price) " & _ "VALUES (@OrderID, @ProductID, @Quantity, @Price)" cmd.Parameters.Clear() cmd.Parameters.Add("@OrderID", Data.SqlDbType.Int) cmd.Parameters.Add("@ProductID", Data.SqlDbType.Int) cmd.Parameters.Add("@Quantity", Data.SqlDbType.Int) cmd.Parameters.Add("@Price", Data.SqlDbType.Money)



244

cmd.Parameters("@OrderID").Value = OrderID For Each item As CartItem In Profile.Cart.Items cmd.Parameters("@ProductID").Value = item.ProductID cmd.Parameters("@Quantity").Value = item.Quantity cmd.Parameters("@Price").Value = item.Price cmd.ExecuteNonQuery() Next ' commit the transaction trans.Commit() Catch SqlEx As SqlException ' some form of error - rollback the transaction ' and rethrow the exception If trans IsNot Nothing Then trans.Rollback() End If ' Log the exception 'Tools.log("An error occurred while creating the order", SqlEx) Throw New Exception("An error occurred while creating the order", SqlEx) CreateOrderErrorLabel.Visible = True Return Finally If conn IsNot Nothing Then conn.Close() End If End Try ' we will only reach here if the order has been created sucessfully ' so clear the cart Profile.Cart.Items.Clear() End Sub Sub Wizard1_NextButtonClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) Trace.Write("next: CurrentStep", e.CurrentStepIndex.ToString()) If e.CurrentStepIndex = 0 Then Dim l As System.Web.UI.WebControls.Login = CType(Wizard1.FindControl("Login1"), Login) If Membership.ValidateUser(l.UserName, l.Password) Then FormsAuthentication.SetAuthCookie(l.UserName, l.RememberMeSet) e.Cancel = False Else Trace.Write(l.UserName, l.Password) l.InstructionText = "Your login attempt was not successful. Please try again." l.InstructionTextStyle.ForeColor = System.Drawing.Color.Red e.Cancel = True End If



245

Else If Not User.Identity.IsAuthenticated Then e.Cancel = True Wizard1.ActiveStepIndex = 0 End If End If End Sub Protected Sub Wizard1_ActiveStepChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Wizard1.ActiveStepChanged If Not User.Identity.IsAuthenticated Then Trace.Write("step changed", "not authenticated, returning to step 0") Wizard1.ActiveStepIndex = 0 End If End Sub End Class

MỤC LỤCfit.mta.edu.vn/files/DanhSach/BGLTWeb_TinChi_V01.pdfBài giảng Lập trình Web Biên...

Documents

Transcript of MỤC LỤCfit.mta.edu.vn/files/DanhSach/BGLTWeb_TinChi_V01.pdfBài giảng Lập trình Web Biên...