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

vn.319 P.4 .edu.vn.Lê Quang Lợi HƯNG YÊN 7/2009 V2.0 – http://www.NET Biên soạn: . Nhà A – Đại học SPKT Hưng Yên 0321-713.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.aptech.edu.Tài liệu khóa học lập trình web với ASP. aptech@utehy.vn TÀI LIỆU KHÓA HỌC LẬP TRÌNH ASP. http://www.aptech.319.utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.utehy.vn.Nguyễn Minh Quý . Tel: 03213-713.015 aptech@utehy. Fax: 0321-713.

<TD>.. đối với mỗi lập trình viên web....Tài liệu khóa học lập trình web với ASP. 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.aptech. <TR>..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. </b> sẽ chỉ dẫn cho trình duyệt phải in đậm nội dung bên trong.utehy... DHTML.. Lý thuyết 1. Tel: 03213-713. Mỗi cặp thẻ như vậy gọi là cặp thẻ HTML (Hyper Text Markup Language). 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.net –diễn Đàn Sinh Viên Toán Tin PHẦN I Cơ bản về HTML... aptech@utehy.edu. Ví dụ cặp thẻ <b> ..NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Vì vậy. JavaScript BÀI SỐ 1: Tạo trang web với HTML Mục tiêu: Kết thúc bài học.0 – http://www. Netscape.) về bản chất được tạo từ các cặp thẻ (tag) đặc biệt.319 P.vn. Nội dung I.1 Giới thiệu Một trang web khi được hiển thị trên trình duyệt (IE. 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).5 .vn. FireFox. v. 1.v.

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.vn. phần tử div thì các phần tử khác cũng ẩn/hiện/di chuyển theo. V2.utehy.edu. aptech@utehy. <tr> Trộn hai cột => <td> </td> <td colspan = 2> </td> </tr> ..aptech..NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. <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 đó.vn... .6 .utehy.vn </a> <img src="utehylogo..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.utehy..vn"> www.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ị>. 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.utehy.aptech.319 P....Tài liệu khóa học lập trình web với ASP. không thể tạo riêng.0 – 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.png" alt ="Logo UTEHY"> Trộn 2 hàng => a img www. Tel: 03213-713..

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

0 – http://www.org/1999/xhtml"> <head runat="server"> <title>Bài thực hành số 1 . 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.8 .319 P.aptech. 3.utehy.aspx và viết các thẻ HTML.vn.cs" Inherits="_Default" %> <html xmlns="http://www.w3. Để chạy (mở) trang web vừa tạo.vn. Tel: 03213-713. Vào trình soạn thảo web của Visual Studio 2008 và tạo dự án web.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. có thể nhấn F5 hoặc click chuột phải trong trang soạn thảo (hoặc tệp Default.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.net –diễn Đàn Sinh Viên Toán Tin 2. Minh hoạ mẫu Default.aspx bên panel phải). aptech@utehy.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.edu.Tài liệu khóa học lập trình web với ASP. sau đó mở trang Default. sau đó chọ "View in Browser".

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). Ghi chú       Để thực hiện xoá (reset về trạng thái đầu) của một form nhập liệu. P. Để gửi toàn bộ nội dung dữ liệu đã nhập về server xử lý.319 .trananh. ta tạo phần tử button nhưng đặt "type" là "reset" (thay vì type = "button).vn"> www.Ba Đình</td> <td><a href ="http://www. Muốn thay đổi độ rộng của textbox.0 – http://www. aptech@utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.trananh.utehy. ta dùng thẻ <TextArea>. chỉ cần thay đổi thuộc tính "size". Để tạo hộp text có nhiều dòng.vn.fpt.vn.Hai Bà Trưng</td> <td><a href ="http://www.vn</a></td> </tr> <tr> <td>3</td> <td>Công ty Trần Anh</td> <td>Giảng võ .aptech.vn</a></td> </tr> <tr> <td>2</td> <td>Công ty CMC</td> <td>Hàn Thuyên .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ạ .Ba Đình</td> <td><a href="http://www.Tài liệu khóa học lập trình web với ASP.edu.fpt.9 V2. Tel: 03213-713.vn">www.cmc.vn</a></td> </tr> </table> </form> </body> </html> 4.cmc. 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 đó.vn"> www.

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.edu. Tel: 03213-713.. Để đư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ở.vn. document. <html> <body> <form id="form1"> <script language="javascript" type ="text/javascript"> var d = new Date (). 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 .toDateString()).. </script> </form> </body> </html> ** Chú ý: Có thể có nhiều đoạn script trong một trang.). ta chỉ cần đặt các câu lệnh JS ngay trong các cặp thẻ <Script> .10 . còn nếu trang web thực hiện xử lý bên phía server (bằng ngôn ngữ C#. Trong cặp script phải là các CÂU LỆNH JAVASCRIPT V2. 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.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à trang DHTML (Dynamic HTML). 1. JavaScript. PHP.. Trong tài liệu này chúng ta sẽ tìm hiểu cả hai dạng web động ở trên. ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. ứng xử khác nhau ứng với người sử dụng hoặc tình huống khác nhau. còn trong bài này ta sẽ tìm hiểu trang DHTML với Javascript (JS).vn. 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ở...) gọi là các trang động phía server (Active Server Page).utehy.NET. VB.319 P.  Tạo trang web đăng ký có xử lý tính hợp lệ của dữ liệu nhập vào..write("Hôm nay là: " + d.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. Khả năng "động" đó có thể thực hiện ở bên phía trình duyệt hoặc phía server.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.. Nội dung: I.aptech. document. 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 trang web có thể hiển thị. Tuy nhiên..Tài liệu khóa học lập trình web với ASP. Đưa câu lệnh javascript vào trang web 1.write ("<h1>Chào bạn ! </h1>"). aptech@utehy. Perl.

js. Trong các ứng dụng lớn.2 Đưa câu lệnh javascript vào các sự kiện (event) Như ở phần 1. Tel: 03213-713. người ta thường đặt các hàm JS trong một tệp riêng.JS vào trang html thông qua thuộc tính "src".11 .js //Hàm cộng hai số nguyên function Cong(a.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. aptech@utehy. nhấn phím ... câu lệnh JS cũng sẽ rất lớn. Để khắc phục hạn chế này. File MyMath. 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. } //Hàm trừ hai số nguyên function Tru(a.. <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". document..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: . mà thường đưa các câu lệnh này vào một hàm.. 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.. sau đó viết câu lệnh gọi hàm trong sự kiện.b) { return a+b. 1.vn. số hàm. 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 ().319 P.vn.write ('Chào bạn ! <br> Hôm nay là:'+d. } V2.Tài liệu khóa học lập trình web với ASP. 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 đó gọi các hàm này trong trang web có tên là TestJS.utehy. sau đó chỉ việc gọi các hàm này trong trang HTML. như click chuột. Việc "nhúng" các trang *.b) { return a-b.0 – http://www..edu." > </form> </body> </html> *** Thực tế. 2. 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.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ở.toDateString()). Đưa câu lệnh javascript vào từ một file riêng biệt.htm.1 thì các câu lệnh JS sẽ được thực thi ngay khi trang web được mở.aptech.

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

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

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

//dữ liệu nhập hợp lệ. hãy nhập theo dạng http://"). } var homepage=document.vn.vn.utehy.indexOf("http://")==-1) { alert ("Địa chỉ website không đúng.getElementById("lstCity"). } if (document.Tài liệu khóa học lập trình web với ASP.0 – http://www. return false.15 .getElementById("txtTelephone").value) == true ) { alert ("Số ĐT chỉ chứa ký tự số !"+document.value == "") { alert ("Bạn phải nhập tên nhà cung cấp !").getElementById("txtTelephone"). return false . return false.edu.value.value).NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.getElementById("txtNCC").toLowerCase() if (homepage. } </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. Tel: 03213-713. aptech@utehy. } return true.319 P.selectedIndex == 0)| { alert ("Bạn chưa chọn Thành phố !").aptech.net –diễn Đàn Sinh Viên Toán Tin <script language="javascript" type="text/javascript"> function KiemTraDuLieu() { if (document. return false . } if (isNaN(document.getElementById("txtHomepage").

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().NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. aptech@utehy.aptech.319 P.utehy.0 – http://www." /> <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.vn.16 .vn. Tel: 03213-713.edu.Tài liệu khóa học lập trình web với ASP.

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

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

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

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

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

vn.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.vn.aptech.22 .0 – http://www.edu.319 P.utehy. Tel: 03213-713. 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.

NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.edu. aptech@utehy.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.319 P.vn. Tel: 03213-713.23 .Tài liệu khóa học lập trình web với ASP.utehy.vn.0 – http://www.aptech.

Muốn đặt bảng vào giữa form.cmc. TABLE.utehy. Có thể tham khảo đầy đủ về vấn đề này tại: V2.0 – http://www.vn</a></td> </tr> </table> </div> </form> </body> </html> 4. đặt thuộc tính Các thẻ con có tính kế thừa thẻ cha. TR.value để lấy phần value.aptech. Tel: 03213-713.options[Chỉ số của mục].Ba Đình</td> <td class="CạnhPhải"><a href ="http://www.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn</a></td> </tr> <tr> <td style="text-align:center. (Trừ phi chính thẻ h2 hay h3 định nghĩa lại). 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. Để trình bày được tốt dữ liệu dưới dạng hàng.vn. 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ạ .fpt.Tài liệu khóa học lập trình web với ASP.24 .vn. 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 .trananh. 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. color:White.trananh. 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.edu. aptech@utehy.319 P.vn</a></td> </tr> <tr> <td style="text-align:center.text để lấy phần Text (phần hiển thị) hoặc viết: <Tham chiếu đến phần tử Select>. 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õ .Ba Đình</td> <td class="CạnhPhải"><a href="http://www.Hai Bà Trưng</td> <td class="CạnhPhải"><a href ="http://www.options[Chỉ số của mục].fpt.vn"> www. margin-right = "auto".vn"> www.net –diễn Đàn Sinh Viên Toán Tin <td colspan="4" style="background-color:Purple. margin-left.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.cmc.

padding.319 P. Chú ý: bất kỳ phần tử nào cũng có phương thức getElementByTag.edu. có phần tử: <h1 id="TieuDe"> Chương I </h1>. Muốn hiển thị đúng cần nắm được ý nghĩa của các khái niệm này. 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. 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.com/CSS/ . Nếu muốn tham chiếu (truy xuất) đến phần tử H1 này.w3schools.utehy.0 – http://www. có thể dùng 2 cách phổ biến sau: 1..1 Dùng hàm getElementById("Giá trị thuộc tính id của phần tử") Ví dụ. 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ử đó. aptech@utehy. border-right Margin-left padding-bottom Mô hình biểu diễn khái niệm margin. 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ó.getElementsByTag thì trả về các phần tử nằm trong form. V2.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d..getElementsByTag sẽ trả về các phần tử nằm trong document. ta viết: document.vn. 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.net –diễn Đàn Sinh Viên Toán Tin 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ử. Border.2 Dùng hàm getElementsByTag("Tên của thẻ"). Đặc biệt mỗi phần tử đều có các thuộc tính hiển thị như Margin. border. Lý thuyết 1. Tel: 03213-713.v. Để tham chiếu đến một phần tử.vn.getElementById("TieuDe"). 1. nếu ta viết form1.Tài liệu khóa học lập trình web với ASP.aptech. Với mỗi trình duyệt khác nhau có thể có các cách khác nhau.25 . v. vì vậy khi ta viết document.

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

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

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

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

vn.Tài liệu khóa học lập trình web với ASP." /> </td> </tr> </table> <br /> <table class="Bảng" id="tblDSNCC"> <tr> <td colspan="4" style="background-color:Purple. text-align:center"> <span style="font-size:18pt">Danh sách nhà cung cấp hiện có</span> </td> </tr> <tr> V2."/> </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().32 .utehy.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.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.aptech. aptech@utehy.319 P.0 – http://www.edu. color:White.vn.

Ba Đình</td> <td class="CạnhPhải"><a href="http://www.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 <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. Cách để truy cập hay dùng là hàm document.vn.Ba Đình</td> <td class="CạnhPhải"><a href ="http://www.aptech.33 .edu. 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 . sau đó phía server sẽ “response” (hồi đáp) lại yêu cầu. Đây là cơ sở để ta thay đổi nội dung của trang web.vn</a></td> </tr> <tr> <td style="text-align:center.vn</a></td> </tr> <tr> <td style="text-align:center.319 P.0 – http://www.cmc. để 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ử đó. thì innerHTML chính là : "Hello <b> world ". Tel: 03213-713.vn"> www.vn">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. aptech@utehy. 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ạ .fpt. trước tiên phía máy khách cần phải “requesst” (gửi yêu cầu) tới Server. 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.utehy. Lý thuyết 1.trananh.getElementById("Id của thẻ"). – 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.cmc.Hai Bà Trưng</td> <td class="CạnhPhải"><a href ="http://www. thuộc tính này chính là phần nằm giữa thẻ đóng và thẻ mở.fpt. Ví dụ với <h1> Hello <b> world </h1>.vn"> www. 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õ .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”. BÀI SỐ 5: ASP.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.NET và Web form I. Tức là. Mô hình lập trình phía máy chủ Trong thế giới web. Cùng một cơ chế này. Hãy luôn ghi nhớ.vn. Nó V2.

Nội dung trang này sau đó sẽ được phía trình duyệt xử lý. 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. 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 đó.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.34 . Vì vậy.…. Mô hình theo cách này gọi là mô hình lập trình phía máy chủ.Tài liệu khóa học lập trình web với ASP. không đòi hỏi xử lý chi tiết.vn.vn.utehy. các định nghĩa kiểu CSS…. nó phù hợp với các dự án lớn và tính bảo mật cao. Với cách 2. các câu lệnh JavaScript. Vì vậy nó chỉ phù hợp với các trang web đơn giản.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tel: 03213-713.và tiếp tục được phía client (trình duyệt) xử lý như cách 1.edu. Cách 2: Khi máy khách yêu cầu một trang – ví dụ trang xyz. Với cách 1. danh mục sản phẩm.aptech. – 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ả.0 – http://www. 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. aptech@utehy. Kết quả trả về cho máy khách có thể chứa các phần tử HTML.319 P. tiếp theo lấy kết quả xử lý được gửi về cho phía máy khách.).

jsp.vn.htm <html> <body> Hello world </body> </html> Trang2. ví dụ: asp.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <% Response.Date.ToString()). aptech@utehy.aspx <%@ Page Language="C#" %> <html xmlns="http://www.Write (DateTime.vn.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 ?.aptech.319 P.35 .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Today.Tài liệu khóa học lập trình web với ASP. 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ý.w3. FireFox…).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.0 – http://www. %> 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. php. Tel: 03213-713.edu. còn server là chương trình nào ? V2.

NET. 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ụ .utehy.Tài liệu khóa học lập trình web với ASP. tức là theo mô hình xử lý bên phía server.Write (DateTime.aptech.Date. Đối với các trang ASP. 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.NET phía máy chủ. aptech@utehy. còn nó không thể xử lý được các nội dung phức tạp.aspx).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. Chương trình server thực chất là một chương trình có tên là IIS (Internet Information Service). đ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.vn. Để Client xử lý sẽ giảm tải cho server.edu. ví dụ: <% Response.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. 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ý …!. thì cơ chế xử lý giống như đã mô tả ở trên. %> 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”!. 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ý. Tel: 03213-713.ToString ()).319 P.0 – http://www.Today.vn. Ví dụ nó không hiểu asp:Calendar là gì ? 2 Cơ chế xử lý file ASP. Nhưng có bổ sung thêm tính năng Compile and Cache: V2.36 .

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

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

0 – http://www.vn. Tel: 03213-713.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.utehy.39 . 3.1 Yêu cầu xử lý tại phía server thông qua Runat=”Server” V2.edu.319 P.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 3 Một số ví dụ minh họa.vn.aptech. aptech@utehy.

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

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

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

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

NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn.319 P. Tel: 03213-713.edu.utehy.cs V2.vn.aspx) Thành phần xử lý (lập trình) thisfile.aptech.44 .Tài liệu khóa học lập trình web với ASP. aptech@utehy.0 – http://www.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.

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

V2. 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 .vb.0 – http://www. vì vậy nó sẽ được xử lý phía server. <asp:TextBox id="txtA" runat="server" width="50px"/> : là thẻ tạo ra phần tử textbox. Cụ thể là phương thức write của đối tượng Response.aspx có thuộc tính runat = “server”. thì chương trình có báo lỗi không ? Vì sao ? 6.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. aptech@utehy. 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.46 . 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 (.Text = “Tính tổng”. . Code behind và viết code phía Server. đượ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.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.Tài liệu khóa học lập trình web với ASP. Nhìn chung.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.b.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.319 P.vn. Chú ý: Trong file này không được chứa trực tiếp các thẻ HTML. Tel: 03213-713. ta viết: Response. Thuộc tính language = “C#” cho biết ngôn ngữ sử dụng để viết là C Sharp. 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. Mã lệnh tại đây thường xử lý các tác vụ liên quan đến nghiệp vụ.cs có dòng lệnh sau: cmdTinhTong. 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. int b) { return a . Trong file default.vn. } </script> Đoạn script này có thuộc tính runat=”Server”. 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ác file chứa mã code (VB. Ví dụ muốn trả một xâu S về cho trình duyệt hiển thị.edu.NET hoặc C#. 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.utehy.write(S).cs) để đảm bảo tính chuyên môn hóa và dễ bảo trì hơn.NET hoặc C#) được gọi là Code file (cách gọi mới) hay Code behind (cách gọi cũ).aptech. Câu hỏi: Nếu trong file default.

thực hiện được chức năng phức tạp hơn HTMLServer controls.aptech. Tel: 03213-713. ASP.Tài liệu khóa học lập trình web với ASP.edu.47 . Các điều khiển này chia làm 2 loại: HTML Server Control và ASP. h1.319 P. Điểm khác biệt giữa HTML Server control và ASP. select. textbox. adRotator.NET control thì có nhiều thuộc tính hơn.vn.NET control a) HTML Server control (Giới thiệu để biết. runat = “server”> o  Ví dụ: o o o Trong đó asp: là bắt buộc. image. calendar.0 – http://www. treeview.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.vn. ….> o Trong đó: Tên loại thẻ là input.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 –diễn Đàn Sinh Viên Toán Tin 7.NET server control (Nên dùng)  Cú pháp tạo phần tử ASP.NET server control o <asp: Loại_PT thuộc_tính = “giá trị” …. listview. select.2 Cách thức tạo phần tử HTML Server Control và ASP. aptech@utehy.utehy.  Ví dụ: <input type = “text” id=”txtHoTen” runat = “server”> b) ASP. Loại_PT có thể là button.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. chỉ khác một điều là có thêm runat = “server”.NET server control. p. 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). Điều khiển 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. gridview.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. - 7. 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ị” …. HTML Server Controls và Web controls 7.….

NET server control hoàn toàn có thể do người dùng tạo ra.  Các điều khiển ASP.utehy.0 – http://www.NET).vn.  Trong tất cả các ứng dung.NET nâng cao) II.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. nếu có thể được thì nên dùng các ASP.Tài liệu khóa học lập trình web với ASP. Giao diện trang web V2.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.edu. aptech@utehy.48 . (phần này sẽ được đề cập trong phần Lập trình 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#.vn.319 P.aptech. Tel: 03213-713. 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 server control để đảm bảo tính tương thích với trình duyệt. Thực hành 1.

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

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.vn. Tel: 03213-713.edu.aptech.0 – http://www. aptech@utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.319 P.50 .vn.Tài liệu khóa học lập trình web với ASP.utehy.

vn. color:White. aptech@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.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. border-right:solid 1px gray"> 1</asp:TableCell> V2.Tài liệu khóa học lập trình web với ASP.vn.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.utehy. Tel: 03213-713.319 P.aptech.0 – http://www.51 .

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

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

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

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

Tài liệu khóa học lập trình web với ASP.aspx.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.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. Tel: 03213-713.aptech. 1.Redirect(“địa chỉ URL”): Chuyển tới một trang khác.vn.net –diễn Đàn Sinh Viên Toán Tin Code xử lý của trang webform1.edu.write như sau: V2.58 .utehy. aptech@utehy.  Phương thức Response.vn.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.  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.2 Các thành phần (thuộc tính và phương thức) chính  Phương thức: Response.3 Ví dụ sử dụng Tạo một trang Login hoàn toàn bằng phương thức Response. 1.0 – http://www.319 P.cs 2 Response Object 1.

net –diễn Đàn Sinh Viên Toán Tin V2.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.vn.edu. Tel: 03213-713.utehy.vn.59 .319 P.0 – http://www. aptech@utehy.

0 – http://www.60 .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ý. Tel: 03213-713.Write(Server.aptech.net –diễn Đàn Sinh Viên Toán Tin Trang code sẽ như sau: 3 Server Object 3.Mdb.  Cho biết đường dẫn vật lý ứng với tệp QLCB.Tài liệu khóa học lập trình web với ASP. V2.MachineName). Trả về tên của máy tính server đang chạy.MDB”). 3.  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.Mappath(“default.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  MachineName: String.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. aptech@utehy.319 P.3 Ví dụ sử dụng  In ra tên của máy chủ hiện hành: Response.vn.  Mappath(“Virtual path”): Trả về đường dẫn vật lý của đường dẫn ảo tương ứng. 3.edu.Mappath(“App_Data/QLDB.vn.utehy.aspx) : Server. biết rằng tệp này nằm trong một thư mục con là “App_Data”: Server.aspx”).

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

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

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

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

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

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

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

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

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

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

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

State == 1) “Kết nối thành công !” + Close(): Dùng để đóng kết nối: Cnn. EventArgs e) { OleDbConnection Conn.State == 1) Cnn. public partial class Lession_12_Default : System. Conn.319 P.oledb.net –diễn Đàn Sinh Viên Toán Tin Lưu ý: sau khi gọi phương thức Open.Open  kết nối đã được mở) + ConnectionString: Chứa các thông tin để kết nối. Conn = OpenDB (@"c: \Nwind. using System.Data.UI.0 – http://www.4.  Thường thì nên viết như sau để tránh lỗi : if (Cnn. aptech@utehy. (ConnectionState. 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.aptech.jet. return Conn.edu.0.mdb using System.vn.OleDb. protected void Page_Load (object sender.Tài liệu khóa học lập trình web với ASP. 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 ().72 .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. V2.ConnectionString="Provider=Microsoft. using System.data source="+DBName.Open ().vn. Tel: 03213-713.utehy.Data.Close().Close().mdb"). + GetSchema: Lấy thông tin về CSDL (Ví dụ tên các bảng. Ví dụ về một trang thực hiện kết nối đến CSDL C:\Nwind. } } // 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.Web. 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. } catch (Exception ex) { return null.

NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.aptech.Open) lblThongBao. Vị trí của tệp CSDL nwind. } else { lblThongBao.utehy.mdb V2.73 .0 – http://www. aptech@utehy.vn.Text = "Không thể kết nối được !"..State = = ConnectionState. 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.mdb")). Tel: 03213-713.MapPath(".Text = "Đã kết nối thành công ! " .vn.edu.319 P. } } } Chú ý: Thông thường tệp cơ sở dữ liệu được lưu trong thư mục App_Data.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 if (Conn != null) { if (Conn./App_Data/nwind.

74 . delete. 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.utehy.2 Lớp Command  Chức năng: Thực hiện các thao tác đối với CSDL.OleDbConnection_Obj). CommandType: Cho biết CommandText chứa StoreProcedure.  Cách tạo (chính tắc): . Update. V2. Hoặc viết gọn hơn: OleDbCommand Cmd=new OleDbCommand("Lệnh SQL".aptech. 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).) values (…. Update….vn. Các hàng và cột khác bị bỏ qua. (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 đó.  Object ExecuteScalar(): Sử dụng khi CommandText ở trên là câu lệnh SQL chỉ trả về một kết quả đơn.net –diễn Đàn Sinh Viên Toán Tin .) 3.vn. Cmd = new OleDbCommand (). Hàm này trả về số bản ghi bị tác động (affected). Cmd. Select. "Insert into Employees (…. Trong đó OleDbConnection_Obj là một OleDbConnection mà trước đó đã Open rồi.)". ví dụ: "Select * from Employees". Câu lệnh SQL: là một xâu chứa câu lệnh SQL bất kỳ.Connection= OleDbConnection_Obj. XMLReader ExecuteXMLReader(): Dùng để đọc dữ liệu là một tệp XML. OleDbDataReader ExecuteReader(): Dùng khi CommandText là một câu lệnh chọn (Select).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. tiếp theo chọn thẻ Security và Add thêm người dùng/ quyền.OleDbCommand Cmd. để 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ở.edu. như Insert. Tel: 03213-713.319 P. aptech@utehy. 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. Tuy nhiên.CommandText = "Câu lệnh SQL". "Delete from Employees where …"   Connection: Để cho biết là đối tượng Command sử dụng kết nối nào.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. Mặc định thuộc tính này có giá trị là Text. tên bảng hay là câu lệnh SQL.0 – http://www. Cmd..  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. chọn Properties.

319 P.vn.edu.vn. Tel: 03213-713.0 – http://www.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.75 . aptech@utehy.utehy.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.mdb.aptech. V2.

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

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

4.Data. String.Data. V2. // Tạo đối tượng Command và thực thi câu lệnh đếm số bảng ghi OleDbCommand Cmd.78 .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Connection = Conn. Trang giao diện: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataReader.utehy.  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ố].UI.…  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. Conn = new OleDbConnection ().aspx.CommandText = "Select ProductName from Products".w3.jet. GetXXX(int i)  Trả về giá trị của cột i và chuyển về dạng Int./App_Data/nwind. GetString(int i). Conn.Web.org/TR/xhtml1/DTD/xhtml1-transitional. using System.dtd"> <html xmlns="http://www.ConnectionString = "Provider=Microsoft.Open ().vn.oledb.mdb"). Conn.0 Transitional//EN" "http://www.Page { protected void Page_Load(object sender.0 – http://www.319 P. using System.MapPath (". Cmd.…. Cmd.vn.w3. EventArgs e) { // Tạo đối tượng Connection và mở kết nối đến CSDL OleDbConnection Conn. Conn.net –diễn Đàn Sinh Viên Toán Tin  GetInt(int i).aptech.0.edu.ConnectionString += Server. public partial class Lession_12_DataReader : System.  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. Tel: 03213-713.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ài liệu khóa học lập trình web với ASP.cs" Inherits="Lession_12_DataReader" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. aptech@utehy. data source="..OleDb.

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

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

aptech@utehy.NewRow ().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]. // Tạo một hàng trắng Dr ["HoVaTen"] = "Nguyễn Văn Bình"..edu.Add(Dc_Tuoi). Dt.Add (Dc_HVT). Dr = Dt.aptech.Add (Dr). Dt..319 P. DataTable Dt . DataRow Dr.Rows.NewRow (). Dr ["Tuoi"] = 30. Dt=new DataTable().0 – http://www. 0 1 2 DataSet Object  Khai báo:  DataSet Ds. Dt.Add (Dr). …………………………………………………………….10 Lớp DataSet  Chức năng: Là một đối tượng chứa các DataTable. Tel: 03213-713.Columns. // Thêm vào bảng …………………………………………………………….  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.vn. 3. Lớp DataSet này nằm trong System. // Tạo một hàng trắng Dr ["HoVaTen"] = "Nguyễn Văn An". 30} và {"Nguyễn Văn Bình". 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". Nó là nơi lưu trữ dữ liệu tạm thời cho ứng dụng trong quá trình xử lý.Data. 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. Dr ["Tuoi"] = 20.utehy. Dt. V2.Columns.vn.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.  DataSet Ds = new DataSet().Rows.81 . // Thêm vào bảng Dr = Dt. 20}.

utehy.82 .  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. aptech@utehy. Tel: 03213-713. Insert vào Cơ sở dữ liệu.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.w3.OleDb.11 3.dtd"> <html xmlns="http://www.0.  Một số thuộc tính:  SelectCommand. data V2.0 – http://www.jet.ConnectionString = "Provider=Microsoft. DeleteCommand.319 P.  Ví dụ : Xem ví dụ mục 13.Page { protected void Page_Load(object sender.edu. UpdateCommand.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). Delete.3.Data.  Một số phương thức:  Fill (DataSet.vn. Tên_Cho_DataSet): Điền dữ liệu lấy được vào DataSet.aspx.Web.0 Transitional//EN" "http://www.  Update(DataSet/DataTable…) : Cập nhật dữ liệu trong DataSet.aptech.vn.4. Conn = new OleDbConnection ().oledb.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. public partial class Lession_12_DataSet : System. InsertCommand: trả về hoặc cho phép thiết lập các câu lệnh SQL để Chọn (Select).org/TR/xhtml1/DTD/xhtml1-transitional.Tài liệu khóa học lập trình web với ASP. DataTable ngược trở về Cơ sở dữ liệu. EventArgs e) { // Tạo đối tượng Connection và mở kết nối đến CSDL OleDbConnection Conn.UI. Conn. using System.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.cs" Inherits="Lession_12_DataSet" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.w3. Cập nhật (Update). using System.Data.

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

Tài liệu khóa học lập trình web với ASP.vn.edu. THỰC HÀNH 1.vn.utehy. aptech@utehy.0 – http://www.aptech.84 .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.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. Tạo cơ sở dữ liệu Tạo cơ sở dữ liệu Access QLCB. Tel: 03213-713.319 P.

aptech.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="NhapNguoiDung.w3.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.cs" Inherits="Lession_13_NhapNguoiDung" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. datetime. Tel: 03213-713.vn. 2. Nhập dữ liệu cho bảng.319 P. bool. Ở đâ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.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.aspx.85 . số.dtd"> <html xmlns="http://www. aptech@utehy.Tài liệu khóa học lập trình web với ASP. Học viên tạo các bảng khác một cách tương tự.utehy. vì bảng này chứa cả dữ liệu dạng Xâu. 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"> .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.org/TR/xhtml1/DTD/xhtml1-transitional.0 – http://www.0 Transitional//EN" "http://www.vn.w3.edu.CanPhai {text-align:right.

aptech.86 .vn.edu.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 <body> <form id="form1" runat="server"> <div> <table style="border:solid 1px purple. Tel: 03213-713. border-collapse:collapse.Tài liệu khóa học lập trình web với ASP.319 P.utehy.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.0 – http://www.vn."> <tr> <td colspan="2" style="background-color:Purple.

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

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

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

OleDb.vn."DSND").UI. Da.SelectCommand = Cmd.Connection = Conn.Page { protected void cmdEnableAllUser_Click (object sender. Da = new OleDbDataAdapter ().Data. using System. // Điền dữ liệu vào DataSet DataSet Ds=new DataSet(). data source=".vn. /// Cập nhật bảng DSND trong Ds vào Cơ sở dữ V2. Tel: 03213-713. } //Cập nhật trở lại Cơ sở dữ liệu OleDbCommandBuilder CmdBuilder = new OleDbCommandBuilder (Da).90 . aptech@utehy.MapPath (". Cmd.Web.Rows [i]["TrangThai"] = 1.aspx.0 – http://www. Conn. Da./App_Data/QLCB.4.Data.Tables["DSND"]. EventArgs e) { // Tạo đối tượng Connection và mở kết nối đến CSDL OleDbConnection Conn.Fill(Ds. i < Ds.0. // Sửa dữ liệu của bảng tblUser trong Dataset for (int i=0.oledb.Rows.mdb").319 P.cs using System. public partial class Lession_13_UpdatewithDataAdapter : System.Update (Ds. Cmd = new OleDbCommand ().Tables["DSND"]. // Tạo đối tượng Command và select toàn bộ bảng tblUser OleDbCommand Cmd.Tài liệu khóa học lập trình web với ASP.ConnectionString += Server.aptech. Conn = new OleDbConnection ().Open ().ConnectionString = "Provider=Microsoft. Conn. i++) { Ds.edu.jet.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. using System. Conn. Da. OleDbDataAdapter Da.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.Count."DSND").utehy. Cmd..CommandText = "Select * from tbluser".

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

Trong trường hợp như vậy.…  DataSourceID: Chỉ đến một đối tượng cung cấp nguồn dữ liệu. 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 .…) để hiển thị mà không cần phải viết nhiều dòng code.319 P.DataBind() để thực sự gắn kết.aptech.Title %> </form> </body> </html> Có thể gắn kết tới một biểu thức. một biến.edu. Chú ý: Trong thủ tục Page_Load cần thêm lệnh this.Sin(3. DropdownList. bảng.14/2) %> <br /> Thuộc tính khác: <%# "Tiêu đề của trang là " + this. ta hoàn toàn có thể dùng cơ chế DataBinding trong ASP. DataReader. aptech@utehy. Array. Nguồn dữ liệu này phải là một tập hợp. CheckboxList. sau đó hiển thị trên một Listbox thông qua cơ chế DataBinding: V2. Tel: 03213-713. thuộc tính … bất kỳ.vn.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).…) hay tổng quát là một tập hợp các mục (Collection Items ).NET để gắn kết quả đó vào một điều khiển dạng danh sách (Ví dụ ListBox. Có thể sử dụng hoặc thuộc tính DataSourceID hoặc DataSource nhưng không được cả hai.14/2) = " + Math.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.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.0 – http://www.  DataTextField: Cho biết là gắn kết với trường nào của mỗi mục dữ liệu.vn. 2.utehy. Ví dụ: DataTabe.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.

Cụ thể như trong trang Code behind sau đây.edu. Tel: 03213-713. để việc Bind dữ liệu thực sự diễn ra.vn. 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ị. aptech@utehy. Trang Code và kết quả: ArrayBinding.319 P.vn.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 .aptech.utehy.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 giao diện: ArrayBinding.0 – http://www. Nhắc lại rằng. 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.cs V2. do vậy trong 3 thuộc tính DataSource.Tài liệu khóa học lập trình web với ASP.

aptech.MDB vào một ListBox: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataReaderBinding.edu. aptech@utehy.w3.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.utehy.vn.94 .aspx.cs" Inherits="Lession_14_DataBinding" %> <html xmlns="http://www.net –diễn Đàn Sinh Viên Toán Tin Ví dụ 2: Dùng cơ chế DataBind.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. hiển thị tất cả tên đăng nhập trong bảng tblUser thuộc CSDL QLCB.vn. Tel: 03213-713.319 P.Tài liệu khóa học lập trình web với ASP.0 – http://www.

0 – http://www.Sau cùng.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ử .Open (). // Lấy dữ liệu từ nguồn Dr lstDSND. public partial class Lession_14_DataBinding : System.DataSource = Dr. Conn = new OleDbConnection (). Cmd.UI.DataBind (). 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 –diễn Đàn Sinh Viên Toán Tin using System.ConnectionString += Server. Cmd = new OleDbCommand (). data source=".aptech.oledb. 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. OleDbDataReader Dr.Web.ExecuteReader (). 3.0.Data.utehy.Page { protected void Page_Load(object sender.ConnectionString="Provider=Microsoft.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.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. aptech@utehy. Trang code thực hiện việc Binding Chú ý: .mdb"). Conn.jet. Conn.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.319 P.DataTextField = "TenDangNhap". // Tạo đối tượng Command và select toàn bộ bảng Suppliers OleDbCommand Cmd./App_Data/QLCB. Hiện tại ASP. Conn.OleDb. Tel: 03213-713. // Bind kết quả vào Listbox để hiển thị trên trang web lstDSND. Dr = Cmd. Cmd.vn. // Thực hiện gắn kết.Connection = Conn. .CommandText = "Select * from tblUser".DataRead() == true)) để duyệt và đọc toàn bộ bản ghi lấy về.Tài liệu khóa học lập trình web với ASP.4.95 . // Hiển thị TenDangNhap lstDSND.vn. 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. Tuy nhiên..MapPath (". EventArgs e) { // Tạo đối tượng Connection và mở kết nối đến CSDL OleDbConnection Conn. Các điều khiển Data Source (Data source controls). 3. using System.edu.NET cung cấp một số Data source controls sau đây: V2.

96 . Ý 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. Trong đó: |DataDirectory| sẽ cho ta đường dẫn tới thư mục App_Data.Data Source=localhost"/> </connectionStrings> ………………………………. Data Source=|DataDirectory|\QLCB.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.config ……………………………….1. 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. Tuy nhiên. SqlClient. thông số kết nối thường được đặt trong file cấu hình (web.. với DataSouce control thì không chỉ có vậy.". Bao gồm OleDb. 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. ODBC. Tel: 03213-713..… 3.utehy.Integrated Security=SSPI. 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. Nếu cơ sở dữ liệu cần kết nối là SQL Server thì xâu sẽ có dạng: web.oledb.vn. (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. Oracle. aptech@utehy. Để đọc xâu kết nối này ta có thể thực hiện thông qua ký pháp dạng: <%$ %>.Persist Security Info=False.4.Tài liệu khóa học lập trình web với ASP.Initial Catalog=QLCB.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.mdb"/> </connectionStrings> ………………………………. sau đó có thể gắn vào control này để lấy lại dữ liệu. <connectionStrings> <add name="QLCB" connectionString="Provider=SQLOLEDB.aptech.0.vn.319 P. Nội dung của file web.NET.config).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.0 – http://www. delete.config ……………………………….. nó còn cho phép thực hiện các thao tác cập nhật khác như Update.config như sau: web.edu. V2.jet. <connectionStrings> <add name="QLCB" connectionString="Provider=Microsoft..

org/1999/xhtml"> <head runat="server"> <title>SqlDataSouce control</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource runat="server" ProviderName="System.edu. aptech@utehy.0 – http://www.vn.vn. Tel: 03213-713.aptech.97 .OleDb" ConnectionString="<%$ ConnectionStrings:QLCB %>" SelectCommand="Select * from tblUser" ID="DSND" > </asp:SqlDataSource> <asp:GridView runat="server" ID="dgr" DataSourceID="DSND" > </asp:GridView> </form> V2.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.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.w3.Data.cs" Inherits="Lession_15_datasourceControl" %> <html xmlns="http://www. Ví dụ: Hiển thị bảng tblUser vừa lấy được ở trên.aspx.319 P. Hiển thị danh sách người dùng <%@ Page Language="C#" AutoEventWireup="true" CodeFile="datasourceControl.utehy.

org/1999/xhtml"> <head runat="server"> <title>Hiển thị danh sách nhà cung cấp trong nwind.jet. V2.vn. Do vậy.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.w3. cần phải Add các tham số (parameter) này trước khi thực hiện thao tác Update. Tel: 03213-713. thông thường ta sẽ truyền giá trị vào thông qua các tham số.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.oledb. Lưu ý: Khi thực hiện Update.319 P.aptech. Data Source=|DataDirectory|\nwind.mdb"/> </connectionStrings> 3.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.98 .config có giá trị như sau: <connectionStrings> <add name="NWIND" connectionString="Provider=Microsoft.utehy.Tài liệu khóa học lập trình web với ASP. 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.0.cs" Inherits="Lession_15_DataTextField" %> <html xmlns="http://www. Do vậy. 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). aptech@utehy.edu.0 – http://www.4.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.mdb</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource runat="server" ID="DSNCC" ProviderName="System.Data. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataTextField.vn.aspx.

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. Giao diện trang web Để có thể cập nhật được thực sự vào CSDL.utehy. 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.edu. 2.OleDb" ConnectionString="<%$ ConnectionStrings:QLCB %>" SelectCommand="Select TenDangNhap. 4.0 – http://www.99 . MatKhau from tbluser" UpdateCommand="Update tblUser set MatKhau=@MatKhau where TenDangNhap=@TenDangNhap" V2. Tel: 03213-713.w3. Truyền tham số và giá trị cho các trường mà ta muốn cập nhật.aptech.319 P. aptech@utehy.aspx.Data. Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdateDeleteUser. Hiển thị cột Update.vn.cs" Inherits="Lession_15_DisplaytblUser" %> <html xmlns="http://www.vn. trong gridview: Đặt thuộc tính AutoGenerateEditButton="true". Thêm thuộc tính UpdateCommand cho SqlDataSource 3. thực hiện mấy công việc sau: 1.net –diễn Đàn Sinh Viên Toán Tin Ví dụ 1: Hiển thị bảng tblUser trong gridview. 3) 4) viết trong sự kiện Row_Updating của GridView. nhưng có thêm chức năng cập nhật. Gọi phương thức Update của SqlDataSource.

System.Update (). Tel: 03213-713.UpdateCommand.WebParts.edu.WebControls.Add("Tên".vn.NewValues ["MatKhau"].UpdateParameters. System.Web.Tài liệu khóa học lập trình web với ASP. MKMoi).100 .Web.Web. V2. TenDN = e. 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.Web.Add ("MatKhau".ToString ().aptech.Data.Web. string MKMoi.0 – http://www.Page { protected void dgrDS_RowUpdating (object sender.ToString (). TenDN).OleDb. DSND."Giá trị") ….UI.Data.UpdateParameters. Trong trường hợp này ta sẽ tạo bằng phương thức Add.Add ("TenDangNhap".UI. System. System. System.Parameters. public partial class Lession_15_DisplaytblUser : System. } } Phân tích: Trong thuộc tính UpdateCommand ở trên.WebControls. GridViewUpdateEventArgs e) { string TenDN. // Tạo 2 tham số với giá trị tương ứng là TenDN và MKMoi. // Sau đó add vào UpdateCommand của đối tượng SQLDataSource DSND. aptech@utehy.UI. 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ố. sau đó truyền giá trị là nội dung mà người dùng vừa sửa đổi. MKMoi = e.vn.utehy. DSND.NewValues ["TenDangNhap"]. System.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.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.UI.319 P. Tham số này rất đa dạng.

319 P.utehy.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.0 – http://www. 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. đó là phải thêm thuộc tính DeleteCommand cho điều khiển SqlDataSource. Để truy xuất đến giá trị khóa của bản ghi hiện hành.vn. ta sẽ tạo ra parameters tương ứng và gọi phương thức Update() của điều khiển SqlDataSource. Như vậy.OldValues[Chỉ số / tên trường]. cụ thể gồm: Các giá trị cũ (OldValues).NewValues[Chỉ số hoặc tên trường].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 ?. ta viết e. ta cũng tiến hành tương tự như khi cập nhật.Tài liệu khóa học lập trình web với ASP.4 Xóa bản ghi trong CSDL bằng SqlDataSource Để xóa bản ghi.Keys[MaSanPham]…) Sau khi lấy được các giá trị này.OleDb" ConnectionString="<%$ ConnectionStrings:QLCB %>" SelectCommand="Select TenDangNhap.aspx. e. 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. aptech@utehy. tạo và truyền tham số trong sự kiện RowDeleting.Data. MatKhau from tbluser" V2.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn.aptech. 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. 3.101 . 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. các giá trị mới (NewValues).Keys[Chỉ số / hoặc tên trường] (Ví dụ e.edu.cs" Inherits="Lession_15_DisplaytblUser" %> <html xmlns="http://www.w3.

102 .DeleteParameters.edu.ToString (). MKMoi).utehy. System.Delete ().Page { protected void dgrDS_RowDeleting (object sender.Web. GridViewUpdateEventArgs e) { string TenDN. Tel: 03213-713.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.UI.ToString (). } protected void dgrDS_RowUpdating (object sender.Security.Data. GridViewDeleteEventArgs e) { string TenDN = e. DSND.WebControls. TenDN).NewValues ["MatKhau"]. MKMoi = e.Web.Keys ["TenDangNhap"]. System. System.Web.319 P.Add ("MatKhau".Tài liệu khóa học lập trình web với ASP. // Sau đó add vào UpdateCommand của đối tượng SQLDataSource DSND.Add ("TenDangNhap".Data.Web.UI.Web.UpdateParameters.HtmlControls. TenDN).UI. DSND.0 – http://www.aptech.NewValues ["TenDangNhap"].NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.OleDb. System. MKMoi. System. TenDN = e.Web. DSND. // Tạo 2 tham số với giá trị tương ứng là TenDN và MKMoi. aptech@utehy. System.Update ().Web.ToString ().WebParts.Add ("TenDangNhap". ///Lấy giá trị khóa DSND. public partial class Lession_15_DisplaytblUser : System.UpdateParameters. System.UI.UI. System.vn.WebControls.vn. V2.

edu. V2. DeleteCommand của SqlDataSource.utehy.aptech.319 P.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.vn.vn.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tel: 03213-713.0 – http://www.103 . 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

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

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

Hiển thị một checkbox ứng với mỗi mục trong GridView. hay delete. 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. Cột này thường được dùng để hiển thị các trường kiểu Boolean (Yes/No). aptech@utehy.319 P. xóa 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.  Cập nhật dữ liệu (Sửa và Xóa) trực tiếp trên GridView. 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. Nó cho phép gắn và hiển thị dữ liệu ở dạng bảng.NET. 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.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tel: 03213-713. 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. phân trang. Tìm hiểu lớp GridView 2. trong đó mỗi hàng là một bản ghi. HyperLinkField Hiển thị giá trị của một trường dưới dạng siêu liên kết (hyperlink).  Tạo ra các cột tùy biến: HyperLink và Image I.0 – http://www. Update. 2. Ngoài việc hiển thị.CollectionsEnumerable. GridView có thể gắn kết dữ liệu với các nguồn như DataReader. mỗi cột ứng với một trường dữ liệu.Tài liệu khóa học lập trình web với ASP. Hiển thị một nút lệnh cho mỗi mục trong GridView. sắp xếp. Trong bài học này. Delete hoàn toàn có thể tùy biến trong GridView.utehy. dạng HyperLink. SqlDataSource. Để chỉnh sửa các cột dạng này.108 . ví dụ: Định dạng. dạng checkbox…). ObjectDataSource hay bất kỳ nguồn nào có cài đặt System.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. edit.vn. từ đó có thể áp dụng làm Project cho môn học. Lý thuyết 1.edu.vn. 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. 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. các cột khác bổ trợ cho việc thao tác dữ liệu như Select. 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.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. sửa đổi.aptech.

109 . theo như mẫu định sẵn. 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.edu. Các thuộc tính: V2.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Loại cột này cho phép ta tạo ra các cột tùy biến.319 P.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. Tel: 03213-713.0 – http://www.vn.utehy. ImageField TemplateField Hiển thị một ảnh ứng với mỗi mục trong GridView. aptech@utehy.vn.Tài liệu khóa học lập trình web với ASP.aptech.

footer. các hàng chẵn-lẻ v.Tài liệu khóa học lập trình web với ASP.vn. aptech@utehy. 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. Ví dụ ta có thể định dạng cho phần Header. các mục dữ liệu.0 – http://www. Nếu đặt EditIndex = -1 thì sẽ thoát khỏi chế độ Edit.vn. nó cho phép ta định dạng các phần thông qua style.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.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.utehy.aptech.110 . hiện các đường viền của GridView.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.319 P.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Một tập hợp chứa các cột của GridView. EditIndex (SelectedIndex) SelectedIndex Rows Columns 2.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. Tel: 03213-713. 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.

3 Các sự kiện GridView có rất nhiều sự kiện quan trọng.0 – http://www. Xuất hiện khi nút Delete của một hàng được click. EditRowStyle FooterStyle HeaderStyle PagerStyle RowStyle Style để hiển thị hàng hiện đang được sửa (Edit). Tel: 03213-713. 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. RowCancelingEdit RowCommand RowCreated RowDataBound RowDeleted V2.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.319 P. Khi AlternatingRowStyle được thiết lập thì sẽ áp dụng luân phiên giữa RowStyle và AlternatingRowStyle.111 . Xuất hiện khi nút Cancel được click nhưng trước khi thoát khỏi chế độ Edit. Style áp dụng cho các hàng dữ liệu trong GridView control. nhưng sau khi GridView đã delete bản ghi từ nguồn. Style áp dụng cho phần Header. Style áp dụng cho phần phân trang (các trang << 1 2 3 … >>). 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ý. aptech@utehy. 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. Tại đây ta có thể sửa đổi nội dung của hàng đó. 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.aptech. Style áp dụng cho phần Footer. Xuất hiện khi một hàng dữ liệu được gắn vào GridView.vn.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. Xuất hiện khi một nút được click. Thường được sử dụng để sửa nội dung của hàng khi nó vừa được tạo ra. SelectedRowStyle 2. Ta có thể hủy việc phân trang tại sự kiện này.vn. khi chúng ta click nút Update. Ví dụ. 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….edu. Style áp dụng cho hàng đang được chọn (Selected)của GridView. Xuất hiện khi một hàng mới được tạo ra.

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.Tài liệu khóa học lập trình web với ASP.utehy. Valid) Sort(Biểu thức sx. nhưng trước khi GridView về chế độ sửa.319 P. Sorted Sorting 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.aptech. V2.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. Tel: 03213-713. Xuất hiện khi nút Edit được click.edu. Xuất hiện khi nút Update được click. cần đặt thuộc tính AllowPaging = True. Xuất hiện khi Hyperlink (tiêu đề cột) được click. bool Cập nhật một dòng trong GridView. nhưng trước khi GridView update hàng dữ liệu. Tại đây có thể Cancel việc Delete. 3. Dựa vào đó ta có thể thực hiện việc sắp xếp một cách dễ dàng. hướng sx) Sắp xếp dựa trên biểu thức và hướng.0 – http://www. Xuất hiện khi nút Update được click. DataTextField hoặc DataSourceID.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. Sự kiện này khi xảy ra. nhưng trước khi GridView thực hiện việc sắp xếp.112 . nhưng sau khi GridView update hàng dữ liệu. nhưng sau khi GridView thực hiện việc sắp xếp. aptech@utehy. 2.vn. Xóa một dòng trong GridView UpdateRow(int i.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. 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. Các tính năng hỗ trợ của GridView 3. 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. Khi phân trang.1 Phân trang Để thực hiện phân trang.vn.

w3.org/TR/xhtml1/DTD/xhtml1-transitional. Tel: 03213-713.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.w3.vn.utehy.cs" Inherits="Lession_18_PagingwithDataReaderBinding" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.aptech.0 – http://www.319 P.edu.113 .org/1999/xhtml"> <head runat="server"> <title>Danh sách người dùng .w3. Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AllUserwithPaging.dtd"> <html xmlns="http://www.aspx.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.0 Transitional//EN" "http://www.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. Mỗi trang gồm 5 bản ghi.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.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.vn.aspx. aptech@utehy. cụ thể như sau: Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PagingwithDataReaderBinding.

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

vn. khi người dùng click vào một cột thì sắp theo chiều tăng dần.w3. public partial class Lession_18_AllUserwithPaging : System. cần đặt thuộc tính AllowSorting = true trong GridView. GridViewSortEventArgs e) { e.Web.aspx.Page { protected void dgrDSND_Sorting (object sender. Tel: 03213-713.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www. } } V2.0 – http://www. Ví dụ: Hiện thị danh sách người dùng trong bảng tblUser.SortDirection= SortDirection.vn.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.Configuration. Ở đây ta có thể sắp xếp theo chiều tăng (Asscending) hoặc giảm (Descending). aptech@utehy.115 .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. using System. 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.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.UI.Collections.Tài liệu khóa học lập trình web với ASP. Để bật tính năng này.utehy. Trang giao diện %@ Page Language="C#" AutoEventWireup="true" CodeFile="Sorting.319 P. using System.Descending.edu. 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.net –diễn Đàn Sinh Viên Toán Tin 3.

vn.aspx. bạn có thể sử dụng ngay các template này khi xây dựng ứng dụng.116 .Template ASP. sau đó soạn thủ công các cột trong cửa số Edit Columns. Tel: 03213-713. cần đặt thuộc tính AutoGenerateColumns = "Fase". tiếp theo chọn AutoFormat b3: Chọn Format trong danh sách. 4.utehy. Asp sẽ tự động tạo ra các thuộc tính (thẻ) tương ứng trong GridView.1 Tạo cột BoundField thủ công Để tạo các cột thủ công.edu.0 – http://www.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 3. aptech@utehy. Vì vậy. 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. BoundColunm… 4. 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. tại đây bạn có thể tiếp tục tùy biến thêm theo như ý muốn.319 P. Tổ hợp màu được chọn từ Template có sẵn. Sau khi chọn Template.NET cung cấp cho chúng ta sẵn một số Template (mẫu) để hiển thị GridView cũng khá đẹp.vn. Tạo các cột tùy biến HyperLink.3 Các mẫu hiển thị .cs" Inherits="Lession_18_AllUserwithPaging" %> V2.

aptech. 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. aptech@utehy. HoVaTen là một cột mới (Do ta tạo ra ngay trong câu lệnh SELECT. Do vậy.2 Tạo một cột hyperlink. Trong ASP.0 – http://www.117 . SoLuong.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. 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.vn.NET. 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. Chú ý: Trong SQL. DonGia.net –diễn Đàn Sinh Viên Toán Tin <html xmlns="http://www.Tài liệu khóa học lập trình web với ASP. 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. còn trong bảng CSDL thì không có trường này) Hay một ví dụ khác: SELECT TenHang.edu.vn.w3. Ho là 2 trường của bảng. SoLuong * DonGia As ThanhTien … V2. Tel: 03213-713. 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. NgayXua.utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.319 P.

w3.118 .cs" Inherits="Lession_18_AllUserwithPaging" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.aspx.utehy.org/TR/xhtml1/DTD/xhtml1-transitional.Tài liệu khóa học lập trình web với ASP.edu.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. Để tạo cột hiển thị được HyperLink.0 Transitional//EN" "http://www. HoVaTen. 'UserDetail.vn.aptech. GridView cung cấp thẻ : <asp: HyperLinkField> <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnHyperlink.net –diễn Đàn Sinh Viên Toán Tin Trường ThanhTien là một trường mới. MatKhau. aptech@utehy.3 Tạo cột Image V2.w3. 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 TenDangNhap. 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.0 – http://www.319 P.

MatKhau.net –diễn Đàn Sinh Viên Toán Tin Tương tự như cột HyperLink.edu.Tài liệu khóa học lập trình web với ASP.utehy. Tel: 03213-713.w3.aptech.319 P.vn. 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.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.vn. 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. dùng thẻ <asp:ImageField DataImageUrlField ./> Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnImage.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Để tạo cột cho phép hiển thị Image. HoVaTen.0 – http://www.119 .aspx. aptech@utehy.

Update. Edit.319 P.cs" Inherits="Lession_18_AllUserwithPaging" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.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.vn.w3. AutoGenerateDeleteColum. Cụ thể như sau: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddEditUpdateDeleteColumn.dtd"> <html xmlns="http://www.utehy. Tạo và xử lý các cột Select.org/TR/xhtml1/DTD/xhtml1-transitional. 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.120 . HoVaTen.aptech. 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. cần bổ sung thêm thuộc tính vào GridView với giá trị là true cho AutoGenerateSelectColum. Để bật tính năng này. aptech@utehy. Update… 5. không cần phải viết bất kỳ dòng code nào.vn. Đặ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. Delete.0 – http://www.net –diễn Đàn Sinh Viên Toán Tin 5.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.w3.aspx.Tài liệu khóa học lập trình web với ASP.edu. AutoGenerateEditColum.1 Thêm cột Select. Tel: 03213-713. Edit .0 Transitional//EN" "http://www.

cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.Thêm thuộc tính UpdateCommand với câu lệnh cập nhật Sql.vn.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn. .Tài liệu khóa học lập trình web với ASP.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: . Tel: 03213-713.Tạo một nguồn dữ liệu SqlDataSource . delete) 5.Tạo GridView và đặt thuộc tính DataKeyNames = "Tên trường Khóa của bảng CSDL" . edit.edu.w3.0 – http://www. QuyenHan=@QuyenHan WHERE TenDangNhap=@TenDangNhap"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" ID="dgrDSND" AllowPaging="True" PageSize="5" V2.121 . Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddEditUpdateDeleteColumn.net –diễn Đàn Sinh Viên Toán Tin </html> Hiển thị các cột lệnh (Select.utehy.319 P.Gắn kết GridView với SqlDataSource bằng cách đặt DataSourceID của GridView = ID của SqlDataSource. aptech@utehy.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.aptech.aspx.

utehy.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.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. Tel: 03213-713.aptech.Tài liệu khóa học lập trình web với ASP.0 – http://www.edu. Vì vậy không cần phải viết các câu lệnh cập nhật tường minh. Việc xóa cũng hoàn toàn tương tự như Update. Trang Code: Không phải viết vì khai báo ở trên sẽ tự động cập nhật !!!. 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. Tức là ta cũng cần phải thêm thuộc tính DeleteCommand vào trong SqlDataSource.vn.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. 5.aspx. cụ thể như sau: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddEditUpdateDeleteColumn.122 .vn. aptech@utehy.319 P.

0 – http://www. V2. 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.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.vn.w3.319 P.Tài liệu khóa học lập trình web với ASP.utehy. Tel: 03213-713. aptech@utehy.vn.aptech.edu. HoVaTen.123 .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 <html xmlns="http://www.

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

Page { protected void Page_Load(object sender.AppSettings ["PageSize"]. 2. EventArgs e) { dgrDSND.vn.aptech. 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. aptech@utehy.aspx.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.ToString ()). public partial class Lession_18_PagingSorting : System.Configuration.net –diễn Đàn Sinh Viên Toán Tin using System. 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. Các phần tử cách nhau bởi dấu chấm phảy.edu.ConfigurationManager. Tel: 03213-713.UI. } } 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.Web.0 – http://www.utehy.PageSize=int.319 P.WebControls.vn.Tài liệu khóa học lập trình web với ASP.Parse( System. Giao diện V2. 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.125 .Web.

vn.utehy. sau đó "Chèn" cột mới này vào trường HyperLinkField của GridView.vn. Tel: 03213-713. HoVaTen.319 P. MatKhau.Tài liệu khóa học lập trình web với ASP.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.aptech. 'ChiTietNguoiDung.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 .edu.0 – http://www. Minh họa: Trang giao diện (Không có Code behind) <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnHyperlink.126 .ở ngay trong câu lệnh SELECT.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.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.aspx.aspx: V2.w3. aptech@utehy.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.

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.utehy. font-style:italic.vn.aspx.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserDetail.org/1999/xhtml"> <head runat="server"> <title>Chi tiết người dùng</title> <style type="text/css"> .net –diễn Đàn Sinh Viên Toán Tin UserDetail.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.aptech.0 – http://www. Tel: 03213-713.319 P.cs" Inherits="Lession_18_UserDetail" %> <html xmlns="http://www.edu.CotTrai { text-align:right.vn. aptech@utehy.w3.

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

Bài 3: Tạo một trang PhoToNguoiDung.vn.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www. Minh họa: Trang code giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnImage. QuyenHan và Ảnh tương ứng. TrangThai.Tài liệu khóa học lập trình web với ASP.aspx.319 P. 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.edu. HoVaTen. 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.vn.0 – http://www. aptech@utehy. Tel: 03213-713.aptech.129 .w3. 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.utehy.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.org/1999/xhtml"> <head runat="server"> <style type="text/css"> img {width:50px. Giả sử thư mục ảnh có tên là Images và nằm cùng với trang web. ở đó hiển thị 3 cột thông tin là HoVaTen.

130 .net –diễn Đàn Sinh Viên Toán Tin 4.aspx.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn. Hướng dẫn: Làm tương tự như bài lý thuyết (Thêm các cột Edit. 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. (Trên GridView. Delete vào GridView) Minh Họa: Trang giao diện (Không có Code ở trang CS) <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditUpdateDeleteCB. aptech@utehy.aptech.) và xóa một cán bộ bất kỳ.vn.edu.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.w3. Bài 4: Tạo một trang CapNhatCanBo.utehy. Tel: 03213-713.319 P. trong đó cho phép người dùng sửa đổi Họ tên và Địa chỉ trực tiếp.Tài liệu khóa học lập trình web với ASP.0 – http://www.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.

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. V2. v.edu.0 – http://www.NET có rất nhiều điều khiển hỗ trợ khả năng tùy biến bằng Templates. ví dụ: Chúng ta muốn trình bày dữ liệu theo chiều dọc chẳng hạn. Template – dịch ra Tiếng Việt – có thể hiểu là các Mẫu định sẵn. Cái mẫu này do lập trình viên tự thiết kế. 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. Tel: 03213-713. 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.Tài liệu khóa học lập trình web với ASP.vn. Trong mẫu này. aptech@utehy.  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. 2. sắp xếp tự động và cập nhật dữ liệu tự động… Tuy nhiên. chúng ta đã tìm hiểu khả năng trình diễn dữ liệu rất mạnh của GridView.…  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).aptech. Một số điều khiển phổ biến hỗ trợ Template bao gồm:  GridView  DataGrid  DataList  Repeater 2.131 .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). Ý 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ị.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. 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.utehy.319 P. Thường là tên các trường trong CSDL.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.  Sử dụng ListView kết hợp với DataPager để hiển thị và duyệt các bản ghi. 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. Các điều khiển hỗ trợ Templates 2. chúng ta có thể thêm bất cứ thẻ HTML hay thẻ server hợp lệ. 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 !. nó có thể phân trang tự động.1 Một số điều khiển hỗ trợ Template thường dùng Trong asp.. Giới thiệu tổng quan Trong các bài trước. phần nội dung dữ liệu (DataItem) và phần chân trang (Footer). DataList và Repeater.vn. Lý thuyết 1.

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. Ngoài ra. Repeater control. Vì vậy.319 P.edu. GridView control 3. aptech@utehy. 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.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.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Danh sách người dùng .1 Tạo template với GridView. tuy nhiên sau đây chúng ta sẽ sử dụng Template của GridView.w3.0 – http://www.vn.132 .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ị. 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. asp.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.aptech.cs" Inherits="Lession_19_DisplaytblUser" %> <html xmlns="http://www. Khi sử dụng Template. mỗi điều khiển còn có thêm các thuộc tính khác nữa. Tel: 03213-713.vn.utehy. kiểu như sau: Họ và tên: <b> <%# Eval ("HoVaTen") %></b> 3. 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.aspx.Tài liệu khóa học lập trình web với ASP. 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. Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisplaytblUser. DataList control. html .

NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.319 P.w3. Tel: 03213-713.aspx.cs" Inherits="Lession_19_DisplaytblUser" %> <html xmlns="http://www. 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.aptech.vn.0 – http://www.edu.org/1999/xhtml"> <head id="Head1" runat="server"> V2.Tài liệu khóa học lập trình web với ASP.vn. Trong đó TrangThai được đặt trong ngoặc ngay sau họ và tên.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.utehy.133 . aptech@utehy.

aptech. mỗi cặp thẻ sẽ tương ứng với một CỘT của GridView . mỗi trường hiển thị trên một cột và Họ tên chữ đậm.cs" Inherits="Lession_19_DisplaytblUser" %> <html xmlns="http://www.134 .org/1999/xhtml"> <head id="Head1" runat="server"> <title>Danh sách người dùng .net –diễn Đàn Sinh Viên Toán Tin <title>Danh sách người dùng .edu.vn.vn.w3.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Hình ảnh trên GridView. Tel: 03213-713. aptech@utehy.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.aspx. Ví dụ 5: Hiển thị các trường HoVaTen.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.319 P. Trang giao diện <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisplaytblUserMultiCols.Tài liệu khóa học lập trình web với ASP. MatKhau.0 – http://www. ta cần thêm cặp thẻ <asp:TemplateField > </ asp:TemplateField> Trong đó.

utehy.Tài liệu khóa học lập trình web với ASP. Tel: 03213-713. Như ví dụ 5 V2.vn.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 ……….319 P.. aptech@utehy.aptech.0 – http://www.edu.vn. 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> ……….NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.135 ..

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. Như ví dụ 5 ……………………………………………………………………………………… 3. ta cần đặt thuộc tính text của trường đó vào trong phương thức Bind. 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.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") ………. Tel: 03213-713..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.aptech. ………………………………………………………………………………………………………… …… V2.utehy.Tài liệu khóa học lập trình web với ASP.136 .NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn.. 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> ……….vn.edu. aptech@utehy.319 P.

NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Tel: 03213-713.319 P.vn.aptech. aptech@utehy.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.137 .0 – http://www.vn.utehy.edu.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. aptech@utehy.Tài liệu khóa học lập trình web với ASP. 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. Tuy điều khiển này không có khả năng phân trang.edu. 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.w3.cs" Inherits="Lession_19_Repeater" %> <html xmlns="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. 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.org/1999/xhtml"> V2.utehy. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Repeater.aptech. Khi được gắn với nguồn dữ liệu.aspx. đó là sử dụng Template. Tel: 03213-713.319 P.0 – http://www.vn.net –diễn Đàn Sinh Viên Toán Tin Kết quả sau khi chạy trang ở trên 3. 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.138 .

Đặt nội dung cần hiển thị (ở đây là Họ tên.2 Hướng dẫn: . địa chỉ.Tài liệu khóa học lập trình web với ASP.Tự tạo các cột cho GridView bằng cặp thẻ <asp:TemplateField> …</> .319 P. Bài 1: Hiển thị danh sách cán bộ 1.edu.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.1 Yêu cầu Hiển thị danh sách cán bộ (bao gồm họ tên. điện thoại) trong bảng tblCanBo.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn. Tel: 03213-713. địa chỉ.utehy.139 . Trong đó Họ tên chữ đậm.vn.Đặt thuộc tính AutoGenerateColumns = "false" .aptech. điện thoại) vào các cột bằng cách đặt bên trong cặp thẻ <asp:DataItemTemplate> </> V2. aptech@utehy. 1.0 – http://www. THỰC HÀNH 1.

Tel: 03213-713.319 P.Tài liệu khóa học lập trình web với ASP.utehy. aptech@utehy.0 – http://www.vn.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.3 Minh họa: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ThongTinCanBo.net –diễn Đàn Sinh Viên Toán Tin Danh sách cán bộ 1.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn.edu.aptech.aspx.140 .

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

Kết quả V2. Tel: 03213-713.0 – http://www. 3. aptech@utehy.aptech.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. bảng này có 1 hàng và 2 cột. Cột thứ nhất sẽ chứa thông tin ở dạng text như họ tên. 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ị. địa chỉ.vn.Tài liệu khóa học lập trình web với ASP. ta sẽ đặt vào một table có kích thước cố định. điện thoại và mô tả bản thân.1 Yêu cầu: Thông tin được dàn trang theo chiều dọc (Flow). 3.edu.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Cột thứ hai sẽ hiển thị hình ảnh tương ứng.142 .vn.utehy.2 Hướng dẫn: Tạo một cột duy nhất.319 P. Với mỗi hàng được tạo ra.

vn.143 .edu.3 Minh họa: V2.aptech. nhưng có thêm chức năng cập nhật và Delete. 4.net –diễn Đàn Sinh Viên Toán Tin 3. Điện thoại. 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")%>.0 – http://www. Địa chỉ. THông tin hiển thị gồm Họ tên.1 Yêu cầu Làm như bài 3. Tel: 03213-713. trường địa chỉ sẽ hiển thị ở dạng Text Multiline khi sửa.319 P. 4.vn. nhưng thêm 2 command là Edit và Delete.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. Bài 4: Hiển thị danh sách người dùng dưới dạng Flow (tuyến tính) 4. aptech@utehy. Trong đó.utehy.Tài liệu khóa học lập trình web với ASP.2 Hướng dẫn: Tạo các template như bài 3.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.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.

aptech. DiaChi=@DiaChi.utehy.aspx.Tài liệu khóa học lập trình web với ASP.319 P. Tel: 03213-713. aptech@utehy. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DSCB_ImageField.144 .cs" Inherits="Lession_20_DSCB_ImageField" %> <html xmlns="http://www.w3.net –diễn Đàn Sinh Viên Toán Tin Kết quả.edu.vn.0 – http://www.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.vn.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. SoDienThoai=@SoDienThoai Where MaCanBo=@MaCanBo" V2.

NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. aptech@utehy.vn.utehy.145 .vn. Tel: 03213-713.Tài liệu khóa học lập trình web với ASP.0 – http://www.aptech.319 P.edu.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.

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

vn.aptech.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d.utehy.319 P. Kết quả hiển thị V2. B5: Mở trang web.edu.vn. 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. aptech@utehy. Khi đó ta chỉ cần đặt thuộc tính PagedControlID="ListView1".149 . Một cách phân trang khác là tạo một DataPager và gắn vào ListView. Tel: 03213-713.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 B4: Chọn các thông số như hình bên dưới.0 – http://www. 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.

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 . 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ả. Ứng dụng được biên dịch này có thể copy vào web Server để thực thi.Tài liệu khóa học lập trình web với ASP.utehy. Khi đó.319 P.0 trở lên.net.vn. 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).150 .1 Cài đặt Nên chọn bản . 2.0 có sẵn trong CD Windows XP SP2.NET – Biên soạn: Trung tâm Hưng Yên Aptech http://08tn1d. 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. Tel: 03213-713.net framework 2.NET Framework 2. CÀI ĐẶT HỆ THỐNG IIS HỖ TRỢ ASP.NET WEBSITE 1.edu. II. đó là phải thực hiện gắn kết .net framework với IIS bằng dòng lệnh (Click start  Run và gõ): C:\WINDOWS\Microsoft.exe –i – enable V2. ĐÓ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. aptech@utehy.0 – http://www.NET Framework Thường khi cài đặt xong IIS và .vn. Tất cả các bản đều có thể download từ Internet hoặc vào máy \\AptechServer để lấy.2 "Gắn" IIS với . Bộ .aptech. Right click vào Tên của Solution và chọn mục Publish. ứng dụng chạy sẽ nhanh hơn và bảo mật hơn. Cài đặt .50727\aspnet_regiis. Để xuất bản web.net 2.net –diễn Đàn Sinh Viên Toán Tin PHỤ LỤC I.NET\Framework\v2.0.

Sign up to vote on this title
UsefulNot useful