Lập trình web form ASP.net

HyperText Markup Language• Trang web là tập tin văn bản được viết bằng ngôn ngữ HTML • HTML sử dụng các ký hiệu quy ước tag để trình bày nội dung văn bản... Cơ chế thi hành ASP.NET• Thà

Công nghệ NET

2 - WebForm – Basic Web Control

Công nghệ NET

2 - WebForm – Basic Web Control

GV: Lương Trần Hy Hiến, Khoa CNTT, ĐHSP TpHCM

Ch ươ ng 3: L ậ p trình Web Form

Ch ươ ng 3: L ậ p trình Web Form

HIENLTH, FIT of HCMUP, Vietnam

Tổng quan lập trình UD Web

• Ứng dụng Web là hệ thống phức tạp

Phần cứng Phần mềm

Giao thức Ngôn ngữ

Giao Giao diện diện Web Application

HTTP - HTML

• HTML là nền tảng cho lập trình web

• HTTP (HyperText Transfer Protocol): giao thức cho phép hai máy tính trao đổi thông tin với nhau qua mạng

• HTTP được xác định qua URL (Uniform

Resource Locators)

http:// < host > [: port ] [< path > [? < query > ]]

Tham số truy vấn

HTTP - HTML

http:// www.abcdef.com / beginner/ default.aspx

Trang web default.aspx được lưu trữ trong thư mục /beginner của web server có host là

www.abcdef.com

(HyperText Markup Language)

• Trang web là tập tin văn bản được viết bằng ngôn ngữ HTML

• HTML sử dụng các ký hiệu quy ước (tag)

để trình bày nội dung văn bản

8

Client – Server Side

• Client Side

– HTML(5), JavaScript, CSS(3)

– Khi web browser yêu cầu một trang web

(dùng kỹ thuật client – side), web server tìm và trả trang web về cho client, client nhận kết

quả và hiển thị lên màn hình

• Server Side

– PHP, ASP.NET, JSP, Python, CGI,…

– Mã lệnh ở server được biên dịch và thi hành, kết quả tự động chuyển sang

Giới thiệu ASP.NET

• ASP.NET

– Active Server Page NET

– Công nghệ của Microsoft cho phép xây dựngcác ứng dụng web động

– Dựa trên nền tảng NET Framework

– Được phát triển lên từ ASP

10

Các loại ASP.NET

• Web Pages:

– Dùng trong phát triển nhanh website dễ dàng kết nối

cơ sở dữ liệu và sử dụng cú pháp Razor

Các dạng project ASP.NET

• Web Application

– ASP.NET Web Application

– ASP.NET Web Service Application

• Web Site

– ASP.NET Web Site

– ASP.NET Web Service

12

Demo cách tạo

So sánh giữa ASP.NET với PHP

Môi tr ường Linux, Unix, Mac

OS X, Windows

Windows

So sánh giữa ASP.NET với PHP

14

T ốc độ

http://www.wrensoft.com/zoom/benchmarks.html

Cấu trúc 1 ứng dụng web

Cấu trúc 1 ứng dụng web

16

• Tách biệt phần lập trình logic và phần thể hiện presentation/markup

• Có thể chỉ định code-behind cho file aspx

Cơ chế thi hành ASP.NET

• Thành phần thực thi

– Các thành phần thực thi của Web được lưu trong file dll và chạy trên server dưới sự điều khiển của IIS

Cơ chế thi hành ASP.NET

• Mô hình thực thi trang ASP.NET

ASPX Engine

Page DLL

HTML

Request Respond

Cơ chế thi hành ASP.NET

• Mô hình thực thi trang ASP.NET

Cơ chế thi hành ASP.NET (2)

Request

(Yêu cầu)

Respond (Hồi đáp)

Không

– Double click file solution (.sln)

– File > Open Project/Solution > chọn file sln

• Web Site

– File > Open Website > File System – browse tới thư mục gốc Web Site

22

Web App vs Web Site

• Cấu trúc và thao tác hoàn toàn giống nhau

file trên

nhất trong bin, Web Site tạo ra rất nhiều file dll với tên bất kỳ => khó khăn trong việc bảo trì

=> Nên chọn Web App để phát triển

Compile & Execute

• Biên dịch: Bulid > Build Solution

– Debug: Debug > Start Debugging (F5)

– Release: Debug > Start without Debugging

(Ctrl + F5)

• Mặc định, trang Default.aspx sẽ được thực thi trên browser.

• Thay đổi trang mặc định, click phải trên

file aspx > Set As Start Page

24

Compile & Execute (tt)

CẤU TRÚC WEB FORM

26

Tổng quan

• Một webform bao gồm các thành phần:

– Page Directives

– Code Declaration Blocks [*]

– Code Render Blocks

– Web Controls

– Server-side comments

– Literal text and HTML tags

• [*] có thể đặt trực tiếp trên WebForm hay tách biệt trong file Code-Behind

Cấu trúc

28

AutoEventWireup, CodeBehind, Inherits,

CodeFile …

• Ví dụ:

<%@ Page Language ="C#" AutoEventWireup ="true"

CodeBehind ="Page01.aspx.cs" Inherits ="WebApp1.Page01" %>

Web Form minh họa

<%@ Page Language="C#“ CodeBehind="Default.aspx.cs"

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Button ID="Button1" runat="server" Text="Button" />

Code declaration blocks

• Được khai báo nếu phần xử lý logic của chương trình được thể hiện ngay trong Web Form

Void Page_Load( … )

{

//code here

Code render blocks

• Là đoạn code được thực thi khi một trang được nạp hoặc trả nội dung về phía người dùng.

• Gồm 2 loại:

– Inline code

– Inline expression

32

Inline code

• Bao gồm các nội dung xử lý trên server

nhưng không trả nội dung về trình duyệt.

• Thường dùng để khai báo biến.

• Được khai báo trong cặp thẻ <% … %>

<%

String title = “This is generated by a code

render block.”;

%>

Inline Expression

• Code xử lý trả thông tin về trình duyệt

• Thông tin trả về có thể là nội dung biến

hoặc kết quả của việc gọi phương

– HTML comment sẽ gửi thông tin về trình duyệt

=> KHÔNG thích hợp comment ASP.NET

– ASP.NET comment được dùng để ẩn thông tin đối với

Literal Text & HTML Tags

• Cung cấp cấu trúc định dạng thông tin

trang web (thông qua các thẻ html) cùng với nội dung hiển thị tĩnh (literal text).

• Nếu không có thành phần này, trang web

sẽ không có cấu trúc và có thể trình duyệt không hiển thị được.

36

Web Controls

• Gồm 3 loại:

– HTML Control

– HTML Server Control

– ASP.NET Standard Control

• Các control phải nằm trong cặp thẻ form

HTML

Server Control

Server Control

• HTML control

• Web Control

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

<input type="text" id="Text1" runat="server" />

<button type="submit" id="Button1" runat="server" >Add</button>

</form>

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

< asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

< asp:Button ID="Button1" runat="server" Text="Button" />

</form>

Cách thức Server control làm việc

• Khi trang ASP.NET thực thi

– Tạo ra các hành động và phương thức của form

– Thêm id duy nhất và các tên thuộc tính cho form

– Thêm giá trị thuộc tính cho control.

– Thêm những hidden control vào form để lưu trữ view state

• Thuộc tính runat=“ server ” cho phép form duy trì view state của các control trong trang ASP.NET

• Khi page được submit cho server, page tự động add hidden control tên VIEWSTATE vào form.

• Nếu form ở trạng thái modified, VIEWSTATE được sử dụng để lưu giá trị

Minh họa cách thức Server control

• Ví dụ tạo form đơn giản cho phép user

nhập tên và chọn công việc trong

DropDownList

Giả sử hai thông tin là Nguyen Mai Chi

và Software Engineer được submit

Minh họa cách thức Server control

• Khi ASP.NET page trên thực thi

– Tạo ra action và method cho form post back!– Add id duy nhất và name cho form, nếu giá trị này chưa xác định trong tag của form

– Mỗi control thì add thuộc tính giá trị với giá trị chứa trong control khi form được submit Điều này giúp duy trì trạng thái của server control

trữ trạng thái thay đổi của trang

<option value="Software Tester">Software Tester</option>

<option value="Software Manager">Software Manager</option>

</select>

<p></p> <input name="ctl04" type="submit" value="Save" />

</form>

ASP.NET Event Model

• ASP.NET sử dụng mô hình lập trình hướng

sự kiện:

– Event: Click, Load, …

– Event Handler: hàm xử lý khi có sự kiện xảy ra

• OnUnLoad

• OnDispose: button được giải phóng khỏi bộ nhớ

• OnDataBinding: Server control trên trang được gắn kết với nguồn dữ liệu

Xử lý sự kiện Page

• Page event life cycle

Minh họa các sự kiện khi

trang được view

Page.Load

Page.Unload

Textbox1.ServerChange Button1.ServerClick

• Click even t: dẫn đến việc post form và sau đó các sự kiện

changed được thực hiện

• Page_Unload : là sự kiện cuối cùng trước khi page bị loại bỏ,

sự kiện này phát sinh khi user qua page khác Tại thời điểm

này không thể đọc giá trị của control do control không còn tồn tại

Một số thuộc tính của page

• Thuộc tính IsPostBack :

– False : Page load lần đầu

– True : Page load lại

// làm điều gì đó cho mỗi lần request

Postback Form

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

<asp:ListBox ID="listbox1" runat="server" Width="160px"></asp:ListBox>

<br /><input type="submit" id="Submit" runat="server" />

</form>

protected void Page_Load(object sender, EventArgs e) {

if ( !Page.IsPostBack) {

listbox1.Items.Add("Nguyen Mai Chi");

listbox1.Items.Add("Nguyen Thanh Hai");

listbox1.Items.Add("Nguyen Mong Thao");

• Sự kiện nào xuất hiện khi page được hiển thị?

• HTML control có thể xử lý trên server được không?

• Giá trị IsPostback của Page để làm gì?

Q & A

THE END