Chng 7: Web Application

Phan Trng Tin

Department of Software Engineering Hanoi University of Agricaltural Office location: 3rd floor, Administrative building Website: http://fita.edu.vn/pttien Office phone: 8276346, Ext: 132 Email:phantien84@gmail.com

Ni dung chnh
I. II. III. IV. Gii thiu ASP.Net To Web Forms Cc Control Server ca ASP.Net Cc Control Validation

I. Gii thiu ASP.Net

ASP.Net khng ging phin bn ASP. ASP.Net c cc c im mi nh :
H tr nhiu ngn ng lp trnh C cc iu khin mi H tr XML Nhiu kh nng bo mt: chng thc ngi s dng Hiu nng thc thi code cao
ASP 1.0 nm 1996 Ri phin bn ASP 2.0 v 3.0 ASP.Net cung cp mt cch tip cn khc pht trin ng dng Web.
3

Cc phin bn

Gii thiu ASP.Net

ASP.Net l mt cuc cch mng trong pht trin ng dng Web ASP.Net da trn c s .Net Framework .Net Frawork chy trn CLR. CLR c cc u im:
T ng qun l b nh H tr nhiu ngn ng Bo m vic chng thc ngi s dng D cu hnh D trin khai
4

Cc li ch m ASP.Net cung cp
H tr nhiu ngn ng lp trnh Pht trin qua nhiu ngn ng Phn giao din v phn code tch ring bit. Chng thc ngi s dng Kin trc s l mi trn server Ci tin chc nng g ri v ln vt Cu hnh ng dng vi nhiu iu khin D trin khai Ci tin cc tnh nng caching nh caching mc trang, caching mc on, caching API. Dng cc tnh nng caching trong ASP.Net s tng tc v hiu nng cho trang Web ca bn. 5

Cc m hnh lp trnh ASP.Net

.Net Framework Software development Kit (SDK) c s dng pht trin cc ng dng Web. N chy trn nn .Net Framework SDK cng vi IIS.

Hai m hnh lp trnh ASP.Net

Web Forms
Cho php bn to cc trang Web ng. Cng c th dng cc control to cc UI components M hnh lp trnh ny cho php bn thi hnh mt s cc chc nng trn server. Web Services ng vai tr quan trng trong tch hp cc ng dng trn cc nn khc nhau v n khng gii hn cng ngh. Web Services gip bn thay i d liu trn client-server hoc kin trc server-server. Web Services dng cc chun nh HTTP v XML trao i d liu
7

Web Services

Cc yu cu nn ASP.Net
ASP.Net l mt phn ca .Net Framework SDK, c download http://msdn.Microsoft.com/down loads Cn ci IE 5.5 tr ln Cc h iu hnh h tr .Net
Windows Windows Windows Windows XP Professional 2000 NT 4.0 with Service Pack 6a 98
8

II. To Web Forms

ASP.Net cho php bn to cc trang web ng nhanh hn. Cc c im Web Form:
Dng .Net Framework chy trn Web Server to cc trang web ng. Dng cc c im ca CLR nh s an ton v c s k tha. Thit k v lp trnh s dng Tool Rapid Application Development(RAD) ca VS.Net. Khng ph thuc vo client Tng thch vi bt k trnh duyt web v thit b mobile

Cc thnh phn Web Form

Giao din ngi s dng

Din t ni dung ti ngi s dng. N bao gm mt file gm code HTML hoc code XML v cc controls Server. c lu tr trong file vi ui m rng l .aspx Lm vic tng tc vi ngi s dng vi trang web form. Bt k ngn ng lp trnh .Net (Vb.Net,C#...) dng vit code logic cho trang Web. Hai m hnh vit code: code-inline v code-behind Code-inline: code c nhng trc tip vo trang ASP.Net Code-behind: code nm mt file ring, v trang ASP.Net tham chiu ti
10

Logic lp trnh(code)

Thit k Web Forms

B1: Start VS.Net vo File\New\Web Site m hp thoi New Project B2: Chn Template l ASP.NET Web Site B3: Chn ni t Website Location B4: Chn ngn ng cho trang ASP.Net Language B5: Kch OK hon thnh vic
11

Thit k Web Forms

12

Ca s VS.Net

13

ASP.Net t to cc file
Tn file Mc ch

Web.Config

Thng tin cu hnh ng dng Cc iu khin s kin mc ng dng

Th mc n cha d liu

Default.aspx

App_Data

14

Thit k Web Forms

Trang .aspx cho php bn t cc control Toolbox trc tip ln form bng cch ko th. Mc nh trang hin th ch li (grid layout) cho php bn t control trn Form ng v tr. Bn c th chuyn sang ch Flow layout th s cho php bn nh trc tip ln form.

15

Thit k Web Forms

Cch thay i: Trn form thit k, n phm F4, ca s Property c chn. Bn tm n thuc tnh Layout thay i gia hai ch . Khi thit k trong ch Design, code HTML pht sinh t ng. Bn c th xem code HTML bng cch n nt HTML di cui ca trang. Bn cng c th vit code trn cng trang HTML
16

Thit k Web Forms

Mt file code behind cng tn ti vi trang ny v khng hin th trong ca s Solution Explorer. hin th click vo icon Show All File trong ca s Solution Explorer hoc n F7 xem code ca trang . Bn cn tm hiu cc on code t ng pht sinh khi thit k form c nhng g trc khi bn sa n:
17

Thit k Web Forms

Trong ch hin th HTML
<%@ Page Language="vb" AutoEventWireup="false CodeFile="default.aspx.vb Inherits="DemoWeb.WebForm1"%> @Page ch dn cc thuc tnh ca Form v cc thuc tnh ny c tc ng ln trang ca bn. Thuc tnh Language: ngn ng .Net h tr trn trang ca bn. Thuc tnh AutoEventWireup: l gi tr Boolean ch nh cc s kin ca trang c t ng pht sinh hay khng, mc nh l False. Thuc tnh CodeFile: ch nh file code-behind Thuc tnh Inherit: ch nh tn trang m class code-behide k tha
18

Thit k Web Forms

Trong th <head> ca code HTML bn cng c th vit code cho trang ca bn
<Script runat="server language="vb"> 'Code statements </Script>

Cc controls hoc text c add trong th <body>, c nm trong khi <%%>

19

Code-behind

20

Gii thch
Public Class WebForm1
Inherits System.Web.UI.Page Class WebForm1 k tha t lp Page Lp Page nm trong namespace System.Web.UI

Hai phng thc InitializeComponent v Page_Init

InitializeComponent: bao gm code khi to cho trang nh cc control. Page_Init l s kin trang cho s kin Init ca trang.

Phng thc Page_Load dng iu khin s kin Load ca trang. Bn cng c th thm cc s kin khc trn trang.
21

Chy ng dng n Ctrl + F5

22

Th mc gc ng dng IIS
VS.Net khi to ng dng ASP.Net bn cn ch nh tn project v v tr t ng dng nh: http://localhost hoc http://<name of the computer>. V tr t ng dng l tn my tnh v tham chiu n ng dn th mc Khi pht trin ng dng ASP.Net th mc gc ca ng dng c to trong Default Web Site ca IIS Th mc ng dng nm ti:
<drive name>:\inetpub\wwwroot\<name of the project>.
23

24

III. Cc Control Server ca ASP.Net

ASP.Net cung cp cho bn nhiu control to cc trang web ng v tng tc vi ngi s dng. Cc control chp nhn m hnh lp trnh pha server m ngi s dng pha client tng tc vi control server pht sinh cc s kin s x l pha server. Trang ny c bin dch -> i tng gi l Page Khi trang c yu cu cc control server c bin dch v thc thi trn server.
25

Server Controls khc g HTML Controls thng thng?

HTML controls khng c bt k tng tc no vi server sau khi chng hin th v trn trang. Cn Server Controls cho php truy cp cc phng thc, cc thuc tnh, cc s kin ti pha Server.

26

Cc kiu Server Control

.Net Framwork h tr HTML server controls v Web server controls.
HTML server controls: l cc th HTML bn c th s dng code pha server. Nm trong namespace

s HtmlControl Web server controls: nm trong namespace

System.Web.UI.WebControls. Cc control ny

System.Web.UI.HtmlControls c ly t lp c

cng gi l Web Controls.

27

Web control cng bao gm:

List controls: l cc control to cc danh sch(list). V d c th s dng ListBox v DropDrawList Validation controls: l cc control kim tra v validate gi tr c nhp vo cc control khc trn trang. V d RequiredFieldValidator v CustomValidator Rich controls: l cc control c bit c s dng to u ra cho cc cng vic c bit. V d: Calendar v AdRotator User controls: bn c th to cc control nh cc trang Web form v nhng cc control vo trang web khc.
28

Bng HTML server control v th tng ng

HTML server control HtmlForm HtmlInputText Th HTML <form>
<input type = "text"> V <input type ="password>

HtmlInputButton
HtmlInputCheckBox HtmlInputRadioButton HtmlInputImage

<input type="button>
<input type = "check">
<input type ="radio> <input type = "image">
29

Bng HTML server control v th tng ng(tip)

HTML server control HtmlAnchor HtmlButton HtmlTable HtmlTableRow HtmlTableCell Th HTML
<a> <button> <table> <tr>

<td>

30

S khc nhau gia HTML server controls v Web controls?

Khi to ng dng web, bn phn vn nn chn HTML server control hay Web control?
Ph thuc vo yu cu ca bn v chc nng yu cu mi control. Bn phi hiu chc nng ca c hai loi server control.

So snh hai loi control:

HTML server controls v Web controls

31

S khc nhau gia HTML server cotrols v Web controls?

nh x ti th HTML(Mapping to HTML tags):
HTML server controls nh x trc tip ti th HTML, n c chuyn i thnh server control bng vic dng thuc tnh runat = server. Web control khng nh x trc tip ti th HTML. Do bn phi include control t bn th ba. HTML server control thit lp cc thuc tnh dng cp chui tn/gi tr khng nh kiu mnh. Web control thit lp theo chun property. HTML server control khng thay i ph thuc vo trnh duyt ch-> cn m bo control tr v ng vi trnh duyt. Web control tr v u ra t ng iu chnh ph thuc vo trnh duyt ch-> chc chn control tr v ng vi trnh duyt
32

M hnh hng i tng(Object Model):

Trnh duyt ch (Targe browser):

Thm cc web controls ln Form

Thm cc server control lc thit k hoc lc chy. Thm lc thit k c th dng Toolbox hoc ch HTML ca trang .aspx C th thm lc chy bng vic dng th <Script> trong trang .aspx hoc file code behind.

33

Dng Toolbox
Toolbox phn loi cc control thnh cc nhm thun tin cho vic truy cp.

34

Dng ch hin th HTML

C th thm server control bng cch ch nh code ASP.Net trc tip trong ch hin th HTML ca file .aspx.
<asp:TextBox id = "MyTextBox" runat = "server" Text = "Greetings"></asp:TextBox>

35

Dng trong code behind

ASP.Net cho php bn thm cc server control lc chy. Bn c th to mt instance ca lp Control tha k t lp c s WebControl Gi s bn mun to mt textbox lc chy:
Dim txt As New TextBox txt.ID = "txtTest" txt.Text = "ABC" Panel1.Controls.Add(txt)
36

Thit lp thuc tnh WebControl

Cc server control c cc thuc tnh thng dng k tha t lp c s WebControl. C th thit lp thuc tnh lc thit k hoc lc chy. Thit lp thuc tnh ca control lc thit k bn dng ca s Properties Hin th ca s Property ca control, kch chut phi trn control ri chn Properties t context menu hoc n F4.

37

Ca s Properties ca Textbox

38

Thit lp thuc tnh WebControl

Cng c th thit lp cc thuc tnh ca WebControl trc tip trong ch hin th HTML.
<asp:TextBox Id = "Text_Box" runat = "server" Enabled = False></asp:TextBox>

i khi cn thit lp thuc tnh lc chy. C php s dng trong lp trnh: ControlID.PropertyName = Value
V d: txtTest.Enabled = True

39

Cc s kin iu khin trong WebControl

Mi control c cc s kin ring c th iu khin trong code behind ca trang .aspx V d: nt button c s kin click
Private Sub btnAccept_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles AcceptButton.Click 'Code statements End Sub

m file code behind c th dng ca s Solution Explorer hoc n F7

40

Cc s kin iu khin trong WebControl

Cng c th to cc s kin server control trong file .aspx
1. <asp:Button Id = btnAccept" runat = "server" OnClick =btnAccept_Click"></asp:Button> 2. Vit s kin trong trang Aspx

<script language="vb" runat="server"> Sub btnAccept_Click(sender as Object, e as EventArgs) Code comes here End Sub </script>
41

Cc thuc tnh, phng thc, s kin hay s dng trong WebControl

Property/Method/Event M t

AccessKey property
BackColor property BorderColor property BorderStyle property

Get hoc Set shortcut truy cp ti control Get hoc Set mu nn

Get hoc Set Border mu border Get hoc Set Border style Tr v mt i tng ca lp ControlCollection Gn data t ngun d 42 liu ti server control

Controls property
DataBind method

Cc thuc tnh, phng thc, s kin hay s dng trong webcontrols

Property/Method/Event M t
DataBinding event
Enabled property

Pht sinh khi control chun b tng tc vi DataSource

Chp nhn gt Bool ch nh khi no control c enabled Chp nhn gt Bool ch nh control c duy tr trng thi khi hin th

EnableViewState property

Font property
ForeColor property Height property

Get hoc Set Font

Get hoc Set mu ch Get hoc Set chiu cao control
43

Cc thuc tnh, phng thc, s kin hay s dng trong webcontrols

Property/Method/Event M t

ID property TabIndex property ToolTip property Visible property

Get hoc Set nhn bit control Get hoc Set TabIndex Get hoc Set ToolTip Ch nh control hin th hoc khng hin th trn UI Get hoc Set rng
44

Width property

Cc control validation
D liu ngi s dng phi c validation trc khi insert vo CSDL ASP.Net, vic validate dng cc control validation -> bn khng cn phi vit code validation.
V d: bn mun validation d liu nhp vo text box bn c th add control validation v kt hp vi control bn cn validate.

45

Cc control validate g?
ASP.Net cung cp 6 control validate, tt c u k tha t lp c s BaseValidator

RequiredFieldValidator: kim tra control l rng hay khng. CompareValidator: so snh gi tr cc control c khp nhau hay khng. RangeValidator: kim tra gi tr control l trong khong text hay khong ca s. RegularExpressionValidator: kim tra gi tr control khp biu thc biu thc chnh qui. CustomValidator: thi hnh validate do ngi dng t nh ngha. ValidationSummary: hin th tt c cc li trong nhm
46

Cc control validation

47

Cch lm validation: 4 bc
Add control validation. Kt hp n vi control cn validation. t thuc tnh ControlToValidate l control ny. Gn cc control validations v cc control cn valiadate. Cc control validation gn vo control cn validation tng ng gi tr nhp vo control ny. Cc control validation hp l khi cc gi tr tha mn yu cu control. Khi kt thc validation, gi tr tr v qua thuc tnh IsValid bng True hoc False. Sau khi validation thnh cng, trang gi d liu ln server.
48

Cch dng Validate control

Tham kho v d dng validate control Cch dng cc control validation s kim tra ti server. Mt cch khc bn c th validation ti client bng vic dng script. Validation ti client s gim thi gian quay vng v ci thin hiu nng. Cc li s hin th ngay khi ngi s d liu khng hp l.
49

Thit k DemoWeb
Control Button Label Text box Text Accept Message Confirm Password ID btnAccept lblMessage txtConfirm

Text box
Text box Text box Text box Text box

Customer ID
Number Of CDs Password Telephone Number Username

txtCusID
txtNumCDs txtPassword txtTelNumber txtUserName
50

RequiredFieldValidator
Dng kim tra gi tr ca control c hp l hay khng. Bng thuc tnh
Property ID ControlToValidate ErrMessage Display Value rfvUserName txtUserName Nhp vo Username Dynamic

51

Code
Private Sub btnAcept_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAcept.Click If Page.IsValid = True Then
'Specify a message to be displayed on the label lblMessage.Text = "Welcome " + txtUserName.Text 'Make the label visible lblMessage.Visible = True

End If End Sub

52

CompareValidator
Dng so snh gi tr nhp bi control ny vi mt control khc hoc mt gi tr c sn. Cc ton t: Equal, NotEqual,
GreaterThan v LessThan cho php so snh cc kiu: String, Integer, Double,
Date v Currency

53

Bng thuc tnh CompareValidator

Thuc tnh ControlToValidate M t

ControlToCompare Display
ErrorMessage Operator Type ValueToCompare
54

Code HTML
<asp:CompareValidator id="cpvPassword" style="Z-INDEX: 116; LEFT: 392px; POSITION: absolute; TOP: 64px" runat="server" ErrorMessage="Please retype the password" ControlToValidate="txtConfirm" Display="Dynamic" ControlToCompare="txtPassword">

</asp:CompareValidator>

55

RangeValidator
Dng kim tra gi tr nm trong mt khong xc nh. Bn c th thit lp gi tr max v min cho cho control. Cng c th gi tr hng t cc control khc. Cc thuc tnh thng dng ControlToValidate, ErrorMessage v Display. Cc thuc tnh khc: MaximumValue, MinimumValue, Type
56

RegularExpressionValidator
Dng validate gi tr nhp vo control tun theo mt chun no v d nh s in thoi, a ch email, Zip codes Cc thuc tnh thng s dng: ControlToValidate, ErrorMessage, Display, ValidationExpression. Thuc tnh ValidationExpression c dng nhp vo mu nh dng biu thc cn kim tra xem c ng nh dng khng.

57

V d RegularExpressionValidator
Thuc tnh: ValidationExpression = [0-9]{3}-[0-9]{3}\s[0-9]{4}
[0-9] nhn tt c cc s 0-9 {3} yu cu 3 s c nhp cho phn u tin - l du bt nhp \s ch nh mt khong trng

58

CustomValidator
Cho php bn validate mt control theo kiu ngi dng t nh ngha. y l mt control cho php bn validation pha client hoc server. Thuc tnh ClientValidationFunction dng thit lp hm/th thc script. Pha Server, control cung cp s kin ServerValidate, bn phi vit code y.
59

ValidationSummary
Dng control ny hin th tt c cc li trn trang. Bn c th hin th li trong 1 list, dng ch mc hoc nh dng mt on vn. Cung cp ty chn hin th cc li trong mt dng hoc dng pop-up.

60

Cc thuc tnh CustomerValidator

Thuc tnh DisplayMode HeaderText ShowSummary

M t
List, BulletList, SingleParagraph Text hin th title validation Ch nh khi validation hin th dng dng. Mc nh l True. Ch nh validation hin th dng Pop61 up. Mc nh l False.

ShowSummaryBox

Dng nhiu control validation

Bn c th kt hp nhiu control validation cho nhiu iu kin. V d: Bn cn dng control validation kim tra di ca Password xem ngi dng c nhp ng di hay khng, v bn cng mun kim tra Password va ch li va c s th bn c th kt hp c hai control validation: RangeValidator, RegularExpressionValidator

62

Tng kt
Chng ny bao gm c s ASP.Net v cc yu cu platform cho ng dng ASP.Net. Gii thiu chi tit v kin trc ASP.Net v gii thiu cc ng dng Web. Cc kiu server control v validation control m bn c th s dng trn trang ASP.Net cung cp cu trc framework cho bn hon thnh cc ng dng Web
63

Do you have any question?

64