Giáo trình ASP.net (từ cơ bản đến nâng cao)

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.32 MB, 142 trang )

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
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 7
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) 17
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
3 Minh Hoạ mẫu 28
4 Ghi chú 33
BÀI SỐ 5: ASP.NET và Web form 33
V2.0 – ; ; 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
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 38
4 Webform trong ASP.NET 41
5 Tìm hiểu cấu trúc trang ASP.NET 41
6. Code behind và viết code phía Server 44
7. HTML Server Controls và Web controls 44
II. Thực hành 46
1. Yêu cầu 46
2. Hướng dẫn 47
3. Minh hoạ mẫu 47
4. Ghi chú 52
BÀI 6: Các đối tượng trong ASP.NET 53

I. Lý thuyết 53
1. Request Object 53
2 Response Object 56
3 Server Object 57
4 Session Object 58
5 Application Object 58
II. Thực hành 59
1. Bài 1: Tạo một trang Login 59
2. Bài 2: Tạo một trang đếm số lượng người truy cập 63
BÀI 7: CÔNG NGHỆ ADO.NET 65
I. Lý thuyết 65
1. Giới thiệu chung 65
2. Kiến trúc của ADO.NET 66
3. Các lớp thao tác với CSDL: Connection, Command,… 67
II. THỰC HÀNH 79
1. Tạo cơ sở dữ liệu 79
2. Nhập dữ liệu cho bảng 80
3. Hiển thị dữ liệu trong bảng lên trình duyệt 83
4. Cập nhật dữ liệu bằng DataSet và DataAdapter 84
BÀI 8: Tìm hiểu và ứng dụng cơ chế Data Binding 86
I. Lý thuyết 86
1 Giới thiệu DataBinding 86
2 Data Binding 86
3. Các điều khiển Data Source (Data source controls) 90
II. THỰC HÀNH 98
BÀI 9: Làm việc với GridView 102
I. Lý thuyết 102
1. Giới thiệu tổng quan 102
2. Tìm hiểu lớp GridView 102
3. Các tính năng hỗ trợ của GridView 106

V2.0 – ; ; 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
4. Tạo các cột tùy biến HyperLink, BoundColunm… 110
5. Tạo và xử lý các cột Select, Edit, Delete, Update… 113
II. Thực hành 118
BÀI 10: Sử dụng Templates 125
I. Lý thuyết 125
1. Giới thiệu tổng quan 125
2. Các điều khiển hỗ trợ Templates 125
3. Repeater control, DataList control, GridView control 126
II. THỰC HÀNH 132
1. Bài 1: Hiển thị danh sách cán bộ 132
2. Bài 2: Bổ sung thêm trường vào bảng 134
3 Bài 3: Hiển thị danh sách cán bộ dạng chi tiết 135
4. Bài 4: Hiển thị danh sách người dùng dưới dạng Flow (tuyến tính) 136
Bài 5: Hiển thị thông tin kèm Hyperlink 139
Bài 6: Thực hiện phân trang 140
PHỤ LỤC 142
I. ĐÓNG GÓI WEBSITE 142
II. CÀI ĐẶT HỆ THỐNG IIS HỖ TRỢ ASP.NET WEBSITE 142
1. Cài đặt IIS 142
2. Cài đặt .NET Framework 142
V2.0 – ; ; Tel: 03213-713.319
P.3
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
TRUNG TÂM HƯNG YÊN – APTECH
Địa chỉ : Tầng 2, Nhà A – Đại học SPKT Hưng Yên
Điện thoại : 0321-713.319; Fax: 0321-713.015
E-mail : ;

Website :
TÀI LIỆU
KHÓA HỌC LẬP TRÌNH ASP.NET
Biên soạn:
- Nguyễn Minh Quý
- Lê Quang Lợi
HƯNG YÊN 7/2009
V2.0 – ; ; Tel: 03213-713.319
P.4
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
PHẦN I
Cơ bản về HTML, DHTML, JavaScript
BÀI SỐ 1: Tạo trang web với HTML
Mục tiêu: Kết thúc bài học, 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), <TR>, <TD>,
Nội dung
I. Lý thuyết
1.1 Giới thiệu
Một trang web khi được hiển thị trên trình duyệt (IE; FireFox; Netscape, ) về bản
chất được tạo từ các cặp thẻ (tag) đặc biệt. 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. Ví dụ cặp thẻ <b> </b> sẽ chỉ dẫn cho
trình duyệt phải in đậm nội dung bên trong, v.v Mỗi cặp thẻ như vậy gọi là cặp
thẻ HTML (Hyper Text Markup Language).
Vì vậy, đối với mỗi lập trình viên web, 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.
1.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ử
Hình thù hiển thị
trên trang web
Cách tạo ra bằng thẻ HTML tương ứng
Input <input type="text" value="hello" name="txtMsg">
Button <input type="button" value="Yes" name="btnYes">
CheckBox <input type="checkBox" name="chkHTML" value="Checked">
Radio
button
<input type="radio" value='Checked' name = 'optGioiTinh'>
List

<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>
Danh sách
(Combo
Box)
<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 >
</Select>
V2.0 – ; ; Tel: 03213-713.319
P.5
Nam
CheckBox1

Yes
✘
Nguyn Vn A
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
Phân cách <hr>
xuống
dòng
<br>
div
Là một phần tử chứa
các phần tử khác. Khi
ẩn/ hiện/ di chuyển
phần tử div thì các
phần tử khác cũng
ẩn/hiện/di chuyển
theo
<div>
<input type="text" value="" name = "txtHoTen">
<input type ="button" value="OK" name="btnOK">
</div>
Table
11 12
21 22
<Table border = "1">
<tr>
<td> 11 </td>
<td> 12 </td>
</tr>
<tr>
<td> 21 </td>

<td> 22 </td>
</tr>
</table>
TR

Thẻ TR phải nằm trong một <Table> nào đó, không thể tạo riêng
TD

Thẻ TD phải nằm trong một <TR> nào đó, không thể tạo riêng.
Trộn hai
cột
=>

<tr>
<td> </td>
<td colspan = 2> </td>
</tr>

Trộn 2
hàng
=>
<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 www.aptech.utehy.vn <a href=""> www.aptech.utehy.vn </a>
img <img src="utehylogo.png" alt ="Logo UTEHY">
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ị>. Phần <giá trị> được đặt trong cặp dấu nháy đơn hoặc cặp dấu nháy kép.
V2.0 – ; ; Tel: 03213-713.319
P.6
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
II. Bài tập thực hành
1. 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
2. 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.
V2.0 – ; ; Tel: 03213-713.319
P.7
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
- Vào trình soạn thảo web của Visual Studio 2008 và tạo dự án web, sau đó mở trang
Default.aspx và viết các thẻ HTML.
- Để chạy (mở) trang web vừa tạo, có thể nhấn F5 hoặc click chuột phải trong trang soạn
thảo (hoặc tệp Default.aspx bên panel phải), sau đó chọ "View in Browser".
3. Minh hoạ mẫu
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html xmlns=" /><head runat="server">
<title>Bài thực hành số 1 - 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 />
Điện thoại:
<textarea rows ="3" cols ="20" id ="txtTelephone"> </textarea>
Số Fax: <input type ="text" id ="txtFaxNumber" />
<br />
V2.0 – ; ; Tel: 03213-713.319
P.8
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
Đị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 =""> www.fpt.vn</a></td>
</tr>

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

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, người học có thể
 Truy xuất các đối tượng trình duyệt và các phần tử HTML bằng JavaScript.
 Tạo trang web đăng ký có xử lý tính hợp lệ của dữ liệu nhập vào.
Nội dung:
I. 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 - 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). Tuy nhiên, 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ị, ứng xử khác nhau ứng với người sử dụng hoặc tình huống khác
nhau ). Khả năng "động" đó có thể thực hiện ở bên phía trình duyệt hoặc phía server. Nếu
trang web cho phép thực hiện thay đổi (bằng ngôn ngữ kịch bản như VBScript,
JavaScript ) bên phía trình duyệt, gọi là trang DHTML (Dynamic HTML); còn nếu trang
web thực hiện xử lý bên phía server (bằng ngôn ngữ C#, VB.NET, ASP, PHP, Perl, ) gọi
là các trang động phía server (Active Server Page). Trong tài liệu này chúng ta sẽ tìm hiểu
cả hai dạng web động ở trên, còn trong bài này ta sẽ tìm hiểu trang DHTML với Javascript
(JS).
1. Đưa câu lệnh javascript vào trang web
1.1 Đưa câu lệnh javascript vào luồng xử lý ngay khi trang web được mở.
Để đư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ở, ta chỉ cần đặt các câu lệnh JS ngay trong các cặp thẻ <Script> </script>
nhưng không hàm.
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ở.
<html>
<body>
<form id="form1">
<script language="javascript" type ="text/javascript">
var d = new Date ();

document.write ("<h1>Chào bạn ! </h1>");
document.write("Hôm nay là: " + d.toDateString());
</script>
</form>
</body>
</html>
** Chú ý:
- Có thể có nhiều đoạn script trong một trang.
- Trong cặp script phải là các CÂU LỆNH JAVASCRIPT
V2.0 – ; ; Tel: 03213-713.319
P.10
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
- 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ở.
1.2 Đưa câu lệnh javascript vào các sự kiện (event)
Như ở phần 1.1 thì các câu lệnh JS sẽ được thực thi ngay khi trang web được mở, 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, như click
chuột, nhấn phím 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:
<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"
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 (); document.write ('Chào bạn !
<br> Hôm nay là:'+d.toDateString());"
>
</form>
</body>

</html>
*** Thực tế, 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, mà thường đưa các câu lệnh này vào một hàm, sau đó viết câu lệnh gọi hàm trong sự
kiện.
2. Đưa câu lệnh javascript vào từ một file riêng biệt.
Trong các ứng dụng lớn, số hàm, câu lệnh JS cũng sẽ rất lớn, 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. Để
khắc phục hạn chế này, người ta thường đặt các hàm JS trong một tệp riêng, sau đó chỉ việc
gọi các hàm này trong trang HTML.
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.js, sau
đó gọi các hàm này trong trang web có tên là TestJS.htm.
Việc "nhúng" các trang *.JS vào trang html thông qua thuộc tính "src".
File MyMath.js
//Hàm cộng hai số nguyên
function Cong(a,b)
{
return a+b;
}
//Hàm trừ hai số nguyên
function Tru(a,b)
{
return a-b;
}
V2.0 – ; ; Tel: 03213-713.319
P.11
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
File TestJS.htm
<html>
<head runat="server">
<title>Lession 02</title>

}
</script>
</head>
<body>
<form name="form1">
<h3>Chương trình tính tổng</h3>
V2.0 – ; ; Tel: 03213-713.319
P.12
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
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();" value ="Tính" />
</form>
</body>
</html>
*** Theo ví dụ ở trên, để truy xuất (tham chiếu) đến phần tử txtSH1 và txtSH2 ta viết:
document.form1.txtSH1 và document.form1.txtSH2.
Còn để truy xuất đến thuộc tính value (chứa nội dung của textbox), ta chỉ cần thêm thuộc
tính Value vào sau tham chiếu, cụ thể viết: document.form1.txtSH1.value
Ngoài ra có thể viết theo cách khác như sau:

<script language="javascript">
function ThucHien()
{
var a = parseFloat(document.forms[0].txtSH1.value);
var b = parseFloat(document.forms[0].txtSH2.value);
document.getElementById("txtTong").value = a+b;
}
</script>

Để biết danh sách các thuộc tính của phần tử tương ứng, có thể tra cứu trên Internet (ví dụ
trạng www.w3schools.com) hoặc search: "Javascript reference"
4. Xây dựng hàm trong Javascript
Trong Javascript, có thể xây dựng các hàm giống như các ngôn ngữ lập trình khác. Tuy
nhiên có một số sự khác biệt, cụ thể:
- Hàm không có kiểu trả về
- 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ố x
y
<html>
<head runat="server"> <title>Lession 02</title>
<script language="javascript">
function LuyThua(x, y)
{ var KQ = Math.pow (x,y);
return KQ;
}
function ThucHien()
{ var x,y;
x=document.getElementById("txtX").value ;
y=document.getElementById("txtY").value ;
document.getElementById("txtXMuY").value = LuyThua (x,y);
}
</script>
</head>
<body>
V2.0 – ; ; Tel: 03213-713.319
P.13
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
<form name="form1" action="Default.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();" value ="Tính" />
</form>
</body>
</html>
5. Một số hàm thông dụng của Javascript
- Hàm write(<Biểu thức cần in ra màn hình>): Để in kết quả ra trang web.
- Hàm alert(<Biểu thức>): Thông báo trong một hộp thoại riêng.
- Hàm prompt(<Biểu thức>): Để yêu cầu nhập thông tin từ người dùng.
- Hàm confirm(<thông báo>): Yêu cầu người dùng xác nhận.
- Hàm open(<URL>): để mở một trang web.
- Hàm xử lý toán học: như Sin, cos, abs, pow, nằm trong đối tượng Math.
- Hàm xử lý xâu: SubStr, Length, toLower có sẵn đối với mỗi xâu.
- Hàm chuyển xâu sang số nguyên, thực: pareInt(<Xâu>); pareFloat(<Xâu>).
- Hàm tính giá trị của một biểu thức: eval(<Xâu chứa biểu thức>).
II. Thực hành
1. 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 , 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.
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. Hướng dẫn
2.1 Để huỷ một sự kiện của một phần tử bất kỳ, chỉ cần thêm câu lệnh "return false;"
trong phần câu lệnh xử lý sự kiện tương ứng.
2.2 Sử dụng các hàm kiểm tra số IsNaN() (true = không phải là số, false=đúng là số)
2.3 Sử dụng các hàm xử lý xâu.
2.4 Viết dưới dạng các hàm.
3. Minh hoạ mẫu
File Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html xmlns=" /><head id="Head1" runat="server">
<title>Bài thực hành số 2 - Hưng Yên Aptech</title>
V2.0 – ; ; Tel: 03213-713.319
P.14
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
<script language="javascript" type="text/javascript">
function KiemTraDuLieu()
{
if (document.getElementById("txtNCC").value == "")
{
alert ("Bạn phải nhập tên nhà cung cấp !");
return false ;
}
if (document.getElementById("lstCity").selectedIndex == 0)|
{
alert ("Bạn chưa chọn Thành phố !");
return false ;
}
if (isNaN(document.getElementById("txtTelephone").value) == true )
{
alert ("Số ĐT chỉ chứa ký tự số !"+document.getElementById("txtTelephone").value);

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://");
return false;
}
return true; //dữ liệu nhập hợp lệ.
}
</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>
<option value ="HN">Hà nội</option>
<option value ="HCMC">TP Hồ Chí Minh</option>
V2.0 – ; ; Tel: 03213-713.319
P.15
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
<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();" />
<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 =""> www.fpt.vn</a></td>
V2.0 – ; ; Tel: 03213-713.319
P.16
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
</tr>
<tr>
<td>2</td>
<td>Công ty CMC</td>
<td>Hàn Thuyên - Hai Bà Trưng</td>
<td><a href =""> www.cmc.vn</a></td>
</tr>
<tr>
<td>3</td>
<td>Công ty Trần Anh</td>
<td>Giảng võ - Ba Đình</td>
<td><a href="">www.trananh.vn</a></td>
</tr>
</table>
</form>
</body>
</html>

4. Ghi chú
Có thể tra cứu các thuộc tính, phương thức, sự kiện của các phần tử (Select, command,
checkbox, ) tại:
- www.w3schools.com
-
-
- hoặc bản mềm đi kèm khóa học.
BÀI 3:
THAY ĐỔI NỘI DUNG TRANG WEB BẰNG CSS VÀ JS
ĐỊNH DẠNG TRANG WEB VỚI CSS
Mục tiêu sau khi kết thúc bài học
 Trình bày được cách định nghĩa CSS kiểu dòng và lớp.
 Sử dụng CSS và bảng thuộc tính CSS để định dạng cho phần tử bất kỳ.
 Định dạng lại trang thông tin sản phẩm bằng CSS, đảm bảo tính mỹ thuật và kỹ
thuật.
I. Lý thuyết
Trước đây, 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, <font-face> để đặt font chữ, v.v ). 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).
Có nhiều cách định kiểu cho phần tử web bằng CSS, tuy nhiên thực tế hay sử dụng cách
định dạng sau đây:
1. Định dạng CSS ngay trong định nghĩa phần tử (Gọi là Inline)
Với cách này, 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ẻ đó.
Ví dụ1: Định nghĩa nội dung thẻ H2 có màu chữ đỏ, font chữ nghiêng như sau:
V2.0 – ; ; Tel: 03213-713.319
P.17
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
<h2 style="color:Red; font-style:italic">Màu đỏ, chữ nghiêng</h2>

Ví dụ2: Định nghĩa nút nhấn "Yes" có nền đỏ, cỡ chữ 16pt như sau:
<input type="button" style="background-color:Red; 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.
- 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:
hoặc trang

- Với cách này ta phải định nghĩa riêng cho từng phần tử, không sử dụng lại được và
mất thời gian bảo trì. Thường được sử dụng cho những phần tử có định dạng riêng.
2. Định dạng CSS thông qua lớp
Cách thứ hai linh hoạt hơn và thường áp dụng cho các trang web lớn, đó là người ta định
nghĩa sẵn một số CSS gọi là lớp (class), sau đó có thể áp dụng lớp này cho các phần tử
mong muốn. Phần định nghĩa CSS này được đặt trong cặp thẻ <HEAD> </HEAD>.
Định nghĩa:

<Head>
<style type="text/css">
.<Tên_lớp>
{
Tên_Thuộc_tính_1: Giá_trị_1;
Tên_Thuộc_tính_2: Giá_trị_2;

}
<style>
</head>
Sử dụng:
<Tên_thẻ class = <Tên_Lớp> />
Ví dụ: Định nghĩa 2 lớp MỤC_LỚN và MỤC_NHỎ, sau đó áp dụng để định dạng nội

dung mục lục của một cuốn tài liệu.
Lớp MỤC_LỚNcó 2 thuộc tính: Màu chữ đậm, cỡ chữ 16
Lớp MỤC_NHỎ có 3 thuộc tính: Màu chữ đậm, in nghiêng, cỡ chữ 14
<html>
<head>
<title>CSS</title>
<style type="text/css">
.MỤC_LỚN
{
font-weight:bold;
font-size:16pt;
}
V2.0 – ; ; Tel: 03213-713.319
P.18
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
.MỤC_NHỎ
{
font-weight:bold;
font-size:14pt;
font-style:italic;
}
</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.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 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.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.1 Lý thuyết</span> <br />
<span class = "MỤC_NHỎ">3.2 Thực hành</span>
</form>
</body>
</html>
Kết quả cho ta:
Mục lục
Bài 1: Tạo trang web tĩnh với HTML
1.1 Lý thuyết
1.2 Thực hành
Bài 2: Sử dụng JavaScript
2.1 Lý thuyết
2.2 Thực hành
Bài 3: Tạo trang web tĩnh với CSS & JS
3.1 Lý thuyết
3.2 Thực hành
** Ưu điểm của định nghĩa lớp này là ta chỉ phải định nghĩa một lần, sau đó sử dụng cho
nhiều phần tử. Việc bảo trì và sửa chữa sẽ dề dàng và nhanh chóng hơn.
Ngoài ra, người ta có thể định nghĩa CSS trong một tệp riêng, sau đó có thể sử dụng trong
tất cả các trang khác nhau. Để sử dụng (gọi) các CSS định nghĩa trong một file xyz.css nào
đó, ta chỉ cần khai báo như sau trong phần Head:
<link type="text/css" rel="Stylesheet" href="xyz.css" />
V2.0 – ; ; Tel: 03213-713.319
P.19
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
*Chú ý: Nội dung trang css chỉ chứa định nghĩa các lớp, không có thẻ kiểu như <style >

II. Thực hành
1. 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ử.
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. Hướng dẫn
- Sử dụng định dạng CSS tại dòng và tạo lớp CSS.
- Các phần tử có cùng thuộc tính thì nên tạo một lớp riêng, sau đó áp dụng lớp này cho thẻ
bằng thuộc tính Classs= <Tên lớp>.
- Tra cứu bảng CSS trong bản mềm đi kèm hoặc trang .www.w3schools.com
V2.0 – ; ; Tel: 03213-713.319
P.20
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
3. Minh hoạ mẫu
<html>
<head>
<title>CSS</title>
<style type="text/css">
.Nhãn
{
font-style:italic;
font-size:12pt;
color:Gray;
text-align:right;
width:150px;
padding-right:5px;
}
.Bảng
{

border-collapse:collapse;
border-style:solid ;
border-width:1px;
border-color:gray;
margin-left:auto;
margin-right:auto;
width:600px;
}
td
{
padding:3px;
}
td.CạnhPhải
{
border-right:solid 1px gray;
}
.TiêuĐềNCC
{
text-align:center;
border-right:solid 1px gray;
border-bottom:solid 1px gray;
}
</style>
</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
V2.0 – ; ; Tel: 03213-713.319
P.21
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
</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>

<option value ="OTHER">Nơi khác</option>
</select>
Vùng: <input type ="text" id ="txtRegion" style="width:150px" />
</td>
V2.0 – ; ; Tel: 03213-713.319
P.22
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
</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>
<td colspan="4" style="background-color:Purple; color:White; text-align:center">
<span style="font-size:18pt">Danh sách nhà cung cấp hiện có</span>
</td>
</tr>

<tr>
V2.0 – ; ; Tel: 03213-713.319
P.23
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
<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; 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ạ - Ba Đình</td>
<td class="CạnhPhải"><a href =""> www.fpt.vn</a></td>
</tr>
<tr>
<td style="text-align:center; 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 - Hai Bà Trưng</td>
<td class="CạnhPhải"><a href =""> www.cmc.vn</a></td>
</tr>
<tr>
<td style="text-align:center; 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="">www.trananh.vn</a></td>
</tr>
</table>
</div>
</form>

</body>
</html>
4. 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>.options[Chỉ số của mục].text để lấy
phần Text (phần hiển thị) hoặc viết: <Tham chiếu đến phần tử
Select>.options[Chỉ số của mục].value để lấy phần value.
- Muốn đặt bảng vào giữa form, đặt thuộc tính margin-left, margin-right = "auto".
- Các thẻ con có tính kế thừa thẻ cha, 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. 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ừ phi chính thẻ h2 hay h3 định
nghĩa lại).
- Để trình bày được tốt dữ liệu dưới dạng hàng, 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, TR, TABLE. Có thể
tham khảo đầy đủ về vấn đề này tại: . Đặc biệt mỗi
phần tử đều có các thuộc tính hiển thị như Margin, Border, padding. Muốn hiển thị
đúng cần nắm được ý nghĩa của các khái niệm này.
V2.0 – ; ; Tel: 03213-713.319
P.24
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
Mô hình biểu diễn khái niệm margin, border, 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.
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. Lý thuyết
1. 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ử đó. Với mỗi trình duyệt khác nhau có thể có các cách khác
nhau, 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.
Để tham chiếu đến một phần tử, 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ụ, có phần tử: <h1 id="TieuDe"> Chương I </h1>. Nếu muốn tham chiếu (truy xuất)
đến phần tử H1 này, ta viết: document.getElementById("TieuDe"). 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ó.
1.2 Dùng hàm getElementsByTag("Tên của thẻ").
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ử. Chú
ý: bất kỳ phần tử nào cũng có phương thức getElementByTag, vì vậy khi ta viết
document.getElementsByTag sẽ trả về các phần tử nằm trong document, nếu ta viết
form1.getElementsByTag thì trả về các phần tử nằm trong form, v.v
V2.0 – ; ; Tel: 03213-713.319
P.25
padding-bottom
Margin-left
border-right

Giáo trình ASP.net (từ cơ bản đến nâng cao)

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về