tài liệu lập trình web

Text: nội dung hiển thị trong TextBox TextMode: quy định chức năng của TextBox • SingleLine: hiển thị và nhập một dòng dữ liệu • MultiLine: hiển thị và nhập nhiều dòng dữ liệu • Password

MỤC LỤC

LỜI NÓI ĐẦU 3

TÀI LIỆU THAM KHẢO 4

BÀI 1: ASP.NET VÀ KIẾN TRÚC NET 5

I NET FRAMEWORK 5

II NHỮNG ƯU ĐIỂM CỦA ASP.NET 5

III QUÁ TRÌNH XỬ LÝ TẬP TIN ASPX 6

IV TẠO MỘT TRANG ASP.NET ĐƠN GIÃN TRÊN VISUAL STUDIO NET 6

BÀI 2: ĐIỀU KHIỂN WEBFORM 7

I HTML CONTROL 7

II ASP.NET WEB CONTROL 7

II.1 ASP.NET Page 7

II.2 Điều khiển cơ bản 8

II.3 Điều khiển kiểm tra dữ liệu nhập (Validation Control) 9

II.4 Một số điều khiển khác 11

BÀI 3: LIST CONTROL - DATAGRID 12

I GIỚI THIỆU DATAGRID 12

II ĐỊNH DẠNG DATAGRID 12

II.1 Trang General 12

II.2 Trang Columns: Quản lý các cột 12

II.3 Trang Paging (Quản lý phân trang) 13

II.4 Trang Format 14

II.5 Trang Border 14

III XỬ LÝ SẮP XẾP 15

IV XỨ LÝ PHÂN TRANG 15

V CẬP NHẬT DỮ LIỆU TRỰC TIẾP TRÊN DATAGRID 15

BÀI 4: LIST CONTROL - DATALIST 16

I HIỂN THỊ DỮ LIỆU TRÊN DATALIST 16

II CẬP NHẬT DỮ LIỆU TRÊN DATALIST 16

BÀI 5: LIST CONTROL - REPEATER 18

I CÁC THÀNH PHẦN BÊN TRONG REPEATER 18

II TẠO NGUỒN DỮ LIỆU CHO REPEATER 18

BÀI 6: MASTER PAGE 20

I GIỚI THIỆU 20

III TẠO WEB FORM SỬ DỤNG MASTER PAGE 20

BÀI 7: CÁC ĐỐI TƯỢNG QUẢN LÝ ỨNG DỤNG 22

I ĐỐI TƯỢNG RESPONSE 22

II ĐỐI TƯỢNG REQUEST 22

III ĐỐI TƯỢNG SESSION VÀ APPLICATION 23

IV ĐỐI TƯỢNG SERVER 25

V ĐỐI TƯỢNG COOKIE 25

VI TẬP TIN GLOBAL.ASAX 25

LỜI NÓI ĐẦU

Giáo trình “ Lập trình web 1” được biên soạn dành cho học sinh trung cấp nghề và sinh viên cao

đẳng nghề với mục tiêu cung cấp cho người học các kiến thức cần thiết để có thể hoàn thành một ứng dụng web báo điện tử, quảng cáo sản phẩm, …

Tác giả đã nghiên cứu một số tài liệu kết hợp với kinh nghiệm làm việc thực tế để viết nên giáo trình này Nội dung được tác giả trình bày cô động, dễ hiểu kèm theo các bước hướng dẫn thực hành chi tiết giúp cho người học hình thành được kỹ năng nghề

Trong quá trình biên soạn, chắc chắn giáo trình còn nhiều thiếu sót Tác giả rất mong nhận được

ý kiến đóng góp của quý thầy/cô và các em học sinh, sinh viên

TÁC GIẢ

Phan Hữu Phước

TÀI LIỆU THAM KHẢO

1 Phạm Hữu Khang, Lập trình ASP.NET 2.0, NXB Lao động - Xã hội

2 Dương Quang Thiện, Lập trình Web dùng ASP.NET và C#, NXB Tổng hợp Tp HCM

3 Tài liệu Hướng dẫn giảng dạy Lập trình ứng dụng Web với ASP.NET, Trung tâm Tin học Đại học Khoa học Tự nhiên Tp HCM

BÀI 1: ASP.NET VÀ KIẾN TRÚC NET

I NET FRAMEWORK

.NET Framework là bộ thư viện các lớp đối tượng dành cho các lập trình viên NET

- OS: Cung cấp các chức năng xây dựng ứng dụng

- Common Language Runtime (CLR): là thành phần kết nối giữa các phần khác trong NET Framework với hệ điều hành CLR giữa vai trò quản lý việc thi hành các ứng dụng viết bằng NET trên Windows

- Base Class Library: thư viện các lớp cơ bản nhất, được dùng trong khi lập trình hay bản thân những người xây

dựng NET Framework cũng phải dùng nó để xây dựng các lớp cao hơn Ví dụ các lớp trong thư viện này là String, Integer, Exception

- ADO.NET and XML: Bộ thư viện này gồm các lớp dùng để xử lý dữ liệu Các lớp đối tượng XML được cung cấp để bạn xử lý các dữ liệu theo định dạng mới: XML

- ASP.NET: Bộ thư viện các lớp đối tượng dùng trong việc xây dựng các ứng dụng Web Ứng dụng web xây dựng bằng ASP.NET tận dụng được toàn bộ khả năng của NET Framework Bên cạnh đó là một "phong cách" lập trình mới mà Microsoft đặt cho nó một tên gọi rất kêu: Code Behind

II NHỮNG ƯU ĐIỂM CỦA ASP.NET

- ASP.Net cho phép lập trình viên lựa chọn một trong các ngôn ngữ lập trình yêu thích: Visual Basic.Net, J#, C#,…

- Trang ASP.Net được biên dịch trước Thay vì phải đọc và thông dịch mỗi khi trang web được yêu cầu, ASP.Net biên dịch những trang web động thành những tập tin DLL mà Server có thể thi hành nhanh chóng và hiệu quả Yếu tố này là một bước nhảy vọt đáng kể so với kỹ thuật thông dịch của ASP

• ASP.Net hỗ trợ mạnh mẽ bộ thư viện phong phú và đa dạng của Net Framework, làm việc với XML, Web Service, truy cập cơ sở dữ liệu qua ADO.Net, …

• ASPX và ASP có thể cùng hoạt động trong 1 ứng dụng

• ASP.Net sử dụng phong cách lập trình mới: Code behide Tách code riêng, giao diện riêng

→ Dễ đọc, dễ quản lý và bảo trì

• Kiến trúc lập trình giống ứng dụng trên Windows

• Hỗ trợ quản lý trạng thái của các control

• Tự động phát sinh mã HTML cho các Server control tương ứng với từng loại Browser

• Hỗ trợ nhiều cơ chế cache

• Triển khai cài đặt

o Không cần lock, không cần đăng ký DLL

o Cho phép nhiều hình thức cấu hình ứng dụng

• Hỗ trợ quản lý ứng dụng ở mức toàn cục

o Global.aspx có nhiều sự kiện hơn

o Quản lý session trên nhiều Server, không cần Cookies

III QUÁ TRÌNH XỬ LÝ TẬP TIN ASPX

Khi Web server nhận được yêu cầu từ phía client, nó sẽ tìm kiếm tập tin được yêu cầu thông qua chuỗi URL được gởi về, sau đó, tiến hành xử lý theo sơ đồ sau:

IV TẠO MỘT TRANG ASP.NET ĐƠN GIÃN TRÊN VISUAL STUDIO NET

• B1: Khởi động Visual Studio NET

• B2: Tạo ứng dụng ASP.NET

• B3: Chèn một số điều khiển đơn giãn

• B4: Đặt các thuộc tính cơ bản cho các điều khiển

• B5: Viết Code Behind

• B6: Biên dịch và thực thi ứng dụng

BÀI 2: ĐIỀU KHIỂN WEBFORM

I HTML CONTROL

Điều khiển HTML (tag HTML) trong trang ASP.Net được xem như những chuỗi văn bản bình thường

Để có thể được lập trình ở phía Server: runat = “server”

Những điều khiển HTML có thuộc tính runat = “server” được gọi là HTML Server Control

II ASP.NET WEB CONTROL

II.1 ASP.NET Page

Đây là thành phần chính của giao diện, là nơi chứa các điều khiển, được sử dụng để thể hiện nội dung trang web đến người dùng

Sự kiện:

• Init: xảy ra lần đầu tiên, khi trang được yêu cầu

• Load: xảy ra sau sự kiện Init, khi trang bắt đầu nạp Là nơi giải quyết phần lớn các xử lý, khởi tạo một số giá trị cho trang

• PreRender: khi trang chuẩn bị trả về cho Client

• Unload: đối lập với sự kiện Init, xảy ra sau tất cả các sự kiện khác

Thuộc tính:

• IsPostBack: kiểu luận lý (boolean), cho biết trạng thái của trang khi được nạp Nếu trang

được nạp lần đầu tiên thì thuộc tính này có giá trị là false Thường sử dụng trong sự kiện Load của trang

• SmartNavigation: Nếu là true thì trình duyệt sẽ giữ nguyên vị trí đang đọc sau khi được

Reload

II.2 Điều khiển cơ bản

Đơn giản, tương tự như các điều khiển trên Windows Form

Đồng nhất: có các thuộc tính giống nhau -> dễ tìm hiểu và sử dụng

Hiệu quả: tự động phát sinh các tag HTML theo từng loại trình duyệt

Label: Hiển thị và trình bày nội dung trên trang web Nội dung được hiển thị thông qua thuộc

tính Text

Hyperlink: Tạo liên kết siêu văn bản

ImageURL: đường dẫn hình ảnh hiển thị trên điều khiển

Text: chuỗi văn bản hiển thị Trong trường hợp cả ImageURL và Text được thiết lập thì ImageURL được ưu tiên hiển thị, thuộc tính Text được hiển thị như Tooltip

NavigateUrl: đường dẫn liên kết đến

Target: xác định cửa sổ hiển thị

TextBox: Nhập và hiển thị dữ liệu, được sử dụng rất nhiều

Text: nội dung hiển thị trong TextBox

TextMode: quy định chức năng của TextBox

• SingleLine: hiển thị và nhập một dòng dữ liệu

• MultiLine: hiển thị và nhập nhiều dòng dữ liệu

• Password: hiển thị dấu * thay cho các ký tự trong TextBox

Image: Hiển thị hình ảnh trên trang web

ImageURL: đường dẫn đến tập tin hình ảnh cần hiển thị

AlternateText: nội dung hiển thị thay thế khi không thể hiển thị hình ảnh

ImageAlign: vị trí hiển thị giữa hình ảnh và văn bản xung quanh

Button, ImageButton, LinkButton: mặc định là các Submit Button, mỗi khi được click chuột thì sẽ PostBack về Server

Text: chuỗi văn bản hiển thị trên điều khiển

CommandName: Tên lệnh, được sử dụng trong sự kiện Command

CommandArgument: Thông tin truyền vào sự kiện Command

ListBox và DropDownList: hiển thị danh sách lựa chọn

AutoPostBack: Nếu được gán là true thì sẽ tự động PostBack về cho Server khi có sự thay đổi mục chọn trong danh sách Mặc định là false

Items: danh sách các mục

Rows: chiều cao của ListBox

SelectionMode: cách thức chọn các mục trong ListBox

CheckBox, RadioButton:

Checked: trạng thái của mục chọn – có được chọn hay không

TextAlign: định vị trí hiển thị của điều khiển so với văn bản xung quanh

AutoPostBack: điều khiển có được phép tự động PostBack về Server khi các mục chọn của điều khiển bị thay đổi Giá trị mặc định của thuộc tính này là False - không tự động Postback

GroupName: tên nhóm, được dùng để nhóm các điều khiển RadioButton vào một nhóm

CheckBoxList, RadioButtonList: tạo ra một nhóm CheckBox/RadioButton, là điều khiển danh sách

• RepeatColumns: số cột hiển thị

• RepeatDirection: hình thức hiển thị

• AutoPostBack: qui định điều khiển có được phép tự động PostBack về Server khi các mục chọn của điều khiển bị thay đổi Giá trị mặc định của thuộc tính này là False - không tự động Postback

Liên kết dữ liệu với các điều khiển ListBox, DropDownList, CheckBoxList, RadioButtonList

<KDL_DS> <biến>;

//Khởi tạo các mục trong ds <biến>

<Điều khiển>.DataSource = <biến>;

<Điều khiển>.DataTextField = <trường 1>;

<Điều khiển>.DataValueField = <trường 2>;

<Điều khiển>.DataBind();

II.3 Điều khiển kiểm tra dữ liệu nhập (Validation Control)

Kiểm tra dữ liệu trước khi PostBack về cho Server

Các thuộc tính chung của các Validation Control

• ControlToValidate: Tên điều khiển cần kiểm tra dữ liệu

• Text: chuỗi thông báo xuất hiện khi phát hiện có lỗi

• ErrorMessage: chuỗi thông báo xuất hiện trong điều khiển Validation Summary Giá trị này sẽ được hiển thị tại vị trí của điều khiển khi thuộc tính Text không được gán giá trị

• Display: qui định hình thức hiển thị

• None: không hiển thị thông báo lỗi (vẫn kiểm tra dữ liệu trước khi PostBack)

• Static: trong trường hợp không có vi phạm dữ liệu, điều khiển không hiển thị nhưng vẫn chiếm không gian trong lúc thiết kế

• Dynamic: trong trường hợp không có vi phạm dữ liệu, điều khiển không chiếm vị trí trên trang

EnableClientScript: cho phép thực hiện kiểm tra trên Client hay không Giá trị mặc định là true Required Field Validator

Kiểm tra giá trị trong điều khiển phải được nhập -> kiểm tra ràng buộc dữ liệu khác rỗng

InitialValue: giá trị khởi động, giá trị nhập vào điều khiển phải khác với giá trị này

Compare Validator

So sánh giá trị của một điều khiển với giá trị của một điều khiển khác hoặc với một giá trị cho trước -> kiểm tra ràng buộc miền giá trị, kiểu dữ liệu, liên thuộc tính

Operator: dùng các phép so sánh hoặc kiểm tra dữ liệu

ControlToCompare: tên điều khiển cần so sánh giá trị

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

ValueToCompare: giá trị cần so sánh

Regular Expression Validator

Kiểm tra giá trị nhập vào theo mẫu quy định: địa chỉ email, số điện thoại, …

ValidationExpression: qui định mẫu kiểm tra

Hộp thoại Regular Expression

Bảng mô tả các ký hiệu trong Regular Expression

Custom Validator

Tự viết hàm xử lý kiểm tra lỗi

ServerValidate: đặt các xử lý kiểm tra dữ liệu trong sự kiện này Việc kiểm tra được thực hiện tại Server

II.4 Một số điều khiển khác

Literal: tương tự như Label nhưng không tạo ra thẻ <span> như Label

Panel và PlaceHolder: dùng để chứa các điều khiển khác Có thể kéo thả các điều khiển khác vào Panel nhưng không thể làm điều đó với PlaceHoder Chỉ có thể thêm các điều khiển khác vào PlaceHolder trong lúc thi hành thông qua tập hợp Controls của điều khiển

Điều khiển Table: hiển thị dữ liệu theo các dòng lệnh đã được cài đặt

AdRotator: tạo các banner quảng cáo cho trang web, hình ảnh sẽ tự động thay đổi sau mỗi lần PostBack

AdvertisementFile: tập tin (.xml) chứa nội dung quảng cáo cho điều khiển

Đối tượng ViewState: ViewState được cung cấp để lưu lại những thông tin của trang web sau khi

web server gởi kết quả về cho Client Mặc định, các trang web khi được tạo sẽ cho phép sử dụng đối tượng ViewState thông qua thuộc tính EnableViewState (của trang web) = True

BÀI 3: LIST CONTROL - DATAGRID

I GIỚI THIỆU DATAGRID

DataGrid là một điều khiển khá linh hoạt và hiệu quả trong việc hiển thị, định dạng và thao tác với dữ liệu Bên cạnh đó, chúng ta có thể thực hiện sắp xếp dữ liệu, thực hiện phân trang với sự

hỗ trợ khá tốt của VS Net trong quá trình thiết kế

II ĐỊNH DẠNG DATAGRID

Chọn Property Builder từ menu ngữ cảnh

II.1 Trang General

• Show header: Qui định dòng tiêu đề trên có được phép hiển thị hay không (mặc định là có hiển thị dòng tiêu đề)

• Show footer: Qui định dòng tiêu đề dưới có được phép hiển thị hay không (mặc định là không hiển thị dòng tiêu đề dưới)

• Allow sorting: Có cho phép sắp xếp dữ liệu hay không (mặc định là không cho phép sắp xếp)

II.2 Trang Columns: Quản lý các cột

- Create columns automatically at runtime: Khi được chọn, DataGrid sẽ tự động phát sinh đầy đủ các cột có trong nguồn dữ liệu Muốn tùy biến hiển thị các cột thì không chọn chức năng này

- Column list: Qui định các cột được hiển thị trong lưới

• Bound Column: Cột có liên kết với nguồn dữ liệu

• Button Column: Cột dạng nút lệnh đã được thiết kế sẵn Điều khiển DataGrid cung cấp 3 loại cột dạng này:

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

o Edit, Cancel, Update: Các nút lệnh hỗ trợ chức năng cập nhật dữ liệu trực tiếp trên lưới

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

• Hyperlink Column: Cột có liên kết dữ liệu dạng liên kết

• Template Column: Cột do người dùng tự thiết kế Đây là loại cột có khả năng làm việc khá linh hoạt

- BoundColumn properties: Qui định thông tin chi tiết cho các cột

• HeaderText, Footer Text: Thông tin tiêu đề trên/dưới của cột

• Header Image: Hình hiển thị trên tiêu đề cột (thay thế thông tin tiêu đề cột - Header Text)

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

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

• DataField: Qui định tên field hay tên thuộc tính của đối tượng dữ liệu cần hiển thị

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

Mẫu định dạng: {0:<chuỗi định dạng>} Ví dụ:

+ Định dạng số: {0:000.00}, {0:0.##}

+ Định dạng ngày giờ: {0:dd/MM/yyyy}, {0:hh/mm/ss tt}

• Read Only: Chọn giá trị này để cột chỉ được phép đọc, không cho phép cập nhật dữ liệu Convert this column into a Template Column: Chuyển cột hiện hành thành cột dạng Template Column

II.3 Trang Paging (Quản lý phân trang)

- Allow paging: Có cho phép phân trang hay không

- Page size: Qui định số dòng của mỗi trang

- Show navigation buttons: Có hiển thị bộ nút để di chuyển từ trang này qua trang khác hay không Giá trị mặc định là True

- Possition: Qui định vị trí hiển thị của bộ nút di chuyển Ở phía trên thanh tiêu đề, ở phía dưới hay cả hai

- Mode: Qui định hình thức hiển thị của bộ nút di chuyển Hiển thị dạng số trang hay là các chuỗi

ký tự đại diện (Next page/Previous page button text) Trong trường hợp hiển thị dạng số, Numeric buttons qui định số nút lệnh được hiển thị tối đa

II.4 Trang Format

Trang Format quản lý việc định dạng hiển thị trên điều khiển DataGrid Các định dạng chung như: Màu chữ, màu nền, Font chữ, kích cỡ, in đậm /in nghiêng/gạch dưới và canh lề

- DataGrid: Qui định các định dạng chung cho lưới

- Header: Định dạng cho dòng tiêu đề

- Footer: Định dạng cho dòng tiêu đề dưới

- Pager: Định dạng cho dòng chứa các nút lệnh phân trang

- Items

• Normal Items: Định dạng cho các dòng dữ liệu

• Alternating Items: Định dạng hiển thị cho các dòng lẻ

• Selected Items:Định dạng hiển thị cho dòng đang được chọn

• Edit Mode Items: Định dạng hiển thị cho dòng đang ở trạng thái hiệu chỉnh dữ liệu

- Columns: Qui định độ rộng và các định dạng riêng cho từng cột

II.5 Trang Border

• Cell padding: khoảng cách giữa đường biên của ô với nội dung bên trong ô