Bài 1 - Làm Quen V I ASP - NET - Giáo Trình FPT - Có VÍ D Kèm Theo PDF

Bài 1:
LÀM QUEN VỚI ASP.NET

Mục tiêu bài học
Giới thiệu về ASP.NET & các khái niệm cơ bản

Ứng dụng Web
ASP.NET
Cấu trúc ứng dụng ASP.NET
Web Form
Sự kiện
Đối tượng Request/Response
PostPack
Làm quen với ASP.NET 2

Mục tiêu bài học
1. ASP.NET & Các khái niệm cơ bản

1. Giới thiệu về mô hình MVC
2. Phát triển ứng dụng ASP.NET
3. Kiểm thử và gỡ lỗi ứng dụng

Ứng dụng Web
Ứng dụng Web là một ứng dụng client/server được

truy cập thông qua trình duyệt Web trên mạng
internet hoặc intrannet.
Một ứng dụng Web gồm tập hợp các trang Web được
viết bằng ngôn ngữ do trình duyệt hỗ trợ như: html,
asp.net, java, javascript… Server
Máy client
Internet
Trình duyệt Server Web

Web
Server CSDL
Ứng dụng Web
Người dùng tại máy client sử dụng trình duyệt gửi yêu
cầu tới Server Web. Server Web xử lý và gửi lại
phản hồi tới trình duyệt. Trình duyệt xử lý và hiển
thị giao diện trang Web cho người dùng
Trình duyệt Web và Server Web sử dụng giao thức HTTP
để trao đổi thông tin.
Người dùng gửi yêu cầu HTTP tới trình duyệt bằng cách
nhập địa chỉ (URL) vào trình duyệt
Ví dụ về URL:
http://www.vietphotoshop.com/html/html_chapter_1.htm
Người dùng gửi yêu cầu

bằng cách nhập địa chỉ
URL

Ứng dụng Web
Hai loại ứng dụng Web

Web tĩnh
Viết bằng ngôn ngữ đánh dấu văn bản (HTML)
Không có CSDL đi kèm với ứng dụng
Trang .html chỉ xây dựng với mục đích cung cấp thông tin
Ví dụ:
http://www.vietphotoshop.com/html/html_chapter_1.htm
Web động
Viết bằng ngôn ngữ: Asp.net, JSP, PHP…
Có tương tác với người dùng. Nội dung trang là động, hiển
thị khác nhau đáp ứng các sự kiện (nhập liệu, nhấn chuôt…)
của người dùng
Lưu trữ dữ liệu trong CSDL
http://www.bodua.com/tailieu.aspx?bdg=114&bdgs=7
ASP.NET
ASP.NET là một framework được phát triển để xây

dựng các trang web động kết hợp giữa HTML, CSS,
JavaScript và mã kịch bản phía server.
ASP.NET là một phần
của .NET Framework

Demo
Chạy thử một ứng dụng Web ASP.NET
Nội dung demo:

Chạy thử ứng dụng Web ASP.NET
Nhập thông tin vào các trường
Nhấn chuột vào button Calculate và Clear để khám phá sự
thay đổi nội dung của trang Web động


1. Thư mục các lớp của ứng dụng
2. Thư mục chứa file CSDL
3. Thư mục chứa File ảnh
4. Các Web Form tương ứng với
các trang của ứng dụng
5. File cấu hình ứng dụng
Các thành phần 4, 5 là thành
phần bắt buộc phải có
Ngoài ra còn có thêm thư mục:
chứa file css…

Web Form
Trong một ứng dụng ASP.NET, mỗi trang Web được gọi
là một Web Form
Có hai mô hình viết mã cho một Web Form
1. Mô hình trang đơn
Trang ASP.NET
(file .aspx)
-Điều khiển
HTML
Mã đánh dấu Mã lập trình
C#
- Điều khiển
(Mark Code) (xử lý sự kiện)
hoặc VB
ASP.NET
- CSS…. Trình bày giao diện

Web Form
2. Mô hình trang code-behind (code-behind page model)
File chứa mã đánh dấu (.aspx) File code-behind (.cs)
Gọi (Call)
Chứa mã đánh dấu và mã gọi Chứa các mã lập trình xử lý sự
file code-behind kiện trang
Hầu như các lập trình viên ASP.NET đều sử dụng mô

hình Code-behind vì có nhiều ưu điểm: dễ viết và đọc
mã, hỗ trợ bởi visual studio…

Ví dụ về Web Form
sử dụng mô hình Code-behind
Mã aspx: Chứa các mã trình bày giao diện trang: HTML,
ASP.NET, CSS…
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SimpleWebForm.aspx.cs"
Inherits="SimpleWebForm" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Dòng chỉ dẫn <@Page….>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Thuộc tính CodeFile chỉ ra tên file code-
behind của WebForm
<html xmlns="http://www.w3.org/1999/xhtml"> Inherits chỉ ra tên lớp của Web Form
<head runat="server">
<title>Một Web Form đơn giản</title> Tiêu đề trang
</head>
<body style="height: 141px">
<form id="frmSimpleWebForm" runat="server">
<div style="height: 133px"> Phần nội dung trang
Đây là một Web Form đơn giản Web nằm trong thẻ
<br /> <form>
User:
Chứa: Đoạn văn bản,
<asp:TextBox ID="txtUser" runat="server"></asp:TextBox>
<br /> mã HTML, điều khiển
<asp:Button ID="btnSubmit" runat="server" Text="Submit" /> ASP.NET
</div>
</form>
</body>
</html>
Ví dụ về Web Form
sử dụng mô hình Code-behind
Mã cs: Chứa các phương thức xử lý sự kiện trang
using System;
Khai báo các namespace cần thiết
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; Tên lớp thừa kế lớp Page. Tên lớp
này được khai báo trong dòng chỉ
public partial class SimpleWebForm : System.Web.UI.Page
dẫn @Page của fle aspx
{
protected void Page_Load(object sender, EventArgs e)
{
// Các mã xử lý sự kiện Load của trang
// Thường là các mã khởi tạo giá trị Default cho các điều khiển
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
// Mã xử lý sự kiện người dùng nhấn vào button Submit
}
}

Sự kiện
Sự kiện là những hành động được người dùng kích
hoạt trên Web Form khi ứng dụng đang chạy.
Ví dụ: Nhấn vào button, nhấn phím
ASP.NET là mô hình lập trình hướng sự kiện
Mỗi sự kiện được xử lý bởi một khối mã nằm trong file
.cs, gọi là phương thức xử lý sự kiện.
Hai loại sự kiện Phản hồi– Bẫy
sập
Sự kiện tự động kích hoạt
Các sự kiện trong vòng đời của trang
Sự kiện do người người dùng kích hoạt
Sự kiện – Chuột
lấy mồi

Sự kiện trong
vòng đời của một trang Web
Vòng đời của một trang Web
protected void Page_Init(object sender,
EventArgs e) { } Init
protected void Page_Load(object sender, Load

EventArgs e) { }
Sự kiện
(Event)
protected void Page_PreRender (object
sender, EventArgs e) { } Pre Render
protected void Page_Unload (object Unload

sender, EventArgs e) { }

Phương thức xử lý sự kiện
Một phương thức xử lý sự kiện đơn giản

Khi người dùng nhấn chuột vào button Submit. Trang Web
sẽ hiển thị dòng chữ “Bạn vừa bấm vào button Submit”

{
Response.Write("Bạn vừa bấm vào button Submit";

ASP.NET duy trì các thông tin

trao đổi giữa Client và Server HTTP Response
thông qua các đối tượng:

Request
HTTP Request
Response
Server
ASP.NET cung cấp các lớp
HttpRequest , HttpResponse,
HttpServerUtility thuộc
namespace System.Web để làm
việc với các đối tượng này

PostPack
PostPack là quá trình gửi trở lại các thông tin từ trình
duyệt tới Server để xử lý.
Khi người dùng tương tác với trang web bằng cách tạo
một sự kiện, trang sẽ được gửi trở lại server và trải qua
vòng đời giống như một trang mới.
Thuộc tính IsPostPack của lớp Page được dùng để
kiểm tra trang được yêu cầu lần đầu tiên hay là kết quả
của quá trình PostPack

Môi trường
phát triển ứng dụng ASP.NET 4
Ba môi trường phát triển ứng dụng ASP.NET

Môi trường máy tính độc lập (Một máy tính đóng vai trò là
client đồng thời là server)
Môi trường mạng LAN (Đọc SGK)
Môi trường Internet (Đọc SGK)
Phần mềm: - Window XP hoặc phiên bản cao hơn

- .NET Framework 4
- Visual Studio 2010
- Tùy chọn: IIS, SQL Server
Môi trường phát triển độc lập
Sinh viên sẽ sử dụng môi trường độc lập để phát triển

ứng dụng ASP.NET
Visual Studio 2010
Visual Studio là một bộ sản phẩm gồm IDE và .NET

Framework sử dụng để
Phát triển
Debug
Đóng gói (Deploy)
các ứng dụng .NET
Visual Studio cũng là một công cụ hữu ích để phát triển

các ứng dụng ASP.NET
Sinh viên đã được làm quen với tính năng và các phiên
bản của công cụ này trong môn lập trình Windows.

Demo
Tạo ứng dụng Web
Mở chương trình Visual Studio
Tạo một ứng dụng Web
Mở Menu File > New > Web Site để mở hộp thoại New
Web Site

Demo
Thêm một Web Form
Làm quen với ASP.NET

Chọn checkbox để tạo Web Form
24
theo mô hình trang Code-behind
Giao diện Visual Studio
Solution
Toolbox Vùng làm việc chính Explorer
chứa các - Lập trình viên có thể chứa cấu
điều khiển sửa nội dung các File trúc file và
thiết kế aspx, cs.. thư mục của
giao diện - Các File được hiển thị ứng dụng
Web Form ở ba chế độ Design
hoặc Split hoặc Source.
Cửa sổ
Properties.
Để chỉ định
các thuộc
tính cho các
thành phần
của trang
Các nút bật chế độ Design, Split, Source
Web
Demo
Tạo giao diện Web Form
Nội dung demo

Tạo giao diện Web Form giống như
hình bên
Định dạng hiển thị cho chữ,
textbox, label…
Bài tập VN: Sinh viên tìm hiểu các
thuộc tính khác của cửa sổ
Properties

Demo
Sử dụng thuộc tính IsPostPack
Sự kiện Page_Load
thường kết hợp với thuộc
tính IsPostPack để thiết
lập giá trị mặc định của các
điều khiển.

Demo
Thêm một phương thức
xử lý sự kiện cho Web Form
Thêm trình xử lý sự kiện cho button xóa (btnReset_Click)
Chuột phải >

Properties
Danh sách các sự

kiện. Nhấn đúp vào để
thêm sự kiện vào Web
Form
Demo
Thêm một phương thức
xử lý sự kiện cho Web Form
Thêm trình xử lý sự kiện cho button Tính

(btnSubmit_Click)

Build & Chạy ứng dụng
Build: Tạo file Chạy ứng dụng

solution
Mặc định, ứng dụng sẽ chạy trên trình duyệt IE.

Để thay đổi thiết lập trình duyệt chạy ứng dụng web
Chuột phải >

Browse With
- Chọn trình duyệt

- Click vào Set as
Default

Demo
Đối tượng Request và Response
Sửa lại ứng dụng. Sau khi Click vào button “Tính” sẽ
chuyển sang trang mới hiển thị thông tin sản phẩm và
kết quả tính toán
Đoạn mã xử lý sự kiện click vào button “Tính”

{
Response.Redirect("OutPut.aspx?MaSP="+txtMaSP.Text+"&TenSP="+txtTenSP.Text+
"&SoLuong="+txtSoLuong.Text+"&Gia="+txtGia.Text);
}
Demo
Đối tượng Request và Response
Thêm trang OutPut
Thêm mã cho sự kiện Page_Load của trang OutPut

protected void Page_Load(object sender, EventArgs e)
{
Response.Write("Thông tin trong chuỗi Request gồm: <br/>");
Response.Write("Mã sản phẩm: " + Request.QueryString["MaSP"] + "<br/>");
Response.Write("Tên sản phẩm: " + Request.QueryString["TenSP"] + "<br/>");
Response.Write("Giá: " + Request.QueryString["Gia"] + "<br/>");
int Gia = Convert.ToInt32(Request.QueryString["Gia"]);
int SoLuong = Convert.ToInt32(Request.QueryString["SoLuong"]);
int Tong = Gia*SoLuong;
Response.Write("Tổng: " + Tong.ToString());
}

Kiểm thử ứng dụng
sử dụng Server phát triển ứng dụng Web
Kiểm thử ứng dụng là quá trình kiểm tra xem ứng dụng
có hoạt động chính xác.
Với ứng dụng ASP.NET, việc kiểm thử ứng dụng phải
thực hiện trên tất cả các trình duyệt
Demo:
Kiểm thử ứng dụng với trình duyệt mặc định
Kiểm thử ứng dụng với các trình duyệt khác

Hộp thoại Exception Assistant
Khi kiểm thử ứng dụng, một lỗi có thể xảy ra ngăn
không cho ứng dụng thực thi.
Khi lỗi xảy ra, một ngoại lệ sẽ được tạo.
Nếu ngoại lệ không được bắt và xử lý, ứng dụng sẽ
chuyển sang chế độ ngắt và hộp thoại Exception
Assistant sẽ hiển thị.
Hộp thoại Exception Assistant cung cấp các mô tả về lỗi
và trỏ tới vị trí câu lệnh gây lỗi trong chương trình

Gỡ lỗi ứng dụng
Sinh viên đã được làm quen với việc sử dụng Visual

Studio để gỡ lỗi ứng dụng Windows
Visual Studio cũng cung cấp các tính năng tương tự để
gỡ lỗi ứng dụng ASP.NET
Thiết lập điểm dừng
Trong file cs, tại câu lệnh bạn muốn ứng dụng dừng khi chạy.
Nhấn chuột vào thanh căn lề để thiết lập điểm dừng
Sử dụng các phím F5, F10, F11 để thực hiện debug
Sử dụng cửa sổ Watch để theo dõi sự thay đổi giá trị các
biến

Demo gỡ lỗi ứng dụng Future Value

Tổng kết
Trong bài này sinh viên đã học các nội dung sau:
ASP.NET & các khái niệm cơ bản
ASP.NET là một framework được phát triển để xây
dựng các trang web động kết hợp giữa HTML, CSS,
JavaScript và mã kịch bản phía server.
Web Form
Sự kiện
Các sự kiện trong vòng đời một trang Web
Sự kiện người dùng
PostPack

Tổng kết
Phát triển ứng dụng ASP.NET

Tạo một ứng dụng Web
Thêm một Web Form
Thiết kế giao diện Web Form
Thêm một sự kiện vào Web Form
Sử dụng thuộc tính IsPostPact
Sử dụng các đối tượng Request/Response

Tổng kết
Kiểm thử & gỡ lỗi ứng dụng

Kiểm thử ứng dụng sử dụng Server phát triển ứng dụng
Kiểm thử trên trình duyệt mặc định
Kiểm thử trên các trình duyệt khác
Kiểm thử ứng dụng sử dụng IIS (tự học)
Hộp thoại Exception Assistant
Thiết lập điểm dừng
Sử dụng các phím tắt F5, F10, F11
Theo dõi giá trị biến trong cửa sổ Watch
Sử dụng tính năng Trace (tự học)
Sử dụng tracepoint (tự học)

Bài 1 - Làm Quen V I ASP - NET - Giáo Trình FPT - Có VÍ D Kèm Theo PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bài 1 - Làm Quen V I ASP - NET - Giáo Trình FPT - Có VÍ D Kèm Theo PDF

Uploaded by

Copyright:

Available Formats

Bài 1:

LÀM QUEN VỚI ASP.NET

Giới thiệu về ASP.NET & các khái niệm cơ bản

Làm quen với ASP.NET 2

1. ASP.NET & Các khái niệm cơ bản

3. Kiểm thử và gỡ lỗi ứng dụng

Làm quen với ASP.NET 3

Ứng dụng Web là một ứng dụng client/server được

Trình duyệt Server Web

Người dùng gửi yêu cầu

Làm quen với ASP.NET 6

Hai loại ứng dụng Web

ASP.NET là một framework được phát triển để xây

Làm quen với ASP.NET 8

Nội dung demo:

Làm quen với ASP.NET 9

Cấu trúc ứng dụng ASP.NET

Làm quen với ASP.NET 10

Làm quen với ASP.NET 11

2. Mô hình trang code-behind (code-behind page model)

File chứa mã đánh dấu (.aspx) File code-behind (.cs)

Hầu như các lập trình viên ASP.NET đều sử dụng mô

Làm quen với ASP.NET 12

Làm quen với ASP.NET 14

Làm quen với ASP.NET 15

protected void Page_Load(object sender, Load

protected void Page_Unload (object Unload

Làm quen với ASP.NET 16

Một phương thức xử lý sự kiện đơn giản

protected void btnSubmit_Click(object sender, EventArgs e)

Làm quen với ASP.NET 17

ASP.NET duy trì các thông tin

thông qua các đối tượng:

Làm quen với ASP.NET 18

Làm quen với ASP.NET 19

Ba môi trường phát triển ứng dụng ASP.NET

Phần mềm: - Window XP hoặc phiên bản cao hơn

Môi trường phát triển độc lập

Sinh viên sẽ sử dụng môi trường độc lập để phát triển

Visual Studio là một bộ sản phẩm gồm IDE và .NET

Visual Studio cũng là một công cụ hữu ích để phát triển

Làm quen với ASP.NET 22

Làm quen với ASP.NET 23

Làm quen với ASP.NET

Nội dung demo

Làm quen với ASP.NET 26

Làm quen với ASP.NET 27

Thêm trình xử lý sự kiện cho button xóa (btnReset_Click)

Chuột phải >

Danh sách các sự

Thêm trình xử lý sự kiện cho button Tính

Làm quen với ASP.NET 29

Build: Tạo file Chạy ứng dụng

Mặc định, ứng dụng sẽ chạy trên trình duyệt IE.

Chuột phải >

- Chọn trình duyệt

Làm quen với ASP.NET 30

Đoạn mã xử lý sự kiện click vào button “Tính”

Thêm trang OutPut

Thêm mã cho sự kiện Page_Load của trang OutPut

Làm quen với ASP.NET 32

Làm quen với ASP.NET 34

Làm quen với ASP.NET 35