bài 1 làm quen với asp.net

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… Ứng dụng Web Server Ứng dụng Web là một ứng dụng client/ser

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

Mục tiêu bài học

1 Giới thiệu về mô hình MVC

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 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…

Ứng dụng Web

Server

Ứ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…

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áchnhập địa chỉ (URL) vào trình duyệt

Ví dụ về URL:

http://www.vietphotoshop.com/html/html_chapter_1.htm

Ứ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áchnhập địa chỉ (URL) vào trình duyệt

Hai loại ứng dụng Web

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

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 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

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

Demo Chạy thử một ứng dụng Web ASP.NET

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

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

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

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

Web Form

Trang ASP.NET (file aspx)

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)

Mã đánh dấu (Mark Code) Trình bày giao diện

Mã lập trình (xử lý sự kiện)

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

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…

Web Form

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

Chứa mã đánh dấu và mã gọi

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

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…

Mã aspx: Chứa các mã trình bày giao diện trang: HTML,

< head runat ="server">

<title>Một Web Form đơn giản</title>

</ head >

< body style =" height : 141px">

<form id="frmSimpleWebForm" runat="server">

< div style =" height : 133px">

Đây là một Web Form đơn giản

code-Inherits chỉ ra tên lớp của Web Form

<% @ Page Language ="C#" AutoEventWireup ="true" CodeFile ="SimpleWebForm.aspx.cs"

Inherits ="SimpleWebForm" %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

< html xmlns ="http://www.w3.org/1999/xhtml">

< head runat ="server">

<title>Một Web Form đơn giản</title>

</ head >

< body style =" height : 141px">

<form id="frmSimpleWebForm" runat="server">

< div style =" height : 133px">

Đây là một Web Form đơn giản

Mã cs: Chứa các phương thức xử lý sự kiện trang

protected void btnSubmit_Click(object sender, EventArgs e)

{

// Mã xử lý sự kiện người dùng nhấn vào button Submit

}

}

Khai báo các namespace cần thiết

Tên lớp thừa kế lớp Page Tên lớp này được khai báo trong dòng chỉ dẫn @Page của fle aspx

protected void btnSubmit_Click(object sender, EventArgs e)

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

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

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

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

Phản hồi– Bẫy sập

Vòng đời của một trang Web

Sự kiện trong vòng đời của một trang Web

Init

Load

Sự kiện (Event)

protected void Page_Init(object sender,

sender, EventArgs e) { }

protected void Page_Unload (object

sender, EventArgs e) { }

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”

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

trao đổi giữa Client và Server

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

việc với các đối tượng này

Đối tượng Request/Response

HTTP Request

HTTP Response

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

trao đổi giữa Client và Server

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

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ạomột sự kiện, trang sẽ được gửi trở lại server và trải quavò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

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ạomột sự kiện, trang sẽ được gửi trở lại server và trải quavò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

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)

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

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)

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

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

Visual Studio là một bộ sản phẩm gồm IDE và 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.

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.

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 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

Giao diện Visual Studio

Vùng làm việc chính

- Lập trình viên có thể sửa nội dung các File aspx, cs

- Các File được hiển thị

ở ba chế độ Design hoặc Split hoặc Source.

Vùng làm việc chính

- Lập trình viên có thể sửa nội dung các File aspx, cs

- Các File được hiển thị

ở 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 Web

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 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

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

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)

Demo Thêm một phương thức

xử lý sự kiện cho Web Form

Build: Tạo file

solution

Build & Chạy ứng dụng

Chạy ứng dụng

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

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

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

Demo Đối tượng Request và Response

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

protected void btnSubmit_Click(object sender, EventArgs e)

{

Response.Redirect ( "OutPut.aspx?MaSP="+txtMaSP.Text+"&TenSP="+txtTenSP.Text+

"&SoLuong="+txtSoLuong.Text+"&Gia="+txtGia.Text);

}

Thêm trang OutPut

Demo Đối tượng Request và Response

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.QueryStrin g[ "SoLuong"]);

int Tong = Gia*SoLuong;

Response.Write( "Tổng: " + Tong.ToString());

}

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

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

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

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

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

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ự để

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ự để

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

Gỡ lỗi ứng dụng

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.

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.

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

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

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

Sử dụng tính năng Trace (tự học)

Sử dụng tracepoint (tự học)

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

Sử dụng tính năng Trace (tự học)

Sử dụng tracepoint (tự học)