Tài liệu khóa học lập trình web với ASP.

NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin

MỤC LỤC
I. Lý thuyết.............................................................................................................5
1.1 Giới thiệu.......................................................................................................................5 1.2 Danh sách các phần tử HTML thường dùng..................................................................5

II. Bài tập thực hành..............................................................................................7
1. Yêu cầu:...........................................................................................................................7 2. Hướng dẫn........................................................................................................................8 3. Minh hoạ mẫu..................................................................................................................8 4. Ghi chú.............................................................................................................................9

BÀI SỐ 2: Tạo trang web động với DHTML và JavaScript...............................................10 I. Lý thuyết...........................................................................................................10
1. Đưa câu lệnh javascript vào trang web..........................................................................10 2. Đưa câu lệnh javascript vào từ một file riêng biệt.........................................................11 3. Truy cập các phần tử HTML bằng câu lệnh Javascript.................................................12 4. Xây dựng hàm trong Javascript......................................................................................13 5. Một số hàm thông dụng của Javascript..........................................................................14

II. Thực hành........................................................................................................14
1. Yêu cầu..........................................................................................................................14 2. Hướng dẫn......................................................................................................................14 3. Minh hoạ mẫu................................................................................................................14 4. Ghi chú...........................................................................................................................17

BÀI 3: THAY ĐỔI NỘI DUNG TRANG WEB BẰNG CSS VÀ JS ĐỊNH DẠNG TRANG WEB VỚI CSS..............................................................17 I. Lý thuyết...........................................................................................................17
1. Định dạng CSS ngay trong định nghĩa phần tử (Gọi là Inline)......................................18 2. Định dạng CSS thông qua lớp........................................................................................18

II. Thực hành........................................................................................................20
1. Yêu cầu..........................................................................................................................20 2. Hướng dẫn......................................................................................................................20 3. Minh hoạ mẫu................................................................................................................21 4. Ghi chú...........................................................................................................................24

BÀI 4 (Tiếp): THAY ĐỔI NỘI DUNG TRANG WEB BẰNG CSS VÀ JS ĐỊNH DẠNG TRANG WEB VỚI CSS..............................................................25 I. Lý thuyết...........................................................................................................25
1. Tham chiếu đến một phần tử trong trang web...............................................................25 2. Tham chiếu đến một thuộc tính của phần tử..................................................................26 3. Thay đổi nội dung của một phần tử...............................................................................26

II. Thực hành........................................................................................................27
1 Yêu cầu...........................................................................................................................27 2 Hướng dẫn.......................................................................................................................28 V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.1

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin 3 Minh Hoạ mẫu................................................................................................................28 4 Ghi chú............................................................................................................................33

BÀI SỐ 5: ASP.NET và Web form.....................................................................33 I. Lý thuyết...........................................................................................................33
1. Mô hình lập trình phía máy chủ.....................................................................................33 2 Cơ chế xử lý file ASP.NET phía máy chủ......................................................................36 3 Một số ví dụ minh họa....................................................................................................39 4 Webform trong ASP.NET...............................................................................................42 5 Tìm hiểu cấu trúc trang ASP.NET..................................................................................42 6. Code behind và viết code phía Server............................................................................46 7. HTML Server Controls và Web controls.......................................................................47

II. Thực hành........................................................................................................48
1. Yêu cầu..........................................................................................................................48 2. Hướng dẫn......................................................................................................................49 3. Minh hoạ mẫu................................................................................................................49 4. Ghi chú...........................................................................................................................54

BÀI 6: Các đối tượng trong ASP.NET...............................................................55 I. Lý thuyết...........................................................................................................55
1. Request Object...............................................................................................................55 2 Response Object..............................................................................................................58 3 Server Object...................................................................................................................60 4 Session Object.................................................................................................................61 5 Application Object..........................................................................................................61

II. Thực hành........................................................................................................62
1. Bài 1: Tạo một trang Login............................................................................................62 2. Bài 2: Tạo một trang đếm số lượng người truy cập. .....................................................67

BÀI 7: CÔNG NGHỆ ADO.NET........................................................................69 I. Lý thuyết...........................................................................................................69
1. Giới thiệu chung ............................................................................................................69 2. Kiến trúc của ADO.NET................................................................................................70 3. Các lớp thao tác với CSDL: Connection, Command,…................................................71

II. THỰC HÀNH..................................................................................................84
1. Tạo cơ sở dữ liệu ...........................................................................................................84 2. Nhập dữ liệu cho bảng. .................................................................................................85 3. Hiển thị dữ liệu trong bảng lên trình duyệt....................................................................88 4. Cập nhật dữ liệu bằng DataSet và DataAdapter.............................................................89

BÀI 8: Tìm hiểu và ứng dụng cơ chế Data Binding...........................................91 I. Lý thuyết...........................................................................................................91
1 Giới thiệu DataBinding...................................................................................................91 2 Data Binding...................................................................................................................91 3. Các điều khiển Data Source (Data source controls).......................................................95

II. THỰC HÀNH................................................................................................104 BÀI 9: Làm việc với GridView..........................................................................108
V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319 P.2

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin

I. Lý thuyết.........................................................................................................108
1. Giới thiệu tổng quan.....................................................................................................108 2. Tìm hiểu lớp GridView ...............................................................................................108 3. Các tính năng hỗ trợ của GridView.............................................................................112 4. Tạo các cột tùy biến HyperLink, BoundColunm….....................................................116 5. Tạo và xử lý các cột Select, Edit, Delete, Update…....................................................120

II. Thực hành......................................................................................................124 BÀI 10: Sử dụng Templates..............................................................................131 I. Lý thuyết.........................................................................................................131
1. Giới thiệu tổng quan.....................................................................................................131 2. Các điều khiển hỗ trợ Templates.................................................................................131 3. Repeater control, DataList control, GridView control.................................................132

II. THỰC HÀNH................................................................................................139
1. Bài 1: Hiển thị danh sách cán bộ .................................................................................139 2. Bài 2: Bổ sung thêm trường vào bảng..........................................................................141 3 Bài 3: Hiển thị danh sách cán bộ dạng chi tiết. ............................................................142 4. Bài 4: Hiển thị danh sách người dùng dưới dạng Flow (tuyến tính) ...........................143 Bài 5: Hiển thị thông tin kèm Hyperlink..........................................................................147 Bài 6: Thực hiện phân trang.............................................................................................148

PHỤ LỤC...........................................................................................................150 I. ĐÓNG GÓI WEBSITE..................................................................................150 II. CÀI ĐẶT HỆ THỐNG IIS HỖ TRỢ ASP.NET WEBSITE......................150
1. Cài đặt IIS....................................................................................................................150 2. Cài đặt .NET Framework.............................................................................................150

V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.3

Fax: 0321-713.015 aptech@utehy.4 .edu.vn TÀI LIỆU KHÓA HỌC LẬP TRÌNH ASP.aptech.Tài liệu khóa học lập trình web với ASP.319. aptech@utehy.vn. Tel: 03213-713.vn.utehy.vn.edu. http://www.Nguyễn Minh Quý .0 – http://www.utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.319 P.net –diễn Đàn Sinh Viên Toán Tin TRUNG TÂM HƯNG YÊN – APTECH Địa chỉ Điện thoại E-mail Website : : : : Tầng 2.Lê Quang Lợi HƯNG YÊN 7/2009 V2. Nhà A – Đại học SPKT Hưng Yên 0321-713.NET Biên soạn: .aptech.

....319 P. v. Ví dụ cặp thẻ <b> . Mỗi cặp thẻ như vậy gọi là cặp thẻ HTML (Hyper Text Markup Language).edu.. trước khi muốn xây dựng ứng dụng web thực thụ thì không chỉ phải hiểu rất rõ những cặp thẻ HTML (ít nhất là những cặp thẻ cơ bản) mà còn phải biết cách Code (tạo) các cặp thẻ này. <TR>.. DHTML.1 Giới thiệu Một trang web khi được hiển thị trên trình duyệt (IE.v. Nội dung I.Tài liệu khóa học lập trình web với ASP. 1. <TD>. Tel: 03213-713.5 .0 – http://www..2 Danh sách các phần tử HTML thường dùng Dưới đây là danh sách các phần tử HTML cơ bản và cách tạo ra tương ứng bằng cặp thẻ HTML STT Phần tử Input Button CheckBox Radio button Hình thù hiển thị trên trang web Cách tạo ra bằng thẻ HTML tương ứng <input type="text" value="hello" name="txtMsg"> Yes CheckBox1 Nam <input type="button" value="Yes" name="btnYes"> <input type="checkBox" name="chkHTML" value="Checked"> <input type="radio" value='Checked' name = 'optGioiTinh'> <Select name="lstDSSV" Size="3"> <Option value="sv1"> Nguyễn Văn A </Option > <Option value="sv2"> Nguyễn Văn B </Option > <Option value="sv3"> Nguyễn Văn C </Option > </Select> <Select name="lstDSSV" Size="1"> <Option value="sv1"> Nguyễn Văn A </Option > <Option value="sv2"> Nguyễn Văn B </Option > <Option value="sv3"> Nguyễn Văn C </Option > þÿ List Danh sách (Combo Box) þÿ þÿNguyÅn Vn A V2.) về bản chất được tạo từ các cặp thẻ (tag) đặc biệt. FireFox. aptech@utehy... </b> sẽ chỉ dẫn cho trình duyệt phải in đậm nội dung bên trong.net –diễn Đàn Sinh Viên Toán Tin PHẦN I Cơ bản về HTML.aptech. Các thẻ này sẽ chỉ dẫn cho trình duyệt biết nên hiển thị nội dung như thế nào. đối với mỗi lập trình viên web.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.utehy. Vì vậy. Lý thuyết 1.. sinh viên có thể  Tạo được trang web tĩnh trên notepad/ HTML Editor  Định dạng nội dung trang web bằng các phần tử HTML cơ bản  Thao tác được với phần tử bảng (Table)..vn.vn. Netscape. JavaScript BÀI SỐ 1: Tạo trang web với HTML Mục tiêu: Kết thúc bài học.

NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.aptech.utehy..6 . phần tử div thì các phần tử khác cũng ẩn/hiện/di chuyển theo..edu. V2.utehy. <tr> Trộn hai cột => <td> </td> <td colspan = 2> </td> </tr> . Khi ẩn/ hiện/ di chuyển.. <table border="1"> <tr> <td >1</td> <td>2</td> <td>3</td> </tr> <tr> <td rowspan="2" >1</td> <td>2</td><td>3</td> </tr> <tr> <td >1</td> <td>2</td> </tr> </table> <a href="http://www. Phần <giá trị> được đặt trong cặp dấu nháy đơn hoặc cặp dấu nháy kép.. không thể tạo riêng div Table 11 21 12 22 TR TD Thẻ TD phải nằm trong một <TR> nào đó. aptech@utehy.Tài liệu khóa học lập trình web với ASP.png" alt ="Logo UTEHY"> Trộn 2 hàng => a img www.net –diễn Đàn Sinh Viên Toán Tin </Select> Phân cách xuống dòng Là một phần tử chứa các phần tử khác.vn Chú ý: Thuộc tính đặt cho các phần tử được viết dưới dạng: <Tên thuộc tính>=<giá trị>..utehy.0 – http://www..319 P..vn"> www. không thể tạo riêng.utehy. <hr> <br> <div> <input type="text" value="" name = "txtHoTen"> <input type ="button" value="OK" name="btnOK"> </div> <Table border = "1"> <tr> <td> 11 </td> <td> 12 </td> </tr> <tr> <td> 21 </td> <td> 22 </td> </tr> </table> Thẻ TR phải nằm trong một <Table> nào đó..aptech. Tel: 03213-713. .aptech.vn </a> <img src="utehylogo..vn.vn..

7 .edu.319 P.Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn. aptech@utehy.vn.aptech. Bài tập thực hành 1.0 – http://www.net –diễn Đàn Sinh Viên Toán Tin II. Tel: 03213-713.utehy. Yêu cầu: Tạo một trang web để hiển thị nội dung như sau: Giao diện trang web cần tạo V2.

Hướng dẫn Sử dụng bảng mô tả các phần tử ở trên để tạo trang theo yêu cầu.aspx bên panel phải).319 P. sau đó chọ "View in Browser". Minh hoạ mẫu Default.Tài liệu khóa học lập trình web với ASP.org/1999/xhtml"> <head runat="server"> <title>Bài thực hành số 1 .vn.aspx và viết các thẻ HTML. Vào trình soạn thảo web của Visual Studio 2008 và tạo dự án web.Hưng Yên Aptech</title> </head> <body> <br /> <h1> PHẦN MỀM QUẢN LÝ BÁN HÀNG</h1> <h2> NHẬP THÔNG TIN NHÀ CUNG CẤP </h2> <hr /> <form id="form1" runat="server"> Tên nhà cung cấp: <input type ="text" id ="txtNCC" size="30"/> <br /> Người đại diện: <input type ="text" id ="txtContactName" /> Chức vụ: <input type ="text" id ="txtContactTitle" /> <br /> Địa chỉ Nhà CC: <input type ="text" id ="txtAddress" size ="50" /> <br /> Thành phố : <select id ="lstCity" size ="1"> <option value ="null">----Chọn----</option> <option value ="HN">Hà nội</option> <option value ="HCMC">TP Hồ Chí Minh</option> <option value ="ĐN">Đà Nẵng</option> <option value ="HP">Hải Phòng</option> <option value ="HY">Hưng Yên</option> <option value ="HD">Hải Dương</option> <option value ="QN">Quảng Ninh</option> <option value ="OTHER">Nơi khác</option> </select> Vùng: <input type ="text" id ="txtRegion" /> <br /> Mã bưu điện: <input type ="text" id ="txtPostalCode" /> <br /> Quốc gia: <select id ="lstCountry" size ="4"> <option value ="VN" selected>Việt Nam</option> <option value ="LAO">Lào</option> <option value ="CAMPUCHIA">Campuchia</option> <option value ="OTHER">Nơi khác</option> </select> <br /> V2.aspx.utehy.0 – http://www. 3. aptech@utehy. Để chạy (mở) trang web vừa tạo.cs" Inherits="_Default" %> <html xmlns="http://www.w3.aptech. Tel: 03213-713.edu.vn.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. sau đó mở trang Default.8 .aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.net –diễn Đàn Sinh Viên Toán Tin 2. có thể nhấn F5 hoặc click chuột phải trong trang soạn thảo (hoặc tệp Default.

NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tel: 03213-713.cmc.edu.aptech.vn</a></td> </tr> <tr> <td>3</td> <td>Công ty Trần Anh</td> <td>Giảng võ .utehy. Muốn thay đổi độ rộng của textbox.vn"> www.Ba Đình</td> <td><a href ="http://www.9 V2.vn. Ghi chú       Để thực hiện xoá (reset về trạng thái đầu) của một form nhập liệu.trananh. Có thể bố trí lại trang web trên cho đẹp hơn bằng cách đặt các phần tử trong các ô của bảng (sử dụng thẻ Table). Để gửi toàn bộ nội dung dữ liệu đã nhập về server xử lý.vn"> www. P.vn</a></td> </tr> </table> </form> </body> </html> 4. Để tạo hộp text có nhiều dòng.Tài liệu khóa học lập trình web với ASP.Ba Đình</td> <td><a href="http://www.trananh.fpt.vn.net –diễn Đàn Sinh Viên Toán Tin Điện thoại: <textarea rows ="3" cols ="20" id ="txtTelephone"> </textarea> Số Fax: <input type ="text" id ="txtFaxNumber" /> <br /> Địa chỉ website: <input type ="text" id ="txtHomepage" size ="50" /> <hr /> <input type ="reset" value ="Xoá (reset form)" /> <input type ="submit" value ="Thêm mới" /> <br /> <hr /> <h3>Danh sách nhà cung cấp hiện có</h3> <table border ="1"> <tr> <th>Mã NCC</th> <th>Tên NCC</th> <th>Địa chỉ</th> <th>Homepage</th> </tr> <tr> <td>1</td> <td>Công ty FPT</td> <td>Láng Hạ .Hai Bà Trưng</td> <td><a href ="http://www.vn">www.cmc.vn</a></td> </tr> <tr> <td>2</td> <td>Công ty CMC</td> <td>Hàn Thuyên . aptech@utehy.319 . ta dùng thẻ <TextArea>.fpt. chỉ cần thay đổi thuộc tính "size". tạo phần tử button nhưng đặt "type" là "submit" (thay vì type = "button") Để chọn mặc định một mục trong danh sách (Select) thì đặc thuộc tính là "Selected" cho mục đó. ta tạo phần tử button nhưng đặt "type" là "reset" (thay vì type = "button).0 – http://www.

Nếu trang web cho phép thực hiện thay đổi (bằng ngôn ngữ kịch bản như VBScript..) gọi là các trang động phía server (Active Server Page). Lý thuyết Một trang web được tạo ở bài trước được gọi là một trang web tĩnh (Static webpage .write ("<h1>Chào bạn ! </h1>").edu. Khả năng "động" đó có thể thực hiện ở bên phía trình duyệt hoặc phía server. 1. Nội dung: I.  Tạo trang web đăng ký có xử lý tính hợp lệ của dữ liệu nhập vào. Perl. Trong tài liệu này chúng ta sẽ tìm hiểu cả hai dạng web động ở trên. người học có thể  Truy xuất các đối tượng trình duyệt và các phần tử HTML bằng JavaScript.).tức là: nội dung của trang web có thể hiển thị. Ví dụ: Hiển thị một lời chào và thông báo ngày hiện tại khi trang web được mở. Tel: 03213-713. <html> <body> <form id="form1"> <script language="javascript" type ="text/javascript"> var d = new Date ().vn. JavaScript.aptech. aptech@utehy. ASP.1 Đưa câu lệnh javascript vào luồng xử lý ngay khi trang web được mở.) bên phía trình duyệt.net –diễn Đàn Sinh Viên Toán Tin BÀI SỐ 2: Tạo trang web động với DHTML và JavaScript Mục tiêu: Kết thúc bài thực này.... còn trong bài này ta sẽ tìm hiểu trang DHTML với Javascript (JS)..Tài liệu khóa học lập trình web với ASP. document.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.. VB. gọi là trang DHTML (Dynamic HTML). </script> </form> </body> </html> ** Chú ý: Có thể có nhiều đoạn script trong một trang. Trong cặp script phải là các CÂU LỆNH JAVASCRIPT V2. Tuy nhiên.utehy..NET.0 – http://www.. ngày nay do nhu cầu của người dùng và của ứng dụng nên một trang web phải có khả năng động (Dynamic webpage .tức là: Nội dung của nó một khi đã được tạo ra thì luôn luôn hiển thị giống nhau đối với mọi người dùng ở mọi thời điểm). </script> nhưng không hàm.. còn nếu trang web thực hiện xử lý bên phía server (bằng ngôn ngữ C#. Đưa câu lệnh javascript vào trang web 1. ta chỉ cần đặt các câu lệnh JS ngay trong các cặp thẻ <Script> .. ứng xử khác nhau ứng với người sử dụng hoặc tình huống khác nhau.10 .vn. document.319 P. PHP.write("Hôm nay là: " + d. Để đưa các câu lệnh Javascript vào trang web và yêu cầu trình duyệt thực thi ngay khi trang web được mở..toDateString()).

. sau đó gọi các hàm này trong trang web có tên là TestJS. Để khắc phục hạn chế này.. nhấn phím .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. mà thường đưa các câu lệnh này vào một hàm. 2.vn. người ta thường đặt các hàm JS trong một tệp riêng.319 P. sau đó viết câu lệnh gọi hàm trong sự kiện.net –diễn Đàn Sinh Viên Toán Tin Những câu lệnh JS nếu không nằm trong các hàm thì sẽ được thực hiện ngay khi trang web được mở. số hàm.b) { return a+b.edu. 1.toDateString()). Đưa câu lệnh javascript vào từ một file riêng biệt.. Trong các ứng dụng lớn. } //Hàm trừ hai số nguyên function Tru(a.0 – http://www. Việc "nhúng" các trang *.Trong trường hợp này đơn giản là ta đưa câu lệnh vào sự kiện tương ứng theo cú pháp: .2 Đưa câu lệnh javascript vào các sự kiện (event) Như ở phần 1. document. Ví dụ: Hiển thị lời chào và thông báo ngày hiện tại khi người dùng nhấn vào nút "Hello": <html> <body> <form> <input type ="button" value="Hello" onclick= "var d=new Date ().vn." > </form> </body> </html> *** Thực tế. <Tên sự kiện> = "Danh sách câu lệnh JS được cách nhau bởi dấu chấm phảy". aptech@utehy.11 .write ('Chào bạn ! <br> Hôm nay là:'+d. vì vậy nếu để các hàm này ngay trong file HTML như ở trên sẽ khó bảo trì và khiến cho việc chia sẻ gặp khó khăn.b) { return a-b...js.. tuy nhiên có những lúc ta muốn nó chỉ được thực hiện khi một sự kiện nào đó xảy ra. sau đó chỉ việc gọi các hàm này trong trang HTML. rất ít khi người ta đưa quá nhiều câu lệnh vào ngay bên trong sự kiện như ở trên.utehy.aptech.Tài liệu khóa học lập trình web với ASP. File MyMath. Ví dụ: Tạo một file chứa các hàm JS Cộng và trừ trong một file có tên là MyMath.1 thì các câu lệnh JS sẽ được thực thi ngay khi trang web được mở.htm. } V2. Tel: 03213-713. câu lệnh JS cũng sẽ rất lớn.js //Hàm cộng hai số nguyên function Cong(a.JS vào trang html thông qua thuộc tính "src".. như click chuột.

Tel: 03213-713.value). document.<Tên/hoặc ID phần tử thuộc form>.utehy. checkbox.value).edu. <html> <head runat="server"> <title>Lession 02</title> <script language="javascript"> function ThucHien() { var a = parseFloat(document.<Tên thuộc tính cần đọc/ ghi>.htm <html> <head runat="server"> <title>Lession 02</title> <script language="javascript" src="MyMath. select.319 P.net –diễn Đàn Sinh Viên Toán Tin File TestJS.1)).vn.aptech.vn.Tài liệu khóa học lập trình web với ASP.getElementById(<ID phần tử cần truy xuất>).2)).value = a+b. aptech@utehy.forms[Chỉ số].<Tên/hoặc ID phần tử thuộc form>. alert ("10-2 = " + Tru (10. hoặc: + Document.txtTong.form1. </script> </form> </body> </html> 3. var b = parseFloat(document. ta có thể truy xuất đến các thuộc tính của nó để đọc/ ghi như sau: <Tham chiếu đến Phần tử>.. hoặc phần tử bất kỳ).form1. Việc truy xuất đến phần tử tuân theo cú pháp chung như sau: + Document.txtSH2. hoặc: + Document.aspx" method="post"> <script language="javascript"> alert ("1+1 = " + Cong(1. Truy cập các phần tử HTML bằng câu lệnh Javascript Trong JS. Khi đã truy xuất đến phần tử.<tên form>. có thể truy xuất (đọc/ ghi) các biến hoặc các phần tử trên trang web (như button..js"></script> </head> <body> <form id="form1" action="Default.form1. textbox.txtSH1. } </script> </head> <body> <form name="form1"> <h3>Chương trình tính tổng</h3> V2.12 ..NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. radio button.0 – http://www.

txtSH1 và document.. document. var b = parseFloat(document.... ta chỉ cần thêm thuộc tính Value vào sau tham chiếu..value = LuyThua (x. y=document.value)..form1.w3schools...txtSH1..value Ngoài ra có thể viết theo cách khác như sau: ..." value ="Tính" /> </form> </body> </html> *** Theo ví dụ ở trên.. return KQ. có thể tra cứu trên Internet (ví dụ trạng www.getElementById("txtY").forms[0].utehy. aptech@utehy..value ..value). } function ThucHien() { var x...getElementById("txtTong"). x=document. để truy xuất (tham chiếu) đến phần tử txtSH1 và txtSH2 ta viết: document..Danh sách tham số không có kiểu Ví dụ: Viết một hàm tính luỹ thừa của một số xy <html> <head runat="server"> <title>Lession 02</title> <script language="javascript"> function LuyThua(x. y) { var KQ = Math..net –diễn Đàn Sinh Viên Toán Tin Số hạng 1: <input type="text" id ="txtSH1" /> <br /> Số hạng 2: <input type="text" id ="txtSH2" /> <br /> Tổng: <input type="text" id ="txtTong" /> <br /> <input type="button" onclick ="ThucHien(). Tuy nhiên có một số sự khác biệt.pow (x.forms[0]..edu.value .txtSH1... document. Còn để truy xuất đến thuộc tính value (chứa nội dung của textbox).. <script language="javascript"> function ThucHien() { var a = parseFloat(document.Tài liệu khóa học lập trình web với ASP..txtSH2. có thể xây dựng các hàm giống như các ngôn ngữ lập trình khác...getElementById("txtXMuY").txtSH2..319 P.vn.0 – http://www...vn.aptech.form1....value = a+b. Để biết danh sách các thuộc tính của phần tử tương ứng.13 . } </script> </head> <body> V2.y).... Xây dựng hàm trong Javascript Trong Javascript.... Tel: 03213-713.. cụ thể: .getElementById("txtX").y).y.....Hàm không có kiểu trả về .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.com) hoặc search: "Javascript reference" 4. } </script> .. cụ thể viết: document....form1..

thực: pareInt(<Xâu>). Dữ liệu nhập vào được gọi là không hợp lệ nếu gặp một trong các trường hợp sau: Tên nhà cung cấp để trống Thành phố không được chọn Điện thoại chứa ký tự không phải là số Địa chỉ website không đúng. pareFloat(<Xâu>). toLower.vn.Hàm chuyển xâu sang số nguyên. .3 Sử dụng các hàm xử lý xâu.vn.w3.1 Để huỷ một sự kiện của một phần tử bất kỳ.14 .. .edu.. . aptech@utehy. ..319 P. chỉ cần thêm câu lệnh "return false.Hàm open(<URL>): để mở một trang web. Hướng dẫn 2.Hàm xử lý xâu: SubStr. Length. pow.Tài liệu khóa học lập trình web với ASP.cs" Inherits="_Default" %> <html xmlns="http://www. ." trong phần câu lệnh xử lý sự kiện tương ứng. Thực hành 1..Hưng Yên Aptech</title> V2." value ="Tính" /> </form> </body> </html> 5. . . 2.Hàm xử lý toán học: như Sin.Hàm alert(<Biểu thức>): Thông báo trong một hộp thoại riêng. theo yêu cầu sau đây: Nếu dữ liệu hợp lệ thì thực hiện submit Nếu dữ liệu nhập vào không hợp lệ thì thông báo cho người dùng và không thực hiện submit. false=đúng là số) 2. . nằm trong đối tượng Math.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Hàm write(<Biểu thức cần in ra màn hình>): Để in kết quả ra trang web.0 – http://www.aptech.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default. 2. abs.net –diễn Đàn Sinh Viên Toán Tin <form name="form1" action="Default.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Bài thực hành số 2 .2 Sử dụng các hàm kiểm tra số IsNaN() (true = không phải là số. Tel: 03213-713. Minh hoạ mẫu File Default.Hàm tính giá trị của một biểu thức: eval(<Xâu chứa biểu thức>). . 2. cos.. Một số hàm thông dụng của Javascript . có sẵn đối với mỗi xâu.4 Viết dưới dạng các hàm..aspx. Yêu cầu Sắp xếp lại trang web trong bài thực hành 1 dưới dạng bảng sau đó viết thủ tục xử lý sự kiện click của nút submit .Hàm confirm(<thông báo>): Yêu cầu người dùng xác nhận. 3. II.utehy.Hàm prompt(<Biểu thức>): Để yêu cầu nhập thông tin từ người dùng.aspx" method="post"> <h3>Chương trình tính luỹ thừa</h3> Cơ số: <input type="text" id ="txtX" /> <br /> Số mũ: <input type="text" id ="txtY" /> <br /> Kết quả (X<sup>Y</sup>): <input type="text" id ="txtXMuY" /><br /> <input type="button" onclick ="ThucHien().

edu. //dữ liệu nhập hợp lệ.value == "") { alert ("Bạn phải nhập tên nhà cung cấp !"). hãy nhập theo dạng http://").Tài liệu khóa học lập trình web với ASP.net –diễn Đàn Sinh Viên Toán Tin <script language="javascript" type="text/javascript"> function KiemTraDuLieu() { if (document.319 P.getElementById("txtHomepage"). } </script> </head> <body> <br /> <h1> PHẦN MỀM QUẢN LÝ BÁN HÀNG</h1> <h2> NHẬP THÔNG TIN NHÀ CUNG CẤP </h2> <hr /> <form id="form1" runat="server"> <table border="0"> <tr> <td>Tên nhà cung cấp:</td> <td><input type ="text" id ="txtNCC" size="30" /></td> </tr> <tr> <td>Người đại diện:</td> <td><input type ="text" id ="txtContactName" /> Chức vụ: <input type ="text" id ="txtContactTitle" /> </td> </tr> <tr> <td>Địa chỉ Nhà CC:</td> <td><input type ="text" id ="txtAddress" size ="50" /></td> </tr> <tr> <td>Thành phố :</td> <td><select id ="lstCity" size ="1"> <option value ="null">----Chọn----</option> V2.toLowerCase() if (homepage. } if (document. aptech@utehy.getElementById("txtNCC").vn.value) == true ) { alert ("Số ĐT chỉ chứa ký tự số !"+document.value. return false . } if (isNaN(document.indexOf("http://")==-1) { alert ("Địa chỉ website không đúng. return false.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn. } var homepage=document.selectedIndex == 0)| { alert ("Bạn chưa chọn Thành phố !").utehy. } return true. return false .0 – http://www.15 . Tel: 03213-713.getElementById("txtTelephone").aptech. return false.getElementById("txtTelephone").value).getElementById("lstCity").

0 – http://www.aptech.16 .319 P.edu.Tài liệu khóa học lập trình web với ASP.utehy.vn." /> <br /> <hr /> <h3>Danh sách nhà cung cấp hiện có</h3> <table border ="1"> <tr> <th>Mã NCC</th> <th>Tên NCC</th> <th>Địa chỉ</th> <th>Homepage</th> </tr> <tr> <td>1</td> V2. aptech@utehy.vn.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tel: 03213-713.net –diễn Đàn Sinh Viên Toán Tin <option value ="HN">Hà nội</option> <option value ="HCMC">TP Hồ Chí Minh</option> <option value ="ĐN">Đà Nẵng</option> <option value ="HP">Hải Phòng</option> <option value ="HY">Hưng Yên</option> <option value ="HD">Hải Dương</option> <option value ="QN">Quảng Ninh</option> <option value ="OTHER">Nơi khác</option> </select> Vùng: <input type ="text" id ="txtRegion" /> </td> </tr> <tr> <td>Mã bưu điện:</td> <td><input type ="text" id ="txtPostalCode" /></td> </tr> <tr> <td>Quốc gia:</td> <td> <select id ="lstCountry" size ="4"> <option value ="VN" selected>Việt Nam</option> <option value ="LAO" >Lào</option> <option value ="CAMPUCHIA">Campuchia</option> <option value ="OTHER">Nơi khác</option> </select> </td> </tr> <tr> <td>Điện thoại:</td> <td><input type="text" id ="txtTelephone" /> Số Fax: <input type ="text" id ="txtFaxNumber" /> </td> </tr> <tr> <td>Địa chỉ website:</td> <td><input type ="text" id ="txtHomepage" size ="50" /></td> </tr> <tr> <td></td> <td></td> </tr> </table> <hr /> <input type ="reset" value ="Xoá (reset form)" /> <input type ="submit" value ="Thêm mới" onclick ="return KiemTraDuLieu().

vn"> www.com/docs/manuals/ja vascript. aptech@utehy.aptech. Tuy nhiên cách đặt trước đây có nhiều điểm hạn chế vì vậy hiện nay trong lập trình chủ yếu sử dụng cú pháp định dạng mới gọi là CSS (Cascading Style Sheet = bảng định kiểu).net –diễn Đàn Sinh Viên Toán Tin <td>Công ty FPT</td> <td>Láng Hạ . Tel: 03213-713.Ba Đình</td> <td><a href="http://www.. BÀI 3: THAY ĐỔI NỘI DUNG TRANG WEB BẰNG CSS VÀ JS ĐỊNH DẠNG TRANG WEB VỚI CSS Mục tiêu sau khi kết thúc bài học  Trình bày được cách định nghĩa CSS kiểu dòng và lớp.  Sử dụng CSS và bảng thuộc tính CSS để định dạng cho phần tử bất kỳ.vn</a></td> </tr> </table> </form> </body> </html> 4.vn</a></td> </tr> <tr> <td>3</td> <td>Công ty Trần Anh</td> <td>Giảng võ .vn">www.Ba Đình</td> <td><a href ="http://www.319 P.com/docs/manuals/js /client/jsguide/index.trananh.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.0 – http://www. phương thức.) tại: www.cmc.netscape. sự kiện của các phần tử (Select.htm http://developer.vn"> www. đảm bảo tính mỹ thuật và kỹ thuật. command. Có nhiều cách định kiểu cho phần tử web bằng CSS..fpt. <font-face> để đặt font chữ.17 .cmc.Hai Bà Trưng</td> <td><a href ="http://www.vn. checkbox. v.w3schools. I.v.html hoặc bản mềm đi kèm khóa học.  Định dạng lại trang thông tin sản phẩm bằng CSS.vn</a></td> </tr> <tr> <td>2</td> <td>Công ty CMC</td> <td>Hàn Thuyên .trananh. người ta thường dùng các cú pháp cũ để định dạng các phần tử trên trang web (ví dụ <b> để in đậm..utehy.). Ghi chú Có thể tra cứu các thuộc tính.vn.netscape.fpt.edu.com http://developer. Lý thuyết Trước đây. tuy nhiên thực tế hay sử dụng cách định dạng sau đây: V2..Tài liệu khóa học lập trình web với ASP..

utehy..com/dhtmltutors/cssreference... Thường được sử dụng cho những phần tử có định dạng riêng..aptech.. khi muốn định dạng cho một phần tử/ thẻ bất kỳ nào đó người ta định nghĩa CSS ngay trong phần tử/ thẻ đó...... in nghiêng... cỡ chữ 16pt như sau: <input type="button" style="background-color:Red... không sử dụng lại được và mất thời gian bảo trì. font-style:italic">Màu đỏ...shtml Với cách này ta phải định nghĩa riêng cho từng phần tử....w3schools. Phần định nghĩa CSS này được đặt trong cặp thẻ <HEAD>...asp hoặc trang http://www....edu..... sau đó áp dụng để định dạng nội dung mục lục của một cuốn tài liệu. sau đó có thể áp dụng lớp này cho các phần tử mong muốn...net –diễn Đàn Sinh Viên Toán Tin 1..vn. Lớp MỤC_LỚNcó 2 thuộc tính: Màu chữ đậm.Tài liệu khóa học lập trình web với ASP. Định nghĩa: .vn. Danh sách các thuộc tính và giá trị cũng như ý nghĩa của mỗi thuộc tính có thể tra trong bảng (bản mềm kèm khoá học) hoặc vào tìm kiếm trên internet: http://www.. aptech@utehy. font chữ nghiêng như sau: <h2 style="color:Red... /> Ví dụ: Định nghĩa 2 lớp MỤC_LỚN và MỤC_NHỎ. .. font-size:16pt" value="Yes" /> Chú ý: Nội dung trong style chứa các cặp <Tên thuộc tính>: <Giá trị> và cách nhau bởi dấu hai chấm.. 2. Định dạng CSS ngay trong định nghĩa phần tử (Gọi là Inline) Với cách này.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.. cỡ chữ 16 Lớp MỤC_NHỎ có 3 thuộc tính: Màu chữ đậm.. } <style> </head> Sử dụng: <Tên_thẻ class = <Tên_Lớp> .0 – http://www..javascriptkit. Ví dụ1: Định nghĩa nội dung thẻ H2 có màu chữ đỏ.com/CSS/CSS_reference. cỡ chữ 14 <html> V2. <Head> <style type="text/css"> . Tel: 03213-713.... </HEAD>.18 .<Tên_lớp> { Tên_Thuộc_tính_1: Giá_trị_1..319 P. chữ nghiêng</h2> Ví dụ2: Định nghĩa nút nhấn "Yes" có nền đỏ. Định dạng CSS thông qua lớp Cách thứ hai linh hoạt hơn và thường áp dụng cho các trang web lớn. đó là người ta định nghĩa sẵn một số CSS gọi là lớp (class)... Tên_Thuộc_tính_2: Giá_trị_2.

vn.2 Thực hành Bài 3: Tạo trang web tĩnh với CSS & JS 3. } .1 Lý thuyết 1. font-size:16pt. font-size:14pt.net –diễn Đàn Sinh Viên Toán Tin <head> <title>CSS</title> <style type="text/css"> .MỤC_NHỎ { font-weight:bold. } </style> </head> <body> <form id="form1" runat="server"> <h1>Mục lục</h1> <span class="MỤC_LỚN">Bài 1: Tạo trang web tĩnh với HTML</span> <br /> <span class = "MỤC_NHỎ">1. font-style:italic.2 Thực hành Bài 2: Sử dụng JavaScript 2.1 Lý thuyết 2. Tel: 03213-713.Tài liệu khóa học lập trình web với ASP. aptech@utehy.1 Lý thuyết</span> <br /> <span class = "MỤC_NHỎ">2.vn.utehy.aptech.2 Thực hành</span> <br /><br /> <span class="MỤC_LỚN">Bài 3: Tạo trang web tĩnh với CSS & JS</span><br /> <span class = "MỤC_NHỎ">3.2 Thực hành</span> <br /><br /> <span class="MỤC_LỚN">Bài 2: Sử dụng JavaScript</span><br /> <span class = "MỤC_NHỎ">2.edu.0 – http://www.2 Thực hành V2.MỤC_LỚN { font-weight:bold.1 Lý thuyết</span> <br /> <span class = "MỤC_NHỎ">1.319 P.19 .2 Thực hành</span> </form> </body> </html> Kết quả cho ta: Mục lục Bài 1: Tạo trang web tĩnh với HTML 1.1 Lý thuyết</span> <br /> <span class = "MỤC_NHỎ">3.1 Lý thuyết 3.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.

Tài liệu khóa học lập trình web với ASP. không có thẻ kiểu như <style.Sử dụng định dạng CSS tại dòng và tạo lớp CSS. Ngoài ra.utehy. sau đó áp dụng lớp này cho thẻ bằng thuộc tính Classs= <Tên lớp>.vn. aptech@utehy..css" /> *Chú ý: Nội dung trang css chỉ chứa định nghĩa các lớp. ta chỉ cần khai báo như sau trong phần Head: <link type="text/css" rel="Stylesheet" href="xyz. người ta có thể định nghĩa CSS trong một tệp riêng. sau đó sử dụng cho nhiều phần tử. .0 – http://www. Hướng dẫn . Để sử dụng (gọi) các CSS định nghĩa trong một file xyz. Kết quả sau cùng cần đạt tới ít nhất phải như sau: Giao diện kết quả 2.aptech. Yêu cầu Viết lại trang nhập thông tin nhà cung cấp ở các bài học trước nhưng sử dụng CSS để định nghĩa lại các phần tử.20 .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.edu. Việc bảo trì và sửa chữa sẽ dề dàng và nhanh chóng hơn. Tel: 03213-713.319 P. sau đó có thể sử dụng trong tất cả các trang khác nhau.css nào đó.Các phần tử có cùng thuộc tính thì nên tạo một lớp riêng.net –diễn Đàn Sinh Viên Toán Tin ** Ưu điểm của định nghĩa lớp này là ta chỉ phải định nghĩa một lần. V2.> II.vn.. Thực hành 1.

width:150px.TiêuĐềNCC { text-align:center. Tel: 03213-713.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. border-color:gray.0 – http://www.edu. } .com 3. border-right:solid 1px gray. } </style> </head> <body> <form id="form1" runat="server"> <div> <table class="Bảng"> <tr> <td style="background-color:Purple.net –diễn Đàn Sinh Viên Toán Tin . text-align:right.Bảng { border-collapse:collapse.www.21 . Minh hoạ mẫu <html> <head> <title>CSS</title> <style type="text/css"> . color:Gray. width:600px.CạnhPhải { border-right:solid 1px gray. border-style:solid . } td.Nhãn { font-style:italic. border-bottom:solid 1px gray. margin-left:auto.Tra cứu bảng CSS trong bản mềm đi kèm hoặc trang . width:600px">NHẬP THÔNG TIN NHÀ CC</span> </td> </tr> V2. font-size:12pt. margin-right:auto. } td { padding:3px. color:White. text-align:center" colspan="2"> <span style="font-size:18pt.vn.Tài liệu khóa học lập trình web với ASP. } .vn.aptech.w3schools.319 P. padding-right:5px. border-width:1px. aptech@utehy.utehy.

utehy.319 P.edu.vn.0 – http://www. Tel: 03213-713.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. aptech@utehy.22 .vn.Tài liệu khóa học lập trình web với ASP.net –diễn Đàn Sinh Viên Toán Tin <tr> <td class="Nhãn"> Tên Nhà CC </td> <td> <input type="text" style="width:450px" /> </td> </tr> <tr> <td class="Nhãn" > Người đại diện </td> <td> <input type ="text" id="txtNguoiDaiDien" style="width:300px" /> </td> </tr> <tr> <td class="Nhãn"> Chức vụ </td> <td> <input type ="text" id="txtChucVu" style="width:300px" /> </td> </tr> <tr> <td class="Nhãn"> Điện thoại </td> <td> <input type ="text" id="txtDienThoai" style="width:200px" /> </td> </tr> <tr> <td class="Nhãn"> Địa chỉ NCC </td> <td> <input type="text" id="txtDiaChi" style="width:450px"/> </td> </tr> <tr> <td class="Nhãn"> Thành phố: </td> <td> <select id ="lstCity" size ="1"> <option value ="null">----Chọn----</option> <option value ="HN">Hà nội</option> <option value ="HCMC">TP Hồ Chí Minh</option> <option value ="ĐN">Đà Nẵng</option> <option value ="HP">Hải Phòng</option> <option value ="HY">Hưng Yên</option> <option value ="HD">Hải Dương</option> <option value ="QN">Quảng Ninh</option> V2.aptech.

319 P.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn.0 – http://www. Tel: 03213-713.net –diễn Đàn Sinh Viên Toán Tin <option value ="OTHER">Nơi khác</option> </select> Vùng: <input type ="text" id ="txtRegion" style="width:150px" /> </td> </tr> <tr> <td class="Nhãn"> Mã bưu điện: </td> <td> <input type ="text" id ="txtPostalCode" style="width:150px"/> </td> </tr> <tr> <td class="Nhãn"> Quốc gia: </td> <td> <select id ="lstCountry" size ="1"> <option value ="VN" selected>Việt Nam</option> <option value ="LAO">Lào</option> <option value ="CAMPUCHIA">Campuchia</option> <option value ="OTHER">Nơi khác</option> </select> </td> </tr> <tr> <td class="Nhãn"> Điện thoại: </td> <td> <input type ="text" id ="txtTelephone" style="width:150px" /> Số Fax: <input type ="text" id ="txtFaxNumber" style="width:150px" /> </td> </tr> <tr> <td class="Nhãn"> Địa chỉ website </td> <td> <input type ="text" id ="txtHomepage" style="width:200px" /> </td> </tr> <tr> <td colspan="2" style="text-align:center"> <input type ="reset" value ="Xoá (reset form)" /> <input type ="submit" value ="Thêm mới" /> </td> </tr> </table> <br /> <table class="Bảng"> <tr> V2.Tài liệu khóa học lập trình web với ASP.vn.utehy.aptech.23 .edu. aptech@utehy.

vn.net –diễn Đàn Sinh Viên Toán Tin <td colspan="4" style="background-color:Purple. margin-left.aptech. cột (bảng) thì cần phải hiểu rất rõ các thuộc tính qui định cách thức hiển thị của các phần tử như TD.vn</a></td> </tr> </table> </div> </form> </body> </html> 4.utehy.vn">www.0 – http://www. border-right:solid 1px gray">1</td> <td class="CạnhPhải">Công ty FPT</td> <td class="CạnhPhải">Láng Hạ .vn. Để trình bày được tốt dữ liệu dưới dạng hàng.cmc. tức là: Khi thẻ cha (thẻ chứa) định nghĩa một thuộc tính A nào đó thì các thẻ con cũng có đặc tính A.cmc.Ba Đình</td> <td class="CạnhPhải"><a href ="http://www. border-right:solid 1px gray">2</td> <td class="CạnhPhải">Công ty CMC</td> <td class="CạnhPhải">Hàn Thuyên . TR. Ví dụ: nếu ta viết <div style="color:blue"> <h2> Màu gì? </h2> <h3>Màu xanh </h3> </div> thì tất các các nội dung của thẻ h2 và h3 đều có màu xanh. margin-right = "auto".trananh.edu.Hai Bà Trưng</td> <td class="CạnhPhải"><a href ="http://www. Có thể tham khảo đầy đủ về vấn đề này tại: V2.text để lấy phần Text (phần hiển thị) hoặc viết: <Tham chiếu đến phần tử Select>.options[Chỉ số của mục].Ba Đình</td> <td class="CạnhPhải"><a href="http://www.vn</a></td> </tr> <tr> <td style="text-align:center.fpt. Muốn đặt bảng vào giữa form. aptech@utehy. (Trừ phi chính thẻ h2 hay h3 định nghĩa lại).options[Chỉ số của mục]. border-right:solid 1px gray">3</td> <td class="CạnhPhải">Công ty Trần Anh</td> <td class="CạnhPhải">Giảng võ . color:White. Tel: 03213-713.vn</a></td> </tr> <tr> <td style="text-align:center.24 .trananh.vn"> www. Ghi chú Nếu muốn lấy giá trị của một mục trong Listbox (Select) thì viết: <Tham chiếu đến phần tử Select>. text-align:center"> <span style="font-size:18pt">Danh sách nhà cung cấp hiện có</span> </td> </tr> <tr> <th class="TiêuĐềNCC">Mã NCC</th> <th class="TiêuĐềNCC">Tên NCC</th> <th class="TiêuĐềNCC">Địa chỉ</th> <th class="TiêuĐềNCC">Homepage</th> </tr> <tr> <td style="text-align:center.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.fpt. đặt thuộc tính Các thẻ con có tính kế thừa thẻ cha.value để lấy phần value.319 P.vn"> www.Tài liệu khóa học lập trình web với ASP. TABLE.

ta viết: document. có thể dùng 2 cách phổ biến sau: 1.net –diễn Đàn Sinh Viên Toán Tin http://www. v.vn.2 Dùng hàm getElementsByTag("Tên của thẻ"). padding Sử dụng CSS khi có nhiều phần tử có cùng định dạng giống nhau trong trang/ ứng dụng web.edu. nếu ta viết form1. Với mỗi trình duyệt khác nhau có thể có các cách khác nhau. BÀI 4 (Tiếp): THAY ĐỔI NỘI DUNG TRANG WEB BẰNG CSS VÀ JS ĐỊNH DẠNG TRANG WEB VỚI CSS Mục tiêu I. aptech@utehy. padding. Khi đã truy xuất đến phần tử nào đó thì ta hoàn toàn có thể đọc hoặc thay đổi nội dung/ thuộc tính của nó.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.com/CSS/ ..utehy.vn. Để tham chiếu đến một phần tử. Đặc biệt mỗi phần tử đều có các thuộc tính hiển thị như Margin.w3schools.v.getElementsByTag sẽ trả về các phần tử nằm trong document. vì vậy khi ta viết document.Tài liệu khóa học lập trình web với ASP. tuy nhiên cách truy cập sau đây tương thích với hầu hết các trình duyệt. Muốn hiển thị đúng cần nắm được ý nghĩa của các khái niệm này. Lý thuyết 1.0 – http://www.. Hàm này trả về một mảng chứa các phần tử có cùng loại/ tên (thẻ) nằm trong phần tử.getElementById("TieuDe"). Nếu muốn tham chiếu (truy xuất) đến phần tử H1 này. Tham chiếu đến một phần tử trong trang web Để đọc hay thay đổi nội dung hay thuộc tính của phần tử bất kỳ thì điều cần làm trước tiên là phải tham chiếu đến phần tử đó. Chú ý: bất kỳ phần tử nào cũng có phương thức getElementByTag. có phần tử: <h1 id="TieuDe"> Chương I </h1>.319 P. Border.getElementsByTag thì trả về các phần tử nằm trong form. Tel: 03213-713.25 . 1. border-right Margin-left padding-bottom Mô hình biểu diễn khái niệm margin. V2.1 Dùng hàm getElementById("Giá trị thuộc tính id của phần tử") Ví dụ.aptech. border.

<Tên thuộc tính> = <giá trị mới> Ví dụ có phần tử: <input type="button" value="Click here" id = "button1">.1 Qui định về việc viết tên thuộc tính Trong các bài trước.style. Chú ý:<Tên thuộc tính của style> tuân thủ cách đặt tên ở trên.<Tên thuộc tính>.getElementById("button1").0 – http://www.getElementById("button1").vn. sau đó muốn thay nội dung "Click here bằng "Thực hiện" thì viết như sau: document. **Chú ý: Có những thuộc tính chỉ đọc như thuộc tính "type" chẳng hạn. Tham chiếu đến một thuộc tính của phần tử Khi đã tham chiếu được đến phần tử thì việc tham chiếu đến thuộc tính khá dễ dàng. Tuy nhiên khi xử lý trong các câu lệnh Javascript thì thuộc tính này cần viết lại theo qui tắc sau: Chuyển chữ cái ngay sau dấu "-" thành chữ hoa sau đó bỏ dấu trừ này đi. lúc đó nếu muốn thay đổi các thuộc tính của style thì viết như sau: document.utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. aptech@utehy. Thuộc tính ChildNodes lại có một thuộc tính con là length cho biết số phần tử bên trong (phần tử đầu có chỉ số 0). background-color"> Hello </span>). Tel: 03213-713. Thay đổi nội dung của một phần tử 3. 3.getElementById(<Id của thẻ>).1 Thay đổi thuộc tính của phần tử Cú pháp: <Tham chiếu của phần tử>.26 .net –diễn Đàn Sinh Viên Toán Tin 1.<Tên thuộc tính của style> =<giá trị>. 3.319 P.2 Thay đổi style của phần tử bằng Javascript Khi định nghĩa phần tử. Ví dụ: <input type="button" value="Click here" id = "button1"> (Ở đây. khi định nghĩa style cho một phần tử. có thể viết theo cú pháp sau: <Tham chiếu phần tử>.edu. Ví dụ: Đặt màu nền cho phần tử hello ở trên thành màu đỏ. ta viết: document. Ví dụ tên thuộc tính trên sẽ viết lại thành fontSize và backgroundColor.value= "Thực hiện". V2.value. tên thuộc tính có thể có chứa dấu "-".backgroundColor = "red". background-color"> Hello </span>.getElementById("hello"). mỗi style chứa các thuộc tính riêng (ví dụ: <span id="hello" style="font-size:16pt.3 Truy xuất đến tất cả các phần tử con của một phần tử bất kỳ. ví dụ: <span style="font-size:16pt.style. 3.aptech. value và id là các thuộc tính của thẻ input). Nếu muốn truy xuất đến thuộc tính value.vn. 2. type. Mỗi phần tử đều có thuộc tính childNodes (mảng) chứa các nút con nằm bên trong nó. Vì vậy có thể dùng vòng lặp để duyệt tất cả các phần tử bên trong nó.Tài liệu khóa học lập trình web với ASP. như sau: document.

edu.aptech. sau đó đặt focus vào vị trí ô nhập sai kèm tô nền màu vàng. địa chỉ website không bắt đầu bằng http://) thì đưa ra thông báo. Thực hành 1 Yêu cầu 1.2 Yêu cầu về chức năng/ xử lý . . điện thoại chứa ký tự ngoài số.27 .net –diễn Đàn Sinh Viên Toán Tin II.0 – http://www.Trường hợp dữ liệu không hợp lệ (Tên NCC để trống.319 P.vn. Tel: 03213-713. chưa chọn thành phố.1 Về giao diện giao diện trang web 1. tiếp theo xoá các ô nhập và đưa focus về ô Tên nhà CC.Tài liệu khóa học lập trình web với ASP.Khi người dùng click vào nút "Thêm mới". hệ thống sẽ thêm bản ghi vào danh sách NCC ở phía dưới nếu dữ liệu hợp lệ.utehy. V2. aptech@utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn.

} td. V2.utehy. gọi phương thức reset() của form. text-align:right.CạnhPhải { border-right:solid 1px gray.Bảng { border-collapse:collapse.vn. } td { padding:3px. ta lại sử dụng cú pháp truy cập như phần 3.aptech. border-style:solid .Tài liệu khóa học lập trình web với ASP.net –diễn Đàn Sinh Viên Toán Tin 2 Hướng dẫn Để tô nền vàng.org/1999/xhtml"> <head runat="server"> <title>CSS</title> <style type="text/css"> .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. margin-right:auto. width:600px. border-color:gray. Để thông báo. Để thêm một hàng vào bảng. thực hiện trình tự: + thêm hàng (row hay tr) mới: Gọi phương thức insertRow(Vị trí cần thêm) của bảng + thuộc tính rows.28 .edu. Tel: 03213-713.2 3 Minh Hoạ mẫu <html xmlns="http://www. color:Gray.Nhãn { font-style:italic. font-size:12pt.w3. padding-right:5px. } .length của bảng cho biết số phần tử (hàng trong bảng) -Để thêm một ô (cell hay <td>) vào hàng.0 – http://www. border-width:1px. margin-left:auto.TiêuĐềNCC { text-align:center. truy cập vào thuộc tính backgroundColor của style thuộc phần tử tương ứng. } . dùng phương thức insertCell(thứ tự ô) của đối tượng row.319 P. aptech@utehy. Để đặt thuộc tính con trong thuộc tính style của mỗi ô. width:150px. dùng hàm alert Để xoá form.vn.

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin
border-right:solid 1px gray; border-bottom:solid 1px gray; } </style> <script language="javascript" type="text/javascript"> function AddRow() { if (KiemTraDuLieu() == false ) return false; var tbl=document.getElementById ("tblDSNCC"); var row=tbl.insertRow(tbl.rows.length); var cell=row.insertCell(0); //Cột mã nhà cung cấp cell.innerHTML=tbl.rows.length-2; cell.style.color="blue"; cell.style.textAlign="center"; cell.style.borderRightStyle="solid"; cell.style.borderRightColor="gray"; cell.style.borderRightWidth="1px"; //Cột Tên nhà cung cấp cell=row.insertCell(1); cell.innerHTML= document.getElementById("txtNCC").value ; cell.style.color="blue"; cell.style.textAlign="left"; cell.style.borderRightStyle="solid"; cell.style.borderRightColor="gray"; cell.style.borderRightWidth="1px"; //Cột địa chỉ nhà cung cấp cell=row.insertCell(2); cell.innerHTML= document.getElementById("txtDiaChi").value ; cell.style.color="blue"; cell.style.textAlign="left"; cell.style.borderRightStyle="solid"; cell.style.borderRightColor="gray"; cell.style.borderRightWidth="1px"; //Cột địa chỉ website cell=row.insertCell(3); var URL= document.getElementById("txtHomePage").value ; cell.innerHTML= "<a href='" + URL + "'>" + URL + "</a>"; cell.style.color="blue"; cell.style.textAlign="left"; cell.style.borderRightStyle="solid"; cell.style.borderRightColor="gray"; cell.style.borderRightWidth="1px"; // Nếu muốn gửi đi thì viết câu lệnh // document.forms["form1"].submit(); //xoá form để nhập bản ghi mới document.getElementById ("form1").reset(); document.getElementById ("txtNCC").focus (); } //Hàm kiểm tra dữ liệu nhập vào có hợp lệ hay không. trả về true nếu hợp lệ.

V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.29

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin
function KiemTraDuLieu() { if (document.getElementById("txtNCC").value == "") { alert ("Bạn phải nhập tên nhà cung cấp !"); document.getElementById("txtNCC").focus(); document.getElementById("txtNCC").style.backgroundColor="yellow"; return false ; } if (document.getElementById("lstCity").selectedIndex == 0) { alert ("Bạn chưa chọn Thành phố !"); document.getElementById("lstCity").focus(); document.getElementById("lstCity").style.backgroundColor="yellow"; return false ; } if (isNaN(document.getElementById("txtTelephone").value) == true ) { alert ("Số điện thoại phải là các ký tự số ! "); document.getElementById("txtTelephone").focus(); document.getElementById("txtTelephone").style.backgroundColor="yellow"; return false; } var homepage=document.getElementById("txtHomePage").value.toLowerCase() if (homepage.indexOf("http://")==-1) { alert ("Địa chỉ website không đúng, hãy nhập theo dạng http://"); document.getElementById("txtHomePage").focus(); document.getElementById("txtHomePage").style.backgroundColor="yellow"; return false; } return true; //dữ liệu nhập hợp lệ. } function ClearBackgroundColor(objToClear) { objToClear.style.backgroundColor="white"; } </script> </head> <body> <form id="form1" runat="server"> <div> <table class="Bảng"> <tr> <td style="background-color:Purple; color:White; text-align:center" colspan="2"> <span style="font-size:18pt; width:600px">NHẬP THÔNG TIN NHÀ CC</span> </td> </tr> <tr> <td class="Nhãn"> Tên Nhà CC </td>

V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.30

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin
<td> <input type="text" id="txtNCC" style="width:450px" onchange="ClearBackgroundColor(this);" /> </td> </tr> <tr> <td class="Nhãn" > Người đại diện </td> <td> <input type ="text" id="txtNguoiDaiDien" style="width:300px" /> </td> </tr> <tr> <td class="Nhãn"> Chức vụ </td> <td> <input type ="text" id="txtChucVu" style="width:300px" /> </td> </tr> <tr> <td class="Nhãn"> Điện thoại </td> <td> <input type ="text" id="txtDienThoai" style="width:200px" /> </td> </tr> <tr> <td class="Nhãn"> Địa chỉ NCC </td> <td> <input type="text" id="txtDiaChi" style="width:450px"/> </td> </tr> <tr> <td class="Nhãn"> Thành phố: </td> <td> <select id ="lstCity" size ="1" onchange="ClearBackgroundColor(this);"> <option value ="null">----Chọn----</option> <option value ="HN">Hà nội</option> <option value ="HCMC">TP Hồ Chí Minh</option> <option value ="ĐN">Đà Nẵng</option> <option value ="OTHER">Nơi khác</option> </select> Vùng: <input type ="text" id ="txtRegion" style="width:150px" /> </td> </tr> <tr>

V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.31

aptech@utehy.vn. color:White. text-align:center"> <span style="font-size:18pt">Danh sách nhà cung cấp hiện có</span> </td> </tr> <tr> V2.32 ." /> </td> </tr> </table> <br /> <table class="Bảng" id="tblDSNCC"> <tr> <td colspan="4" style="background-color:Purple.aptech.Tài liệu khóa học lập trình web với ASP.utehy.319 P.0 – http://www.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn.net –diễn Đàn Sinh Viên Toán Tin <td class="Nhãn"> Mã bưu điện: </td> <td> <input type ="text" id ="txtPostalCode" style="width:150px"/> </td> </tr> <tr> <td class="Nhãn"> Quốc gia: </td> <td> <select id ="lstCountry" size ="1"> <option value ="VN" selected>Việt Nam</option> <option value ="LAO">Lào</option> <option value ="CAMPUCHIA">Campuchia</option> <option value ="OTHER">Nơi khác</option> </select> </td> </tr> <tr> <td class="Nhãn"> Điện thoại: </td> <td> <input type ="text" id ="txtTelephone" style="width:150px" /> Số Fax: <input type ="text" id ="txtFaxNumber" style="width:150px" /> </td> </tr> <tr> <td class="Nhãn"> Địa chỉ website </td> <td> <input type ="text" id ="txtHomePage" value="http://" style="width:200px" onchange="ClearBackgroundColor(this). Tel: 03213-713.edu."/> </td> </tr> <tr> <td colspan="2" style="text-align:center"> <input type ="reset" value ="Xoá (Reset form)" /> <input type ="button" value ="Thêm mới" onclick="AddRow().

sau đó phía server sẽ “response” (hồi đáp) lại yêu cầu.Hai Bà Trưng</td> <td class="CạnhPhải"><a href ="http://www.utehy. Cách để truy cập hay dùng là hàm document.Ba Đình</td> <td class="CạnhPhải"><a href="http://www.vn</a></td> </tr> <tr> <td style="text-align:center. để thay đổi nội dung/ thuộc tính/ style của phần tử thì trước hết phải truy cập/ tham chiếu được đến phần tử đó. Tel: 03213-713. Nó V2. – thì máy chủ sẽ đọc toàn bộ nội dung của trang và gửi về cho phía máy khách mà không thực hiện bất kỳ xử lý nào. trước tiên phía máy khách cần phải “requesst” (gửi yêu cầu) tới Server.getElementById("Id của thẻ"). Tức là. Lý thuyết 1.33 .cmc. BÀI SỐ 5: ASP.319 P.trananh. tất cả các giao tiếp giữa Client (trình duyệt) và Server (web server) đều được thực hiện theo cơ chế “Request and Response”. thì innerHTML chính là : "Hello <b> world ".cmc. border-right:solid 1px gray">3</td> <td class="CạnhPhải">Công ty Trần Anh</td> <td class="CạnhPhải">Giảng võ .aptech. Mô hình lập trình phía máy chủ Trong thế giới web.vn</a></td> </tr> <tr> <td style="text-align:center. Đây là cơ sở để ta thay đổi nội dung của trang web. border-right:solid 1px gray">1</td> <td class="CạnhPhải">Công ty FPT</td> <td class="CạnhPhải">Láng Hạ . aptech@utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Tài liệu khóa học lập trình web với ASP. Hãy luôn ghi nhớ.vn"> www. Cùng một cơ chế này. Ví dụ với <h1> Hello <b> world </h1>.fpt.vn. thuộc tính này chính là phần nằm giữa thẻ đóng và thẻ mở.net –diễn Đàn Sinh Viên Toán Tin <th class="TiêuĐềNCC">Mã NCC</th> <th class="TiêuĐềNCC">Tên NCC</th> <th class="TiêuĐềNCC">Địa chỉ</th> <th class="TiêuĐềNCC">Homepage</th> </tr> <tr> <td style="text-align:center.trananh. người ta có 2 cách tiếp cận để xử lý “request trang web” từ máy khách: Cách 1: Khi máy khách yêu cầu một trang – ví dụ trang abc. border-right:solid 1px gray">2</td> <td class="CạnhPhải">Công ty CMC</td> <td class="CạnhPhải">Hàn Thuyên .edu.vn"> www.vn.fpt.NET và Web form I.0 – http://www.vn</a></td> </tr> </table> </div> </form> </body> </html> 4 Ghi chú Mỗi phần tử (thẻ) đều có thuộc tính innerHTML.vn">www.Ba Đình</td> <td class="CạnhPhải"><a href ="http://www.

34 .edu.). do việc xử lý không diễn ra bên phía server nên trang web không thể đọc/ ghi các dữ liệu trên Server được (ví dụ Danh sách khách hàng.…. – thì máy chủ sẽ đọc toàn bộ nội dung của trang đó và xử lý tại Server (trước khi gửi về cho client) để được kết quả. Vì vậy. danh mục sản phẩm. Nội dung trang này sau đó sẽ được phía trình duyệt xử lý. aptech@utehy.và tiếp tục được phía client (trình duyệt) xử lý như cách 1. Với cách 2. Cách 2: Khi máy khách yêu cầu một trang – ví dụ trang xyz.319 P. Tel: 03213-713.aptech.Tài liệu khóa học lập trình web với ASP. nó phù hợp với các dự án lớn và tính bảo mật cao.0 – http://www.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. các định nghĩa kiểu CSS…. Mô hình theo cách này gọi là mô hình lập trình phía máy chủ. Với cách 1.net –diễn Đàn Sinh Viên Toán Tin hoàn toàn không qua tâm đến ý nghĩa bên trong của trang abc. do việc xử lý thông tin ở tại server nên hoàn toàn có thể đọc/ ghi dữ liệu trên chính server đó. tiếp theo lấy kết quả xử lý được gửi về cho phía máy khách. không đòi hỏi xử lý chi tiết.vn.utehy. Dưới đây là hình ảnh minh họa cho 2 mô hình này:  Mô hình lập trình phía máy khách (Client side) V2. các câu lệnh JavaScript.vn. Vì vậy nó chỉ phù hợp với các trang web đơn giản. Kết quả trả về cho máy khách có thể chứa các phần tử HTML.

edu. aptech@utehy. aspx… Câu hỏi: Có thể lấy một ví dụ về một trang sẽ được xử lý phía server và trang sẽ không được xử lý phía server ? Trang Trang1.htm <html> <body> Hello world </body> </html> Trang2.Today. %> 2 dòng này sẽ được xử lý bên phía server trước </div> </form> </body> </html> Câu hỏi: Chương trình Client và server có nhất thiết phải nằm trên hai máy tính riêng biệt không ? và Client là các trình duyệt rồi (IE.Tài liệu khóa học lập trình web với ASP.ToString()).0 – http://www. ví dụ: asp.aptech.Write (DateTime.vn. FireFox…).vn. hay nói cách khác là khi nào thì được gọi là xử lý theo mô hình phía server? Trả lời: Các trang (file) có đuôi mở rộng mà server có thể xử lý.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <% Response. Tel: 03213-713. còn server là chương trình nào ? V2.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin  Mô hình lập trình phía máy chủ Câu hỏi: Khi nào thì một trang sẽ được xử lý ở bên Server trước ?.319 P. jsp.aspx <%@ Page Language="C#" %> <html xmlns="http://www.Date.w3. php.utehy.35 .

Ví dụ nó không hiểu asp:Calendar là gì ? 2 Cơ chế xử lý file ASP. Tel: 03213-713.Date.utehy.Today. Nếu không có những ký hiệu này thì mặc nhiên server làm mỗi việc là gửi trả lại cho trình duyệt xử lý.Tài liệu khóa học lập trình web với ASP. điều này chẳng tốt hơn sao ? Trả lời: Vì trình duyệt chỉ có thể hiểu và xử lý được các thẻ HTML và Javascript thôi. %> Hoặc: <form id="form1" runat="server"> <asp:Calendar </asp:Calendar> runat="server" ID="Lịch"> </form> *** Chính các ký hiệu <% %> và Runat = “Server” đã “mách bảo” Server rằng : “Hãy xử lý nội dung đó bên phía server đi”!. Câu hỏi: Sao không gửi ngay cho trình duyệt xử lý như trước đây mà cứ phải để server xử lý …!. sau đó trong trình duyệt cần phải đặt những nội dung muốn xử lý bên phía server trong cặp thẻ đặc biệt. aptech@utehy.edu.ToString ()). còn nó không thể xử lý được các nội dung phức tạp.36 . Đối với các trang ASP.NET phía máy chủ. ví dụ: <% Response.0 – http://www.aspx).NET. thì cơ chế xử lý giống như đã mô tả ở trên.net –diễn Đàn Sinh Viên Toán Tin Trả lời: Hai chương trình này hoàn toàn có thể nằm trên cùng một máy tính. Câu hỏi: Phải viết như thế nào để server hiểu là cần phải xử lý bên phía server trước khi gửi về cho phía Client ? Trả lời: Trước tiên phải đặt phần mở rộng cho file (ví dụ .vn.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Nhưng có bổ sung thêm tính năng Compile and Cache: V2. Chương trình server thực chất là một chương trình có tên là IIS (Internet Information Service). tức là theo mô hình xử lý bên phía server.aptech. Để Client xử lý sẽ giảm tải cho server.Write (DateTime.319 P.vn.

NET thì việc biên dịch sẽ được thực hiện “thông minh hơn”.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn.0 – http://www.net/ c# .gọi là code behind hay code file) thành class. . Riêng với ASP.Bước 3: web server sẽ biên dịch code của trang aspx (bao gồm cả các mã code vb.net –diễn Đàn Sinh Viên Toán Tin Giải thích cơ chế xử lý ở trên: .Bước 2: Trình duyệt gửi yêu cầu tới server với nội dung: ”Làm ơn gửi cho tôi trang abc.319 P. .com).Bước 4: Lớp sau khi được biên dịch sẽ được server thực thi. aptech@utehy.aspx) và đặt nó vào trong thư mục web của web server (có tên là www.Bước 0: Người lập trình phải tạo các trang ASPX (giả sử tên trang đó là abc.server.server.utehy.aspx.edu. người dùng nhập trang www.aspx thì tốt !”. Trên thanh địa chỉ của trình duyệt.37 .vn.com/abc.Bước 5: Server trả kết quả thực thi về cho trình duyệt (trang HTML). . như sau: V2.Tài liệu khóa học lập trình web với ASP.aptech. . Tel: 03213-713.

38 .utehy.edu.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. aptech@utehy.vn.319 P.0 – http://www.net –diễn Đàn Sinh Viên Toán Tin V2.aptech.Tài liệu khóa học lập trình web với ASP.vn. Tel: 03213-713.

NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin 3 Một số ví dụ minh họa.39 .aptech.0 – http://www.Tài liệu khóa học lập trình web với ASP.1 Yêu cầu xử lý tại phía server thông qua Runat=”Server” V2.vn.vn. 3.utehy.edu. Tel: 03213-713. aptech@utehy.319 P.

aptech. <script language="C#" type="text/C#" runat="server"> /// <summary> /// Các câu lệnh/ khai báo biến/ khai báo hàm/ định nghĩa lớp v.v.vn.2 Yêu cầu xử lý bên phía server thông qua cặp thẻ <% %> Ngoài 2 cách trên. int b) { return a * b.0 – http://www.Tài liệu khóa học lập trình web với ASP.utehy. ……………………………………………….319 P. /// cần xử lý bên phía server thì đặt vào đây ! Ví dụ: /// </summary> string HoVaTen = "Aptech Center". aptech@utehy.vn. còn 2 cách để yêu cầu xử lý trang web trực tiếp trên server. } } </script> V2.40 .net –diễn Đàn Sinh Viên Toán Tin 3. int b) { return a + b. } // Hoặc định nghĩa lớp public class Example { public int Tich (int a. Tel: 03213-713. public int Tong (int a. đó là: Đặt các câu lệnh ngay trong cặp thẻ Script.edu. nhưng có thuộc tính Runat = “Server”: ………………………………………………....NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.

0 – http://www.edu.vn. aptech@utehy. Tel: 03213-713.3 Yêu cầu xử lý bên server thông qua Script V2..319 P.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn.utehy.Tài liệu khóa học lập trình web với ASP.net –diễn Đàn Sinh Viên Toán Tin ……………………………………………….41 . ……………………………………………… 3.aptech.

NET cung cấp sẵn cho các nhà lập trình rất nhiều lớp ngay khi cài đặt . Tel: 03213-713. Ví dụ : Khả năng thừa kế. Các trang web xây dựng bằng ASP. Các trang này gọi là ASP.4 Yêu cầu xử lý bên phía server bằng cách đặt trong file Code 4 Webform trong ASP.NET nào cũng có thể được dùng để lập trình với web forms.NET Để xây dựng ứng dụng web.NET Framework.  Bất kỳ một ngôn ngữ .NET sẽ không phụ thuộc vào trình duyệt (tức là trình duyệt nào cũng cho kết quả như nhau và hiển thị giống nhau).utehy.edu.NET bao gồm cả phần giao diện người dùng và phần xử lý logic bên trong.Tài liệu khóa học lập trình web với ASP.vn.aptech. Một số ưu điểm của web forms:  Web forms có thể được thiết kế và lập trình thông qua các công cụ phát triển ứng dụng nhanh (RAD). aptech@utehy.  Web form hỗ trợ một tập các điều khiển (controls) có thể mở rộng.NET framework. ASP. trong khi đó phần xử lý (lập trình) đảm nhiệm việc điều khiển sự tương tác của người dùng với trang web. Giao diện người dùng chịu trách nhiệm hiển thị các thông tin và tiếp nhận dữ liệu từ người dùng. Mỗi lớp Page sẽ trình bày một trang tài liệu – tương ứng với một window – và được gọi là một web form. Web form là một công nghệ cho phép xây dựng các trang web trong đó có thể lập trình được.NET Một trang ASP.0 – http://www.vn.NET web form pages hay ngắn gọn là web form.net –diễn Đàn Sinh Viên Toán Tin 3. Phần giao diện người dùng bao gồm một file chứa ngôn ngữ đánh dấu V2.  Asp sử dụng trình thực thi ngôn ngữ chung (CLR) của .319 P.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.42 .NET framework do đó thừa hưởng mọi ưu thế của . Trong số này có một lớp đặc biệt quan trọng là Page. 5 Tìm hiểu cấu trúc trang ASP.

Code được đặt trong default.cs Còn phần giao diện chứa trong default. trang web thứ nhất Default2. File tách riêng này được gọi là file Code Behind hay mới đây gọi là Code file.vn. Cách lưu trữ này được minh họa qua một ứng dụng cụ thể dưới đây.aspx V2.edu.CS (nếu dùng ngôn ngữ C#).VB (Nếu dùng ngôn ngữ Visual Basic) hoặc .319 P.vn. Trong đó.43 . Chúng ta có thể thực hiện việc viết code bằng bất kỳ ngôn ngữ lập trình nào được hỗ trợ bởi CLR ở ngay trong trang ASPX hoặc tách ra một file riêng. Trang Default2.utehy. File này được gọi là một Trang (Page) và có đuôi mở rộng là aspx.aspx chứa cả code (C#) và giao diện (HTML) còn trang web thứ hai đặt code và giao diện ra 2 file riêng biệt. Tel: 03213-713.aspx chứa code ở bên trong nó.aspx và default.Tài liệu khóa học lập trình web với ASP.NET và C#. Đuôi mở rộng của Code file là . *** Chú ý: Có thể kết hợp để vừa đặt code trong file aspx vừa đặt code trong file cs.net –diễn Đàn Sinh Viên Toán Tin – như HTML hoặc XML và server controls chẳng hạn.aptech. Phần đáp ứng các tương tác của người dùng với trang web được thực hiện bởi một ngôn ngữ lập trình chẳng hạn như Visual Basic. default.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.0 – http://www.cs. aptech@utehy.

Tài liệu khóa học lập trình web với ASP.cs V2.vn.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.aspx) Thành phần xử lý (lập trình) thisfile.edu. Tel: 03213-713.vn.utehy.319 P.44 .net –diễn Đàn Sinh Viên Toán Tin Một webform bao gồm 2 thành phần: Thành phần giao diện (trang thisfile. aptech@utehy.aptech.0 – http://www.

using System.Parse (txtA.Text) + int.WebControls.utehy. EventArgs e) { txtKetQua.aptech.UI.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.CodeFile="~/Lession 03/Default.0 – http://www.cs" Inherits ="Lession03_default"%> <html xmlns="http://www.Web.aspx.Web.319 P.aspx <%@ Page Language="C#" CodeFile="~/Lession 03/Default.Web. .Text)). public partial class Lession03_default : System.vn. aptech@utehy.UI.45 .aspx.Text = (int.example 3</title> </head> <body> <form id="form1" runat="server"> <asp:TextBox id="txtA" runat="server" width="50px" /> <asp:TextBox id="txtB" runat="server" width="50px"/> <asp:Button id="cmdTinhTong" Text="Tính" runat="server" OnClick="Tong" /> <asp:TextBox id="txtKetQua" runat="server" width="50px"/> </form> </body> </html> Nội dung file code (default. } } Trong file default.NET thực tế (Trang này lưu code và giao diện trên 2 file): File Default. using System.example 3</title> </head> V2. using System.cs (Bởi vì một file có thể có chứa nhiều lớp).<head runat="server"> <title>Server side .vn.aspx. .cs) như sau: File Default.Parse (txtB.w3.edu.cs.Page Language="C#" : chỉ ra rằng ngôn ngữ được sử dụng để lập trình là C# .cs using System.cs": Cho biết nội dung file chứa code xử lý là file ~/Lession 03/Default. Tel: 03213-713.UI.org/1999/xhtml"> <head runat="server"> <title>Server side .Inherits ="Lession03_default": Cho biết là trang giao diện thừa kế từ lớp nào trong file ~/Lession 03/Default.ToString ().aspx.Page { protected void Tong (object sender.Web.net –diễn Đàn Sinh Viên Toán Tin Phân tích một trang ASP.Tài liệu khóa học lập trình web với ASP.aspx: .

Ví dụ muốn trả một xâu S về cho trình duyệt hiển thị.cs có dòng lệnh sau: cmdTinhTong.edu.NET hoặc C#) được gọi là Code file (cách gọi mới) hay Code behind (cách gọi cũ). Tuy nhiên nội dung trong thẻ này không có gì đặc biệt để xử lý và kết quả sau xử lý sẽ là (không có runat=”server”): <head> <title>Server side .example 3</title> </head> <form id="form1" runat="server"> : Cho biết là nội dung trong cặp thẻ form cần được xử lý bên phía server.0 – http://www.Tài liệu khóa học lập trình web với ASP.utehy.cs Nội dung file này hoàn toàn chứa các câu lệnh của ngôn ngữ lập trình VB. ta viết: Response. Code behind và viết code phía Server. Mã lệnh tại đây thường xử lý các tác vụ liên quan đến nghiệp vụ. Chú ý: Trong file này không được chứa trực tiếp các thẻ HTML. V2. Việc sử dụng phương thức write này như thế nào để “sinh ra” các phần tử cho trình duyệt hiểu là một kỹ năng quan trọng. Câu hỏi: Nếu trong file default.Text = “Tính tổng”. Trong file default. thì chương trình có báo lỗi không ? Vì sao ? 6.write(S).aptech. Việc viết code cho file đó hoàn toàn giống như viết các chương trình trên window form hay chương trình Console.aspx có thuộc tính runat = “server”. tuy nhiên do có thuộc tính runat = “server” nên việc tạo này sẽ được thực hiện ở bên server. Nhìn chung. aptech@utehy. } </script> Đoạn script này có thuộc tính runat=”Server”.319 P. Cụ thể là phương thức write của đối tượng Response.b.vn.vb. trong đó cũng có các câu lệnh cho phép gửi kết quả về cho phía trình duyệt.NET hoặc C#. Thuộc tính language = “C#” cho biết ngôn ngữ sử dụng để viết là C Sharp. .46 . vì vậy nó sẽ được xử lý phía server. int b) { return a . người ta thường chia các web form thành 2 phần là trang chứa giao diện (aspx) và trang chứa mã code (. <asp:TextBox id="txtA" runat="server" width="50px"/> : là thẻ tạo ra phần tử textbox.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.cs) để đảm bảo tính chuyên môn hóa và dễ bảo trì hơn. Các câu lệnh trong file này HOÀN TOÀN ĐƯỢC PHÉP TRUY CẬP TỚI CÁC PHẦN TỬ ở trong file default.vn. được kết quả trả về (là <input type=”TextBox” id="txtA" style = “width:50px”> - <script language="C#" type="text/C#" runat="server"> public int Hieu (int a. Tel: 03213-713. Các file chứa mã code (VB.net –diễn Đàn Sinh Viên Toán Tin Cho biết là thẻ này cần được xử lý bên phía server.

2 Cách thức tạo phần tử HTML Server Control và ASP. textbox. HTML Server Controls và Web controls 7.  Ví dụ: <input type = “text” id=”txtHoTen” runat = “server”> b) ASP.net –diễn Đàn Sinh Viên Toán Tin 7. Điểm khác biệt giữa HTML Server control và ASP.NET control thì có nhiều thuộc tính hơn. không nên dùng)  Cú pháp tạo phần tử HTML Server control: o <Tên_Loại_Thẻ runat=”server” thuộc_Tính = “giá trị” …. ASP.NET cung cấp cho chúng ta một tập hợp các điều khiển sẵn có để thực hiện hầu hết các công việc phổ biến hàng ngày.Tài liệu khóa học lập trình web với ASP. Các điều khiển này chia làm 2 loại: HTML Server Control và ASP. Các điều khiển (phần tử) này đều được xử lý bên phía server (có thuộc tính runat=server) vì vậy chúng ta đều có thể truy cập đến các phần tử này bằng các câu lệnh C# (các câu lệnh nằm bên trong Code file).NET server control.…. p.vn. select. Tel: 03213-713.NET server control o <asp: Loại_PT thuộc_tính = “giá trị” ….0 – http://www. h1. - 7.aptech. calendar. runat = “server”> o  Ví dụ: o o o Trong đó asp: là bắt buộc. adRotator. treeview. thực hiện được chức năng phức tạp hơn HTMLServer controls. gridview.NET control a) HTML Server control (Giới thiệu để biết. Điều khiển ASP. …. aptech@utehy.NET server control ở chỗ: Điều khiển HTML Server control thì có số lượng và cách thức tạo giống hệt các phần tử HTML mà ta vẫn tạo trong trang HTML.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.47 . Loại_PT có thể là button. chỉ khác một điều là có thêm runat = “server”.319 P. listview.vn. image.edu.1 Giới thiệu Để giúp cho việc phát triển các ứng dụng web nhanh chóng và thuận tiện. select.> o Trong đó: Tên loại thẻ là input.NET server control (Nên dùng)  Cú pháp tạo phần tử ASP. <asp:TextBox ID="txtHVT" runat="server"></asp:TextBox> <asp:Calendar ID="cal" BorderColor="Blue"></asp:Calendar> runat="server" <asp:Table> <asp:TableRow> <asp:TableCell>cell</asp:TableCell></asp:TableRow> </asp:Table> V2.utehy.

aptech@utehy.edu.0 – http://www.NET nâng cao) II.utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Yêu cầu Xây dựng lại trang web về nhập thông tin nhà cung cấp ở bài trước HOÀN TOÀN bằng các ASP Server Control.NET).NET server control để đảm bảo tính tương thích với trình duyệt.48 .vn. (phần này sẽ được đề cập trong phần Lập trình ASP. Thực hành 1.NET server control hoàn toàn có thể do người dùng tạo ra.319 P. Giao diện trang web V2.aptech.net –diễn Đàn Sinh Viên Toán Tin **** Chú ý ****  Để có thể truy xuất tới các phần tử này trong Code file (hay server script phía server) thì mỗi phần tử cần phải đặt cho nó một id duy nhất.  Các điều khiển ASP. nếu có thể được thì nên dùng các ASP. Các hàm kiểm tra cũng được viết bằng mã lệnh phía Server (Viết bằng C#.  Trong tất cả các ứng dung. Tel: 03213-713.Tài liệu khóa học lập trình web với ASP.vn.

Để gọi một hàm/ phương thức khi một sự kiện xảy ra.49 .NET.org/TR/xhtml1/DTD/xhtml1-transitional. trang Default. color:White.aptech.vn.utehy.vn. ví dụ: <asp:textbox id= .aspx.w3. Viết các lệnh xử lý ứng với các sự kiện trong cửa sổ code của VS. EventArgs e) + Gán tên hàm này cho tên sự kiện của phần tử. width:600px">NHẬP THÔNG TIN NHÀ CUNG CẤP</span> </td> </tr> <tr> <td class="Nhãn"> Tên Nhà CC </td> <td> <asp:TextBox runat ="server" id="txtNCC" style="width:450px"> </asp:TextBox> </td> </tr> <tr> <td class="Nhãn" > Người đại diện </td> <td> <asp:TextBox runat ="server" id="txtNguoiDaiDien" style="width:300px"></asp:TextBox> </td> </tr> <tr> V2.dtd"> <html xmlns="http://www. Tel: 03213-713. Minh hoạ mẫu Vì ở đây có cả phần xử lý phía server.0 Transitional//EN" "http://www. aptech@utehy.0 – http://www..aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.w3. EventArgs e) {.Tài liệu khóa học lập trình web với ASP. 3..css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <div> <table class="Bảng"> <tr> <td style="background-color:Purple.Nhập thông tin nhà cung cấp</title> <link type="text/css" href="StyleSheet.org/1999/xhtml"> <head runat="server"> <title>Chương trình quản lý bán hàng ..NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.edu.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. Hướng dẫn Mỗi thẻ giờ đây được thêm tiền tố asp:. text-align:center" colspan="2"> <span style="font-size:18pt. ta thực hiện theo cách: + Viết một hàm trong cửa sổ code dạng: Tên_Hàm(object sender.319 P.. } Trong cửa sổ soạn code html: <asp:Button Text="Thêm" runat="server" OnClick="Thực_Hiện"> </asp:Button>./> và thuộc tính runat="server". Ví dụ: Gọi hàm "Thực_Hiện" khi người dùng click chuột lên nút "Thêm" như sau: Trong cửa sổ code: Protected void Thực_Hiện(Object sender.net –diễn Đàn Sinh Viên Toán Tin 2. do vậy sẽ có thêm trang mã code.

aptech.utehy.vn.edu.0 – http://www. Tel: 03213-713.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin <td class="Nhãn"> Chức vụ </td> <td> <asp:TextBox runat ="server" id="txtChucVu" style="width:300px"></asp:TextBox> </td> </tr> <tr> <td class="Nhãn"> Điện thoại </td> <td> <asp:TextBox runat ="server" id="txtDienThoai" style="width:200px"></asp:TextBox> </td> </tr> <tr> <td class="Nhãn"> Địa chỉ NCC </td> <td> <asp:TextBox runat="server" id="txtDiaChi" style="width:450px"></asp:TextBox> </td> </tr> <tr> <td class="Nhãn"> Thành phố: </td> <td> <asp:ListBox runat="server" id ="lstCity" Rows="1"> <asp:ListItem Text="----Chọn----" value="null" Selected="True"></asp:ListItem> <asp:ListItem Text="Hà nội" Value="HN"></asp:ListItem> <asp:ListItem Text="TP Hồ Chí Minh" Value="HCMC"></asp:ListItem> <asp:ListItem Text="Đà Nẵng" Value="DN"></asp:ListItem> <asp:ListItem Text="Hải Phòng" Value="QN"></asp:ListItem> <asp:ListItem Text="Nơi khác" Value="OTHER"></asp:ListItem> </asp:ListBox> Ảnh logo: <asp:FileUpload runat ="server" id ="txtLogoFile" style="width:250px" /> </td> </tr> <tr> <td class="Nhãn"> Mã bưu điện: </td> <td> <asp:TextBox runat ="server" id ="txtPostalCode" style="width:150px"></asp:TextBox> </td> </tr> <tr> <td class="Nhãn"> Quốc gia: </td> <td> <asp:ListBox runat="server" id ="lstCountry" Rows="1"> V2.50 .vn. aptech@utehy.Tài liệu khóa học lập trình web với ASP.319 P.

Tài liệu khóa học lập trình web với ASP.vn. color:White.aptech. border-right:solid 1px gray"> 1</asp:TableCell> V2.319 P.utehy. text-align:center"> <span style="font-size:18pt">Danh sách nhà cung cấp hiện có</span> </asp:TableCell> </asp:TableRow> <asp:TableRow runat="server"> <asp:TableHeaderCell runat="server" class="TiêuĐềNCC">Mã NCC </asp:TableHeaderCell> <asp:TableHeaderCell runat="server" class="TiêuĐềNCC">Tên NCC </asp:TableHeaderCell> <asp:TableHeaderCell runat="server" class="TiêuĐềNCC">Địa chỉ </asp:TableHeaderCell> <asp:TableHeaderCell runat="server" class="TiêuĐềNCC">Homepage </asp:TableHeaderCell> </asp:TableRow> <asp:TableRow runat="server"> <asp:TableCell runat="server" style="text-align:center. Tel: 03213-713.51 . aptech@utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.0 – http://www.edu.net –diễn Đàn Sinh Viên Toán Tin <asp:ListItem Text="Việt Nam" Value="VN"></asp:ListItem> <asp:ListItem Text="Lào" Value="LAO"></asp:ListItem> <asp:ListItem Text="Campuchia" Value="CAMPUCHIA"></asp:ListItem> <asp:ListItem Text="Nơi khác" Value="OTHER"></asp:ListItem> </asp:ListBox> </td> </tr> <tr> <td class="Nhãn"> Điện thoại: </td> <td> <asp:TextBox runat ="server" id ="txtTelephone" style="width:150px"></asp:TextBox> Số Fax: <asp:TextBox runat ="server" id ="txtFaxNumber" style="width:150px"></asp:TextBox> </td> </tr> <tr> <td class="Nhãn"> Địa chỉ website </td> <td> <asp:TextBox runat ="server" id ="txtHomePage" Text="http://" style="width:200px"></asp:TextBox> </td> </tr> <tr> <td colspan="2" style="text-align:center"> <asp:Button text="Xoá (Reset form)" runat="server" ID="btnReset" OnClick="btnReset_click" /> <asp:Button text ="Thêm mới" runat="server" ID="btnAdd" OnClick="btnAdd_Click" /> </td> </tr> <tr> <td colspan="2" style="text-align:center"> <asp:Label runat="server" ID="lblThongBao" ForeColor="Red" > </asp:Label> </td> </tr> </table> <br /> <asp:Table class="Bảng" id="tblDSNCC" runat="server" EnableViewState="true"> <asp:TableRow runat="server"> <asp:TableCell runat="server" ColumnSpan="4" style="background-color:Purple.vn.

Web. lstCity. using System.White.Text = "Bạn chưa chọn thành phố !".Value = "background-color:white".ToLower().Web.Text = "". } //Hàm đặt lại trạng thái một số phần tử về trạng thái thường. using System.Text == "") { lblThongBao.Drawing. Tel: 03213-713. } if (lstCity. } if ( !txtHomePage.Style.vn.Web. border-right:solid 1px gray"> Công ty FPT</asp:TableCell> <asp:TableCell runat="server" style="text-align:center.Color.Color.Web. txtHomePage.Style.cs using System.vn"> www.Text.UI.WebControls.aptech. True nếu hợp lệ.edu.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin <asp:TableCell runat="server" style="text-align:center. lstCity. txtNCC. EventArgs e) { KhoiTaoTrangThai ().Yellow.UI.319 P. protected Boolean KiemTraDulieu () { if (txtNCC. txtNCC. border-right:solid 1px gray"> Láng Hạ .UI. return false .SelectedIndex <1) { lblThongBao.Tài liệu khóa học lập trình web với ASP. txtHomePage.fpt. private void KhoiTaoTrangThai () { lblThongBao. using System. return false. border-right:solid 1px gray"> <a href ="http://www.Color.Text = "Bạn chưa nhập tên nhà cung cấp !". aptech@utehy.Focus ().Value = "background-color:yellow". lstCity.0 – http://www. V2.BackColor = System. public partial class _Default : System.vn</a> </asp:TableCell> </asp:TableRow> </asp:Table> </div> </form> </body> </html> Trang Default.White.Color.BackColor = System.fpt.Focus ().StartsWith("http://")) { lblThongBao.Drawing.Drawing.52 .Page { protected void Page_Load(object sender.BackColor = System.vn.Drawing. txtNCC.Yellow.Ba Đình</asp:TableCell> <asp:TableCell runat="server" style="text-align:center. } // Hàm kiểm tra xem dữ liệu nhập đã hợp lệ hay chưa.aspx.BackColor = System.utehy.Text ="Địa chỉ web phải bắt đầu bằng http://".

CssClass = "CạnhPhải". return false. lstCountry. } } protected void btnReset_click (object sender.CssClass = "CạnhPhải". cellMaNCC.Text . txtNCC.Cells.edu. TableCell cellDiaChi = new TableCell (). cellDiaChi.Text +"'>" + txtHomePage.Add (cellTenNCC).ToString().Text=txtNCC.Cells. } lstCity. EventArgs e) { V2.Focus ().Text = "".0 – http://www.vn. aptech@utehy.Text + "</a>".Add (cellDiaChi). row. private void AddRow () { TableRow row=new TableRow().Cells.319 P.net –diễn Đàn Sinh Viên Toán Tin txtHomePage.53 . tblDSNCC.Style. cellTenNCC.border-right-width:1px".SelectedIndex = 0. } return true .Add (cellHomepage). } // Hàm này được gọi khi người dùng click nút "Thêm nhà CC" protected void btnAdd_Click (object sender.Controls) { if (obj. txtHomePage.Text.Focus (). cellMaNCC.GetType() == typeof(TextBox)) ((TextBox) obj).Add (cellMaNCC).Text= (tblDSNCC.aptech. ResetForm (). Tel: 03213-713.utehy.Tài liệu khóa học lập trình web với ASP.CssClass = "CạnhPhải". cellDiaChi.Text = "http://www.vn.Text = "<a href='" + txtHomePage. cellHomepage.Cells. TableCell cellTenNCC=new TableCell().". cellTenNCC.Text = txtDiaChi.Rows.SelectedIndex = 0. EventArgs e) { if (KiemTraDulieu ()) { AddRow (). } //Hàm xoá form để chuẩn bị cho nhập bản ghi mới. TableCell cellMaNCC=new TableCell(). row. row.Add (row). TableCell cellHomepage = new TableCell (). row.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Rows. border-right-style:solid.form1.Count-1). private void ResetForm () { foreach (object obj in this. cellHomepage.Value="Text-align:center. } //Hàm thêm một bản ghi vào bảng DS Nhà cung cấp.

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin
ResetForm (); } }

4. Ghi chú.
Một số công việc có thể thực hiện phía client, ví dụ với nút "Xoá form", có thể tạo phần tử input type="button" và viết lệnh Javascript để xoá form. Nhìn chung, nên viết bằng javascript để xử lý bên phía client càng nhiều càng tốt vì sẽ làm tốc độ xử lý nhanh hơn và giảm tải cho server (trừ những trường hợp đặc biệt cần phải viết mã chạy trên server). Tất cả các phần tử web server control đều được asp.net trừu tượng hoá thành các phần tử control chuẩn như trên môi trường winform, vì vậy cách sử dụng gần như giống hoàn toàn. Cấu trúc lưu trữ của đối tượng Table có tính phân cấp và dễ dàng suy ra cách lưu trữ các phần tử bên trong. Ví dụ: Bảng thì chứa các rows, row thì chứa các cell, vì vậy để thêm các phần tử con thì gọi phương thức Add. Ví dụ Bảng.rows.Add(); row.cells.Add(),.... Mỗi phần tử đều có thuộc tính Style.Value để cho phép chúng ta thay đổi style của nó. Giá trị có thể gán cho thuộc tính value này là một xâu chứa danh sách các cặp Thuộc tính:Giá trị.

-

-

V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.54

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin

BÀI 6: Các đối tượng trong ASP.NET
Trong bất kỳ ứng dụng nào, dù là winform based hay webform based thì việc giao tiếp (tương tác) với người dùng và giữa các webform với nhau là điều bắt buộc. Ví dụ ta cần phải lấy thông tin đặt hàng do người dùng nhập vào và hiển thị trở lại người dùng một số thông tin hữu ích khác, như kết quả thanh toán…hay một trang chuyển tiếp kết quả cho một trang khác để xử lý v.v… Ở các bài trước, để làm điều này chúng ta thực hiện dễ dàng thông qua các server controls như textbox, listbox, dropdownlist, label,… Tuy nhiên những điều khiển này chỉ có tác dụng trong một Page còn các trang khác thì hoàn toàn không thể đọc/ghi giá trị nằm trong các điều khiển này. Để thực hiện việc giao tiếp (truyền dữ liệu) giữa các webform ASP.NET cung cấp một tập các điều khiển giúp ta làm việc đó một cách dễ dàng, đó là: Đối tượng Request và đối tượng Response. Trong bài học này, chúng ta cũng tìm hiểu thêm một số đối tượng khác cũng rất hay dùng khi xây dựng ứng dụng là đối tượng Server, Application và Session.

I. Lý thuyết
1. Request Object
1.1 Đối tượng Request dùng để làm gì ? Request là một đối tượng của ASP.NET, nó cho phép đọc các thông tin do các trang khác gửi (Submit) đến. Mô hình gửi/đọc giá trị: Trang Gửi Post Trang nhận

Form1 User name : Password: aptech *******

…………………………………… Request("txtUserName") => aptech Request("txtPassword") => 123456 ……………………………………

1.2 Các thành phần (thuộc tính và phương thức) chính Phương thức:

 Request.QueryString.Get("Tên_Phần tử cần đọc"): Để đọc giá trị của một phần tử
được gửi theo phương thức Get (Method = "Get")

 Phương thức Request.Form.Get("Tên_Phần tử cần đọc"): Để đọc giá trị của một
phần tử được gửi theo phương thức Post (Method = "Post"). Chú ý: Có thể dùng Request.Form.GetValues và Request.Form.GetValues để đọc. V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.55

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin 1.3 Ví dụ sử dụng Xây dựng 2 trang web : trang Default.aspx, trong đó có 2 textbox chứa tên và mật khẩu. Khi người dùng click vào nút submit thì gửi tên và mật khẩu sang trang Webform1.aspx để hiển thị.

Trang nguồn (gửi): Default.aspx

Kết quả nhận về. Code của 2 trang sẽ như sau:

V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.56

aspx Webform1.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. aptech@utehy.net –diễn Đàn Sinh Viên Toán Tin Default.0 – http://www.319 P.aspx V2. Tel: 03213-713.utehy.Tài liệu khóa học lập trình web với ASP.vn.edu.vn.57 .aptech.

2 Các thành phần (thuộc tính và phương thức) chính  Phương thức: Response.net –diễn Đàn Sinh Viên Toán Tin Code xử lý của trang webform1. aptech@utehy.319 P.Redirect(“địa chỉ URL”): Chuyển tới một trang khác.Tài liệu khóa học lập trình web với ASP.1 Đối tượng Response dùng để làm gì ? Đối tượng này được dùng để gửi nội dung (một xâu) bất kỳ về cho trình duyệt. 1.  Phương thức Response.  Phương thức: Flush dùng để đưa dữ liệu còn trong bộ đệm phía server về cho phía trình duyệt.write như sau: V2. 1.58 .vn.cs 2 Response Object 1.edu.3 Ví dụ sử dụng Tạo một trang Login hoàn toàn bằng phương thức Response.write(<Biểu thức>) dùng để gửi giá trị biều thức truyền vào cho phía trình duyệt.aspx.0 – http://www.utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.aptech. Tel: 03213-713.vn.

vn. aptech@utehy.Tài liệu khóa học lập trình web với ASP. Tel: 03213-713.vn.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin V2.0 – http://www.319 P.59 .utehy.edu.aptech.

biết rằng tệp này nằm trong một thư mục con là “App_Data”: Server. Trả về tên của máy tính server đang chạy.Mdb.aptech.Mappath(“default.MDB”).utehy.MachineName).319 P. V2.  Cho biết đường dẫn thực sự trên ổ cứng (thư mục vật lý) của trang hiện hành (trang default.0 – http://www.aspx”).edu.  Mappath(“Virtual path”): Trả về đường dẫn vật lý của đường dẫn ảo tương ứng. Tel: 03213-713. 3.vn.vn.60 .Write(Server.  Cho biết đường dẫn vật lý ứng với tệp QLCB.net –diễn Đàn Sinh Viên Toán Tin Trang code sẽ như sau: 3 Server Object 3.Mappath(“App_Data/QLDB.aspx) : Server.Tài liệu khóa học lập trình web với ASP.2 Các thành phần (thuộc tính và phương thức) chính  CreateObject(“COM Specification”)  Ít dùng trong ứng dụng .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. aptech@utehy. 3.NET  MachineName: String.3 Ví dụ sử dụng  In ra tên của máy chủ hiện hành: Response.1 Đối tượng Server dùng để làm gì ?  Dùng để tạo các đối tượng COM  Lấy thông tin về tên máy  Ánh xạ đường dẫn ảo thành đường dẫn vật lý.

+ Cú pháp để đọc giá trị của một biến sesstion như sau: Session. Lưu ý: Tên biến phải đặt trong cặp dấu nháy kép.Add(“MaNguoiDung”."Giá trị khởi tạo").Contents[i]..edu.Contents[“MaNguoiDung”]) Riêng với đối tượng Session. Ví dụ : Tạo một biến tên là MaNguoiDung và gán giá trị là TK34 Session. + Cú pháp để tạo biến Session như sau: Session. ghi) các biến có phạm vi toàn ứng dụng.0 – http://www.aptech.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. + Ví dụ: Tạo biến So_Nguoi_Truy_Cap Application. 5. nó còn có các sự kiện.Add(“Tên_Biến”.Add("Tên_Biến".1 Đối tượng Application dùng để làm gì ? Dùng để quản lý các biến có phạm vi toàn ứng dụng. biến session là một biến mà mọi trang trong một phiên (Session) đều có thể truy xuất.61 .. Các sự kiện này có tên là On_Start và On_End. Khái niệm biến toàn ứng dụng Biến toàn ứng dụng là biến có tác dụng đối với mọi người dùng truy cập vào website. gọi là biến Session.Add(“So_Nguoi_Truy_Cap”. <Giá trị> có thể là xâu ký tự hoặc số.319 P.Tài liệu khóa học lập trình web với ASP. aptech@utehy. Nói cách khác.Contents[“Tên_Biến”] = <Giá trị mới> Ví dụ: Response.“TK34”). Nếu muốn lưu trữ thông tin về khách thăm này trong cả phiên làm việc thì có thể lưu vào các biến.3.2. đọc.2. Mọi trang aspx.cs đều có thể truy cập đến biến này và dù ở bất kỳ thời điểm nào. Đối tượng Application Dùng để quản lý (Tạo. 5 Application Object 5.vn.asax. 5. Đối tượng Session Là đối tượng dùng để quản lý (tạo.utehy.write(“Mã người dùng là : “ &Session.vn. + Cú pháp để ghi (thay đổi) giá trị của biến session: Session.1. <Giá trị khởi tạo>). Có tác dụng đến mọi người dùng. 0) V2. đọc. người dùng có thể duyệt rất nhiều trang web của website đó. Biến Sesstion Khi vào một website.Contents[“Tên_Biến”] hoặc dùng chỉ số: Session. ghi) các biến sesstion và một số thông số khác. Các sự kiện này tự động được gọi mỗi khi một phiên làm việc được tạo ra. 4.net –diễn Đàn Sinh Viên Toán Tin 4 Session Object 4. Tel: 03213-713. + Cú pháp tạo biến Application: Application. Các sự kiện này được đặt trong file Global.

Contents[i] + Ví dụ : Đọc và ghi biến Application.Contents[“So_Nguoi_Truy_Cap”] = Application.vn.aptech.edu. Login. Tel: 03213-713. Để các ứng dụng khác được phép thay đổi các biến Application thì gọi phương thức Unlock.asax như sau: V2.aspx.aspx/cs.utehy.Tài liệu khóa học lập trình web với ASP.net và 123456 thì được phép truy cập các trang Index.0 – http://www.vn.write(“Bạn là vị khách thứ: “ & Application. Bài 1: Tạo một trang Login Nếu người dùng nhập user name và mật khẩu tương ứng là asp. II.Contents[“So_Nguoi_Truy_Cap”] + 1 Response.319 P. Sự kiện OnStart chỉ được kích hoạt duy nhất một lần khi yêu cầu đầu tiên phát sinh. Application.Contents[“Tên_Biến”] hoặc chỉ số: Application. Thực hành 1. đối tượng Application còn có 2 phương thức thường dùng là Application. Khi gọi phương thức Lock (khóa) thì tất cả các ứng dụng không được phép thay đổi các giá trị Application.aspx/cs và Global. Sự kiện OnEND được kích hoạt khi dịch vụ web dừng (unload). trái lại mỗi lần người dùng truy cập đến trang Index.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Lock(): Để khóa không cho người khác sửa đổi các biến toàn cục và Application.UnLock() để mở khóa . aptech@utehy.Contents[“So_Nguoi_Truy_Cap”]) Ngoài ra.asa.aspx thì đều được chuyển tới trang Login. Minh họa: Cần tạo 3 trang là Home. Mã lệnh viết cho 2 sự kiện này cũng được đặt trong file Global.net –diễn Đàn Sinh Viên Toán Tin + Truy xuất đến biến Application: Application.aspx.62 . Đối tượng Application có 2 phương thức là Lock và Unlock. Đối tượng Application cũng có 2 sự kiện đó là Application_OnStart và Application_OnEND.

0 – http://www.63 .Tài liệu khóa học lập trình web với ASP.aspx V2.org/1999/xhtml"> <head runat="server"> <title>Thanh toán .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.cs" Inherits="Home" %> <html xmlns="http://www.w3.319 P.net –diễn Đàn Sinh Viên Toán Tin <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Home. Tel: 03213-713.Trang cần phải Login trước khi xem</title> </head> <body> <form id="form1" runat="server"> <div> <h1 style="text-align:center"> Đây là nội dung rất quan trọng.aspx.aptech. aptech@utehy.utehy.edu.vn. bạn chỉ có thể thấy dòng này sau khi đã Login ! </h1> </div> </form> </body> </html> Nội dung trang Home.vn.

EventArgs e) { if (Session.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. public partial class Home : System.ToString () == "chuadangnhap") { Response.aptech.utehy.asax V2.Contents ["TrangThai"].64 . aptech@utehy.UI. EventArgs e) { // Code that runs when an unhandled error occurs } void Session_Start(object sender. using System.Web. EventArgs e) { } </script> Trang Global.Redirect ("Login.Tài liệu khóa học lập trình web với ASP.net –diễn Đàn Sinh Viên Toán Tin using System.vn.0 – http://www.cs <%@ Application Language="C#" %> <script runat="server"> void Application_Start(object sender.Page { protected void Page_Load(object sender.vn. EventArgs e) { // Code that runs on application startup } void Application_End(object sender. EventArgs e) { // Code that runs when a new session is started Session.Add ("TrangThai".aspx. EventArgs e) { // Code that runs on application shutdown } void Application_Error(object sender.Web. } } } Trang Home.edu.aspx"). "chuadangnhap"). Tel: 03213-713.319 P. } void Session_End(object sender.

Page { protected void cmdLogin_Click (object sender.utehy. Response.UI.Text == "asp.net): </td> <td> <asp:TextBox runat="server" ID="txtUserID" TextMode="Password"> </asp:TextBox> </td> </tr> <tr> <td>Password (123456): </td> <td><asp:TextBox runat="server" ID="txtPassword"></asp:TextBox> </td> </tr> <tr> <td> </td> <td> <asp:Button runat="server" Text="Login" ID="cmdLogin" onclick="cmdLogin_Click"/> </td> </tr> </table> </form> </body> </html> Trang Login.Web.aspx").Tài liệu khóa học lập trình web với ASP.aspx using System.Text == "123456") { Session.Contents ["TrangThai"] = "DaDangNhap". } } } V2.cs" Inherits="Login" %> <html xmlns="http://www. Tel: 03213-713.edu. EventArgs e) { if (txtUserID.net" && txtPassword.Redirect ("Home. aptech@utehy.aspx.vn.vn.org/1999/xhtml"> <head runat="server"> <title>System Login</title> </head> <body> <form id="form1" runat="server"> <table> <tr> <td>User name (asp.aptech. public partial class Login : System.net –diễn Đàn Sinh Viên Toán Tin <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.65 .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.w3.0 – http://www.319 P.

66 .aspx.vn.vn.net –diễn Đàn Sinh Viên Toán Tin Trang Login.0 – http://www.Tài liệu khóa học lập trình web với ASP.aptech.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. aptech@utehy.utehy. Tel: 03213-713.edu.319 P.cs V2.

StreamReader sr. Tel: 03213-713.org/1999/xhtml"> <head runat="server"> <title>Home Page . public partial class Index : System.vn.MapPath ("SL.0 – http://www. EventArgs e) { Application.ReadLine ().aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.txt")).aptech.cs" Inherits="Index" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.edu.cs using System.0 Transitional//EN" "http://www. //Tạo một biến Applciation là SLTruyCap và khởi tạo giá trị S Application. string S = sr.319 P.Text="Bạn là vị khách thứ: " + Application.Close ().NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Add ("SLTruyCap".w3.aspx.vn.dtd"> <html xmlns="http://www. Dùng biến tệp text để lưu.Page { protected void Page_Load(object sender. S). Hướng dẫn: Tạo 2 trang là Index. aptech@utehy.org/TR/xhtml1/DTD/xhtml1-transitional. sr = new System.UI.utehy. Application.Contents["SLTruyCap"]. sr.IO.asax với nội dung sau: Trang Index.net –diễn Đàn Sinh Viên Toán Tin 2. EventArgs e) { lblSLKhach.Hit counter</title> </head> <body> <form id="form1" runat="server"> <h1>Chào mừng bạn đã đến website của chúng tôi</h1> <asp:Label runat="server" ID="lblSLKhach"></asp:Label> </form> </body> </html> Trang Index.w3.ToString().Web. Bài 2: Tạo một trang đếm số lượng người truy cập.Tài liệu khóa học lập trình web với ASP.UnLock ().67 .Lock ().aspx. } } Trang Global.StreamReader (Server.aspx/cs và Global.asax <%@ Application Language="C#" %> <script runat="server"> void Application_Start(object sender. V2. System.IO.

sw = new System.txt (mở và ghi đè) System. EventArgs e) { // Code that runs on application shutdown } void Application_Error(object sender.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. EventArgs e) { } </script> Sau khi tạo.net –diễn Đàn Sinh Viên Toán Tin } void Application_End(object sender.MapPath ("SL.IO.txt")).319 P. Tel: 03213-713.Tài liệu khóa học lập trình web với ASP. V2.Contents ["SLTruyCap"]. //Lưu vào file SL.vn.vn.Parse (Application.Contents ["SLTruyCap"]. sw. chạy file Index. Đây là cách được dùng chính thức để đếm số lượng lượt người truy cập. EventArgs e) { // Code that runs when an unhandled error occurs } void Session_Start(object sender.Contents ["SLTruyCap"] = int.StreamWriter sw.68 .utehy.StreamWriter (Server.Write (Application.IO. Bạn hoàn toàn có thể cải tiến để hiển thị số lượng người truy cập bằng hình ảnh cho sinh động hơn.edu. sw.ToString ()).aptech. EventArgs e) { //Tăng số lượng người truy cập lên 1 khi có một người mới thăm Application. aptech@utehy.0 – http://www. } void Session_End(object sender.aspx để kiểm chứng sẽ thấy rằng số lượng người truy cập luôn luôn tăng lên bất kể là server có tắt hay máy tính bị trục trặc.Close ().ToString ()) + 1.

 Tối ưu truy cập nguồn dữ liệu (OLE DB & SQL server).  Hoàn thiện chức năng Nhập hồ sơ cán bộ.ADO.aptech.Data. . trong đó có lưu vào Database. Hiện nay.Vị trí của ADO.NET là:  Cung cấp các lớp để thao tác CSDL trong cả hai môi trường là phi kết nối (Disconected data) và kết nối (Connected data).OLEDB) dùng để truy xuất đến bất kỳ CSDL nào có hỗ trợ OLEDB. VB.SQLClient) chuyên dùng để truy xuất đến CSDL SQL Server (Không qua OLE DB nên nhanh hơn). Tel: 03213-713.vn. Giới thiệu chung Khi phát triển các ứng dụng trên nền web thì công việc chủ yếu phải giải quyết là xử lý các nghiệp vụ.ADO. SQL Provider (nằm trong System.  Làm việc trên môi trường Internet.NET được đặt trong Namespace là System.NET bao gồm 2 Provider (2 bộ thư viện thường dùng) để thao tác với các CSDL là: OLE DB Provider (nằm trong System. I.NET truy xuất đến các cơ sở dữ liệu không phải của Microsoft khác. Oracle… provider để cho phép ứng dụng .  Tích hợp chặt chẽ với XML (Extensible Markup Language)  Tương tác với nhiều nguồn dữ liệu thông qua mô tả dữ liệu chung. trong đó phần lớn là xử lý Cơ sở dữ liệu. Lý thuyết 1.NET là một tập các lớp nằm trong bộ thư viện lớp cơ sở của .NET Framework.0 – http://www. Trong môi trường phát triển Microsoft .NET trong kiến trúc của . .Data.NET) hay ứng dụng web (như ASP.oledb . aptech@utehy. các hãng thứ ba còn cung cấp các Provider khác như : MySQL.edu.69 .NET) thao tác dễ dàng với các nguồn dữ liệu.utehy.Mục tiêu chính của ADO.Các lớp của ADO.net –diễn Đàn Sinh Viên Toán Tin BÀI 7: CÔNG NGHỆ ADO.NET (Active Data Object).Tài liệu khóa học lập trình web với ASP. .Data/ System.NET tất cả các ứng dụng webform hay winform đều thống nhất sử dụng chung một bộ thư viện để truy xuất và thao tác Cơ sở dữ liệu gọi là ADO. cho phép các ứng dụng windows (như C#.Data.319 P.NET  Hiển thị dữ liệu trên trình duyệt bằng các điều khiển ASP Server controls.vn.NET Framework V2. .NET Mục tiêu: Kết thúc bài học này.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. học viên có thể:  Tạo được cơ sở dữ liệu cho hệ thống quản lý cán bộ  Sử dụng được các lớp truy xuất của ADO.

Tài liệu khóa học lập trình web với ASP.vn.net Framework Từ kiến trúc ta thấy rằng: ADO. sửa.vn. aptech@utehy. 2. do vậy nó có thể được sử dụng trong tất cả các ngôn ngữ hỗ trợ .NET cho phép làm việc ở cả hai chế độ. Kiến trúc của ADO. còn trong chế độ Disconnected thì vẫn có thể thêm.70 . còn DataAdapter.NET framework.NET trong kiến trúc của .net –diễn Đàn Sinh Viên Toán Tin Vị trí của ADO.aptech.utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Connection. V2.319 P. thêm) thì đều đòi hỏi ứng dụng phải kết nối và thao tác trực tiếp với cơ sở dữ liệu (CSDL). Command và Dataset làm việc ở chế độ Disconnected. Command và DataReader: cho phép làm việc ở chế độ Connected. xóa dữ liệu trên đối tượng cục bộ.NET là một thành phần nội tại (Instrict) của .0 – http://www.NET… mà không có sự khác biệt nào (Tức là các chức năng cũng như cách sử dụng hoàn toàn giống nhau). VB. không nhất thiết phải kết nối ngay đến CSDL (Xem mô hình ở dưới).NET ADO. Bộ ba Connection. Tel: 03213-713. xóa.edu.NET như C#. Trong chế độ Connected thì mỗi khi thao tác (như sửa. chế độ Kết nối (Connected) và phi kết nối (Disconnected).

1 Lớp Connection + Chức năng: Là đối tượng có nhiệm vụ thực hiện kết nối đến Cơ sở dữ liệu để các đối tượng như Command thao tác với CSDL thông qua Connection này.…. + Khai báo (có nhiều cách): public OleDbConnection Cn1.vn.Tài liệu khóa học lập trình web với ASP. Các lớp thao tác với CSDL: Connection. aptech@utehy..0 – http://www.319 .").edu. Tel: 03213-713.net –diễn Đàn Sinh Viên Toán Tin ~ Recordset Mdb.71 V2.aptech.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. public OleDbConnection Cn2 = new OleDbConnection (). Một số phương thức: + Open: Dùng để mở kết nối: Cnn.. public OleDbConnection Cn3 = new OleDbConnection ("Provider=Microsoft.. Open(): Mở kết nối đến CSDL do ta chỉ định trong ConnectionString P.jet. Command. XML… 3.utehy. 3.vn. mdf..

vn.edu. Ví dụ về một trang thực hiện kết nối đến CSDL C:\Nwind.Open  kết nối đã được mở) + ConnectionString: Chứa các thông tin để kết nối.Open ().0. Conn.aptech.OleDb.utehy.State == 1) Cnn.mdb"). + GetSchema: Lấy thông tin về CSDL (Ví dụ tên các bảng. V2.0 – http://www. có thể xem đã kết nối thanh công hay không thông qua thuộc tính State của Connection: if (Cnn.72 .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tel: 03213-713.319 P. (ConnectionState.  Thường thì nên viết như sau để tránh lỗi : if (Cnn.ConnectionString="Provider=Microsoft.net –diễn Đàn Sinh Viên Toán Tin Lưu ý: sau khi gọi phương thức Open.data source="+DBName.Close().mdb using System. using System.State == 1) “Kết nối thành công !” + Close(): Dùng để đóng kết nối: Cnn. public partial class Lession_12_Default : System.Tài liệu khóa học lập trình web với ASP.oledb. EventArgs e) { OleDbConnection Conn.Page { /// <summary> /// Hàm kết nối đến Cơ sở dữ liệu /// </summary> /// <param name="DBFileName">Đường dẫn tới file MDB</param> /// <returns>Trả về đối tượng OledbConnection hoặc null</returns> public static OleDbConnection OpenDB (string DBName) { try { OleDbConnection Conn = new OleDbConnection ().UI. using System. aptech@utehy. protected void Page_Load (object sender.Close().Data.4.Web. } } // Kết nối đến cơ sở dữ liệu và thông báo kết quả kết nối trên một Label. các trường trong bảng…) Một số thuộc tính: + State: Cho biết trạng thái kết nối. return Conn.vn.jet. Conn. Conn = OpenDB (@"c: \Nwind.Data. } catch (Exception ex) { return null.

/App_Data/nwind.MapPath(". Vị trí của tệp CSDL nwind.Text = "Đã kết nối thành công ! " .aptech. Tel: 03213-713.vn.vn.State = = ConnectionState.Text = "Không thể kết nối được !". aptech@utehy.73 .mdb V2.319 P.edu..net –diễn Đàn Sinh Viên Toán Tin if (Conn != null) { if (Conn. Khi đó để có thể kết nối đến CSDL này mà không cần biết thư mục hiện được đặt trong ổ C:\ hay D:\ … thì cần viết đường dẫn của tệp như sau: Conn = OpenDB (Server. } else { lblThongBao.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.0 – http://www.mdb")). } } } Chú ý: Thông thường tệp cơ sở dữ liệu được lưu trong thư mục App_Data.utehy.Tài liệu khóa học lập trình web với ASP.Open) lblThongBao.

Các hàng và cột khác bị bỏ qua.OleDbCommand Cmd.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.74 . Cmd. (Có thể thay đổi quyền hoặc người dùng truy cập đến thư mục bằng cách Right click lên thư mục đó.319 P.edu.utehy.  Một số phương thức dùng để thực thi câu lệnh SQL:  int ExecuteNonQuery(): Sử dụng khi CommandText ở trên thuộc dạng Insert. Select. Phương thức này chỉ áp dụng cho một số Provider (ví dụ SqlClient)    Một số thuộc tính  CommandText: Chứa câu lệnh SQL cần thực thi. XMLReader ExecuteXMLReader(): Dùng để đọc dữ liệu là một tệp XML. Tuy nhiên. ví dụ: "Select * from Employees".Tài liệu khóa học lập trình web với ASP. V2. Hàm trả về là một đối tượng OleDbDataReader chứa kết quả thực thi câu lệnh (thường là câu lệnh Select). Hoặc viết gọn hơn: OleDbCommand Cmd=new OleDbCommand("Lệnh SQL".) values (…. như Insert.  Cách tạo (chính tắc): . để thực hiện được các lệnh này thì cần phải thông qua một Connection nào đó đang được mở. aptech@utehy.  Object ExecuteScalar(): Sử dụng khi CommandText ở trên là câu lệnh SQL chỉ trả về một kết quả đơn. Update. OleDbDataReader ExecuteReader(): Dùng khi CommandText là một câu lệnh chọn (Select). Cmd = new OleDbCommand (). Câu lệnh SQL: là một xâu chứa câu lệnh SQL bất kỳ. Cmd.OleDbConnection_Obj).)".vn..2 Lớp Command  Chức năng: Thực hiện các thao tác đối với CSDL.Connection= OleDbConnection_Obj.CommandText = "Câu lệnh SQL". CommandType: Cho biết CommandText chứa StoreProcedure.0 – http://www. chọn Properties.net –diễn Đàn Sinh Viên Toán Tin . Tel: 03213-713. Update…. "Insert into Employees (….Nếu ổ đĩa chứa tệp CSDL được định dạng là NTFS và được đặt quyền truy cập thì cần phải đảm bảo rằng thư mục chứa tệp CSDL có quyền read/write cho người dùng là IUSR_. Delete. "Delete from Employees where …"   Connection: Để cho biết là đối tượng Command sử dụng kết nối nào.aptech. tên bảng hay là câu lệnh SQL.) 3. delete. tiếp theo chọn thẻ Security và Add thêm người dùng/ quyền. ví dụ câu lệnh đếm tổng số bản ghi : Select Count(*) … Hàm này trả về hàng và cột đầu tiên của kết quả thực thi truy vấn. Hàm này trả về số bản ghi bị tác động (affected).vn. Mặc định thuộc tính này có giá trị là Text. Trong đó OleDbConnection_Obj là một OleDbConnection mà trước đó đã Open rồi.

0 – http://www.aptech. Tel: 03213-713.mdb.Tài liệu khóa học lập trình web với ASP.vn.319 P. aptech@utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. V2.75 .vn.utehy.edu.net –diễn Đàn Sinh Viên Toán Tin  Ví dụ: Xây dựng một trang web hiển thị tổng số bản ghi của bảng Products trong cơ sở dữ liệu nwind.

Tài liệu khóa học lập trình web với ASP.0 – http://www.utehy.net –diễn Đàn Sinh Viên Toán Tin Default.MapPath(".Data.org/1999/xhtml"> <head runat="server"> <title>Insert data</title> </head> <body> <form id="form1" runat="server"> <h2> <asp:TextBox runat="server" ID="txtNCC"></asp:TextBox> <asp:Button runat="server" ID="cmdAdd" Text="Thêm" onclick="cmdAdd_Click" /> V2.UI.aspx. protected void Page_Load (object sender.Data.Dispose (). Conn.w3.OleDb.mdb").org/TR/xhtml1/DTD/xhtml1-transitional.aptech. Cmd = new OleDbCommand ().4.cs" Inherits="Lession_12_Command_InsertData" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.ConnectionString += Server.dtd"> <html xmlns="http://www.edu. lblThongBao. EventArgs e) { // Tạo đối tượng Connection và mở kết nối đến CSDL OleDbConnection Conn. // Hiển thị kết quả trên Label int SL = (int) Cmd.Page { // Kết nối đến cơ sở dữ liệu và thông báo kết quả trên một Label.Text = "Số bản ghi trong bảng Products: " + SL. Conn.w3. aptech@utehy. using System.vn. Cmd. // Tạo đối tượng Command và thực thi câu lệnh đếm số bảng ghi OleDbCommand Cmd.Web.cs using System.0.ToString ().jet. // Giải phóng kết nối. data source=" .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. using System. Conn. Cmd. } } Ví dụ: Thêm Tên nhà cung cấp vào bảng Suppliers: Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Command_InsertData.Connection = Conn..Close ().vn.Open(). Tel: 03213-713. Conn=new OleDbConnection().CommandText = "Select Count(*) from Products"./App_Data/nwind. Conn.oledb.319 P. public partial class Lession_12_Default : System.ExecuteScalar().aspx.ConnectionString="Provider=Microsoft.76 . Cmd.0 Transitional//EN" "http://www.

data source=". Cmd.vn.oledb. Conn.Data.UI..0 – http://www. Cmd./App_Data/nwind. sau đó chuyển tới bản ghi tiếp theo.ExecuteNonQuery ().Web.Tài liệu khóa học lập trình web với ASP. EventArgs e) { } protected void cmdAdd_Click (object sender. Conn = new OleDbConnection (). // Tạo đối tượng Command và thực thi câu lệnh đếm số bảng ghi OleDbCommand Cmd.net –diễn Đàn Sinh Viên Toán Tin </h2> </form> </body> </html> Trang Code behind: using System. Conn.ConnectionString = "Provider=Microsoft. Cmd = new OleDbCommand ().edu.319 . Hàm này trả về true nếu vẫn còn dữ liệu.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Cmd.Page { protected void Page_Load(object sender.0.77 V2. Tel: 03213-713.4.   DataTable: GetTableSchema()  Trả về một dataTable mô tả thông tin về DataReader như tên các cột.3 Lớp DataReader  Chức năng: Dùng để đón nhận kết quả trả về từ phương thức ExecuteReader của đối tượng Command.Connection = Conn. Cmd.Data. using System.Dispose ().mdb"). String: GetName(int i)  Trả về tên của cột i P. } } 3. public partial class Lession_12_Command_InsertData : System. EventArgs e) { // Tạo đối tượng Connection và mở kết nối đến CSDL OleDbConnection Conn.CommandText = "Insert into Suppliers(CompanyName) values('" + txtNCC. Conn. false nếu đã đọc hết.utehy.ConnectionString += Server.jet.OleDb. using System. aptech@utehy.  Một số phương thức:  Bool Read(): Thực hiện việc đọc một bản ghi (một hàng) trong kết quả. Conn.Open (). tuy nhiên dữ liệu nhận về là Readonly và chỉ đọc theo chiều tiến. Nó tương tự như một Recordset của ADO.Close ().aptech.vn.Text + "')".MapPath (".

org/TR/xhtml1/DTD/xhtml1-transitional. Conn.aspx.vn.  Biến DataReader –ví dụ Dr – cho phép đọc dữ liệu của từng ô (cột/ trường) của hàng hiện hành như sau: Dr["Tên trường"/ hoặc chỉ số].NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.78 .Data.vn.0 Transitional//EN" "http://www. using System.4.Open (). data source=".Tài liệu khóa học lập trình web với ASP. GetXXX(int i)  Trả về giá trị của cột i và chuyển về dạng Int.  Ví dụ : Nạp Tên của tất cả sản phẩm trong bảng Products và đưa vào một ListBox.MapPath (". Tel: 03213-713.0.dtd"> <html xmlns="http://www. Cmd.w3.cs" Inherits="Lession_12_DataReader" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. V2.Page { protected void Page_Load(object sender.UI.aptech. Cmd.…  Một số thuộc tính:  Boolean: HasRows cho biết là DataReader có chứa dữ liệu hay không ?  int FieldCount  Cho biết số trường (Cột) của DataReader.0 – http://www.ConnectionString = "Provider=Microsoft.ConnectionString += Server./App_Data/nwind.CommandText = "Select ProductName from Products". public partial class Lession_12_DataReader : System.utehy. GetString(int i).org/1999/xhtml"> <head runat="server"> <title>OleDbDataReader demo</title> </head> <body> <form id="form1" runat="server"> <h2> Danh mục sản phẩm</h2> <asp:ListBox runat="server" ID="lstDSSP" Rows="20"> </asp:ListBox> </form> </body> </html> Trang Code Behind using System. // Tạo đối tượng Command và thực thi câu lệnh đếm số bảng ghi OleDbCommand Cmd. Conn.…. Trang giao diện: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataReader.Data..net –diễn Đàn Sinh Viên Toán Tin  GetInt(int i). Conn. String. using System.mdb"). aptech@utehy. EventArgs e) { // Tạo đối tượng Connection và mở kết nối đến CSDL OleDbConnection Conn.OleDb.oledb.jet. Conn = new OleDbConnection ().edu.319 P.w3.Web.Connection = Conn.

319 P. …. } Cmd.vn.Caption = "Tuổi".  Khai báo: DataColumn Dc.GetType(Tên_Kiểu)).GetType ("String")).ExecuteReader ().NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Type.Caption = "Họ và tên".edu. V2. Trong đó Tên_Kiểu có thể là String. Dc_HVT = new DataColumn ("Tuoi". tạo cột và chỉ định kiểu dữ liệu cho cột: DataColumn Dc.ToString()) có được không ?. không có new //Duyệt và đưa vào lstDSSP while (Dr. Tel: 03213-713. System.Tài liệu khóa học lập trình web với ASP.Add (Dr [0].7 Lớp DataColumn  Chức năng: Là một thành phần tạo nên DataTable. Tuổi kiểu Int: DataColumn Dc_HVT. System.0 – http://www.utehy.Items. Dc = new DataColumn (Tên_Cột). /// Dr = Cmd.Add (Dr ["ProductName"].net –diễn Đàn Sinh Viên Toán Tin OleDbDataReader Dr.Type.aptech.Type. System. aptech@utehy. Dc = new DataColumn ("Hello". DataColumn Dc_Tuoi.  Một số phương thức:   Một số thuộc tính:  Caption: Tiêu đề của cột  ColumnName: Tên của cột.GetType ("Int32")).Read() == true) { lstDSSP. Conn. Hoặc.Items. kiểu String.79 . Dc_HVT = new DataColumn ("HoVaTen".Dispose ().Close (). 3.ToString()). Int32. Dc_HVT.  Ví dụ : Tạo một cột có tên là Họ tên. } } Câu hỏi: Viết lstDSSP. Dc_HVT.vn.

Dc_HVT = new DataColumn ("Tuoi".net –diễn Đàn Sinh Viên Toán Tin 3.  Clear(): Xóa tất cả các dữ liệu trong DataTable  Một số thuộc tính:  Columns: Là một tập hợp.utehy.  Rows: Là một tập hợp. xóa. i < Dt.Rows[i][j].0 – http://www. 3. DataColumn Dc_Tuoi. j++) { … Dt.Caption = "Họ và tên".GetType("String")).Add (Dc_HVT). Dc_HVT.Count. Rows cũng có các phương thức để thêm/xóa hàng. Tel: 03213-713. Có thể dùng vòng lặp kiểu như for (i=0.  Truy xuất đến ô [i. aptech@utehy.  Ví dụ : Tạo một bảng có 2 cột là Họ tên (Kiểu String) và Tuổi (Kiểu Int32) ………………………………. Type. không thể tạo DataRow theo kiểu: V2. sửa…) của DataTable. j < Dt.Rows. quản lý toàn bộ các hàng trong DataTable.319 P. Lưu ý: Vì Dr phụ thuộc vào bảng (DataTable) nên nó DataRow Dr=new DataRow() !!! chỉ được tạo ra bởi một DataTable có sẵn. Columns lại có các phương thức để thêm/xóa cột. Dt.vn. // Tạo cột họ tên nhờ vào Column ở trên Dt.8 Lớp DataTable  Chức năng: Quản lý dữ liệu dạng bảng 2 chiều (Các hàng và các cột).GetType ("String")).Type.  Khai báo: DataTable Dt . hoặc Dt = new DataTable("Tên_Bảng"). i++) for (j=0.9 Lớp DataRow  Chức năng: Là một đối tượng để quản lý một hàng của một DataTable. DataColumn Dc_HVT.edu. Type.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. DataTable Dt .Columns.j] của bảng: Tên_Bảng.Columns.Add(Dc_Tuoi). quản lý toàn bộ các cột (Thêm.Add("HoVaTen".Rows[i][j] … } để duyệt toàn bộ các ô trong Table.Columns.Count. // Tạo cột tuổi. Dc_HVT.80 .Tài liệu khóa học lập trình web với ASP. Dc_HVT = new DataColumn ("HoVaTen". ……………………………………… Hoặc có thể thêm ngắn gọn hơn: Dt.Columns.GetType ("Int32")).aptech.Caption = "Tuổi".vn. Dt=new DataTable().  Một số phương thức:  DataRow NewRow() : Trả về một đối tượng DataRow.  Khai báo: DataRow Dr. Dt=new DataTable().

Rows. 30} và {"Nguyễn Văn Bình". Dt=new DataTable(). 20}. // Tạo một hàng trắng Dr ["HoVaTen"] = "Nguyễn Văn Bình".Rows.0 – http://www. // Thêm vào bảng Dr = Dt. Dr ["Tuoi"] = 20. DataTable Dt . Dt. Dt. 3. Nó là nơi lưu trữ dữ liệu tạm thời cho ứng dụng trong quá trình xử lý. DataRow Dr. sau đó chèn vào bảng này 2 bản ghi có giá trị tương ứng là {"Nguyễn Văn An".319 P. Tel: 03213-713.vn.Columns..Data.NewRow (). // Thêm vào bảng …………………………………………………………….vn.Tài liệu khóa học lập trình web với ASP. // Tạo một hàng trắng Dr ["HoVaTen"] = "Nguyễn Văn An".Add (Dr).Columns.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.10 Lớp DataSet  Chức năng: Là một đối tượng chứa các DataTable.  Một số phương thức:   Một số thuộc tính:  Tables: Chứa tất cả các bảng chứa trong Dataset. Dr = Dt. Trong đó Dr: là một biến kiểu DataRow  Ví dụ : Tạo một bảng có hai cột Họ tên và Tuổi. Dt. Lớp DataSet này nằm trong System. …………………………………………………………….  DataSet Ds = new DataSet(). aptech@utehy. V2.utehy.NewRow ().81 . Dt.Add (Dr).Add (Dc_HVT). Dr ["Tuoi"] = 30.Add(Dc_Tuoi).net –diễn Đàn Sinh Viên Toán Tin  Truy xuất các cột (ô) trong một DataRow như sau:  Dr[Chỉ số] hoặc Dr[Tên_Cột]. 0 1 2 DataSet Object  Khai báo:  DataSet Ds..aptech.edu.

utehy.  Một số thuộc tính:  SelectCommand.w3.UI. data V2.edu.net –diễn Đàn Sinh Viên Toán Tin  Tables[i] hoặc Tables[Tên_Bảng] : Tham chiếu đến một bảng cụ thể trong Dataset. using System.OleDb. InsertCommand: trả về hoặc cho phép thiết lập các câu lệnh SQL để Chọn (Select).3.  Ví dụ : Xem ví dụ mục 13.Tài liệu khóa học lập trình web với ASP.dtd"> <html xmlns="http://www.82 .Data. using System.4.Data.Web. Tel: 03213-713. public partial class Lession_12_DataSet : System.0.vn.0 Transitional//EN" "http://www.ConnectionString = "Provider=Microsoft. UpdateCommand.  Update(DataSet/DataTable…) : Cập nhật dữ liệu trong DataSet.vn.org/TR/xhtml1/DTD/xhtml1-transitional. Conn. aptech@utehy.aptech.aspx.cs" Inherits="Lession_12_DataSet" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Page { protected void Page_Load(object sender.11 Lớp DataAdapter  Chức năng: Đóng vai trò cầu nối / Chuyển đổi dữ liệu giữa Nguồn dữ liệu (DataSource) và các đối tượng thao tác dữ liệu (như DataSet chẳng hạn).11 3.319 P.oledb.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Insert vào Cơ sở dữ liệu.  Một số phương thức:  Fill (DataSet. Conn = new OleDbConnection (). Cập nhật (Update). Delete.  Ví dụ: Hiển thị toàn bộ bảng Suppliers ra màn hình Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataSet.org/1999/xhtml"> <head runat="server"> <title>DataSet demo</title> </head> <body> <form id="form1" runat="server"> <h2>Danh sách nhà cung cấp</h2> <asp:DataGrid runat="server" ID="dgrNCC"> </asp:DataGrid> </form> </body> </html> Trang Code using System. DataTable ngược trở về Cơ sở dữ liệu. DeleteCommand.w3.0 – http://www.jet. Tên_Cho_DataSet): Điền dữ liệu lấy được vào DataSet. EventArgs e) { // Tạo đối tượng Connection và mở kết nối đến CSDL OleDbConnection Conn.

319 P. OleDbDataAdapter Da.83 .0 – http://www. Da. Conn. DataSet DsNCC = new DataSet (). Tel: 03213-713. // Tạo đối tượng Command và select toàn bộ bảng Suppliers OleDbCommand Cmd.. Da=new OleDbDataAdapter().Fill (DsNCC.utehy. aptech@utehy. Da.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.ConnectionString += Server.vn.aptech.vn. Conn.MapPath (".DataSource = DsNCC. dgrNCC.net –diễn Đàn Sinh Viên Toán Tin source=".SelectCommand=Cmd.Open ().CommandText = "Select * from Suppliers". // Hiển thị trên một bảng dgrNCC. Cmd. "DS_NCC"). Cmd.Tables ["DS_NCC"].Connection = Conn.mdb").edu./App_Data/nwind.DataBind ().Tài liệu khóa học lập trình web với ASP. } } V2. Cmd = new OleDbCommand ().

aptech@utehy.vn.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.84 . Tel: 03213-713.Tài liệu khóa học lập trình web với ASP.edu. THỰC HÀNH 1.net –diễn Đàn Sinh Viên Toán Tin II.vn. Tạo cơ sở dữ liệu Tạo cơ sở dữ liệu Access QLCB.319 P.utehy.0 – http://www.MDB có những bảng với cấu trúc như sau:  Bảng tblCanBo  Bảng Bằng cấp: tblBangCap  Bảng phòng ban: tblPhongBan  Bảng trình độ chuyên môn: tblChuyenMon  Bảng chức vụ: tblChucVu V2.aptech.

0 Transitional//EN" "http://www. Nhập dữ liệu cho bảng.CanPhai {text-align:right. 2.aspx. Học viên tạo các bảng khác một cách tương tự.319 P.vn. số.utehy.net –diễn Đàn Sinh Viên Toán Tin  Bảng người dùng  Mối quan hệ giữa các bảng (Chú ý chọn Cascading Update/ Delete khi tạo) 2.w3.w3. Tel: 03213-713.1 Thiết kế trang giao diện (Chú ý: Các trang cần phải được gắn vào trong hệ thống giao diện đã được xây dựng ở bài trước. vì bảng này chứa cả dữ liệu dạng Xâu. Ở đây chỉ hướng dẫn cách nhập mẫu cho bảng tblUser. ví dụ: đưa vào MasterPage) Trang giao diện NhapNguoiDung.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="NhapNguoiDung.85 .Tài liệu khóa học lập trình web với ASP. aptech@utehy.org/TR/xhtml1/DTD/xhtml1-transitional.vn.0 – http://www. bool.cs" Inherits="Lession_13_NhapNguoiDung" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.dtd"> <html xmlns="http://www.aptech. datetime.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. font-style:italic} </style> </head> V2.org/1999/xhtml"> <head runat="server"> <title>Nhập thông tin người dùng</title> <style type="text/css"> .edu.

aptech@utehy.aptech.color:White"> <h3 style="margin:3px 3px 3px 3px">Nhập thông tin người dùng</h3> </td> </tr> <tr> <td class="CanPhai"> Tên đăng nhập </td> <td> <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox> </td> </tr> <tr> <td class="CanPhai"> Mật khẩu </td> <td> <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox> </td> </tr> <tr> <td class="CanPhai"> Quyền hạn </td> <td> <asp:DropDownList ID="ddlQuyenHan" runat="server" style="text-align:left"> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>3</asp:ListItem> <asp:ListItem>4</asp:ListItem> <asp:ListItem>5</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td class="CanPhai"> Ghi chú </td> <td> <asp:TextBox ID="txtGhiChu" runat="server" Rows="2" TextMode="MultiLine"></asp:TextBox> </td> </tr> <tr> <td> </td> <td> <asp:Button ID="cmdThem" runat="server" Text="Thêm" onclick="cmdThem_Click" /> V2.Tài liệu khóa học lập trình web với ASP.vn."> <tr> <td colspan="2" style="background-color:Purple.edu. Tel: 03213-713.utehy.0 – http://www.86 .net –diễn Đàn Sinh Viên Toán Tin <body> <form id="form1" runat="server"> <div> <table style="border:solid 1px purple.319 P.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn. border-collapse:collapse.

oledb..0 – http://www.Now.4. Conn = new OleDbConnection (). string MatKhau=txtPassword.Data.Parse(ddlQuyenHan.Now. aptech@utehy. data source=". NhapNguoiDung.ToString() +"/" + DateTime.Tài liệu khóa học lập trình web với ASP.Open ().Data.'" + NgayTao + "'.319 P. txtGhiChu. strSQL="Insert into tbluser(TenDangNhap. EventArgs e) { // Tạo đối tượng Connection và mở kết nối đến CSDL OleDbConnection Conn.edu. NgayTao. MatKhau. string NgayTao=DateTime.'" + MatKhau + "'.0.net –diễn Đàn Sinh Viên Toán Tin </td> </tr> </table> </div> </form> </body> </html> 2. V2. NgayTao += "/" + DateTime. Conn.vn.OleDb.MapPath (". Cmd. QuyenHan. // Tạo đối tượng Command và select toàn bộ bảng Suppliers OleDbCommand Cmd.CommandText = strSQL./App_Data/QLCB. strSQL += " values ('" + TenDN + "'. string GhiChu=txtGhiChu.aptech.cs using System.ToString().2 Viết code behind. Cmd = new OleDbCommand ()." + QuyenHan + ". Conn.Text = "".aspx.UI.Text. ddlQuyenHan.utehy.Year. Cmd. Conn. public partial class Lession_13_NhapNguoiDung : System. using System.Text = "". string TenDN=txtUserName.Connection = Conn.Text.Text).Page { protected void Page_Load(object sender. txtPassword. Tel: 03213-713.vn. EventArgs e) { } protected void cmdThem_Click (object sender. txtUserName. Cmd.ConnectionString = "Provider=Microsoft.Web.ToString().jet.Day.ExecuteNonQuery (). txtUserName.Now.Text = "".mdb").ConnectionString += Server.Focus ().Month.87 . string strSQL. using System. GhiChu) ".'" + GhiChu +"')".NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. int QuyenHan=int.Text = "1".Text.

data source=".0 – http://www.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.0.mdb"). Cmd. // Hiển thị trên một bảng V2.Web. Tel: 03213-713.aspx. Conn.4. Cmd. Da. aptech@utehy.aspx.org/TR/xhtml1/DTD/xhtml1-transitional. Da = new OleDbDataAdapter (). Cmd = new OleDbCommand ().Fill (DsNCC.w3. OleDbDataAdapter Da.0 Transitional//EN" "http://www.cs using System. Conn = new OleDbConnection ().88 .CommandText = "Select * from tblUser". using System.Open ().org/1999/xhtml"> <head runat="server"> <title>Danh sách người dùng</title> </head> <body> <form id="form1" runat="server"> <div> <h2> Danh sách người dùng</h2> <asp:DataGrid runat="server" id="dgrDSNS"></asp:DataGrid> </div> </form> </body> </html> 3.Data.Data.vn. "DS_USer").ConnectionString = "Provider=Microsoft.ConnectionString += Server.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="HienThiNguoiDung. DataSet DsNCC = new DataSet ().MapPath (".OleDb./App_Data/QLCB.aptech. Conn..utehy.w3.UI.Page { protected void Page_Load(object sender.Connection = Conn.319 P.jet. Da.Tài liệu khóa học lập trình web với ASP.dtd"> <html xmlns="http://www. // Tạo đối tượng Command và select toàn bộ bảng Suppliers OleDbCommand Cmd. Conn.SelectCommand = Cmd.1 Trang giao diện HienThiNguoiDung.2 Trang code behind Trang HienThiNguoiDung. using System.oledb. public partial class Lession_13_HienThi : System. EventArgs e) { // Tạo đối tượng Connection và mở kết nối đến CSDL OleDbConnection Conn.net –diễn Đàn Sinh Viên Toán Tin } } 3.cs" Inherits="Lession_13_HienThi" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. Hiển thị dữ liệu trong bảng lên trình duyệt 3.vn.edu.

aspx. đó là dùng phương thức Update của đối tượng DataSet và DataAdapter.utehy.DataSource = DsNCC. Trang giao diện UpdatewithDataAdapter.0 – http://www.319 P.mdb thành 1. } } 4. 4. Tạo kết nối đến CSDL 2. ta có thể dùng câu lệnh SQL dạng như "UPDATE … WHERE …. Điền (Fill) dữ liệu vào một DataSet. Chỉnh sửa dữ liệu trong các bảng của DataSet 5.89 .vn. Cập nhật dữ liệu bằng DataSet và DataAdapter Để cập nhật dữ liệu vào trong CSDL.cs" Inherits="Lession_13_UpdatewithDataAdapter" %> <html xmlns="http://www. Việc đặt câu lệnh Select ở đây là để về sau DataAdapter biết được các trường của bảng gồm những trường nào ? 3. Tạo đối tượng Command và đặt câu lệnh Select cho thuộc tính CommandText.Tài liệu khóa học lập trình web với ASP.DataBind ().org/1999/xhtml"> <head runat="server"> <title>Cập nhật dữ liệu thông qua Data Adapter</title> V2. aptech@utehy. Tel: 03213-713.net –diễn Đàn Sinh Viên Toán Tin dgrDSNS. Tạo một thể hiện của CommandBuilder (OleDBCommandBuilder/ SqlCommandBuilder) 6.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tuy nhiên còn có một cách khác để cập nhật nữa.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdatewithDataAdapter.w3.vn.Tables ["DS_USer"].aptech. dgrDSNS." và thực thi bằng phương thức ExecuteNonQuery của đối tượng Command. Ví dụ: Sửa đổi trạng thái đăng nhập (Trường TrangThai) của tất cả người dùng trong bảng tblUser thuộc cơ sở dữ liệu QLCB. Gọi phương thức Update của DataAdapter để cập nhật thực sự vào Database. Mô hình dạng như sau: Các bước cần phải thực hiện khi Update bằng DataAdapter: 1.edu.

/App_Data/QLCB.4. OleDbDataAdapter Da. /// Cập nhật bảng DSND trong Ds vào Cơ sở dữ V2.MapPath (". // Tạo đối tượng Command và select toàn bộ bảng tblUser OleDbCommand Cmd.aspx.oledb. Tel: 03213-713.0 – http://www. Conn. // Điền dữ liệu vào DataSet DataSet Ds=new DataSet().Count."DSND").ConnectionString += Server. public partial class Lession_13_UpdatewithDataAdapter : System.vn.Tables["DSND"]. Da.0. Conn = new OleDbConnection ().SelectCommand = Cmd.mdb"). i++) { Ds.utehy. using System.aptech.OleDb.Rows [i]["TrangThai"] = 1.Web.Open ().jet. Cmd."DSND"). } //Cập nhật trở lại Cơ sở dữ liệu OleDbCommandBuilder CmdBuilder = new OleDbCommandBuilder (Da).Rows.edu. Da. Cmd = new OleDbCommand ().Tài liệu khóa học lập trình web với ASP.ConnectionString = "Provider=Microsoft. Da.Page { protected void cmdEnableAllUser_Click (object sender. Da = new OleDbDataAdapter (). EventArgs e) { // Tạo đối tượng Connection và mở kết nối đến CSDL OleDbConnection Conn. Cmd.Fill(Ds. aptech@utehy.90 .Connection = Conn.Data. Conn. Conn.Tables["DSND"]. // Sửa dữ liệu của bảng tblUser trong Dataset for (int i=0.319 P..Data.CommandText = "Select * from tbluser".UI.vn. using System.cs using System.net –diễn Đàn Sinh Viên Toán Tin </head> <body> <form id="form1" runat="server"> <h2>Sửa trạng thái đăng nhập thành 1</h2> <asp:Button runat="server" ID="cmdEnableAllUser" Text="Enable all users" onclick="cmdEnableAllUser_Click" /> </form> </body> </html> Trang code behind: UpdatewithDataAdapter. data source=".NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Update (Ds. i < Ds.

một hàm. Điều này làm cho code và điều khiển tách biệt và sáng sủa hơn.aptech. Lý thuyết 1 Giới thiệu DataBinding ASP.CS) mà là trong file giao diện (*. Tel: 03213-713.hay tổng quát là một biểu thức trả về giá trị. Việc khai báo này không phải ở trong file Code behind (*. Bài học này sẽ giới thiệu đặc tính Databinding bằng các điều khiển ASP.NET. một biến. Trong đó: Giá_Trị có thể là một hằng.NET Server. aptech@utehy.ASPX). Có những điều khiển cho phép chúng ta hiển thị những thông tin tĩnh (Static – tức là giá trị xác định được ngay khi lập trình).edu. một trường dữ liệu trong bảng CSDL….NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.1 Dạng gắn kết dữ liệu đơn (Single DataBinding) Trong ASP.tức là được tính toán khi chạy chương trình).net –diễn Đàn Sinh Viên Toán Tin liệu //Giải phóng các đối tượng không còn sử dụng Cmd.vn. I. 2 Data Binding 2.NET cung cấp cho chúng ta rất nhiều điều khiển để cho phép hiển thị cũng như tiếp nhận thông tin từ người dùng. Da. học viên có thể:  Đọc và hiển thị dữ liệu sử dụng cơ chế DataBinding  Đọc và hiển thị dữ liệu sử dụng cơ chế DataBinding và điều khiển SqlDataSource  Cập nhật dữ liệu sử dụng SqlDataSource và GridView. Conn. một biểu thức hoặc có thể là một thuộc tính khác. Để việc hiển thị thông tin động này một cách đơn giản và nhanh chóng. một tập hợp.319 P. có thể gắn một giá trị đơn lẻ vào trang được gọi là Single Data Binding.91 . Điểm khác biệt chính của cơ chế Data binding so với các cơ chế liên kết dữ liệu khác đó là ở tính khai báo.utehy. một số hiển thị được cả những thông tin động (Dynamic . } } BÀI 8: Tìm hiểu và ứng dụng cơ chế Data Binding Mục tiêu: Kết thúc bài thực hành.Dispose ().vn. Thuật ngữ Data Binding ở đây được hiểu là "Gắn/ liên kết các điều khiển với một nguồn dữ liệu nào đó để hiển thị.Close ().0 – http://www. một danh sách.NET cung cấp cho chúng ta một đặc tính gọi là "Data Binding" (Tạm dịch: "Gắn kết dữ liệu"). Từ "Data" cũng cần phải được hiểu theo nghĩa rộng. thao tác…tự động".Dispose (). Cú pháp để gắn dữ liệu đơn vào trang như sau: <%# Giá_Trị %>. một mảng. ASP. Ví dụ: V2.Tài liệu khóa học lập trình web với ASP. nó không nhất thiết phải là cái gì đó liên quan đến Cơ sở dữ liệu như ta thường nghĩ mà có thể là một thuộc tính.

Có thể sử dụng hoặc thuộc tính DataSourceID hoặc DataSource nhưng không được cả hai.…) hay tổng quát là một tập hợp các mục (Collection Items ). Ví dụ: DataTabe.14/2) %> <br /> Thuộc tính khác: <%# "Tiêu đề của trang là " + this. Tel: 03213-713. 2.Sin(3.  DataTextField: Cho biết là gắn kết với trường nào của mỗi mục dữ liệu. Nguồn dữ liệu này phải là một tập hợp.0 – http://www.14/2) = " + Math.vn. Chú ý: Trong thủ tục Page_Load cần thêm lệnh this.net –diễn Đàn Sinh Viên Toán Tin <%@ Page Language="C#" AutoEventWireup="true" Inherits="_Default" %> <head runat="server"> <title>Data Binding demo</title> </head> <body> <form id="form1" runat="server"> Hằng số: <%# 20 %> <br /> Hằng xâu: <%# "Xin chào" %> <br /> Biểu thức: <%# 10+5 %> <br /> Hàm : <%# "Sin(3.edu. sau đó hiển thị trên một Listbox thông qua cơ chế DataBinding: V2. DropdownList.utehy. Các điều khiển cho phép gắn kết dữ liệu thường có 3 thuộc tính với các ý nghĩa như sau:  DataSource: Là thuộc tính để chỉ đến nguồn dữ liệu cần gắn kết.92 .Title %> </form> </body> </html> Có thể gắn kết tới một biểu thức. một biến. Array. Trong trường hợp như vậy.Tài liệu khóa học lập trình web với ASP. Ví dụ 1: Tạo một mảng có 100 phần tử (từ 0 đến 99).NET để gắn kết quả đó vào một điều khiển dạng danh sách (Ví dụ ListBox. ta hoàn toàn có thể dùng cơ chế DataBinding trong ASP. bảng.…) để hiển thị mà không cần phải viết nhiều dòng code.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn.…  DataSourceID: Chỉ đến một đối tượng cung cấp nguồn dữ liệu.319 P.2 Dạng gắn kết dữ liệu có sự lặp lại (Repeated Data Binding) Có rất nhiều trường hợp dữ liệu cần hiển thị là một danh sách (Ví dụ Mảng. aptech@utehy.DataBind() để thực sự gắn kết. thuộc tính … bất kỳ. DataReader.aptech. CheckboxList.

DataSouceID và DataTextField ta chỉ cần đặt giá trị duy nhất là DataSouce khi thực hiện bind mảng này vào ListBox để hiển thị.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.aptech.edu. aptech@utehy.cs V2.Tài liệu khóa học lập trình web với ASP.net –diễn Đàn Sinh Viên Toán Tin Trang giao diện: ArrayBinding. ta cần gọi phương thức DataBind của điều khiển hoặc DataBind của trang (Nếu gọi phương thức DataBind của trang thì tất cả các điều khiển con thuộc trang sẽ tự động gọi phương thức DataBind của riêng nó).aspx.utehy. để việc Bind dữ liệu thực sự diễn ra.aspx Chú ý: Vì ở đây mỗi một phần tử của mảng chỉ có một giá trị duy nhất.93 . Cụ thể như trong trang Code behind sau đây. Trang Code và kết quả: ArrayBinding. do vậy trong 3 thuộc tính DataSource.vn.vn. Tel: 03213-713.0 – http://www.319 P. Nhắc lại rằng.

vn.net –diễn Đàn Sinh Viên Toán Tin Ví dụ 2: Dùng cơ chế DataBind.0 – http://www.cs" Inherits="Lession_14_DataBinding" %> <html xmlns="http://www.edu. hiển thị tất cả tên đăng nhập trong bảng tblUser thuộc CSDL QLCB.aspx.MDB vào một ListBox: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataReaderBinding.org/1999/xhtml"> <head runat="server"> <title>DataReader Binding</title> </head> <body> <form id="form1" runat="server"> <h2>Danh sách người dùng</h2> <asp:ListBox ID="lstDSND" runat="server"></asp:ListBox> </form> </body> </html> Trang giao diện V2.Tài liệu khóa học lập trình web với ASP.94 .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.utehy.aptech.w3. Tel: 03213-713.vn.319 P. aptech@utehy.

DataRead() == true)) để duyệt và đọc toàn bộ bản ghi lấy về.ConnectionString="Provider=Microsoft.Vì mỗi mục dữ liệu của nguồn dữ liệu (Dr) trong trường hợp này lại chứa nhiều trường. Cmd. public partial class Lession_14_DataBinding : System.0. Hiện tại ASP. Trang code thực hiện việc Binding Chú ý: .vn. 3./App_Data/QLCB.oledb.OleDb.vn.Page { protected void Page_Load(object sender.Web.ConnectionString += Server. OleDbDataReader Dr.95 .NET cung cấp một số Data source controls sau đây: V2. còn một cách khác để đọc dữ liệu mà không phải viết code đó là dùng các điều khiển Data Source. using System.ExecuteReader ().Sau cùng. // Thực hiện gắn kết.UI. Cmd = new OleDbCommand ()..Open ().Tài liệu khóa học lập trình web với ASP.MapPath (". . Các điều khiển Data Source (Data source controls). aptech@utehy. Conn. Conn.DataBind ().mdb").edu. // Tạo đối tượng Command và select toàn bộ bảng Suppliers OleDbCommand Cmd. cần phải gọi phương thức DataBind () để thực hiện gắn kết và hiển thị thực sự.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tuy nhiên.utehy.0 – http://www. // Lấy dữ liệu từ nguồn Dr lstDSND. // Bind kết quả vào Listbox để hiển thị trên trang web lstDSND.CommandText = "Select * from tblUser".Connection = Conn. 3.4.Ta gắn kết dữ liệu giữa Listbox với DataReader được bởi vì Dr chứa một tập hợp phần tử . Tel: 03213-713. Dr = Cmd. Conn = new OleDbConnection ().aptech. // Hiển thị TenDangNhap lstDSND.jet. Conn.DataSource = Dr.DataTextField = "TenDangNhap".319 P.Data. Cmd. do vậy ta cần phải chỉ rõ thêm là Listbox sẽ gắn/lấy trường nào ra để hiển thị thông qua việc gán tên trường cần hiển thị cho thuộc tính DataTextField. EventArgs e) { // Tạo đối tượng Connection và mở kết nối đến CSDL OleDbConnection Conn.net –diễn Đàn Sinh Viên Toán Tin using System.1 Giới thiệu về DataSource controls Ở bài trước chúng ta đã sử dụng các đối tượng truy xuất dữ liệu (như datareader) kết hợp với vòng lặp (while (Dr. data source=".

aptech@utehy. AccessDataSource: Truy xuất tới nguồn dữ liệu Access XmlDataSource: Truy xuất tới nguồn dữ liệu là file XML.config như sau: web. nó còn cho phép thực hiện các thao tác cập nhật khác như Update.. SqlClient.96 .config ……………………………….vn.0 – http://www. sau đó có thể gắn vào control này để lấy lại dữ liệu.2 Sử dụng SqlDataSouce để chọn (Select) dữ liệu a) Tạo điều khiển SqlDataSouce: Cú pháp: <asp:SqlDataSource runat="server" ProviderName="Tên_Provider" ConnectionString="Đường dẫn tới file CSDL hoặc thông số kết nối" SelectCommand/ UpdateCommand/ DeleteCommand ="Câu lệnh SQL tương ứng" ID="Giá trị ID"> Lưu ý: Để cho linh hoạt.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tuy nhiên. Ý tưởng của DataSource control là: "Bạn chỉ việc đặt vài thông số kết nối và câu lệnh sql.Integrated Security=SSPI. ODBC. Oracle.0. <connectionStrings> <add name="QLCB" connectionString="Provider=Microsoft.vn. Để đọc xâu kết nối này ta có thể thực hiện thông qua ký pháp dạng: <%$ %>.jet. Ví dụ: Tạo một điều khiển SqlDataSouce để đọc toàn bộ nội dung của bảng tblUser trong cơ sở dữ liệu QLCB.… 3.NET.319 P..config). Tel: 03213-713. Data Source=|DataDirectory|\QLCB.. Trong đó: |DataDirectory| sẽ cho ta đường dẫn tới thư mục App_Data. với DataSouce control thì không chỉ có vậy.config ……………………………….Initial Catalog=QLCB. Nội dung của file web.aptech. (bài này sẽ sử dụng SqlDataSource để minh họa) ObjectDataSource: Truy xuất tới nguồn dữ liệu do người dùng tự định nghĩa.oledb. Nếu cơ sở dữ liệu cần kết nối là SQL Server thì xâu sẽ có dạng: web.Tài liệu khóa học lập trình web với ASP. thông số kết nối thường được đặt trong file cấu hình (web. V2.edu. Việc gắn và lấy dữ liệu này thực hiện dễ dàng thông qua các thuộc tính khi khai báo control. Bao gồm OleDb. <connectionStrings> <add name="QLCB" connectionString="Provider=SQLOLEDB.net –diễn Đàn Sinh Viên Toán Tin SqlDataSouce: Cho phép truy xuất tới bất kỳ nguồn dữ liệu sử dụng trình điều khiển (Provider) của ADO.mdb"/> </connectionStrings> ………………………………..4.utehy. delete.1.Data Source=localhost"/> </connectionStrings> ……………………………….Persist Security Info=False.".

97 .w3.org/1999/xhtml"> <head runat="server"> <title>SqlDataSouce control</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource runat="server" ProviderName="System.OleDb" ConnectionString="<%$ ConnectionStrings:QLCB %>" SelectCommand="Select * from tblUser" ID="DSND" > </asp:SqlDataSource> <asp:GridView runat="server" ID="dgr" DataSourceID="DSND" > </asp:GridView> </form> V2.aptech.utehy.vn. Ví dụ: Hiển thị bảng tblUser vừa lấy được ở trên.net –diễn Đàn Sinh Viên Toán Tin Tạo một SqlDataSource và select dữ liệu trong bảng tblUser Sau khi đã tạo một nguồn dữ liệu ở trên rồi thì việc sử dụng nguồn dữ liệu này để hiển thị khá đơn giản. aptech@utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tel: 03213-713.0 – http://www.Tài liệu khóa học lập trình web với ASP.cs" Inherits="Lession_15_datasourceControl" %> <html xmlns="http://www.edu. Hiển thị danh sách người dùng <%@ Page Language="C#" AutoEventWireup="true" CodeFile="datasourceControl.aspx.Data.vn.319 P.

98 .mdb"/> </connectionStrings> 3.0 – http://www.org/1999/xhtml"> <head runat="server"> <title>Hiển thị danh sách nhà cung cấp trong nwind.aspx. aptech@utehy. cần phải Add các tham số (parameter) này trước khi thực hiện thao tác Update.oledb.vn. thông thường ta sẽ truyền giá trị vào thông qua các tham số. V2.Data.0.OleDb" ConnectionString="<%$ ConnectionStrings:NWIND %>" SelectCommand="Select * from Suppliers"> </asp:SqlDataSource> <h2> Danh sách nhà cung cấp</h2> <asp:DropDownList runat="server" ID="ddlDSNCC" DataSourceID="DSNCC" DataTextField="CompanyName"> </asp:DropDownList> </form> </body> </html> Trong đó: Xâu kết nối NWIND của file web.vn.utehy. Lưu ý: Khi thực hiện Update.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.edu. Phân tích: Ở đây Dropdownlist chỉ hiển thị được một cột (trường dữ liệu) trong khi Dr chứa cả một bảng (có nhiều cột). Tel: 03213-713.net –diễn Đàn Sinh Viên Toán Tin </body> </html> Ví dụ 2: Hiển thị tên các nhà cung cấp trong một Dropdownlist. Data Source=|DataDirectory|\nwind. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataTextField.mdb</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource runat="server" ID="DSNCC" ProviderName="System.4.w3.319 P.3 Sử dụng SqlDataSource để cập nhật dữ liệu Để cập nhật dữ liệu thì trong khai báo điều khiển SqlDatasource ta cần cung cấp cụ thể câu lệnh Update cho thuộc tính UpdateCommand.config có giá trị như sau: <connectionStrings> <add name="NWIND" connectionString="Provider=Microsoft.aptech. Do vậy.Tài liệu khóa học lập trình web với ASP.cs" Inherits="Lession_15_DataTextField" %> <html xmlns="http://www. cần phải chỉ cho Dropdownlist biết là gắn với trường nào của Dr thông qua thuộc tính DataTextField.jet. Do vậy.

2. Tel: 03213-713.utehy.aptech. Truyền tham số và giá trị cho các trường mà ta muốn cập nhật.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. thực hiện mấy công việc sau: 1. Gọi phương thức Update của SqlDataSource.OleDb" ConnectionString="<%$ ConnectionStrings:QLCB %>" SelectCommand="Select TenDangNhap. Thêm thuộc tính UpdateCommand cho SqlDataSource 3.aspx. Giao diện trang web Để có thể cập nhật được thực sự vào CSDL. Trong đó 1) và 2) viết trong trang ASPX.org/1999/xhtml"> <head runat="server"> <title>Cập nhật người dùng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource runat="server" ID="DSND" ProviderName="System. trong gridview: Đặt thuộc tính AutoGenerateEditButton="true".vn.Data.edu.319 P. Hiển thị cột Update. Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdateDeleteUser.net –diễn Đàn Sinh Viên Toán Tin Ví dụ 1: Hiển thị bảng tblUser trong gridview. nhưng có thêm chức năng cập nhật.w3. aptech@utehy.Tài liệu khóa học lập trình web với ASP. 3) 4) viết trong sự kiện Row_Updating của GridView.0 – http://www. 4. MatKhau from tbluser" UpdateCommand="Update tblUser set MatKhau=@MatKhau where TenDangNhap=@TenDangNhap" V2.vn.99 .cs" Inherits="Lession_15_DisplaytblUser" %> <html xmlns="http://www.

WebParts.UpdateCommand. } } Phân tích: Trong thuộc tính UpdateCommand ở trên.0 – http://www. MKMoi = e.Add ("TenDangNhap".Add ("MatKhau". // Tạo 2 tham số với giá trị tương ứng là TenDN và MKMoi. public partial class Lession_15_DisplaytblUser : System.NewValues ["MatKhau"]. nó có thể là nội dung của một textbox hay cũng có thể do ta tạo ra tường minh bằng câu lệnh dạng: SqlDataSource.UpdateParameters. GridViewUpdateEventArgs e) { string TenDN.vn. aptech@utehy. DSND.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.UI. System. string MKMoi.net –diễn Đàn Sinh Viên Toán Tin </asp:SqlDataSource> <h2>Cập nhật thông tin người dùng</h2> <asp:GridView runat="server" ID="dgrDS" DataKeyNames="TenDangNhap" DataSourceID="DSND" AutoGenerateEditButton="true" onrowupdating="dgrDS_RowUpdating" > </asp:GridView> </form> </body> </html> Trang code using using using using using using using System.ToString ().UpdateParameters.ToString ().Web. TenDN).Update (). Tham số này rất đa dạng.UI. Trong trường hợp này ta sẽ tạo bằng phương thức Add.Tài liệu khóa học lập trình web với ASP. System.Parameters. System.Web."Giá trị") …. System. System.Web.UI.OleDb.UI.Data.Page { protected void dgrDS_RowUpdating (object sender. Tel: 03213-713. System.NewValues ["TenDangNhap"].aptech.utehy. TenDN = e.Web.Add("Tên". ta có dòng: UpdateCommand="Update tblUser set MatKhau=@MatKhau where TenDangNhap=@TenDangNhap" Ở đây @MatKhau và @TenDangNhap được gọi là các tham số.WebControls. sau đó truyền giá trị là nội dung mà người dùng vừa sửa đổi.vn.WebControls.Data.edu. V2.319 P. // Sau đó add vào UpdateCommand của đối tượng SQLDataSource DSND.100 . DSND.Web. MKMoi).

aspx.org/1999/xhtml"> <head runat="server"> <title>Cập nhật người dùng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource runat="server" ID="DSND" ProviderName="System. tạo và truyền tham số trong sự kiện RowDeleting. các giá trị mới (NewValues).Data. ta viết e.vn. e.edu.NewValues[Chỉ số hoặc tên trường]. Tel: 03213-713. chỉ số của hàng đang sửa và có thể cả giá trị khóa của bản ghi (nếu trong gridview ta đặt thuộc tính DataKeyNames) Để truy xuất đến các giá trị mới/cũ này ta viết: e.Tài liệu khóa học lập trình web với ASP. Gridview sẽ gửi kèm các thông tin về hàng (bản ghi) hiện đang được sửa chữa. nội dung trang web ở trên sẽ được bổ sung thêm như sau: Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdateDeleteUser.101 .OldValues[Chỉ số / tên trường].4 Xóa bản ghi trong CSDL bằng SqlDataSource Để xóa bản ghi.net –diễn Đàn Sinh Viên Toán Tin Câu hỏi : Làm thế nào để lấy được giá trị mà người dùng vừa sửa ?. aptech@utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Như vậy.OleDb" ConnectionString="<%$ ConnectionStrings:QLCB %>" SelectCommand="Select TenDangNhap. cụ thể gồm: Các giá trị cũ (OldValues).vn.319 P. 3.utehy. Rất may cho chúng ta là khi người dùng sửa đổi nội dung và bấm vào nút "Update" (bên cạnh Gridview) thì Gridview sẽ Postback trở lại Server và kích hoạt sự kiện RowUpdating: Khi postback (gửi về) server. ta cũng tiến hành tương tự như khi cập nhật.Keys[Chỉ số / hoặc tên trường] (Ví dụ e.0 – http://www. đó là phải thêm thuộc tính DeleteCommand cho điều khiển SqlDataSource. ta sẽ tạo ra parameters tương ứng và gọi phương thức Update() của điều khiển SqlDataSource. Để truy xuất đến giá trị khóa của bản ghi hiện hành.Keys[MaSanPham]…) Sau khi lấy được các giá trị này.cs" Inherits="Lession_15_DisplaytblUser" %> <html xmlns="http://www. MatKhau from tbluser" V2.aptech.w3.

Web. // Tạo 2 tham số với giá trị tương ứng là TenDN và MKMoi.vn. public partial class Lession_15_DisplaytblUser : System. TenDN).Web. System. MKMoi).UI. System. MKMoi = e. GridViewUpdateEventArgs e) { string TenDN.Data. DSND.WebControls. System. System.Tài liệu khóa học lập trình web với ASP. System.102 .UpdateParameters.Add ("MatKhau".NewValues ["TenDangNhap"]. System.Web.net –diễn Đàn Sinh Viên Toán Tin UpdateCommand="Update tbluser set MatKhau=@MatKhau where TenDangNhap=@TenDangNhap" DeleteCommand="delete from tblUser where TenDangNhap=@TenDangNhap"> </asp:SqlDataSource> <h2>Cập nhật thông tin người dùng</h2> <asp:GridView runat="server" ID="dgrDS" DataKeyNames="TenDangNhap" DataSourceID="DSND" AutoGenerateEditButton="true" onrowupdating="dgrDS_RowUpdating" > </asp:GridView> </form> </body> </html> Trang code using using using using using using using using using System.Web.UI.utehy.Page { protected void dgrDS_RowDeleting (object sender.Data.UI. // Sau đó add vào UpdateCommand của đối tượng SQLDataSource DSND.Web. TenDN = e.0 – http://www. V2.Security.HtmlControls.319 P. aptech@utehy.ToString ().OleDb. DSND. MKMoi.WebControls.Add ("TenDangNhap". GridViewDeleteEventArgs e) { string TenDN = e.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.UpdateParameters.Delete ().Web. ///Lấy giá trị khóa DSND. Tel: 03213-713. TenDN).Update ().DeleteParameters.Web. } protected void dgrDS_RowUpdating (object sender.ToString ().vn.Keys ["TenDangNhap"]. System.Add ("TenDangNhap". DSND.WebParts. System.ToString ().UI.UI.edu.aptech.NewValues ["MatKhau"].

aptech.vn.vn. V2. Tel: 03213-713.utehy.103 .0 – http://www. aptech@utehy.net –diễn Đàn Sinh Viên Toán Tin } } Chú ý: Thứ tự thêm tham số phải giống như thứ tự sử dụng tham số trong thuộc tính UpdateCommand.Tài liệu khóa học lập trình web với ASP. DeleteCommand của SqlDataSource.319 P.edu.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin

II. THỰC HÀNH
Nội dung: Cơ sở dữ liệu được sử dụng: QLCB.MDF (cơ sở dữ liệu SQL Server)

1. Bài 1: Hiển thị danh sách cán bộ (bao gồm Họ tên, ngày sinh, giới tính, địa chỉ, điện thoại) trong một Gridview, sử dụng cơ chế DataBinding. Hướng dẫn: Đọc dữ liệu bằng DataReader và Command. Sau đó "Gắn" GridView với DataReader bằng cách đặt thuộc tính DataSource của GridView: Trang giao diện
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DSCB_DataBinding.aspx.cs" Inherits="Lession_17_DSCB_DataBinding" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sách cán bộ - version 1.0</title> </head> <body> <form id="form1" runat="server"> <h3>Danh sách cán bộ&nbsp; <asp:Button ID="cmdDisplay" runat="server" onclick="cmdDisplay_Click" Text="Hiển thị" /> </h3> <hr /> <asp:GridView runat="server" ID="dgrDSCB"> </asp:GridView> </form> </body> </html>

V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.104

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin Trang Code
using using using using using using using using System; System.Collections; System.Configuration; System.Data; System.Data.SqlClient; System.Web; System.Web.UI; System.Web.UI.WebControls;

public partial class Lession_17_DSCB_DataBinding : System.Web.UI.Page { private SqlConnection Conn = new SqlConnection (); private SqlCommand Cmd = new SqlCommand (); private SqlDataReader Dr; protected void Page_Load(object sender, EventArgs e) { } protected void cmdDisplay_Click (object sender, EventArgs e) { Conn.ConnectionString =
System.Configuration.ConfigurationManager.ConnectionStrings ["strConn"].ToString();

Conn.Open ();

Cmd.CommandText = "Select HoVaTen, NgaySinh, GioiTinh, DiaChi, SoDienThoai from tblCanBo";

Cmd.Connection = Conn; Dr=Cmd.ExecuteReader (); //Gắn kết với Gridview để hiển thị dgrDSCB.DataSource = Dr; dgrDSCB.DataBind (); Cmd.Dispose (); Conn.Close (); } }

2. Bài 2 Hiển thị thông tin về người dùng (Gồm họ tên, bằng cấp, chức vụ) mỗi khi người dùng chọn Đơn vị trong một Dropdownlist. Trang giao diện
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DSCB_PhongBan.aspx.cs" Inherits="Lession_17_DSCB_PhongBan" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Thông tin về cán bộ theo phòng ban</title> </head> <body> <form id="form1" runat="server">

V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.105

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin
<h3>Danh sách phòng</h3> <asp:DropDownList runat="server" ID="ddlDSPhong" AutoPostBack="true"> </asp:DropDownList> <br /> <h3>Danh sách cán bộ trực thuộc</h3> <asp:GridView runat="server" ID="dgrDSCB"></asp:GridView> </form> </body> </html>

Trang code
using using using using using using using using using using System; System.Collections; System.Configuration; System.Data; System.Data.SqlClient; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts;

public partial class Lession_17_DSCB_PhongBan : System.Web.UI.Page { private SqlConnection Conn = new SqlConnection (); private SqlCommand Cmd = new SqlCommand (); private SqlDataReader Dr; protected void Page_Load(object sender, EventArgs e) { Conn.ConnectionString =
System.Configuration.ConfigurationManager.ConnectionStrings ["strConn"].ToString ();

Conn.Open (); if (IsPostBack == false) { Cmd.CommandText = "Select MaPhong from tblPhongBan"; Cmd.Connection = Conn; Dr = Cmd.ExecuteReader (); ddlDSPhong.DataSource = Dr; ddlDSPhong.DataTextField = "MaPhong"; ddlDSPhong.DataBind (); } else {

Cmd.CommandText="Select tblCanBo.HoVaTen, tblBangCap.MoTa, tblChucVu.MoTa " +

" FROM tblCanBo, tblBangCap, tblChucVu " + "WHERE tblCanBo.MaBangCap = tblBangCap.MaBangCap and " + " tblCanBo.MaChucVu=tblChucVu.MaChucVu and "+

V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.106

kết hợp với GridView tương tự như trong bài lý thuyết. Sử dụng cơ chế DataBinding.0 – http://www.DataBind (). chuyên môn.107 . dgrDSCB. Dr = Cmd. Giao diện có dạng như sau: V2.Connection = Conn.Text + "'". } } Bài 3: Xây dựng các trang cho phép cập nhật thông tin về người dùng.vn. phòng ban.Tài liệu khóa học lập trình web với ASP. chức vụ.edu.để cho phép thêm mới các bản ghi.MaPhongBan = '" + ddlDSPhong. } Cmd.vn. Tel: 03213-713. Bài 4: bổ sung vào các trangở trên chức năng "Thêm mới".utehy.aptech.Close ().DataSource = Dr. Cmd. bằng cấp. aptech@utehy.319 P.ExecuteReader ().NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Dispose ().net –diễn Đàn Sinh Viên Toán Tin " tblCanBo. dgrDSCB. Conn.

các cột khác bổ trợ cho việc thao tác dữ liệu như Select. Update. HyperLinkField Hiển thị giá trị của một trường dưới dạng siêu liên kết (hyperlink).0 – http://www.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. dạng HyperLink. Nút này cho phép bạn có thể tạo ra các nút tùy biến kiểu như Add hay Remove. Loại V2.edu. từ đó có thể áp dụng làm Project cho môn học. Delete hoàn toàn có thể tùy biến trong GridView. Hiển thị các nút lệnh đã được định nghĩa sẵn để thực hiện các thao tác select. Tel: 03213-713. GridView còn có rất nhiều tính năng khác mà trước đây người ta phải viết rất nhiều dòng code mới có được. phân trang.Tài liệu khóa học lập trình web với ASP. aptech@utehy.utehy. sửa đổi. Hiển thị một nút lệnh cho mỗi mục trong GridView.  Tạo ra các cột tùy biến: HyperLink và Image I. ví dụ: Định dạng.319 P. ObjectDataSource hay bất kỳ nguồn nào có cài đặt System. click chọn "smart tag" của GridView và chọn "Edit Field" hoặc chọn thuộc tính Columns của GridView trong cửa sổ thuộc tính. Cột này thường được dùng để hiển thị các trường kiểu Boolean (Yes/No). Để chỉnh sửa các cột dạng này. xóa dữ liệu. nó còn cho phép hiển thị dưới các hình thức khác (ví dụ dưới dạng nút. SqlDataSource.CollectionsEnumerable.net –diễn Đàn Sinh Viên Toán Tin BÀI 9: Làm việc với GridView Mục tiêu: Kết thúc bài thực hành này học viên có thể:  Sự dụng được khả năng sắp xếp và phân trang của GridView với các cột sinh ta tự động hoặc thủ công. 2.NET. mỗi cột ứng với một trường dữ liệu. Loại cột BoundField ButtonField CheckBoxField CommandField Mô tả Hiển thị giá trị của một trường thuộc nguồn dữ liệu. edit. sắp xếp.108 . GridView có thể gắn kết dữ liệu với các nguồn như DataReader. chúng ta sẽ đi tìm hiểu và sử dụng một số tính năng nổi bật của GridView. trong đó mỗi hàng là một bản ghi.aptech. Trong bài học này. hay delete. dạng checkbox…). Giới thiệu tổng quan GridView có lẽ là một điều khiển trình diễn dữ liệu quan trọng nhất của ASP.  Cập nhật dữ liệu (Sửa và Xóa) trực tiếp trên GridView.1 Các thuộc tính và cột thuộc tính GridView ngoài việc hiển thị thuần túy các trường của một nguồn dữ liệu. Tìm hiểu lớp GridView 2.vn. Lý thuyết 1. Nó cho phép gắn và hiển thị dữ liệu ở dạng bảng. Ngoài việc hiển thị.vn. Hiển thị một checkbox ứng với mỗi mục trong GridView.

ImageField TemplateField Hiển thị một ảnh ứng với mỗi mục trong GridView.edu. Hiển thị nội dung tùy biến của người dùng cho mỗi mục dữ liệu trong GridView.aptech.vn. Loại cột này cho phép ta tạo ra các cột tùy biến. Các thuộc tính: V2.319 P. aptech@utehy.vn.net –diễn Đàn Sinh Viên Toán Tin cột này cho phép bạn gắn một trường thứ hai vào URL của siêu liên kết.109 .0 – http://www. theo như mẫu định sẵn.utehy.Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tel: 03213-713.

vn. Một tập hợp chứa các cột của GridView.110 .net –diễn Đàn Sinh Viên Toán Tin Thuộc tính GridLines ShowHeader ShowFooter PageSize PageCount PageIndex AllowPaging AllowSorting AutoGenerateColumns Mô tả Ẩn. EditIndex (SelectedIndex) SelectedIndex Rows Columns 2. Nếu đặt EditIndex = -1 thì sẽ thoát khỏi chế độ Edit. các mục dữ liệu.v… Bảng dưới đây sẽ giải thích rõ ý nghĩa một số thuộc tính: Thuộc tính style Mô tả V2. Ví dụ ta có thể định dạng cho phần Header.319 P.utehy. Tel: 03213-713.edu. Cho phép Hiện/ ẩn phần Header Cho phép Hiện/ ẩn phần Footer Get/Set cho biết mỗi trang chứa bao nhiêu dòng. các hàng chẵn-lẻ v.2 Các style áp dụng cho GridView GridView rất linh hoạt trong việc trình bày dữ liệu.aptech.0 – http://www.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Trả về chỉ số của dòng đang chọn Một tập hợp chứa các hàng của GridView. EditIndex = 2  hàng thứ 3 (chỉ số 2) sẽ về chế độ edit.vn. Cho biết số trang của nguồn dữ liệu mà nó gắn kết Get/Set chỉ số của trang đang được hiển thị Có cho phép phân trang không ( true = có) Có cho phép sắp xếp không (true=có) Có tự động sinh ra các cột ứng với các cột trong nguồn dữ liệu hay không ? Mặc định = true (có) AutoGenerateDeleteButt Tự động tạo ra cột Delete (true = tự động) on AutoGenerateUpdateBut ton AutoGenerateSelectButt on Tự động tạo ra cột Update (true = tự động) Tự động tạo ra cột Select (true = tự động) Đặt hàng nào đó về chế độ edit. footer. aptech@utehy.Tài liệu khóa học lập trình web với ASP. nó cho phép ta định dạng các phần thông qua style. hiện các đường viền của GridView.

Khi AlternatingRowStyle được thiết lập thì sẽ áp dụng luân phiên giữa RowStyle và AlternatingRowStyle. Style áp dụng cho phần Header.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Ví dụ. Style áp dụng cho phần Footer. Tại đây ta có thể sửa đổi nội dung của hàng đó. khi chúng ta click nút Update. Xuất hiện khi một hàng dữ liệu được gắn vào GridView. RowCancelingEdit RowCommand RowCreated RowDataBound RowDeleted V2.0 – http://www. Xuất hiện khi một hàng mới được tạo ra. các sự kiện này khi kích hoạt sẽ cung cấp cho ta những thông tin hữu ích trong quá trình xử lý. Xuất hiện khi người dùng click chọn các nút ( << 1 2 3 >>) trong hàng phân trang nhưng TRƯỚC khi GridView thực hiện việc phân trang.edu.319 P.utehy.vn. Xuất hiện khi nút Cancel được click nhưng trước khi thoát khỏi chế độ Edit. Xuất hiện khi một nút được click.net –diễn Đàn Sinh Viên Toán Tin AlternatingRowStyle Style áp dụng cho các hàng dữ liệu chẵn-lẻ trong GridView. Khi đặt thuộc tính này thì các hàng sẽ được hiển thị với định dạng luân phiên giữa RowStyle và AlternatingRowStyle. SelectedRowStyle 2. Thường được sử dụng để sửa nội dung của hàng khi nó vừa được tạo ra.3 Các sự kiện GridView có rất nhiều sự kiện quan trọng. Style áp dụng cho phần phân trang (các trang << 1 2 3 … >>). Style áp dụng cho hàng đang được chọn (Selected)của GridView. Xuất hiện khi nút Delete của một hàng được click. Tel: 03213-713.aptech.Tài liệu khóa học lập trình web với ASP.vn. Style áp dụng cho các hàng dữ liệu trong GridView control.111 . nó sẽ kích hoạt sự kiện Updating và trả về cho chúng ta các giá trị mà người dùng vừa sửa…. aptech@utehy. Dưới đây là bảng tổng hợp một số sự kiện hay dùng nhất: Tên sự kiện PageIndexChanged PageIndexChanging Mô tả Xuất hiện khi ta click chọn các nút ( << 1 2 3 >>) trong hàng phân trang. Ta có thể hủy việc phân trang tại sự kiện này. nhưng sau khi GridView đã delete bản ghi từ nguồn. EditRowStyle FooterStyle HeaderStyle PagerStyle RowStyle Style để hiển thị hàng hiện đang được sửa (Edit).

Xuất hiện khi nút Select của hàng được click nhưng sau khi GridView xử lý xong thao tác Select. SelectedIndexChanging Xuất hiện khi nút Select của hàng được click nhưng trước khi GridView xử lý xong thao tác Select.319 P. Xuất hiện khi Hyperlink (tiêu đề cột) được click. nó sẽ cung cấp cho chúng ta thông tin về tên cột vừa được click. nhưng sau khi GridView thực hiện việc sắp xếp. có thể tùy biến hiển thị các trang (hiển thị dạng các số 1 2 3 hay mũi tên << >>) bằng cách đặt các thuộc tính con trong PagerSettings. Dựa vào đó ta có thể thực hiện việc sắp xếp một cách dễ dàng. nhưng trước khi GridView về chế độ sửa. Sorted Sorting Xuất hiện khi Hyperlink (tiêu đề cột) được click. Xuất hiện khi nút Update được click.net –diễn Đàn Sinh Viên Toán Tin RowDeleting RowEditing RowUpdated RowUpdating SelectedIndexChanged Xuất hiện khi nút Delete được click nhưng trước khi GridView xóa bản ghi từ nguồn.aptech.0 – http://www. Xóa một dòng trong GridView UpdateRow(int i.112 .vn.1 Phân trang Để thực hiện phân trang.Tài liệu khóa học lập trình web với ASP. nhưng trước khi GridView thực hiện việc sắp xếp. hướng sx) Sắp xếp dựa trên biểu thức và hướng. 3.4 Các phương thức Tên phương thức DataBind() DeleteRow(int) Mô tả Gắn kết dữ liệu giữa GridView và nguồn dữ liệu (đặt các thuộc tính DataSource. Các tính năng hỗ trợ của GridView 3.utehy.vn. aptech@utehy. 2. DataTextField hoặc DataSourceID. Xuất hiện khi nút Edit được click. Xuất hiện khi nút Update được click. Sự kiện này khi xảy ra. nhưng sau khi GridView update hàng dữ liệu. bool Cập nhật một dòng trong GridView.edu. Tại đây có thể Cancel việc Delete. nhưng trước khi GridView update hàng dữ liệu. Valid) Sort(Biểu thức sx.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. V2. Khi phân trang. cần đặt thuộc tính AllowPaging = True. Tel: 03213-713.

org/1999/xhtml"> <head runat="server"> <title>Danh sách người dùng .cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.aptech.edu.w3.319 P.vn.w3.dtd"> <html xmlns="http://www.aspx. Mỗi trang gồm 5 bản ghi. Tel: 03213-713.org/1999/xhtml"> <head runat="server"> <title>Danh sách người dùng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" AllowPaging="true" PageSize="5" PagerStyle-HorizontalAlign="Center" PagerSettings-Mode="NumericFirstLast"> </asp:GridView> </form> </body> </html> Nếu gắn kết gridview với DataReader/ DataTable/ DataSet thì cần phải chỉ định rõ chỉ số trang cần hiển thị khi sự kiện PageIndexChanging được kích hoạt.net –diễn Đàn Sinh Viên Toán Tin Ví dụ: Hiển thị tất cả người dùng trong bảng tblUser trong GridView nhưng sử dụng cơ chế phân trang. cụ thể như sau: Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PagingwithDataReaderBinding. Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AllUserwithPaging.w3.cs" Inherits="Lession_18_PagingwithDataReaderBinding" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. aptech@utehy.0 – http://www.Paging với DataSet</title> </head> <body> <form id="form1" runat="server"> <asp:Button runat="server" ID="cmdHienThi" Text="Hiển thị" onclick="cmdHienThi_Click" /> <asp:GridView runat="server" ID="dgrDSND" AllowPaging="true" AutoGenerateColumns="true" PagerStyle-HorizontalAlign="Center" V2.Tài liệu khóa học lập trình web với ASP.vn.0 Transitional//EN" "http://www.113 .aspx.org/TR/xhtml1/DTD/xhtml1-transitional.utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.

319 P.Configuration. System. Da. "DSND"). Da. //Giải phóng khi không còn sử dụng Ds.UI. System. Chú ý lệnh đọc xâu kết nối trong tệp web.Web.ToString(). Cn).NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. //Gọi hàm nạp dữ liệu } //Sự kiện này kích hoạt khi người dùng click số trang trên GridView // Khi người dùng click trang nào thì ta hiển thị trang đó trên browser // Chỉ số của trang vừa chọn nằm trong e. aptech@utehy. // Đặt lại chỉ số trang cần hiển thị NapDuLieu ().Close ().Data. } protected void cmdHienThi_Click (object sender.Dispose ().ConnectionStrings ["QLCBConnectionString"].Collections. DataSet Ds = new DataSet (). dgrDSND.Data.net –diễn Đàn Sinh Viên Toán Tin PagerSettings-Mode="NumericFirstLast" onpageindexchanging="dgrDSND_PageIndexChanging"> </asp:GridView> </form> </body> </html> Trang Code behind using using using using using System.DataSource = Ds. SqlDataAdapter Da = new SqlDataAdapter ("Select * from tblUser".0 – http://www.DataBind ().SqlClient.aptech. // Nạp lại dữ liệu } } V2.vn.edu.NewPageIndex. GridViewPageEventArgs e) { dgrDSND. Cn. System.Tables ["DSND"].Fill (Ds. Cn. Cn. /// Bind dữ liệu vừa lấy được vào GridView để hiển thị dgrDSND.Page { protected void NapDuLieu() { //Kết nối đến csdl SQL.NewPageIndex protected void dgrDSND_PageIndexChanging (object sender. Tel: 03213-713. public partial class Lession_18_PagingwithDataReaderBinding : System.PageIndex = e.114 .config SqlConnection Cn = new SqlConnection ().vn. System.ConnectionString=ConfigurationManager.Open ().Tài liệu khóa học lập trình web với ASP.utehy.Dispose (). EventArgs e) { NapDuLieu ().

} } V2.org/1999/xhtml"> <head runat="server"> <title>Danh sách người dùng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" id="dgrDSND" AllowPaging="True" AllowSorting="True" PageSize="5" PagerStyle-HorizontalAlign="Center" PagerSettings-Mode="NumericFirstLast" </asp:GridView> </form> </body> </html> Trang code using System. using System.Page { protected void dgrDSND_Sorting (object sender.edu. khi người dùng click vào một cột thì sắp theo chiều tăng dần. tại đây ta cần phải chỉ rõ cho GridView biết là sắp theo cột nào (SortExpression ) và theo chiều tăng hay giảm (SortDirection).aptech. Trang giao diện %@ Page Language="C#" AutoEventWireup="true" CodeFile="Sorting.Tài liệu khóa học lập trình web với ASP.115 . Khi người dùng click chuột vào một cột tiêu đề nào đó của GridView thì sự kiện Sorting sẽ được kích hoạt. GridViewSortEventArgs e) { e.w3.319 P.2 Tính năng tự động sắp xếp Tính năng này cho phép dữ liệu trong GridView sẽ tự động được sắp xếp theo giá trị của cột mà người dùng click.vn. Tel: 03213-713.utehy.0 – http://www. aptech@utehy.Collections. Để bật tính năng này.net –diễn Đàn Sinh Viên Toán Tin 3.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.Descending. cần đặt thuộc tính AllowSorting = true trong GridView.SortDirection= SortDirection.aspx. Ví dụ: Hiện thị danh sách người dùng trong bảng tblUser.UI.Web. using System.Configuration. public partial class Lession_18_AllUserwithPaging : System.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn. Ở đây ta có thể sắp xếp theo chiều tăng (Asscending) hoặc giảm (Descending).

cs" Inherits="Lession_18_AllUserwithPaging" %> V2. tại đây bạn có thể tiếp tục tùy biến thêm theo như ý muốn. Cách thức chọn template cho GridView như sau: b1: Mở trang ở chế độ Design b2: Chọn GridView và chọn smart tag.0 – http://www.utehy. tiếp theo chọn AutoFormat b3: Chọn Format trong danh sách. 4. cần đặt thuộc tính AutoGenerateColumns = "Fase". Sau khi chọn Template.vn.aspx.3 Các mẫu hiển thị . aptech@utehy. Asp sẽ tự động tạo ra các thuộc tính (thẻ) tương ứng trong GridView. sau đó soạn thủ công các cột trong cửa số Edit Columns.edu. Ví dụ: Hiển thị danh sách người dùng nhưng các cột tạo thủ công Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnManual.net –diễn Đàn Sinh Viên Toán Tin 3.Template ASP. Tổ hợp màu được chọn từ Template có sẵn. Tel: 03213-713.1 Tạo cột BoundField thủ công Để tạo các cột thủ công. BoundColunm… 4.319 P.Tài liệu khóa học lập trình web với ASP. Vì vậy.vn.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tạo các cột tùy biến HyperLink. bạn có thể sử dụng ngay các template này khi xây dựng ứng dụng.aptech.NET cung cấp cho chúng ta sẵn một số Template (mẫu) để hiển thị GridView cũng khá đẹp.116 .

còn trong bảng CSDL thì không có trường này) Hay một ví dụ khác: SELECT TenHang.w3. về ý tưởng chúng ta cần phải tạo một cột mới có chứa sẵn Hyperlink sau đó "Chèn" trường này vào cột Hyperlink của GridView. Hiển thị danh sách người dùng (bảng tbluser) trong đó có thêm cột "Chi tiết" để khi người dùng click chuột vào hyperlink này thì chuyển đến trang hiển thị chi tiết người dùng.vn.Tài liệu khóa học lập trình web với ASP. HoVaTen là một cột mới (Do ta tạo ra ngay trong câu lệnh SELECT. Ho là 2 trường của bảng. SoLuong.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. DonGia. tuy nhiên hoàn toàn có thể tạo ra một cột mới kiểu như sau: SELECT Ten + Ho as HoVaTen FROM … Trong đó: Ten. SoLuong * DonGia As ThanhTien … V2.319 P.org/1999/xhtml"> <head runat="server"> <title>Danh sách người dùng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" AllowPaging="True" PageSize="5" PagerStyle-HorizontalAlign="Center" PagerSettings-Mode="NumericFirstLast" AllowSorting="True" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="Tên đăng nhập" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="Họ và tên" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="Mật khẩu" SortExpression="MatKhau" /> </Columns> </asp:GridView> </form> </body> </html> 4. Do vậy.aptech.net –diễn Đàn Sinh Viên Toán Tin <html xmlns="http://www.2 Tạo một cột hyperlink.utehy. GridView có khả năng hiển thị (render) các trường có chứa HyperLink thành các thẻ <a href …> trên trình duyệt. NgayXua. Trong ASP.vn.117 . thông thường trong câu lệnh SELECT chúng ta chỉ chọn các trường sẵn có trong bảng CSDL. Chú ý: Trong SQL.NET. Tel: 03213-713. aptech@utehy.edu.0 – http://www.

GridView cung cấp thẻ : <asp: HyperLinkField> <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnHyperlink.0 – http://www.aspx.Tài liệu khóa học lập trình web với ASP.cs" Inherits="Lession_18_AllUserwithPaging" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 'UserDetail.118 . Giá trị của nó bằng giá trị SoLuong * DonGia của bản ghi hiện tại.vn.dtd"> <html xmlns="http://www.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.aspx?TenDangNhap=' + TenDangNhap as ChiTiet FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" AllowPaging="True" PageSize="5" PagerStyle-HorizontalAlign="Center" PagerSettings-Mode="NumericFirstLast" AllowSorting="True" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="Tên đăng nhập" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="Họ và tên" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="Mật khẩu" SortExpression="MatKhau" /> <asp:HyperLinkField HeaderText="Chi tiết" DataNavigateUrlFields="ChiTiet" Text="Xem chi tiết" /> </Columns> </asp:GridView> </form> </body> </html> 4.3 Tạo cột Image V2. aptech@utehy.net –diễn Đàn Sinh Viên Toán Tin Trường ThanhTien là một trường mới.vn.w3.319 P.org/1999/xhtml"> <head runat="server"> <title>Danh sách người dùng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap.org/TR/xhtml1/DTD/xhtml1-transitional.utehy.edu. Để tạo cột hiển thị được HyperLink. MatKhau. Tel: 03213-713.0 Transitional//EN" "http://www.w3. HoVaTen.aptech.

w3.edu.vn. aptech@utehy.utehy..aspx.119 . HinhAnh FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" AllowPaging="True" PageSize="5" PagerStyle-HorizontalAlign="Center" PagerSettings-Mode="NumericFirstLast" AllowSorting="True" AutoGenerateColumns="False" > <Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="Tên đăng nhập" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="Họ và tên" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="Mật khẩu" SortExpression="MatKhau" /> <asp:ImageField DataImageUrlField="HinhAnh" HeaderText="Hình ảnh"> </asp:ImageField> </Columns> </asp:GridView> </form> </body> </html> V2.org/1999/xhtml"> <head runat="server"> <title>Danh sách người dùng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap.319 P./> Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnImage. MatKhau.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www. dùng thẻ <asp:ImageField DataImageUrlField .Tài liệu khóa học lập trình web với ASP.net –diễn Đàn Sinh Viên Toán Tin Tương tự như cột HyperLink. Để tạo cột cho phép hiển thị Image. GridView cũng có một cột chuyên để hiển thị hình ảnh (ImageField) nếu trường dữ liệu gắn với nó chứa đường dẫn đến ảnh nằm trong ứng dụng.aptech.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. HoVaTen.0 – http://www. Tel: 03213-713.vn.

0 – http://www. HoVaTen. Delete.0 Transitional//EN" "http://www.vn. Update… 5.org/TR/xhtml1/DTD/xhtml1-transitional.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.cs" Inherits="Lession_18_AllUserwithPaging" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.edu.Update.org/1999/xhtml"> <head runat="server"> <title>Danh sách người dùng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap.dtd"> <html xmlns="http://www.Tài liệu khóa học lập trình web với ASP.w3. Tạo và xử lý các cột Select. Đặc biệt khi nguồn dữ liệu là SqlDataSource thì việc sửa và xóa hoàn toàn tự động.w3. Edit . aptech@utehy. cần bổ sung thêm thuộc tính vào GridView với giá trị là true cho AutoGenerateSelectColum.319 P. MatKhau FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" ID="dgrDSND" AllowPaging="True" PageSize="5" AutoGenerateColumns="False" DataKeyNames="TenDangNhap"> <Columns> nhập"/> <asp:BoundField DataField="TenDangNhap" HeaderText="Tên đăng <asp:BoundField DataField="HoVaTen" HeaderText="Họ và tên"/> <asp:BoundField DataField="MatKhau" HeaderText="Mật khẩu" /> <asp:BoundField DataField="QuyenHan" HeaderText="Quyền hạn" /> <asp:CommandField HeaderText="Chọn" ShowSelectButton="True" /> <asp:CommandField HeaderText="Sửa chữa" ShowEditButton="True"/> <asp:CommandField HeaderText="Xóa" ShowDeleteButton="True" /> <asp:CommandField HeaderText="Thêm" ShowInsertButton="True" /> </Columns> <SelectedRowStyle BackColor="#999999" /> </asp:GridView> </form> </body> V2. Edit. Delete GridView không chỉ hiển thị được các bảng dữ liệu mà còn hỗ trợ rất tốt trong việc chỉnh sửa và xóa dữ liệu. Để bật tính năng này.1 Thêm cột Select.net –diễn Đàn Sinh Viên Toán Tin 5. AutoGenerateEditColum. Cụ thể như sau: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddEditUpdateDeleteColumn. Tel: 03213-713. không cần phải viết bất kỳ dòng code nào. AutoGenerateDeleteColum.utehy.aspx.vn.aptech.120 .

Tel: 03213-713.Thêm thuộc tính UpdateCommand với câu lệnh cập nhật Sql. Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddEditUpdateDeleteColumn.vn.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.319 P. QuyenHan=@QuyenHan WHERE TenDangNhap=@TenDangNhap"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" ID="dgrDSND" AllowPaging="True" PageSize="5" V2.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.Tạo một nguồn dữ liệu SqlDataSource .121 .edu.org/1999/xhtml"> <head runat="server"> <title>Danh sách người dùng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" UpdateCommand= "UPDATE tblUser SET MatKhau=@MatKhau. edit. aptech@utehy. .aspx.2 Cập nhật dữ liệu Ví dụ 1: Xây dựng trang web cho phép hiển thị và cập nhật (Update) trường Họ và tên và Mật khẩu của bảng tblUser: Các bước cần tiến hành: .0 – http://www.vn. delete) 5.Gắn kết GridView với SqlDataSource bằng cách đặt DataSourceID của GridView = ID của SqlDataSource.Tạo GridView và đặt thuộc tính DataKeyNames = "Tên trường Khóa của bảng CSDL" .w3.Tài liệu khóa học lập trình web với ASP.net –diễn Đàn Sinh Viên Toán Tin </html> Hiển thị các cột lệnh (Select.utehy.aptech.

cs" Inherits="Lession_18_AllUserwithPaging" %> V2.net –diễn Đàn Sinh Viên Toán Tin AutoGenerateColumns="False" DataKeyNames="TenDangNhap"> <Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="TênĐN" ReadOnly="true"/> <asp:BoundField DataField="HoVaTen" HeaderText="Họ và tên" ReadOnly="true"/> <asp:BoundField DataField="MatKhau" HeaderText="Mật khẩu" /> <asp:BoundField DataField="QuyenHan" HeaderText="Quyền hạn" /> <asp:CommandField HeaderText="Sửa chữa" ShowEditButton="True"/> </Columns> </asp:GridView> </form> </body> </html> Kết quả sau khi chạy trang ở trên. Chú ý: Khi sử dụng nguồn dữ liệu là SqlDataSource và trong câu lệnh Update/Delete nếu ta đặt tên các tham số giống với tên của các trường dữ liệu (ví dụ MatKhau=@MatKhau) thì SqlDataSource sẽ tự động tạo các tham số sau đó truyền giá trị mà người dùng vừa mới nhập giúp chúng ta.aptech.Tài liệu khóa học lập trình web với ASP.3 Xóa dữ liệu Ví dụ 2: Xây dựng trang web cho phép xóa bản ghi trực tiếp trên GridView.vn.vn.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.aspx. Việc xóa cũng hoàn toàn tương tự như Update. cụ thể như sau: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddEditUpdateDeleteColumn. 5.0 – http://www. aptech@utehy.edu. Tel: 03213-713. Tức là ta cũng cần phải thêm thuộc tính DeleteCommand vào trong SqlDataSource.utehy.319 P. Trang Code: Không phải viết vì khai báo ở trên sẽ tự động cập nhật !!!.122 . Vì vậy không cần phải viết các câu lệnh cập nhật tường minh.

org/1999/xhtml"> <head runat="server"> <title>Cập nhật danh sách người dùng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.319 P. MatKhau FROM tblUser" DeleteCommand="Delete tblUser where TenDangNhap = @TenDangNhap"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" ID="dgrDSND" AllowPaging="True" PageSize="5" AutoGenerateColumns="False" DataKeyNames="TenDangNhap"> <Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="Tên" ReadOnly="true" /> <asp:BoundField DataField="HoVaTen" HeaderText="Họ và tên" ReadOnly="true"/> <asp:BoundField DataField="MatKhau" HeaderText="Mật khẩu" /> <asp:BoundField DataField="QuyenHan" HeaderText="Quyền hạn" /> <asp:CommandField HeaderText="Sửa chữa" ShowEditButton="True" /> <asp:CommandField HeaderText="Xóa" ShowDeleteButton="True" /> </Columns> </asp:GridView> </form> </body> </html> Xóa trực tiếp trên GridView.123 .vn.edu.net –diễn Đàn Sinh Viên Toán Tin <html xmlns="http://www.vn.aptech. V2.w3.Tài liệu khóa học lập trình web với ASP.0 – http://www. HoVaTen. Tel: 03213-713. aptech@utehy.utehy.

config sẽ có dạng: …………………….NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Collections.w3.cs" Inherits="Lession_18_PagingSorting" %> <html xmlns="http://www.ConfigurationManager.0 – http://www.config.org/1999/xhtml"> <head runat="server"> <title>Hiển thị và sắp xếp với GridView. System. ta viết: System.utehy.edu. System. MatKhau FROM tblUser"> </asp:SqlDataSource> <asp:GridView runat="server" ID="dgrDSND" AllowSorting="True" AllowPaging="True" DataSourceID="SqlDataSource1"> </asp:GridView> </form> </body> </html> Trang Code behind using using using using System.net –diễn Đàn Sinh Viên Toán Tin II. để đọc giá trị này. Hướng dẫn: Để lưu thông số nào đó trong file web. System.UI.aspx. ngoài ra còn cho phép người dùng sắp xếp bảng hiển thị bằng cách click chuột lên các cột tiêu đề. cần thêm phần tử vào cặp thẻ <AppSettings>.vn.. HoVaTen.config.Web.Configuration.ToString ().</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap. Minh họa: Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PagingSorting. chức vụ) về cán bộ trong cơ sở dữ liệu QLCB. V2. Trong đó thực hiện phân trang với kích thước trang được lưu trong file web. Thực hành 1. Ví dụ: Ta cần lưu thiết lập về kích thước của trang. aptech@utehy..Tài liệu khóa học lập trình web với ASP.aptech. <appSettings> <add key="PageSize" value="5"/> </appSettings> …………………….124 . Tel: 03213-713. Khi đó.Web.319 P.vn. Bài 1: Hiển thị thông tin vắn tắt (gồm Họ và tên.AppSettings ["PageSize"]. khi đó web. địa chỉ.

UI. public partial class Lession_18_PagingSorting : System.ToString ()).Web. tại đây sẽ hiển thị toàn bộ các thông tin khác của người dùng vừa được chọn. Trong đó có thêm cột chi tiết (dạng Hyperlink) để khi người dùng click chọn thì chuyển tới một trang mới là UserDetail.net –diễn Đàn Sinh Viên Toán Tin using System.319 P.PageSize=int. 2.Configuration.Web.vn.WebControls.aspx. } } Chú ý: Nếu muốn sắp xếp theo nhiều cột thì cần đưa danh sách tên cột (trường đó) vào thuộc tính SortExpression.AppSettings ["PageSize"].0 – http://www.edu. EventArgs e) { dgrDSND. Các phần tử cách nhau bởi dấu chấm phảy. Giao diện V2.vn. Tel: 03213-713.utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.aptech.Page { protected void Page_Load(object sender. aptech@utehy.ConfigurationManager.Parse( System.Tài liệu khóa học lập trình web với ASP.125 . Bài 2: Tạo một trang hiển thị thông tin chi tiết về người dùng trong bảng tblUser.UI.

'ChiTietNguoiDung. sau đó "Chèn" cột mới này vào trường HyperLinkField của GridView. HoVaTen.aspx. MatKhau.utehy.aspx: V2.ở ngay trong câu lệnh SELECT.vn.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.319 P.aspx?TenDangNhap=' + TenDangNhap as ChiTiet FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" AllowPaging="True" PageSize="5" PagerStyle-HorizontalAlign="Center" PagerSettings-Mode="NumericFirstLast" AllowSorting="True" AutoGenerateColumns="False" CellPadding="4" > <Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="Tên đăng nhập" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="Họ và tên" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="Mật khẩu" SortExpression="MatKhau" /> <asp:HyperLinkField DataNavigateUrlFields="ChiTiet" HeaderText="Chi tiết" Text="Xem chi tiết" /> </Columns> </asp:GridView> </form> </body> </html> Trang UserDetail. Tel: 03213-713.vn.w3.0 – http://www.126 .aptech.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Tài liệu khóa học lập trình web với ASP.net –diễn Đàn Sinh Viên Toán Tin Hướng dẫn: Cần tạo thêm một cột – ví dụ ChiTiet . aptech@utehy. Minh họa: Trang giao diện (Không có Code behind) <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnHyperlink.edu.org/1999/xhtml"> <head runat="server"> <title>Danh sách người dùng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap.

aptech@utehy.utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tel: 03213-713.127 . font-weight:bold} </style> </head> <body> <form id="form1" runat="server"> <h2 style="border-bottom:solid 2px">Chi tiết người dùng đặt tại đây</h2> <table> <tr> <td class="CotTrai">Họ và tên</td> <td><asp:Label runat="server" ID="lblHVT"></asp:Label></td> </tr> <tr> <td class="CotTrai">Tên đăng nhập</td> <td><asp:Label runat="server" ID="lblTenDN"></asp:Label></td> </tr> <tr> <td class="CotTrai">Mật khẩu</td> <td><asp:Label runat="server" ID="lblMK"></asp:Label></td> </tr> <tr> <td class="CotTrai">Quyền hạn</td> <td><asp:Label runat="server" ID="lblQH"></asp:Label></td> </tr> <tr> <td class="CotTrai">Trạng thái</td> V2.vn. font-style:italic.net –diễn Đàn Sinh Viên Toán Tin UserDetail.aptech.Tài liệu khóa học lập trình web với ASP.org/1999/xhtml"> <head runat="server"> <title>Chi tiết người dùng</title> <style type="text/css"> .CotTrai { text-align:right.aspx.0 – http://www.vn.319 P.w3.edu.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserDetail.cs" Inherits="Lession_18_UserDetail" %> <html xmlns="http://www.

NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Dispose ().Configuration.ConfigurationManager. using System.ToString ().ToString().ToString ().Collections.Data.aspx.ToString (). public partial class Lession_18_UserDetail : System.cs using System.net –diễn Đàn Sinh Viên Toán Tin <td><asp:Label runat="server" ID="lblTT"></asp:Label></td> </tr> <tr> <td colspan="2"> <asp:Image runat="server" ID="imgPhoto"/></td> </tr> </table> <hr /> <a href="#" onclick="history. Cn.Web.ToString (). Cn. EventArgs e) { SqlConnection Cn = new SqlConnection (). using System. lblMK. aptech@utehy.Page { protected void Page_Load(object sender.Cn).Tài liệu khóa học lập trình web với ASP.Text = Dr ["HoVaTen"]. using System.Close (). lblTT.vn.Text = Dr ["QuyenHan"].Text = Dr ["TenDangNhap"].Text = Dr ["MatKhau"]. imgPhoto.Web.UI."> &lt.Text = Dr ["TrangThai"].ToString (). using System. SqlDataReader Dr = Cmd.ExecuteReader (). Tel: 03213-713.WebControls. using System. lblQH. lblTenDN.aptech. // Hiển thị thông tin chi tiết ra các nhãn và thẻ Image if (Dr.vn. } Cmd.319 P.UI.QueryString ["TenDangNhap"] + "'". Cn.0 – http://www.SqlClient.utehy.edu. } } V2.ImageUrl = Dr ["HinhAnh"]. SqlCommand Cmd = new SqlCommand ("Select * from tblUser where TenDangNhap= '" + Request.Open ().Web. Trở về</a> </form> </body> </html> Trang Code UserDetail.ToString ().UI.go(-1).ConnectionStrings ["QLCBConnectionString"].Web.Read()) { lblHVT.128 .ConnectionString= System.

319 P.edu. ở đó hiển thị 3 cột thông tin là HoVaTen.vn.net –diễn Đàn Sinh Viên Toán Tin 3.Tài liệu khóa học lập trình web với ASP. aptech@utehy. HoVaTen.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. HinhAnh FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" ID="dgrDSND" DataKeyNames="TenDangNhap" AllowPaging="True" PageSize="5" PagerStyle-HorizontalAlign="Center" AllowSorting="True"AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="Tên đăng nhập" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="Họ và tên" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="Mật khẩu" SortExpression="MatKhau" /> <asp:ImageField DataImageUrlField="HinhAnh" HeaderText="Hình ảnh" > </asp:ImageField> </Columns> </asp:GridView> </form> </body> </html> Kết quả  Kết quả V2.org/1999/xhtml"> <head runat="server"> <style type="text/css"> img {width:50px. Hướng dẫn: Cần tạo thêm một cột mới – ví dụ đặt tên là DuongDanAnh – sau đó "Chèn" trường này vào ImageField của GridView. Bài 3: Tạo một trang PhoToNguoiDung.129 . height:50px} </style> <title>Danh sách người dùng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap. QuyenHan và Ảnh tương ứng.vn.utehy.aspx.0 – http://www. Tel: 03213-713.aptech. Minh họa: Trang code giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnImage.w3. Giả sử thư mục ảnh có tên là Images và nằm cùng với trang web. TrangThai.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.

Hướng dẫn: Làm tương tự như bài lý thuyết (Thêm các cột Edit.net –diễn Đàn Sinh Viên Toán Tin 4.vn.Tài liệu khóa học lập trình web với ASP.vn. DiaChi=@DiaChi where MaCanBo=@MaCanBo" DeleteCommand="Delete tblCanBo where MaCanBo = @MaCanBo"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" ID="dgrDSCB" AllowPaging="True" PageSize="5" AutoGenerateColumns="False" DataKeyNames="MaCanBo"> <Columns> <asp:BoundField DataField="HoVaTen" HeaderText="Họ và tên" /> <asp:BoundField DataField="DiaChi" HeaderText="Địa chỉ" /> <asp:BoundField DataField="NgaySinh" HeaderText="NS" ReadOnly="true"/> <asp:BoundField DataField="SoDienThoai" HeaderText="ĐT" ReadOnly="true"/> <asp:CommandField HeaderText="Sửa chữa" ShowEditButton="True" /> <asp:CommandField HeaderText="Xóa" ShowDeleteButton="True" /> </Columns> </asp:GridView> </form> </body> </html> V2.aptech. aptech@utehy.319 P.0 – http://www.edu. (Trên GridView.utehy.130 .) và xóa một cán bộ bất kỳ.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www. Delete vào GridView) Minh Họa: Trang giao diện (Không có Code ở trang CS) <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditUpdateDeleteCB.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tel: 03213-713. Bài 4: Tạo một trang CapNhatCanBo. trong đó cho phép người dùng sửa đổi Họ tên và Địa chỉ trực tiếp.w3.aspx.org/1999/xhtml"> <head runat="server"> <title>Danh sách cán bộ</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblCanBo" UpdateCommand="Update tblCanBo set HoVaTen=@HoVaTen.

Ý nghĩa cụ thể của từng phần này như sau:  HeaderTemplate: Là phần cho phép định dạng tiêu đề trước nội dung hiển thị. Lý thuyết 1. Một số điều khiển phổ biến hỗ trợ Template bao gồm:  GridView  DataGrid  DataList  Repeater 2. Phần này được tạo ra mỗi khi một dòng dữ liệu được gắn kết vào điều khiển.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Tài liệu khóa học lập trình web với ASP. Thường là tên các trường trong CSDL.. aptech@utehy. Giới thiệu tổng quan Trong các bài trước. Các điều khiển hỗ trợ Templates 2.…  ItemTemplate: Là phần cho phép định dạng cách thức hiển thị mục dữ liệu (bản ghi).319 P.2 Các loại Template Các điều khiển đều có một số phần hiển thị tương tự nhau: Như phần tiêu đề (Header).NET có rất nhiều điều khiển hỗ trợ khả năng tùy biến bằng Templates. v. Template – dịch ra Tiếng Việt – có thể hiểu là các Mẫu định sẵn. sắp xếp tự động và cập nhật dữ liệu tự động… Tuy nhiên.  AlternateTemplate: Phần này cho phép định dạng cách thức hiển thị của phần tử thuộc hàng chẵn.aptech. 2.131 . DataList và Repeater. học viên có thể  Sử dụng được tính năng Template để trình diễn và cập nhật dữ liệu theo yêu cầu  Sử dụng được DataList để trình diễn dữ liệu dưới dạng cột. phần nội dung dữ liệu (DataItem) và phần chân trang (Footer). Bài học này sẽ giới thiệu thêm về Template của các điều khiển nâng cao là GridView.vn. trong một số trường hợp cụ thể thì chúng ta vẫn rất cần phải có sự trình bày linh hoạt hơn. chúng ta có thể thêm bất cứ thẻ HTML hay thẻ server hợp lệ.utehy. chúng ta đã tìm hiểu khả năng trình diễn dữ liệu rất mạnh của GridView. Mỗi lần xử lý một mục dữ liệu (một bản ghi) thì hệ thống sẽ tự động đưa mục dữ liệu này vào bên trong mẫu. ví dụ: Chúng ta muốn trình bày dữ liệu theo chiều dọc chẳng hạn. I.v… Rất may là GridView (và các điều khiển khác) đều có cơ chế để hỗ trợ cho chúng ta khả năng tùy biến rất cao – đó là TEMPLATE !. V2.1 Một số điều khiển hỗ trợ Template thường dùng Trong asp.0 – http://www. Cái mẫu này do lập trình viên tự thiết kế. Tel: 03213-713.  Sử dụng ListView kết hợp với DataPager để hiển thị và duyệt các bản ghi. nó có thể phân trang tự động.net –diễn Đàn Sinh Viên Toán Tin BÀI 10: Sử dụng Templates Mục tiêu: Kết thúc bài học này. Trong mẫu này.vn.edu.

Tài liệu khóa học lập trình web với ASP. html .org/1999/xhtml"> <head id="Head1" runat="server"> <title>Danh sách người dùng .aspx.net cung cấp một hàm gọi là Eval("Tên_Mục/Trường dữ liệu") cho phép chúng ta lấy dữ liệu của một trường thuộc bản ghi hiện hành.utehy. kiểu như sau: Họ và tên: <b> <%# Eval ("HoVaTen") %></b> 3.vn. Khi sử dụng Template.net –diễn Đàn Sinh Viên Toán Tin  FooterTemplate: Cho phép định dạng chân trang sau nội dung hiển thị.vn. Giá trị của hàm Eval() này được đưa vào trong thẻ hiện hành thông qua cơ chế DataBind. server <ItemTemplate> controls …) <%# Eval("HoVaTen") %> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html> Ví dụ 2: Như ví dụ 1 nhưng đặt họ tên vào các TextBox Trang giao diện V2.319 P. GridView control 3. Ví dụ 1: Tạo một trang web hiển thị danh sách Họ và tên người dùng trong bảng tblUser Ở bài trước ta đã hiển thị được một cách dễ dàng.cs" Inherits="Lession_19_DisplaytblUser" %> <html xmlns="http://www.0 – http://www.1 Tạo template với GridView. asp. thông thường chúng ta có mong muốn là hiển thị một số trường dữ liệu nào đấy. mỗi điều khiển còn có thêm các thuộc tính khác nữa. Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisplaytblUser. Repeater control.132 .sử dụng Templates</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true"> Đặt nội dung bất <Columns> kỳ (Có thể là <asp:TemplateField HeaderText="Họ và tên"> text. aptech@utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.w3. Ngoài ra.edu. tuy nhiên sau đây chúng ta sẽ sử dụng Template của GridView. DataList control. Tel: 03213-713. Vì vậy.aptech.

net –diễn Đàn Sinh Viên Toán Tin …………………………………………………………………………………………………… ………… <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true"> <Columns> <asp:TemplateField HeaderText="Họ và tên"> <ItemTemplate> <asp:TextBox runat="server" Text='<%# Eval("HoVaTen") %>'> </asp:TextBox> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> ………………………………………………………………………………………………………… …… Ví dụ 3: Hiển thị họ tên và TrangThai. Trong đó TrangThai được đặt trong ngoặc ngay sau họ và tên.Tài liệu khóa học lập trình web với ASP.aptech.org/1999/xhtml"> <head id="Head1" runat="server"> V2.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.0 – http://www.vn. aptech@utehy.w3.cs" Inherits="Lession_19_DisplaytblUser" %> <html xmlns="http://www.vn. Tel: 03213-713.aspx.edu. Trang giao diện ………………………………………………………………………………………………………… …… <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true"> <Columns> <asp:TemplateField HeaderText="Họ và tên"> <ItemTemplate> <%# Eval("HoVaTen") %> ( <%# Eval("TrangThai") %> ) </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> ………………………………………………………………………………………………………… …… Ví dụ 4: Hiển thị họ tên và ảnh Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisplaytblUserOnTextBox.133 .utehy.319 P.

0 – http://www. mỗi cặp thẻ sẽ tương ứng với một CỘT của GridView .vn. Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisplaytblUserMultiCols. aptech@utehy.sử dụng Templates</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true"> <Columns> <asp:TemplateField HeaderText="Họ và tên & ảnh "> <ItemTemplate> <%# Eval("HoVaTen") %> <br /> <asp:Image runat="server" ImageUrl='<%# Eval("HinhAnh") %>'/> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html> Thêm nhiều cột: Để thêm nhiều cột.aptech.Tài liệu khóa học lập trình web với ASP.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Danh sách người dùng .sử dụng Templates</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true"> V2. Ví dụ 5: Hiển thị các trường HoVaTen. Tel: 03213-713.cs" Inherits="Lession_19_DisplaytblUser" %> <html xmlns="http://www.134 . mỗi trường hiển thị trên một cột và Họ tên chữ đậm.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn. ta cần thêm cặp thẻ <asp:TemplateField > </ asp:TemplateField> Trong đó.aspx. MatKhau.319 P.edu.net –diễn Đàn Sinh Viên Toán Tin <title>Danh sách người dùng . Hình ảnh trên GridView.w3.utehy.

319 P.135 .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. aptech@utehy. Như ví dụ 5 …………………………………………………………………………………………… <asp:GridView ID="GridView1" runat="server" Width="100%" DataSourceID="SqlDataSource1" ShowHeader="false" AutoGenerateColumns="false" AllowPaging="true"> <Columns> <asp:TemplateField HeaderText="THÔNG TIN NGƯỜI DÙNG"> <ItemTemplate> <b> Họ và tên: <%# Eval("HoVaTen") %></b> <hr/> Tên đăng nhập: <%#Eval("TenDangNhap") %> <br /> Quyền hạn : <%#Eval("QuyenHan") %> <br /> Trạng thái: <%#Eval("TrangThai") %> <br /> Hình ảnh : <br /><asp:Image runat="server" ImageUrl='<%#Eval("HinhAnh") %>' /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> ……….vn. Tel: 03213-713.Tài liệu khóa học lập trình web với ASP.aptech.edu.0 – http://www.. Như ví dụ 5 V2.utehy.net –diễn Đàn Sinh Viên Toán Tin <Columns> <asp:TemplateField HeaderText="Họ và tên"> <ItemTemplate> <b><%# Eval("HoVaTen") %></b> <br /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Trạng thái"> <ItemTemplate> <i><%# Eval("TrangThai") %></i> <br /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Hình ảnh"> <ItemTemplate> <asp:image runat="server" ImageUrl='<%# Eval("HinhAnh") %>' Width="100px" Height="100px" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html> Ví dụ 6: Hiển thị dữ liệu trong một cột ………..vn.

Tài liệu khóa học lập trình web với ASP. ………………………………………………………………………………………………………… …… V2.vn. Danh sách này có thể chia làm nhiều cột như một số ứng dụng thường thấy trên Internet.aptech.. Ví dụ 8: Hiển thị ảnh như hình trên.2 Tạo template với DataList DataList cho phép ta hiển thị dưới dạng danh sách.vn.net –diễn Đàn Sinh Viên Toán Tin …………………………………………………………………………………………… Cập nhật dữ liệu Để cho phép sửa dữ liệu của một trường.0 – http://www. dạng như sau: <asp:TextBox Text='<%# Bind("Tên_Trường") %>' runat="server" id="textBox"/> </ asp:TextBox> Ví dụ 7: Cập nhật hồ sơ cán bộ (Chỉ cập nhật trường "Bản thân") ………. ta cần đặt thuộc tính text của trường đó vào trong phương thức Bind. aptech@utehy. Như ví dụ 5 ……………………………………………………………………………………… <asp:GridView ID="GridView1" runat="server" Width="100%" DataSourceID="SqlDataSource1" DataKeyNames="MaCanBo" AutoGenerateColumns="false" AllowPaging="true"> <Columns> <asp:TemplateField HeaderText="THÔNG TIN CÁN BỘ"> <ItemTemplate> <b> Họ và tên: <%# Eval("HoVaTen") %></b> <hr/> Mã Cán bộ: <%#Eval("MaCanBo") %> <br /> Ngày sinh : <%#Eval("NgaySinh") %> <br /> Địa chỉ: <%#Eval("DiaChi") %> <br /> Bản thân : <%# Eval("BanThan") %> </ItemTemplate> <EditItemTemplate> <b> Họ và tên: <%# Eval("HoVaTen") %></b> <hr/> Mã Cán bộ: <%#Eval("MaCanBo") %> <br /> Ngày sinh : <%#Eval("NgaySinh") %> <br /> Địa chỉ: <%#Eval("DiaChi") %> <br /> Bản thân : <asp:TextBox TextMode="MultiLine" runat="server" id="txtBanThan" Text='<%# Bind("BanThan") %>'> </asp:TextBox> </EditItemTemplate> </asp:TemplateField> <asp:CommandField ButtonType="Button" EditText="Sửa" ShowEditButton="true" /> </Columns> </asp:GridView> ……….NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.319 P.136 . Tel: 03213-713.utehy.edu.. Như ví dụ 5 ……………………………………………………………………………………… 3.

0 – http://www. Tel: 03213-713.137 .aptech.vn.319 P.vn. aptech@utehy.edu.utehy.Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:DataList runat="server" ID="DataList1" DataSourceID="SqlDataSource1" RepeatDirection="Horizontal" RepeatColumns="3" RepeatLayout="Table"> <ItemTemplate > Họ và tên: <b> <%# Eval ("HoVaTen") %></b> <br /> Quyền hạn : <%# Eval("QuyenHan") %> <br /> <asp:Image ID="Image1" Width="100px" Height="100px" runat="server" ImageUrl= '<%# Eval("HinhAnh") %>' /> <hr /> </ItemTemplate> </asp:DataList> </form> </body> ………………………………………………………………………………………………………… …… V2.

aptech@utehy. sắp xếp như GridView như nó là một điều khiển chiếm ít tài nguyên của hệ thống (vì vậy được gọi là điều khiển Light-weight).vn. Ví dụ 9: Hiển thị họ tên và ảnh minh họa người dùng trong bảng tblUser sử dụng điều khiển Repeater. Repeater cho phép chúng ta tùy biến các mục tương tự như GridView và DataList. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Repeater. nó sẽ lần lượt thực thi nội dung nằm trong phần Template mỗi khi một bản ghi được đọc từ nguồn.utehy.138 . Tuy điều khiển này không có khả năng phân trang.aspx. Khi được gắn với nguồn dữ liệu.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.w3. Tel: 03213-713. đó là sử dụng Template. do đó chúng ta có thể dùng trong những trường hợp mà ở đó tài nguyên đóng vai trò quan trọng.edu.org/1999/xhtml"> V2.vn.Tài liệu khóa học lập trình web với ASP.aptech.net –diễn Đàn Sinh Viên Toán Tin Kết quả sau khi chạy trang ở trên 3.0 – http://www.3 Tạo Template với Repeater (light-weight) Repeater cũng là một điều khiển có khả năng hiển thị dữ liệu dưới dạng danh sách.319 P.cs" Inherits="Lession_19_Repeater" %> <html xmlns="http://www.

0 – http://www. Trong đó Họ tên chữ đậm.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Đặt thuộc tính AutoGenerateColumns = "false" .Đặt nội dung cần hiển thị (ở đây là Họ tên.1 Yêu cầu Hiển thị danh sách cán bộ (bao gồm họ tên. Tel: 03213-713.vn. địa chỉ. điện thoại) trong bảng tblCanBo. Bài 1: Hiển thị danh sách cán bộ 1.edu. địa chỉ. 1.319 P.139 .2 Hướng dẫn: .utehy.Tài liệu khóa học lập trình web với ASP. điện thoại) vào các cột bằng cách đặt bên trong cặp thẻ <asp:DataItemTemplate> </> V2.net –diễn Đàn Sinh Viên Toán Tin <head runat="server"> <title>Hiển thị danh sách người dùng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:Repeater runat="server" ID="rptDSND" DataSourceID="SqlDataSource1"> <ItemTemplate> Họ và tên: <%# Eval("HoVaTen") %> <br /> <asp:Image runat="server" ImageUrl='<%# Eval("HinhAnh") %>' Width="100px" Height="100px" /> <hr /> </ItemTemplate> </asp:Repeater> </form> </body> </html> II. THỰC HÀNH 1.Tự tạo các cột cho GridView bằng cặp thẻ <asp:TemplateField> …</> . aptech@utehy.vn.aptech.

Tel: 03213-713.vn.edu.3 Minh họa: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ThongTinCanBo.aptech.aspx.utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. aptech@utehy.140 .vn.Tài liệu khóa học lập trình web với ASP.319 P.cs" Inherits="Lession_20_ThongTinCanBo" %> <head runat="server"> <title>Thông tin về cán bộ</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblCanBo"> </asp:SqlDataSource> <asp:GridView runat="server" ID="DSCB" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="Họ và tên"> <ItemTemplate> <b><%# Eval("HoVaTen") %></b> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Địa chỉ"> <ItemTemplate> <%# Eval("DiaChi") %> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Điện thoại"> <ItemTemplate> <%# Eval("SoDienThoai") %> </ItemTemplate> </asp:TemplateField> V2.0 – http://www.net –diễn Đàn Sinh Viên Toán Tin Danh sách cán bộ 1.

edu. aptech@utehy.Để đặt kích thước ảnh như nhau.141 . Tel: 03213-713. cụ thể là : <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Photo") %>' /> . có thể thêm thuộc tính Width và Height .0 – http://www.319 P. vì vậy để hiển thị hình ảnh thay vì văn bản text thuần túy.2 Hướng dẫn: .net –diễn Đàn Sinh Viên Toán Tin </Columns> </asp:GridView> </form> </body> </html> 2. Yêu cầu về giao diện 2.vn. Sau đó xây dựng trang web hiển thị thông tin cán bộ (bao gồm các trường Họ tên.Tài liệu khóa học lập trình web với ASP. Bài 2: Bổ sung thêm trường vào bảng 2.aptech. trường Photo này sẽ lưu đường dẫn tới file ảnh của mỗi cán bộ.utehy.1 Yêu cầu Bổ sung thêm trường Photo vào bảng tblCanBo.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn. trong đó thuộc tính ImageUrl sẽ được gán giá trị của trường Photo tương ứng.Trước giá trị <%# Eval("Photo") %> cần có thêm cặp dấu nháy đơn để đảm bảo tính đúng đắn khi đường dẫn ảnh chứa dấu cách. địa chỉ và ảnh tương ứng).3 Minh họa: <asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="Both" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="Họ và tên"> <ItemTemplate> <%# Eval("HoVaTen") %> </ItemTemplate> V2. 2.Vì trường Photo đã chứa đường dẫn đến file ảnh rồi. ta sẽ tạo thêm phần tử <asp:Image>.

net –diễn Đàn Sinh Viên Toán Tin </asp:TemplateField> <asp:TemplateField HeaderText="Địa chỉ"> <ItemTemplate> <%# Eval("DiaChi") %> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Ảnh"> <ItemTemplate> <asp:Image runat="server" Width="100px" Height="100px" ImageUrl='<%# Eval("Photo") %>' /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> 3 Bài 3: Hiển thị danh sách cán bộ dạng chi tiết.vn.319 P.0 – http://www. Tel: 03213-713. địa chỉ.aptech. Cột thứ hai sẽ hiển thị hình ảnh tương ứng. điện thoại và mô tả bản thân. 3.Tài liệu khóa học lập trình web với ASP.utehy. Cột thứ nhất sẽ chứa thông tin ở dạng text như họ tên.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Với mỗi hàng được tạo ra. 3.edu. bảng này có 1 hàng và 2 cột.142 . Kết quả V2. aptech@utehy.vn.1 Yêu cầu: Thông tin được dàn trang theo chiều dọc (Flow). ta sẽ đặt vào một table có kích thước cố định.2 Hướng dẫn: Tạo một cột duy nhất. nhưng mỗi dòng của cột đó sẽ chứa tất cả các trường thông tin cần hiển thị.

aptech@utehy.vn.3 Minh họa: V2.3 Minh họa: <asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="None" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="Trích ngang danh sách cán bộ"> <ItemTemplate> <table border="0px" width="300px"> <tr> <td style="width:200px.net –diễn Đàn Sinh Viên Toán Tin 3.143 . 4.319 P. Trong đó các trường muốn sửa chữa sẽ đặt vào các Textbox và dùng hàm <%# Bind("Tên_Trường")%>.aptech.Tài liệu khóa học lập trình web với ASP. THông tin hiển thị gồm Họ tên.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.1 Yêu cầu Làm như bài 3. Trong đó. nhưng có thêm chức năng cập nhật và Delete.border-top:solid 1px"> <b> <%# Eval("HoVaTen") %> </b><br /> <%# Eval("DiaChi") %> <br /> <%# Eval("SoDienThoai") %> <br /> <%# Eval("BanThan") %> </td> <td style="width:100px"> <asp:Image runat="server" Width="100px" Height="100px" ImageUrl='<%#Eval("PhoTo") %>' /> </td> Cột 1 Cột 2 </tr> </table> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> 4. Địa chỉ. 4. trường địa chỉ sẽ hiển thị ở dạng Text Multiline khi sửa.vn. nhưng thêm 2 command là Edit và Delete.utehy. Điện thoại.2 Hướng dẫn: Tạo các template như bài 3. Tel: 03213-713. Bài 4: Hiển thị danh sách người dùng dưới dạng Flow (tuyến tính) 4.0 – http://www.edu.

NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn.edu. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DSCB_ImageField.w3.utehy.org/1999/xhtml"> <head runat="server"> <title>Cập nhật danh sách cán bộ</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblCanBo" UpdateCommand="Update tblCanBo SET HoVaTen=@HoVaTen.319 P.144 . SoDienThoai=@SoDienThoai Where MaCanBo=@MaCanBo" V2.aptech.0 – http://www.vn. aptech@utehy. DiaChi=@DiaChi.net –diễn Đàn Sinh Viên Toán Tin Kết quả.Tài liệu khóa học lập trình web với ASP.aspx.cs" Inherits="Lession_20_DSCB_ImageField" %> <html xmlns="http://www. Tel: 03213-713.

utehy.0 – http://www.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.edu.vn. Tel: 03213-713.aptech.145 .Tài liệu khóa học lập trình web với ASP.319 P.net –diễn Đàn Sinh Viên Toán Tin DeleteCommand="Delete tblCanBo where MaCanBo=@MaCanBo"> </asp:SqlDataSource> <asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="both" DataKeyNames="MaCanBo" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="Họ và tên"> <ItemTemplate> Phần template <b><%# Eval("HoVaTen") %></b> <br /> cho chế độ Địa chỉ: <%# Eval("DiaChi") %> <br /> thường Điện thoại: <%# Eval("SoDienThoai") %> (chưa sửa) </ItemTemplate> <EditItemTemplate> <b>Họ tên: </b><br /> <asp:TextBox runat="server" ID="txtHVT" Width="98%" Text= '<%# Bind("HoVaTen") %>' > </asp:TextBox> <br /> Phần template cho chế độ soạn thảo (edit mode) <b>Địa chỉ: </b><br /> <asp:TextBox runat="server" ID="txtDC" Width="98%" TextMode="MultiLine" Rows="5" Text='<%# Bind("DiaChi") %>'> </asp:TextBox> <br /> <b>Điện thoại: </b> <br /> <asp:TextBox runat="server" ID="txtDT" Width="98%" Text= '<%# Bind("SoDienThoai") %>'> </asp:TextBox> </EditItemTemplate> </asp:TemplateField> <asp:CommandField HeaderText="Sửa chữa" EditText=" Sửa" UpdateText="Lưu" ButtonType="Link" CancelText=" Hủy bỏ" ShowEditButton="true" /> <asp:CommandField HeaderText="Xóa" DeleteText=" Xóa" ButtonType="Link" ShowDeleteButton="true" /> </Columns> </asp:GridView> </form> V2.vn. aptech@utehy.

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin
</body> </html>

V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.146

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin

Bài 5: Hiển thị thông tin kèm Hyperlink
5.1 Yêu cầu Hiển thị thông tin trích ngang về người dùng trong bảng tblUser, trong đó dưới mỗi người dùng thêm một Hyperlink là "Xem chi tiết" để khi người dùng click vào hyperlink này thì mở trang UserDetail.aspx và hiển thị chi tiết thông tin về người dùng đó. Yêu cầu thêm: Danh sách này hiển thị làm 3 cột. 5.2 Hướng dẫn: Để hiển thị thông tin dưới dạng cột, ta sử dụng điều khiển DataList. Trong mỗi Hyperlink ta sẽ tạo liên kết đến trang UserDetail.aspx và truyền cho trang này ID (trong trường hợp này là TenDangNhap) của người dùng tương ứng. Dựa vào ID này, trang UserDetail.aspx sẽ đọc (dùng Request.QueryString["TenNguoiDung"]) sau đó select thông tin ứng với ID đó và hiển thị. 5.3 Minh họa:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataListControl.aspx.cs" Inherits="Lession_19_RepeaterControl" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sách cán bộ</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:DataList runat="server" ID="DataList1" DataSourceID="SqlDataSource1" RepeatDirection="Horizontal" RepeatColumns="3" RepeatLayout="Table"> <ItemTemplate > <b> <%# Eval ("HoVaTen") %></b> <br /> Quyền hạn : <%# Eval("QuyenHan") %> <br /> <asp:Image Width="100px" Height="100px" runat="server" ImageUrl= '<%# Eval("HinhAnh") %>' /><br />

<a href ='UserDetail.aspx?TenDangNhap=<%#Eval("TenDangNhap") >'>
Xem chi tiết </a> <hr /> </ItemTemplate> </asp:DataList> </form> </body> </html>

V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.147

Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.net –diễn Đàn Sinh Viên Toán Tin

Kết quả.

Bài 6: Thực hiện phân trang
6.1 Yêu cầu: Hiển thị danh sách người dùng dưới dạng cột và thực hiện phân trang. 6.2 Hướng dẫn: Để thực hiện tạo các cột, có thể sử dụng điều khiển DataList, ngoài ra ta còn một điều khiển khác cũng rất mạnh cho phép hiển thị dưới dạng các cột nhưng có thêm khả năng phân trang, đó là: ListView controls. 6.3 Các bước thực hiện: B1. Tạo nguồn dữ liệu SqlDataSource như những bài trước. B2. Tạo một ListView và gắn với nguồn dữ liệu SqlDataSource (như bài trước) B3. Cấu hình cho ListView (chọn smart tag), sau đó click chọn "Config ListView…"

V2.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 03213-713.319

P.148

149 .vn. B5: Mở trang web.vn.edu.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. aptech@utehy.0 – http://www. Cách này có ưu điểm là phần trang có thể đặt ở bất kỳ vị trí nào trên màn hình. Lưu ý: Chúng ta hoàn toàn có thể thay đổi format của ListView bằng các vào Source code editor để sửa. Một cách phân trang khác là tạo một DataPager và gắn vào ListView. Kết quả hiển thị V2.utehy. Khi đó ta chỉ cần đặt thuộc tính PagedControlID="ListView1".Tài liệu khóa học lập trình web với ASP.aptech.net –diễn Đàn Sinh Viên Toán Tin B4: Chọn các thông số như hình bên dưới. Tel: 03213-713.319 P.

NET\Framework\v2.50727\aspnet_regiis.0 trở lên.net –diễn Đàn Sinh Viên Toán Tin PHỤ LỤC I.NET Framework Thường khi cài đặt xong IIS và .vn.net framework với IIS bằng dòng lệnh (Click start  Run và gõ): C:\WINDOWS\Microsoft. aptech@utehy.aptech.utehy. CÀI ĐẶT HỆ THỐNG IIS HỖ TRỢ ASP. Cài đặt IIS Vào Start  Settíng  Control panel chọn Add Remove Programs Chọn Windows Components Tick chọn "Internet Information Service" (IIS) 2.NET Framework 2. Cài đặt . Right click vào Tên của Solution và chọn mục Publish.NET WEBSITE 1. Bộ . ĐÓNG GÓI WEBSITE Sau khi hoàn tất dự án thì một khâu quan trọng nữa cần phải thực hiện để đảm bảo vấn đề bản quyền đó là biên dịch và xuất bản ứng dụng web.0. Ứng dụng được biên dịch này có thể copy vào web Server để thực thi.net framework 2. Việc xuất bản (Publish) ứng dụng sẽ giúp biên dịch các file code behind (file CS) thành các assemblies (file DLL).0 có sẵn trong CD Windows XP SP2. Để xuất bản web. ứng dụng chạy sẽ nhanh hơn và bảo mật hơn. II.Tài liệu khóa học lập trình web với ASP. Tel: 03213-713.net.vn.150 .exe –i – enable V2.edu.Net framework thì còn phải một bước nữa trước khi có thể mở các trang viết bằng . đó là phải thực hiện gắn kết .2 "Gắn" IIS với .net 2. Tất cả các bản đều có thể download từ Internet hoặc vào máy \\AptechServer để lấy.1 Cài đặt Nên chọn bản . 2.0 – http://www.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Khi đó. Sau đó một hộp thoại hiện ra cho phép ta chọn thư mục sẽ lưu kết quả.319 P.

Sign up to vote on this title
UsefulNot useful