Qellimi i
shembullit te pare eshte krijimi i nje komponenti klient ne AJAX. Ky component
nuk ka nje User Interface, ai do te perdoret per t’i shtuar
funksionalitetet faqeve qe e
perdorin. Konkretisht krijohet nje web
site ne ASP.NET dhe shtohet nje komponent klient ne nje file JavaScript. Ky
komponent percakton nje metode per vleresimin e fortesise se passwordit.
1. Hap Visual
Studio dhe krijo nje ASP.NET Web site te quajtur AjaxEnabled .
2. Shto nje
JavaScript file ne kete site. Kliko me te djathten tek Web site dhe zgjidh Add
New Item. Ne ate Add New Item dialog boxin qe do te shfaqet, zgjidh JScript File.
Emertojeni file-in PasswordStrengthComponent.js.
3. Hapni JavaScript
file-in qe krijuat. Ne krye te faqes shtoni kodin: Type.registerNamespace("AjaxEnabled");
4. Me pas
percaktoni nje konstruktor per klasen ne JavaScript si funksion. Si me poshte:
5. Hapi tjeter duhet
per te percaktuar pjeset e tjera te
klases. Krijojme nje prototip dhe ne kete prototip deklarojme nje funksion te
quajtur returnPasswordStrength qe merr si parameter kete password, kontrollon
vleren e tij dhe kthen vleren e fortesise se passwordit. Me poshte kodi:
6. Ne klase
shtojme nje kod per ta regjistruar ate me ane te Microsoft AJAX Library duke thirrur registerClass method te atij komponenti.
Kjo klase duhet te trashegoje Sys.Component class nga librarite. Kodi i meposhtem
tregon nje shembull se si lajmerohet me notification aplikacioni se skripti
eshte loaduar plotesisht:
if
(typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
7. Hapim
Default.aspx ne source view
8. Shtoni nje
ScriptManager control nga Toolbox ne faqe. Ne kete ScriptManager control, shtoni
nje reference drejt PasswordStrengthComponent.js
file te krijuar me siper. Gjithashtu atributin EnableCdn="true", per
te mundesuar ekzekutimin e kodit. Me poshte kodi:
10. Hapi pasardhes
sherben per te percaktuar JavaScriptin
ne faqe meqe do punoje me komponentin e ndodhur ne anen e klientit. Do te
krijojme nje event qe ekzekutohet kur perdoruesi te beje nje veprim key press
ne textboxin e Password-it. Sa here qe behet nje key press nga ana e
perdoruesit duhet te perdoret metoda per te kontrolluar inputin e vendosur. Rezultatin
e shfaqim ne nje label te deklaruar me siper , pikerisht LabelStrength.Kodi i meposhtem vendoset pas
ScriptManager:
KUJDES!!! Nese jeni duke perdorur
masterpage dhe te dhenat i keni ne nje content atehere Id ajne ndryshe,
perfshijne dhe id e content-it, konkretisht: MainContent_TextBoxPassword dhe MainContent_LabelStrength
.
11.Hapi i fundit eshte per t’u siguruar se ky event qe krijuam
duhet te ekzistoje I lidhur me textboxin e Password-it. Kete e realizojme duke
shtuar tek TextBoxPassword atributin onkeyup=”_OnKeypress()”.
12. Figura me poshte shfaq
rezultatin.
Shembull
2 ( Krijimi i AJAX Control )
Qellimi i
shembullit te dyte eshte krijimi i nje controli klient ne AJAX dhe shtimi i tij ne faqe.
1. Hap Visual
Studio dhe krijo nje ASP.NET Web site te quajtur AjaxEnabled.
2. Shto nje
JavaScript file ne kete site. Kliko me te djathten tek Web site dhe zgjidh Add
New Item. Ne ate Add New Item dialog boxin qe do te shfaqet, zgjidh JScript
File. Emertojeni file-in PassTextBox.js.
3. Hapni
JavaScript file-in qe krijuat me siper dhen e krye te faqes se file-it shtoni
kodin: Type.registerNamespace("AjaxEnabled");
4. Me pas percaktojme konstruktorin e kesaj
klase JavaScript si nje funksion. Ne kete rast konstruktori merr nje parameter element.
Kjo per arsye se duhet te perfaqesohet elementi i DOM te cilin do beje extend
control-i qe ne po krijojme. Perdoret ky element per te startuar klasen baze te
System.UI.Control.
Ky control do te
percaktoje stilin e nje text box duke u bazuar ne fortesine e password-it.
Per kete arsye ka
tre properties, nje per cdo opsion te mundshem te fortesise. Shembulli si vijon:
5. Hapi tjeter
duhet per te percaktuar pjeset e tjera
te klases. Krijojme nje prototip dhe ky protoptip do te permbaje dy metoda initialize
dhe dispose. Gjithashtu edhe nje event te quajtur
onKeyup qe lidhet me eventin keyup te objektit te TextBox-it. Se fundmi kodi
perfshin nje sere properties per menaxhimin e marrjes dhe vendosjes se klasave
stilistike te password.
6. Se fundmi
shtoni kodin ne klase duke shtuar nje library me ane te thirrjes se metodes registerClass
te componentit. Klasa duhet te trashegoje Sys.UI.Control class nga librarite. Kodi
I meposhtem tregon dhe shenim kur kemi nje loadim te plote:
if
(typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
7. Save kete file. Hapim
Default.aspx ne source view
8. Shtoni nje
ScriptManager control nga Toolbox ne faqe. Ne kete ScriptManager control, shtoni
nje reference drejt PassTextBox.js
file te krijuar me siper. Gjithashtu atributin EnableCdn="true", per
te mundesuar ekzekutimin e kodit. Me poshte kodi:
Step (6) : Running the web
service application gives a web service test page, which allows testing the
service methods.
Step (7) : Click on a method
name, and check whether it runs properly.
For the WEB REFERENCE:
Step (1): Right click on the web
application entry in the Solution Explorer and click on 'Add Web Reference'.
Step (2): Select 'Web Services in
this solution'. It returns the WEBSERVICES reference.
Step (3): Clicking on the service
opens the test web page. By default the proxy created is called ‘localhost’, you can rename it. Click on 'Add Reference' to
add the proxy to the client application.