You are on page 1of 31

Xy dng ng dng Web Form ASP.

NET
ThS. Nguyn H Giang

Ni dung
Tng quan lp trnh ng dng Web M hnh thc thi ASP.NET page Xy dng Web Form HTML Control v Web Cotrol B sung code vo Page Page Event Life Cycle Postback event

8/28/2012

Nguyen Ha Giang - 2009

Tng quan lp trnh UD Web


ng dng Web l h thng phc tp
Giao din

Web Application

Ngn ng

Giao thc

Phn mm

Phn cng

8/28/2012

Nguyen Ha Giang - 2009

HTTP - HTML
Nn tng cho lp trnh web HTTP (HyperText Transfer Protocol): giao thc cho php hai my tnh trao i thng tin vi nhau qua mng HTTP c xc nh qua URL (Uniform Resource Locators) Tham s truy vn
http:// <host> [:port] [<path> [? <query> ]]

Tn ca host hay a ch IP
8/28/2012

ng dn n tp tin yu cu
4

Nguyen Ha Giang - 2009

HTTP - HTML

http://www.abcxyz.com/beginner/default.aspx Trang web default.aspx c lu tr trong th mc /beginner ca web server c host l www.abcxyz.com

8/28/2012

Nguyen Ha Giang - 2009

(HyperText Markup Language)


Trang web l tp tin vn bn c vit bng ngn ng HTML HTML s dng cc k hiu quy c (tag) trnh by ni dung vn bn
Ni dung nh dng
<html> <head> <head> <body> </body> </html>

Kt qu

Trang ch ASP.NET

8/28/2012

Nguyen Ha Giang - 2009

Client Server Side


Client Side
HTML, JavaScript, CSS. Khi web browser yu cu mt trang web (dng k thut client side), web server tm v tr trang web v cho client, client nhn kt qu v hin th ln mn hnh.

Server Side
M lnh server c bin dch v thi hnh, kt qu t ng chuyn sang HTML/JavaScript/CSS v tr v cho client.
8/28/2012 Nguyen Ha Giang - 2009 7

C ch thi hnh ASP.NET


M hnh thc thi trang ASP.NET

Request

ASPX Engine

Respond
HTML

Page DLL

8/28/2012

Nguyen Ha Giang - 2009

C ch thi hnh ASP.NET (2)


Request

Server tm tp tin

X l tp tin aspx

Error Bin dch li

Thay i?

Lu tr li dng DLL Respond

Khng Thi hnh trang aspx


Nguyen Ha Giang - 2009 9

8/28/2012

Xy dng Web Form


Phn m rng l aspx Ch dn @Page xc nh ngn ng s dng
<%@ Page Language=C# %>

Cc i tng cha trong tag Form c thuc tnh runat =server Cha m client v server Cha HTML v Server control
8/28/2012 Nguyen Ha Giang - 2009

<Form runat=server> </Form>

10

Xy dng Web Form


Web form l dng m hnh i tng Tuy c to t cc thnh phn phn bit, nhng ASP.NET s bin dch form thnh mt lp ng Lp ny dn xut t ASP.NET Page class Lp c m rng vi control, code v HTML trong file aspx. Tt c control trong web form l i tng, do c thuc tnh, phng thc v s kin!
8/28/2012 Nguyen Ha Giang - 2009 11

Web Form minh ha


<%@ Page Language="C# CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> <html > <head runat="server"> <title></title> </head> <body> Object <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> </form> </body> </html> Object

8/28/2012

Nguyen Ha Giang - 2009

12

Server control
i tng c lp trnh server C thuc tnh runat = server C cc hnh vi c xy dng trc, cc thuc tnh, phng thc v s kin c th c truy cp lc run time server. C th to Server control t HTML control bng cch b sung runat =server
<input type=text runat=server>
8/28/2012 Nguyen Ha Giang - 2009 13

Cc loi Server Control


Server Control
HTML Control Web Control

System.Web.UI.HtmlControls

System.Web.UI.WebControls

8/28/2012

Nguyen Ha Giang - 2009

14

Server Control
HTML control
<form id="form1" runat="server"> <input type="text" id="Text1" runat="server" /> <button type="submit" id="Button1" runat="server" >Add</button> </form>

Web Control
<form id="form1" runat="server"> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /> </form>

8/28/2012

Nguyen Ha Giang - 2009

15

HTML Control
Cho php Web developer tn dng sc mnh ca Web form trong khi vn duy tr tnh quen thuc v d dng ca thnh phn HTML
<input type="text" id="Text1" runat="server" />

Thuc tnh id l duy nht, cho php thao tc ni dung ca text box s kin server-side v code khc.

8/28/2012

Nguyen Ha Giang - 2009

16

Web Controls
Tng t nh cc form control: TextBox, Button, Calendar, DataGrid Web control phn thnh cc nhm
Intrinsic control Rich control Validation control List control
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
System.Web.UI.WebControls

Web control xut hin theo dng namespace tag tag vi tin t
8/28/2012 Nguyen Ha Giang - 2009 17

Cch thc Server control lm vic


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

Khi trang ASP.NET thc thi


To ra cc hnh ng v phng thc ca form Thm id duy nht v cc tn thuc tnh cho form Thm gi tr thuc tnh cho control. Thm nhng hidden control vo form lu tr view state

Thuc tnh runat=server cho php form duy tr view state ca cc control trong trang ASP.NET Khi page c submit cho server, page t ng add hidden control tn __VIEWSTATE vo form. Nu form trng thi modified, __VIEWSTATE c s dng lu gi tr Cho php page c th lu tr qua nhiu ln request.
8/28/2012 Nguyen Ha Giang - 2009 18

Minh ha cch thc Server control


V d to form n gin cho php user nhp tn v chn cng vic trong list box

Gi s hai thng tin l Nguyen Ha Giang v Software Engineer c submit

8/28/2012

Nguyen Ha Giang - 2009

19

Minh ha cch thc Server control


Khi ASP.NET page trn thc thi
To ra action v method cho form post back! Add id duy nht v name cho form, nu gi tr ny cha xc nh trong tag ca form Mi control th add thuc tnh gi tr vi gi tr cha trong control khi form c submit. iu ny gip duy tr trng thi ca server control Add hidden control tn __VIEWSTATE lu tr trng thi thay i ca trang.
8/28/2012 Nguyen Ha Giang - 2009 20

HTML tr v cho client


<form name="form1" method="post" action="Default.aspx" id="form1"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJLTg4MDExMjk1ZGTPiid0B5TjkVAu/zFnLFbsP7V62A==" /> </div> <div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKN07qsCwKfwImNCwKgwImNCwKlwImNC5Wda/j4g71FL/vusvfdLD1xj6yp" /> </div> Name: <input name="ctl02" type="text" value="Nguyen Ha Giang" /> <p></p>Profession: <select name="ctl03"> <option selected="selected" value="Software Engineer">Software Engineer</option> <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>

8/28/2012

Nguyen Ha Giang - 2009

21

Vit code cho ASP.NET


To trnh x l s kin
Gn tn phng thc cho thuc tnh s kin
<input type="submit" value="Submit!" onServerClick="GreetMe" runat="server" id=Button1/>

To trnh x l s kin trong code page


public void GreetMe(object sender, EventArgs e) { Button1.Value = "Hello!"; }

8/28/2012

Nguyen Ha Giang - 2009

22

Vit code cho ASP.NET

Respond

8/28/2012

Nguyen Ha Giang - 2009

23

Vit code cho ASP.NET


Code c th vit trong file *.aspx theo cc th sau:
<% %> c th khai bo bin, hm, lp trong th hin. <%=%>: dng gi gi tr t bin, hm <%#%>: ly gi tr dng trong trang rng buc d liu.

8/28/2012

Nguyen Ha Giang - 2009

24

Vit code cho ASP.NET

<body> <form id="form1" runat="server"> <div> <% string hello = "Hello ASP.NET World!"; %> Bin khai bo c gi tr: <%=hello %> </div> </form> </body>

Khai bo bin

S dng bin

8/28/2012

Nguyen Ha Giang - 2009

25

Vit code cho ASP.NET


*.aspx <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="Gn gi tr: "></asp:Label> <br /> Ly gi tr t code behind: <%=CodeBehindData %> </div> public partial class WebForm1 : System.Web.UI.Page </form> { </body> protected string CodeBehindData; protected void Page_Load(object sender, EventArgs e) Khai bo public { hoc protected CodeBehindData = "Hello ASP.NET World!"; truy xut trong Label1.Text = CodeBehindData; aspx } } *.aspx.cs
8/28/2012 Nguyen Ha Giang - 2009 26

S l s kin Page
Page event life cycle
Page.Init
Control events
Change Events Action Events Minh ha cc s kin khi trang c view

Page.Load Textbox1.ServerChange Button1.ServerClick Page.Unload

Page is disposed
8/28/2012 Nguyen Ha Giang - 2009 27

S l s kin Page
Page_Init: sau s kin ny th page c khi to, s kin chu trch nhim cho tt c hot ng khi to Page_Load: xut hin t ng mi khi form c load, c th khi to gi tr mc nh cho cc server control y Changed event: sau s kin Page_Load, cc s kin c bit ca control c kch hot Mc nh ch c s kin Click submit form cho server, s kin changed c lu tr v x l khi form c post v server. Click event: dn n vic post form v sau cc s kin changed c thc hin Page_Unload: l s kin cui cng trc khi page b loi b, s kin ny pht sinh khi user qua page khc. Ti thi im ny khng th c gi tr ca control do control khng cn tn ti
8/28/2012 Nguyen Ha Giang - 2009 28

Postback Form
ViewState control duy tr trng thi ca page trong sut qu trnh postback Page_Load c kch hot sau mi ln request
S dng thuc tnh IsPostBack kim tra
protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { // thi hnh phn khi to } else { // lm iu g cho mi ln request } }
8/28/2012 Nguyen Ha Giang - 2009 29

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 Ha Giang"); listbox1.Items.Add("Nguyen Ha Nam"); listbox1.Items.Add("Nguyen Ha Quy Mui"); Submit.Value = "First!"; } else { listbox1.Items.Add("More request!"); Submit.Value = "More!"; } }
8/28/2012 Nguyen Ha Giang - 2009 30

Review
Thuc tnh no c s dng cho bit l Server control? Lm th no to ra trnh x l s kin click ca mt HTML button control? S kin no xut hin khi page c hin th? HTML control c th x l trn server c khng? Gi tr IsPostback ca Page lm g?
8/28/2012 Nguyen Ha Giang - 2009 31